IRL Chicago
Web Editor



We’re going to abandon the javascript library we’ve been using and linking to in our previous sketches and generate our own canvas element from scratch. Create a new html page ( with the basic template ) and then create a pair of script tags <script> </script> and place the following between them

basic animation template

step 1: start by declaring two empty variables ( ctx and canvas ) and create two empty functions ( setup and draw ). the setup function, as the name implies, will include code that runs once when our page loads to “setup” our canvas, whereas the draw function will keep running ( looping ) to create the illusion of motion ( ie. animation )

step 2: add the following lines inside the setup function. line4 sets the variable canvas to be a new <canvas> element for the html document, line5 and line6 set the width and height of our canvas element to match that of our window ( you can change this if u want a specific size ), and line7 takes that canvas element we’ve just made and adds ( or appends ) it to our <body>. the last line8 assigns the canvas’ 2d context to the ctx variable, so that now we can draw to our canvas by referencing the ctx object.

step 3: add a couple more variables ( x and y ) below our ctx, canvas and set them both to 0. then inside of our draw function lets create a square using the ctx.fillRect() method using our x and y variables as our x,y position parameters for our square and hard code the width and height parameters to 10.

step 4: you still won’t see anything in your browser because though we’ve created a setup and draw function we haven’t actually done anything with them, we need to execute these functions. at the bottom of your code write setup(); to run the setup function once. then in order to infinitely loop the draw function ( so that it runs like a flip book one frame at a time ) we can use javascript’s setInterval() function which takes two parameters, first the name of the function you want to loop ( in our case draw ) and how often you want to loop it ( ie. the frame rate ), we’ll do 60 times a second, considering that one second is 1000ms we’ll set this parameter to 1000/60

Next we’ll be animating our square so that it bounces around the screen forever. We’ll be using Conditional Statements or “if, then” statements which is how we can program decisions into an algorithm. We’ll be incrementing our x and y variables by some number in each frame and use conditionals to determine if our square is going past one of the edges of our screen, and “if” so, change the direction of the increment

step 5: lets create two new variables dx and dy to be the number we want to increment our position by in each frame. we’ll start by setting both of these to 1, but we can make this a bigger number if we want to speed up our square, or vice-versa. then in our draw function ( above our ctx.fillRect ) we’ll add x += dx; which increments our x value by dx each frame ( so that it moves over by 1 each frame in the animation ) and likewise add y += dy; below that to do the same for y.

step 6: you’ll notice that as the square moves across the screen it leaves a streak behind it, this is because each frame simply draws over the last one. if we want to erase whatever was on the screen in the last frame before drawing the new frame add ctx.clearRect(0,0,canvas.width,canvas.height); to the top of your draw function so that the entire canvas clears before drawing the next frame.

step 7: you’ll notice that when the square reaches the bottom of the screen it’s gone ( doesn’t bounce back ), in order to get it to bounce we need to create a conditional statement. conditionals start with the special word “if” followed by a pair of parentheses, within which is a “condition” or a question, and then a pair of curly brackets which contains the code that should run “if” the condition is met ( ie. if its true ), the syntax loox like this if ( condition ) { code }. to our code on the right we’ve added the following condition: if the current y value ( ie. y position of the cube ) is greater than the total height of our canvas, then reverse the incrementing value ( ie. our dy ) so that our cube now goes up instead of down.

step 8: so now our cube bounces when it hits the bottom of the screen but when it reaches the top it flies off the screen again. to recreate the logic in the other direction we need to create a second conditional statement which reverses the direction of our y increment dy = -dy; if our y position goes below 0 ( ie. if it’s above the top of our screen )

step 9: lastly we’ll recreate the same logic for the x position along the x axis, and now we’ve got a square that increments its position by 1 each new frame, but “if” it reaches any of the four edges of the screen it reverses the direction of the incrementing value… which is the algorithm for creating a bouncing square


step 1: let’s change this a little bit to make it “interactive” using our mouse instead of bouncing. remove all the logic from the draw function ( leaving only the ctx.fillRect ) function.

step 2: now create two new variables, mousex and mousey and set them both to 0. then in the draw function set the ctx.fillRect x and y position parameters to these two new variables.

step 3: lastly we’ll dynamically change the value of these two new variables to match our document’s current mouse position every time the mouse moves. in order to do this we create an “event listener” a special function that listens for a particular “event” within our document ( there are lots of different events you can find a list here ) we’ll be using the “onmousemove” event which runs everytime we move the mouse. this event has a clientX and clientY property which is our mouse position, if we set our mousex and mousey variables equal to these values then our square’s position will always match that of our mouse.

now think of the different ways you can combine these, you could have shapes that are changing and animating based on some conditional logic while other elements of your sketch ( color? size? etc? ) are affected in some way by the position of your mouse. additionally you can create other event functions that change some aspect of your sketch.

digital labor: participatory art or crowd srouced

the long tail

making, sharing, working

leveraged by artist

Learning To Love You More
by Mirana July and Harrell Fletcher

the Sheep Market
by Aaron Koblin

the Virtual Choir by Eric Whitacre



read "The Work of Art in the Age of Mediated Participation: Crowdsourced Art and Collective Creativity" by Iona Literat

read In Search Of the Lost Paycheck by Andrew Ross