---+ 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> * Under "Special Events", select the link for _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="https://cs.mvnu.edu/class/webdev/ball4.html" target="_blank" title="Bouncing ball">Bouncing ball</a> * Here is another fun animation! <a href="https://cs.mvnu.edu/class/webdev/MVNU-Balls.html" target="_blank" title="MVNU Bouncing Balls">MVNU Bouncing Balls</a> * And some simulations of physics: <a href="https://cs.mvnu.edu/class/webdev/Gravity3.html" target="_blank" title="Gravity Simulation">Gravity Simulation</a>, <a href="https://cs.mvnu.edu/class/webdev/Gravity4.html" target="_blank" title="Bouncing Balls with different sizes">Bouncing balls with different sizes</a>, <a href="https://cs.mvnu.edu/class/webdev/animateball9.html" target="_blank" title="Ball Equilibrium">Ball Equilibrium</a> *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 standard 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 search box and enter "Notepad" to open either *Notepad* or *Notepad++*. 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. * Use the File menu Save As ... command, and save the file on the Desktop with the filename "Ball1.html". *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 select 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 multiple times, 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 in the same way, saving the file as "Ball2.html". The new code is 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 runs, it draws a circle at the new coordinates without removing the old ones. * To erase the old circles, well need to invoke a clearRect method right at the start of our draw() function so that it clears out the previous circle before it draws the new one. * <span style="background-color: transparent;">Edit your code from Step 2, and add just the one new line of code shown in blue below.</span> * <span style="background-color: transparent;">Save the code file, and try it out as before. Now the ball should move across the screen and disappear.</span> <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> ---+++ Step 4 - bounce the ball inside imaginary walls * Instead of letting the ball disappear, let's see how to make it bounce and change direction when it reaches the edge of the canvas. * All we 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 of movement by setting the value of dx or dy to the opposite (negative) value. * <span style="background-color: transparent;">Edit your code to add the boundary conditions (shown in blue below), and try it out as before!</span> <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 Conditions%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> * This link shows a working example: <a href="https://cs.mvnu.edu/class/webdev/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 or breaker-type of game. ---+++ Step 5 Now try some experiments by making small changes to the code in your file to see if you can produce some of these effects: * Make the ball move faster (by changing the number of milliseconds when using the setInterval() function). * 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! ---+++ Reference 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/
This topic: Main
>
WebHome
>
StemDay2019
Topic revision: r2 - 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