---+ STEM Day 2019 JavaScript Web Animation Activity * Open Chrome or Firefox web browser and go to <a href="https://cs.mvnu.edu" target="_blank">https://cs.mvnu.edu</a> * Click Link to _CS Wiki._ * Under "Special Events", select _STEM Day on November 11, 2019_. ---+ Introduction to Animation with HTML5 and JavaScript * HTML5 is the current language used to specify the content and layout of web pages. * HTML5 has a feature called the <canvas> element that provides a standard graphics package in all current web browsers. * Using a programming language called JavaScript, web developers can create moving objects. * Here is an example of a simple animation using HTML5: <a href="http://cs.mvnu.edu/classes/STEM/ball4.html" target="_blank" title="Bouncing ball">Bouncing ball</a> * Here is another fun animation! [[http://cs.mvnu.edu/blast/MVNU.html][MVNU Bouncing Balls]] * And a few more: [[http://cs.mvnu.edu/csc3003/skon/Kineticjs3/Gravity3.html][Gravity Simulation]], [[http://cs.mvnu.edu/csc3003/skon/Kineticjs3/Gravity4.html][Bouncing balls with different sizes]], [[http://cs.mvnu.edu/csc3003/skon/Kineticjs3/animateball9.html][Ball Equilibrium]] *In the steps that follow, you will learn how simple animations can be programmed to run in a web browser.* ---+++ Step 1 - Draw a ball * First we need to create a canvas to draw on. * The following HTML code creates an area to "draw" on that is 500 pixels wide, and 400 pixels high: <pre><body> <canvas id="myCanvas"* width="500" height="400"> </canvas> </body></pre> * Now we can write Javascript code to draw something on this canvas: <pre style="color: blue;"><script> var context; function init() { context= myCanvas.getContext('2d'); context.beginPath(); // fill objects with blue color, using RGB value in hexadecimal code context.fillStyle="#0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc(100,100,20,0,Math.PI*2,true); context.closePath(); context.fill(); } </script> <body onLoad="init();"> <canvas id="myCanvas" width="500" height="400" > </canvas> </body></pre> * How can we test this out? * We need an editor to write and save a code file. Go to the *Start* menu, find *Assessories*, and then the *Notepad* editor. Notepad is a simple text editor available on any Windows computer. Programmers often use other text editors, such as Notepad++, with more useful features for editing code. * Copy the code shown in blue above and paste it into the editor. * Save the file as "Ball1.html" on the desktop. *Note: When using Notepad, change "Save as type" from (.txt) to "All Files".* * Go to the desktop, right click on the new file named Ball1.html, and open with Google Chrome. * A web page should appear showing a simple blue circle. ---+++ Simple static ball: <br /><img alt="11-02_blue_circle.png" height="100" src="https://cs.mvnu.edu/class/webdev/11-02_blue_circle.png" width="100" /> ---+++ Step 2 - Move the ball * Now that we have the circle, lets try to move it. We'll do this by redrawing the circle many times, changing its position a small amount each time. * Well replace the hardcoded values of the coordinates in the .arc method (100, 100 the first two parameters) with variables x and y. * Each time we redraw the circle, we will increment the x coordinate by an amount of dx, and increment y by an amount of dy. * Also since we need to redraw the circle at the new positions, well move the code into a function called draw() and invoke it every 20 ms (milliseconds) using JavaScript s setInterval() function. * Try the code below the same way, naming it "Ball2.html". Simply add the new code shown in blue. <pre><script> var context; %BLUE%var x=100; var y=100; var dx=5; var dy=5;%ENDCOLOR% function init() { context= myCanvas.getContext('2d'); %BLUE% setInterval(draw,20);%ENDCOLOR% %BLUE%}%ENDCOLOR% %BLUE%function draw()%ENDCOLOR% %BLUE%{%ENDCOLOR% context.beginPath(); context.fillStyle="#0000ff"; // Draws a circle of radius 20 at the coordinates x,y on the canvas context.arc(<b>%BLUE%x,y%ENDCOLOR%</b>, 20,0,Math.PI*2,true); context.closePath(); context.fill(); %BLUE% x+=dx;%ENDCOLOR%<br />%BLUE% y+=dy;%ENDCOLOR%<br />}<br /></script><br /><body onLoad="init();"> <br /> <canvas id="myCanvas" width="500" height="400" ><br /> </canvas><br /></body></pre> We have a problem! The circle is actually forming a line (see the image below, click image for an actual demo). <a href="https://cs.mvnu.edu/class/webdev/ball2.html" target="_blank" title="Moving ball without erase"><img alt="11-03_line_bug.png" height="157" src="https://cs.mvnu.edu/class/webdev/11-03_line_bug.png" width="178" /></a> ---+++ Step 3 - Erase the old circles! * The balls merged into a line because each time the draw() function is called, it draws a circle at the new coordinates without removing the old ones. * To erase the old circles, well need to call a clearRect method right at the start of our <code>draw()</code>function so that it clears out the previous circle before it draws the new one. <pre><script> var context; var x=100; var y=100; var dx=5; var dy=5; function init() { context= myCanvas.getContext('2d'); setInterval(draw,20); } function draw() { %BLUE%context.clearRect(0,0, 500,400);%ENDCOLOR% context.beginPath(); context.fillStyle="#0000ff"; // Draws a circle of radius 20 at the coordinates x,y on the canvas context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); x+=dx; y+=dy; } </script> <body onLoad="init();"> <canvas id="myCanvas" width="500" height="400" > </canvas> </body></pre> * Edit your code from Step 2, and add the new code in blue. * Save the code file, and try it out as before. The ball should move across the screen and disappear. * Click image below for a demo: ---+++ <a href="http://cs.mvnu.edu/classes/STEM/ball3.html" target="_blank" title="Moving ball with erase"><img alt="11-02_blue_circle.png" height="150" src="/stem/11-02_blue_circle.png" width="150" /></a> ---+++ Step 4 - bounce the ball inside imaginary walls * All you need to do is check if the values of x and y are beyond the canvas dimensions, and if so, we need to reverse the direction by setting values of dx and dy to the negative values. <pre><script> var context; var x=100; var y=100; var dx=5; var dy=5; function init() { context= myCanvas.getContext('2d'); setInterval(draw,20); } function draw() { context.clearRect(0,0, 500,400); context.beginPath(); context.fillStyle="#0000ff"; // Draws a circle of radius 20 at the coordinates x,y on the canvas context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); %BLUE%// Boundary Logic%ENDCOLOR% %BLUE% if( x<0 || x>500) dx=-dx;%ENDCOLOR% %BLUE% if( y<0 || y>400) dy=-dy;%ENDCOLOR% x+=dx; y+=dy; } </script> <body onLoad="init();"> <canvas id="myCanvas" width="500" height="400" > </canvas> </body></pre> * Edit your code to add the boundary conditions (shown in blue above), and try it out as before! * This link shows a working example: <a href="http://cs.mvnu.edu/classes/STEM/ball4.html" target="_blank" title="Bouncing ball">Bouncing ball</a> * This bouncing ball animation illustrates some fundamental methods used in programs to simulate moving objects. Similar animations are used in movies and game development, and with a little effort, this program could be extended to build a ping-pong game or a breaker-type of game. ---+++ Step 5 Can you try to add some more features? * Change the size of the ball, or the dimensions of the area. * Change the color of the ball whenever it hits the wall. * Adjust the boundary conditions so that the ball changes direction as soon as its edge hits a wall, instead of compressing to the center of the ball. * Draw more than one ball. * Simulate the effects of gravity and friction (make the ball's height decrease with each bounce, and make the side to side motion slow down). * Be creative, and try out other changes and see what happens! See the links below for some more ideas. ---+++ Links * [[http://www.html5canvastutorials.com/labs/html5-canvas-google-bouncing-balls/][Google Bouncing Balls]] * http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/ * http://www.html5canvastutorials.com/labs/html5-canvas-physics-engine-with-curve-detection/
This topic: Main
>
WebHome
>
StemDay2019
Topic revision: r1 - 2019-11-10 - RobertKasper
Copyright © 2008-2024 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki?
Send feedback