The video and sound assignment stumped me for a while. Things like making a juke box or another game that just brought in video and sound elements were really not leaning into the medium. I also spent the entire week on my Virtual Reality film and did not have the time to code yet another game so I settled on learning a tiny bit of new code for an otherwise simple assignment. My film strip tease… Or whatever it is you choose to do on camera in the privacy of your work space.
My first inspiration was a Photo Booth, but then I thought, why not make it a film strip. The further we move from shooting film, the more it becomes a novelty. BUT the coding problems came more from the time delay on the photo aspect of it than it did from the creation of the film strip.
There is no delay function in Java Script like there is when coding for the Arduino. Using a for loop, I could create the four different images, but it would all be the same picture. I needed the camera to wait for a certain period before snapping another shot. Thanks to the always helpful insight of Dan Shiffman, I learned there is a function in Java Script known as setTimeout that takes two parameters, the function you are adding the delay to and the length of the delay in seconds. Once I implemented this, I was good to go!
Here’s the code:
var capture;
var button;
var square;
function setup() {
createCanvas(300, 400);
capture = createCapture(VIDEO);
capture.hide();
button = createButton(‘roll’);
button.position(220, 20);
button.mousePressed(snap);
}
var y = 0;
function snap() {
//setTimeout(snapshot, 1000);
for(var i = 0; i < 4; i++){
setTimeout(snapshot, i*1000);
}
}
function snapshot() {
image(capture, 10, y, 100, 100, 0, 0, 100, 100);
y += 100;
stroke(0);
noFill();
rect(10, 0, 100, 100);
rect(10, 100, 100, 100);
rect(10, 200, 100, 100);
rect(10, 299, 100, 100);
fill(0);
rect(0, 0, 10, 400);
rect(110, 0, 10, 400);
for(var y2 = 4; y2 < height; y2 += 10) {
fill(255);
rect(2, y2, 6, 6);
}
for(var y3 = 4; y3 < height; y3 += 10) {
fill(255);
rect(112, y3, 6, 6);
}
}
Roll camera yourself!