CS7026: Authoring for Digital Media

1. CS7026: Authoring for Digital Media HTML5: Canvas and Processing (an aside)

2. Modes • The processing programs we wrote before are known as static programs. • The drawing code runs once, producing a single static (unchanging) image. • We can delay the running of the program a bit (e.g. by inserting prompt statements) but fundamentally the program is producing a single image CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

3. Modes • There is another mode, called continuous mode. • When we write a processing program in this mode we are producing an animation, a series of frames drawn one after the other. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

4. Continuous Mode • In continuous mode a processing program contains two special functions called: • setup • draw • The names are built in to processing, and the processing system calls each function as needed (so we never need to call the functions in our own code). CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

5. Continuous Mode • setup is called once, when the program starts up. • drawis called every time a new frame of the animation needs to be drawn (by default that is 60 times every second, but we can change it). CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

6. setup • The Setup function is the ideal place to put all the code that we want to run once, when the program is beginning: void setup(){ size( 200, 200 ); background( 0 ); } • Note that setup is a function, so it is not the appropriate place to create any variables we want to use (they would be local!). It’s really just a place to put the initial processing statements that set up the drawing environment. • Aside: Processing uses ’void’ to introduce a function that does not return anything. It’s not a JavaScript statement, the processing.js library fixes it up. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

7. draw • The draw function is called once for each frame. • Processing calls it automatically at the right times. If we want a moving image then we have to make sure that every time it is called it draws something a little different. • The easiest way to do that is to both use and modify a global variable every time it is called. var y = 0; void draw(){ line( 10, y, 20, y+3 ); y = y + 2; } CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

8. Clearing Frames • Each frame is drawn on top of the previous one, so if we just draw a series of lines (as in the previous example) they will all appear. • To give the impression of objects moving we should clear the previous frame before we draw the next one. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

9. Clearing Frames • The easiest way to do this is to use the background function in draw instead of in setup. void draw(){ background( 255 ); line( 10, y, 20, y+3 ); y = y + 2; } • If you actually run this, you will just see a white window. Why? Because the line pretty quickly marches off the bottom of the window (below pixel 200) and is lost to view. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

10. An improved draw function that will reflect the line when it reaches the bottom of the window: var step = 2; vary = 0; void draw(){ background( 255 ); line( 10, y, 20, y+3 ); y = y + step; if ( y > height ){ step = -2; } if ( y < 0 ){ step = 2; } } • (height is a variable that processing automatically sets to the height of the canvas) CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

11. Setting the Frame Rate • By default Processing will call the draw function 60 times every second. • We can adjust that rate using the frameRate function: void setup(){ size( 200, 200 ); frameRate( 24 ); } • Processing will attempt to achieve the frame rate we have asked for (24 frames per second in the example above). If the computer we are running on is too slow to run draw that many times per second then it will just draw as many frames as it can. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

12. Where is the mouse? • There are two special variables called mouseX and mouseY that are updated by processing before each frame is drawn. • They contain the location of the mouse pointer. So we can create an animation of a circle that follows the mouse pointer about: void draw(){ background( 255 ); ellipse( mouseX, mouseY, 30, 30 ); } CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

13. Mouse buttons • If we want to know whether the mouse button is up or down Processing offers two solutions: • The easiest is for us to check the value of the booleanmousePressed variable. It will be true if the mouse button is down when this frame is being drawn, and false if the mouse button is up. • An alternative is for us to write a function called mousePressed(yes, the same name). This function will be called automatically when the mouse button goes down (just before draw is called). We can execute any JavaScript or Processing statements we want in this function. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

14. Here a circle moves towards the mouse pointer, but only while the mouse button is down. varx = 100; vary = 100; varspeed = 2; void draw(){ background(255); if(mousePressed){ if( x > mouseX ){ x = x - speed; } if( x < mouseX ){ x = x + speed; } if( y > mouseY){ y = y - speed; } if( y < mouseY){ y = y + speed; } } // mousePressed ellipse( x, y, 20, 20); } CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)

15. Lab • Work through the examples in these lecture notes. • Try to create a piece that you can drag around your chessboard. CS7026 Authoring for Digital Media, 2014 (with thanks to Glenn Strong)