08 – Canvas(2) Informatics Department Parahyangan Catholic University

 Previously, we’ve learned how to change drawing style (eg. fillStyle, strokeStyle)  A canvas’ drawing state is its condition at a point of time. This includes various of canvas’ properties (color, alpha, transformation, etc.)

 We can store a canvas’ drawing state and restore it later  Example: context.fillStyle = “red"; context.fillRect(50, 50, 100, 100); // Red square context.save(); // Save the canvas state context.fillStyle = “blue"; context.fillRect(200, 50, 100, 100); // Blue square context.restore(); // Restore the canvas state context.fillRect(350, 50, 100, 100); // Red square

 We can save multiple states  They are stored in a stack  Meaning that the last saved state will be restored first (LIFO)  This is useful when we need to change the canvas’ styles inside a function. We want to restore the previous styles before exiting the function (example later)

 Animating in canvas is really no different from animating in general  animation is just a bunch of images, each slightly different, that are displayed in succession at incredible speed  The trick is to show enough images per second to trick the human eye into thinking that what it sees is a moving object

 Example: Source: Source:

 In HTML, we only have one canvas  Animation done by repeating these 3 steps rapidly:  Draw  Clear  Update

 Example: var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); var canvasWidth = canvas.width(); var canvasHeight = canvas.height(); function animate() { setTimeout(animate, 33); }; animate();//first call to animate() function why 33 ?

 Suppose we don’t want the animation to run forever, we can use one boolean variable to indicate when the animation should run. This variable can be toggled with simple Java Script dan HTML buttons  Example: var playAnimation = true; … if (playAnimation) { setTimeout(animate, 33); };

 Moving a rectangle var x = 0; function animate() { x++; context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillRect(x, 250, 10, 10); setTimeout(animate, 33); }; UPDATE CLEAR DRAW

 The wrong way: var firstX = 0; var secondX = 50; var thirdX = 100; function animate() { firstX++; secondX++; thirdX++; context.clearRect(0, 0, canvasWidth, canvasHeight); context.fillRect(firstX, 50, 10, 10); context.fillRect(secondX, 100, 10, 10); context.fillRect(thirdX, 150, 10, 10); setTimeout(animate, 33); };

 The right way: use object template (class) var Shape = function(x, y) { this.x = x; this.y = y; }; var shapes = new Array(); shapes.push(new Shape(50, 50)); shapes.push(new Shape(100, 100)); shapes.push(new Shape(150, 150));

 The right way: use object template (class) function animate() { context.clearRect(0, 0, canvasWidth, canvasHeight); for (var i = 0; i < shapes.length; i++) { shapes[i].x++; context.fillRect(shapes[i].x, shapes[i].y, 10, 10); } setTimeout(animate, 33); };

 Integrating update and draw method to the class var Rectangle = function(x, y) { this.x = x; this.y = y; this.draw = function(contex){ context.fillRect(this.x, this.y, 10, 10); } this.update = function(){ this.x++; }

 We can do “polymorphism” in JS function Rectangle(x,y,width,height, color){ this.x = x; this.y = y; this.width = width; this.height = height; this.color = color; this.draw = function(context){ context.save(); context.fillStyle = color; context.fillRect(x, y, width, height); context.restore(); } this.move = function(){ x++; }

 We can do “polymorphism” in JS function Circle(x,y,radius, color){ this.x = x; this.y = y; this.radius = radius; this.color = color; this.draw = function(context){ context.save(); context.fillStyle = color; context.beginPath(); context.arc(x, y, radius, 0, Math.PI*2, false); context.closePath(); context.fill(); context.restore(); } this.move = function(){ x++;y++; } }

 We can do “polymorphism” in JS var shapes = Array(); shapes.push(new Rectangle(10,10,10,10,"red")); shapes.push(new Rectangle(10, 30, 10, 10, "blue")) shapes.push(new Circle(10, 50, 15, "green")); function animate(){ context.clearRect(0, 0, canvasWidth, canvasHeight); for(var i=0; i<shapes.length; i++){ shapes[i].draw(context); shapes[i].move(); } setTimeout(animate, 33); }

Thus:  sin(  ) = y / dist y = sin(  ) * dist  cos(  ) = x / dist x = cos(  ) * dist x y  dist Recall: In Java Script, use Math.sin(radian) and Math.cos(radian). Don’t forget to use radian angle

 Example function Circle(color){ this.x = Math.random() * canvasWidth; this.y = Math.random() * canvasHeight; this.radius = 10 + Math.random() * 30; this.color = color; this.angle = Math.random()*(2*Math.PI); this.speed = 5+Math.random()*5;... this.move = function(){ this.x += Math.cos(this.angle)*this.speed; this.y += Math.sin(this.angle)*this.speed; } these values are constant, thus can be precomputed

 When a shape reaches the edge of the canvas, we might want it to bounce, instead of disappearing

 Add two variable as an x direction modifier and y direction modifier x y  dist -x -y

 Add two variable as an x direction modifier and y direction modifier Example1 in HTML page… //0..90 degree (x positive, y positive) this.angle = Math.random()*(0.5*Math.PI); this.dirX = Math.random()<0.5?1:-1;//randomize x direction this.dirY = Math.random()<0.5?1:-1;//randomize y direction this.deltaX = Math.cos(this.angle)*this.speed; this.deltaY = Math.sin(this.angle)*this.speed; this.move = function(){ this.x += this.deltaX * this.dirX; this.y += this.deltaY * this.dirY; if(this.x canvasWidth)this.dirX *= -1; if(this.y canvasHeight)this.dirY *= -1; }

 In previous code, we detect whether the circle’s center coordinate has passed the boundary radius We want to bounce when the circle hits the boundary

 Includes the circle’s radius in the calculation this.move = function(){ this.x += this.deltaX * this.dirX; this.y += this.deltaY * this.dirY; if(this.x - this.radius < 0) this.dirX = 1; if(this.x + this.radius > canvasWidth) this.dirX = -1; if(this.y - this.radius < 0) this.dirY = 1; if(this.y + this.radius > canvasHeight) this.dirY = -1; } Example2 in HTML page…

 Suppose we want to change the speed of the animation when the user click on the canvas  Add a modifier variable that ranged 0..4  Add an onclick event  Move formula is now booster = 0; canvas.get(0).onclick = function(){ booster = (booster+1)%5; }; this.x += this.deltaX*this.dirX * (1+booster); this.y += this.deltaY*this.dirY * (1+booster);

 addEventListener works similarly, but you can attach more than one function to a single event  Example: canvas.get(0).addEventListener("click", function(){ booster = (booster+1)%5; }); canvas.get(0).addEventListener("click", function(){ console.log(booster); }); Example3 in HTML page…

 A canvas, by default, cannot be focused, so it cannot receive a keydown event  One way around is to attach the keydown event to the browser’s window  Example window.addEventListener("keydown", function(e){ if(e.keyCode == 38)// up key booster += 0.2; else if(e.keyCode == 40)//down key booster -= 0.2; if(booster < 0)booster = 0; }); variable containing the event’s properties, such as what object is trigered the event, what key is pressed, etc. Example4 in HTML page…

 We can draw an image using the drawImage() method  However, drawing an unloaded image will throw a DOM error, so we have to check whether the image is ready to be drawn  Example: // Background image var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "wood.png";

 On animate() function: function animate(){ context.clearRect(0, 0, canvasWidth, canvasHeight); if(bgReady) context.drawImage(bgImage, 0, 0); for(var i=0; i<shapes.length; i++){ shapes[i].draw(context); shapes[i].move(); } setTimeout(animate, 33); } Example5 in HTML page…

 Shapes & Images are drawn on a canvas in layer-by- layer manner. The first image drawn is the bottom most layer, and so on.  Thus this is a wrong order: for(var i=0; i<shapes.length; i++){ shapes[i].draw(context); shapes[i].move(); } if(bgReady) context.drawImage(bgImage, 0, 0);

 Game animation is slightly more complicated, because it reacts to user’s input, instead of just a matter of fps.  Since game design is out of this course’s scope, those whose interested can search for tutorials on the web

 One good introductory tutorial by Matt Hackett html5-canvas-game/ html5-canvas-game/