The photobooth: An interactive film using p5.dom.

In class on Thursday, we were introduced to the powerful dom library in p5. According to the p5 reference article about p5.dom, the library allows you to interact with HTML5 objects, including video, audio, text, and your webcam.

I was immediately interested in trying a first pass at making an interactive film in which the user could click a button to jump to another film. I knew that I wanted to make some kind of super cut using p5.dom.

Here’s an unfinished, unpolished version of my sketch. I’m still working on it.

I was inspired by the Bob Dylan music video for “Like a Rolling Stone” in which users could “channel surf” as different individuals sing the lyrics to his song. I also was thinking a lot about video artist Christian Marclay’s art installation The Clock, a 24-hour montage of hundreds of film clips that make real-time references to the time of day. The video clips are all tied by one thing: The presence of a clock and/or time. The result is an eerie, fragmentary portrait of what one day looks like in the movies.

clock2_2353636b

I also wanted to access the webcam in some way. I’m taking my cues from Paul Ford’s insanely well-written and lengthly Bloomberg piece “What is Code,” which accesses your webcam and automatically prints a PDF certificate of completion with your picture when you have completed the 38,000-word article.

With that in mind, I wanted to combine both ideas and build a photobooth. You can switch between disparate clips of characters using a traditional photo booth in different movies by clicking the button “span time.” You can press “play” or “pause” to stop the film:

movieButton = createButton(‘play’);
movieButton.position(700, 500);
movieButton.mousePressed(toggleVid);

 

 

 

Learning to animate in p5.

Screen Shot 2015-09-17 at 1.22.58 AM

Last week we drew static drawings from primitive shapes. This week we were assigned the task of animating our sketches in p5 using a set of new functions, including frameRate(), rotate(), and transform(), or new variables like mouseX and mouseY.

To complete the assignment, our sketch needed to contain: (1) One element that changed over time independent of the mouse; (2) One element controlled by the mouse; and (3) One element that’s different every time you run the sketch.

I’ve been a cyclist for a few years now. In Salt Lake City, where I lived for the past two years, I loved biking up into the canyon in the late afternoon before sunset. That experience was the inspiration behind my sketch this week, in which a bike rides into the mountains.

See my final sketch here.

Here was my initial sketch:

IMG_2029
I started planning out the sketch in Adobe Illustrator to get a better sense of the composition of the drawing.

mountain

My plan was to make the sun and its rays rotate in a circle independent of the mouse. That actually proved a lot more difficult than I’d anticipated. The action required me to use a new set of functions, including push(), transform(), rotate(), and pop(). Here are the lines of code I wrote that drew the sun:

push();
translate(350,100);
rotate (rads);

for (var d = 0; d < 10; d ++){
noStroke();
fill(206+d,188+d,122+d);
ellipse(0,0,175,175);

stroke(206+d,188+d,122+d);
strokeWeight(3);

for (var i = 0; i < 36; i ++) {
line(0,0,x,y);
rotate(PI/20);
}
pop ();

rads = rads + 1.57;

I started layering on primitive shapes for the mountains and bicycle using the beginShape() function I we learned in class. I decided to make the bicycle a different color every time you load the page by calling out var r, var g, and var b and then defining them in the setup:

r = 230;
g = random(100,200);
b = random(100,200);

Then the most difficult task lay ahead: Getting the bicycle to move at a variable speed controlled by the mouse. I tried a lot of different things, including making an object out of the bicycle using some new tricks we learned in Javascript, but ultimately this is the code that really worked out:

var speedX = 1;

var speedY = 1;

//bicycle

stroke(r,g,b,255);
strokeWeight(5);
noFill();

ellipse(225+speedX,520-speedY,100,100);
ellipse(400+speedX,490-speedY,100,100); 
ellipse(225+speedX,520-speedY,10,10); 
ellipse(400+speedX,490-speedY,10,10); 
quad(225+speedX,520-speedY,305+speedX,505-speedY,350+speedX,435-speedY,265+speedX,450-speedY); 
line(260+speedX,445-speedY,305+speedX,505-speedY); 
line(400+speedX,490-speedY,352+speedX,435-speedY); 
ellipse(305+speedX,505-speedY,30,30);
quad(250+speedX,450-speedY,245+speedX,440-speedY,275+speedX,440-speedY,275+speedX,445-speedY);

speedX+=map(mouseX,0,width,1,5); 
speedY+=0.15;

What’s happening above is that I’ve created two new variables, speedX and speedY, that will determine the velocity of the bike in relation to my mouse. The last two lines of code establish the range of values that the speed can be. When mouseX is high (i.e. it’s on the far right of the sketch), the bike moves more quickly.

Here’s a video of the animation.

Full code below.

var fr = 30;
var x = 1200;
var y = 0;
var rads = 0; // declare variable rads, angle at which sun will rotate
var speedX = 1; //declare variable speedX
var speedY = 1; //declare variable speedY
var r;
var g;
var b;
function setup() {
createCanvas(1100,600);
background(252,240,232);
r = 230;
g = random(100,200);
b = random(100,200);

}

function draw() {

//draw sun and rays and make them rotate.
push();
translate(350,100);
rotate (rads);

for (var d = 0; d < 10; d ++){
noStroke();
fill(206+d,188+d,122+d);
ellipse(0,0,175,175);

stroke(206+d,188+d,122+d);
strokeWeight(3);

for (var i = 0; i < 36; i ++) {
line(0,0,x,y);
rotate(PI/20);

}
}
pop ();

rads = rads + 1.57;

//mountains

//mountains layer three
stroke(136,167,173);
fill(136,167,173);
beginShape();
vertex(0,600);
vertex(0,400);
vertex(200,300);
vertex(300,350);
vertex(400,250);
vertex(500,325);
vertex(600,100);
vertex(750,200);
vertex(875,60);
vertex(1000,150);
vertex(1100,100);
vertex(1100,600);
endShape();

//mountains layer two
stroke(92,109,120,100);
fill(92,109,120,100);
beginShape();
vertex(0,600);
vertex(0,400);
vertex(275,375);
vertex(350,400);
vertex(425,375);
vertex(575,375);
vertex(800,200);
vertex(900,300);
vertex(1100,250);
vertex(1100,600);
endShape();

//mountains layer three
stroke(92,109,112,200);
fill(92,109,112,200);
beginShape();
vertex(0,600);
vertex(0,550);
vertex(500,400);
vertex(575,425);
vertex(600,400);
vertex(800,400);
vertex(875,300);
vertex(925,375);
vertex(1100,300);
vertex(1100,600);
endShape();

//mountains layer four
stroke(213,207,225,25);
fill(213,207,225,25);
triangle(0,600,1100,425,1100,600);

//bicycle

stroke(r,g,b,255);
strokeWeight(5);
noFill();

ellipse(225+speedX,520-speedY,100,100); //bike wheel
ellipse(400+speedX,490-speedY,100,100); //bike wheel
ellipse(225+speedX,520-speedY,10,10); //inner bike wheel
ellipse(400+speedX,490-speedY,10,10); //inner bike wheel
quad(225+speedX,520-speedY,305+speedX,505-speedY,350+speedX,435-speedY,265+speedX,450-speedY); //frame
line(260+speedX,445-speedY,305+speedX,505-speedY); //frame
line(400+speedX,490-speedY,352+speedX,435-speedY); //frame
ellipse(305+speedX,505-speedY,30,30); //frame
quad(250+speedX,450-speedY,245+speedX,440-speedY,275+speedX,440-speedY,275+speedX,445-speedY);

speedX+=map(mouseX,0,width,1,5); //x coordinate of the mouse determine speed of the bike
speedY+=0.15;
}