Kids

Can

JavaScript

<-----Back        Next --->

Animate



In JavaScript you can easily animate .

example1:

How to animate

Declare a global variable for the x-coordinate: x, to make it accessable by all functions on the page.

 <script> 


 var 
 x 
 = 
 100 
 ; 
 ............. 
 </script> 

A global variable is made inside the <script>-tag but outside the function.


 circle 
 ( 
 x 
 , 
 100 
 , 
 50 
 ) 
 ; 

In the draw() function replace the x-coordinate parameter by our new global x-variable .


 context 
 . 
 clearRect( 
 0 
 , 
 0 
 , 
 canvas.width 
 , 
 canvas.height 
 ) 
 ; 


 x 
 = 
 x + 10 
 ; 


 animate 
 = 
 setTimeout( 
 draw 
 , 
 20 
 ) 
 ; 

To create animation:
* Wipe the canvas before drawing on it: clearRect():
* Change the coordinates:x+10
* Redraw afer a time-interval with setTimeout(draw,20)
* Create a loop: setTimeout calls draw, draw calls setTimeout


 clearTimeout( 
 animate 
 ) 
 ; 

Stop the animation with: clearTimeout().

Move over the Canvas ......... .... "TryoutPanel1"
<script> var x=0; // global variable x, change start position here //................ add a global y variable for vertical movement var canvas2; var context2; ///////////////// CIRCLE FUNCTION ////////////////////// function circle(x,y,radius) { context2.beginPath(); context2.arc(x, y, radius,0, Math.PI*2, true); context2.fill(); context2.stroke(); } /////////////////// DRAW ////////////////////////////////////// function draw() { canvas = document.getElementById('canvas'); context2 = canvas.getContext('2d'); // wipe the canvas context2.clearRect(0,0,canvas.width,canvas.height); context2.strokeStyle = "red"; context2.fillStyle = "lightBlue"; circle(x, 100, 50); // circle(x,y,radius) x=x+3; // adds 10 :shift 10 to right //.......to move down you need to make a global y-variable(3) and shift it. // make sure to use it when you draw the circle(28) animate=setTimeout(draw,20); // calls draw() in 20 milisec } //////////////// STOP //////////////////////////////////////// function stop(){ clearTimeout(animate); // stops the setTimeout.(breaks loop) } //////////////// START ////////////////////// function start(){ x=0; // puts shape back in position x=0 draw(); // and starts the draw() function } setTimeout(start,200); </script> <canvas id="canvas" width="500" height="400" style="border:1px solid blue;"> </canvas> <button onclick="start()">start</button> <button onclick="stop()">stop</button> <ul><li>can you make the ball go <u>slower</u>,<u>faster</u>(31)</li> <li>move from <u>*right to left?</u>(31,2)</li> <li><b>Experts</b>: from up to down (33,28,3)</li></ul>





Moving MultiShapes

In this car-example, we see 2 rectangles that move together at the same speed.

Look below at the 2 rectangles of the car.

 rect 
 ( 
 x 
 , 
 20 
 , 
 60 
 , 
 30 
 ) 
 ; 


 rect 
 ( 
 x - 40 
 , 
 50 
 , 
 150 
 , 
 50 
 ) 
 ; 

To move all car-parts simultaneously we use the same variable : x in all parts.


Move a Multishape ......... .... "TryoutPanel2"
<script> /////////////////// RECTANGLE ///////////////////////// function rect(x,y,widthRect,heightRect) { context2.beginPath(); context2.rect(x,y,widthRect,heightRect); context2.fill(); context2.stroke(); } //////////////////// CIRCLE //////////////////////////////// function circle(x,y,radius) { context2.beginPath(); context2.arc(x, y, radius,0, Math.PI*2, true); context2.fill(); context2.stroke(); } ////////////////////////////////////////////////////////// var x=60; // global x-variable is set to 60. var canvas2; var context2; ///////////////////// DRAW ////////////////////////////// function draw() { canvas = document.getElementById('canvas'); context2 = canvas.getContext('2d'); // wipe the canvas context2.clearRect(0,0,canvas.width,canvas.height); context2.strokeStyle = "green"; context2.fillStyle = "green"; rect(x,20,60,30); // at the start x=60 rect(x-40,50,150,50); // note: all car parts use x, // so they move simultaniously. //.......... give the car some wheels that also use x: circle(x,y,radius) x=x+5; // move 5 to the right animate=setTimeout(draw,40); // calls draw() in 40 milisec } //////////////////////// STOP/////////////////////// function stop(){ clearTimeout(animate); // stops the setTimeout. } ////////////////////// START //////////////////////// function start(){ x=60; // global x-variable back to 60 draw(); } setTimeout(draw,100); </script> <p> The parts of the car move simultaneously; they all use the global x-variable</p> <canvas id="canvas" width="500" height="200" style="border:1px solid blue;"> </canvas> <button onclick="start()">start</button> <button onclick="stop()">stop</button> <ul><li>Can you give this cars some wheels?(42)</li></ul>





Changing Direction

This ball changes direction each time it reaches the edges of the canvas

example3:


 if ( 
  x < 0 
 || 
 x > canvas.width  
 ) 


 { 
 dx  
 = 
  dx * -1 
 ; 
 } 


 x 
 = 
 x + (dx * 10) 
 ; 

We use a global direction variable:dx to determine the direction of the movement.
dx is either +1 (going right) or -1 (going left),





Changing Direction......... .... "TryoutPanel3"
<script> ////////////////// CIRCLE ///////////////////////// function circle(x,y,radius) { //function creates circle context.beginPath(); context.arc(x, y, radius,0, Math.PI*2, true); context.fill(); context.stroke(); } ///////////////// GLOBAL VARIABLES //////////////// var canvas; var context; var animate; x=65; // global x y=65; // global y dx=1; // global x-direction dy=1; // global y-direction /////////////// DRAW ////////////////////////// function draw(){ canvas=document.getElementById('canvas'); context=canvas.getContext('2d'); context.clearRect(0,0,canvas.width,canvas.height); context.fillStyle='red'; context.strokeStyle='blue'; circle(x,y,50); if(x-50<=0 || x+50>= canvas.width){ dx= dx*-1;} //....write a similar if statement for the y-coordinate x =x+(dx*2); y= y+(dy*0.5); animate=setTimeout(draw,20); } ///////////////////START ///////////////////////////// setTimeout(draw,50); </script> <p>The Ball escapes from the canvas at the bottom: <b>Stop him!!</b></p> <canvas id="canvas" height="400" width="400" ></canvas> <ul><li>Write an <b>if-statement</b> to make the ball change direction when it reaches the bottom and top edges of the canvas(35)</li></ul>

<-----Back        Next --->

This username already exists.

This username already exists.

Login or register to save your work.

User name field is empty.

Your username needs to be at least 7 characters long.

Your username can not contain any of the following characters: ",', <, > , < and whitespaces.

Please enter a correct email addresss .

This email address is not found in our database .

Your password needs to be at least 7 characters long.

login
username
password
forgot password
email
register
username
password
email