---+ Introduction to Animation with HTML5 and JavaScript ---++++++ Due: April 30 [[https://moodle.kenyon.edu/mod/assign/view.php?id=26947][Moodle Link]] * HTML5 is the latest language for building web pages. * HTML5 has a feature called the <canvas> element that allows graphics and animation. * Using a programming language called JavaScript, web developers can create graphics, static and moving. * Here is an example of a simple animation using HTML5: <a href="http://cs.mvnu.edu/blast/ball.html" target="_top">Bouncing Ball Example</a> * Here is a tutorial on using HTML5 with Canvas: [[https://www.w3schools.com/graphics/canvas_intro.asp][Canvas Tutorial]] * [[https://www.w3schools.com/html/html5_canvas.asp][HTML5 Canvas Reference]] ---+++ Step 1 - Draw a ball * First we need to create a canvas to draw on. * The following code creates a area to "draw" on that is 300 pixels wide, and 300 pixels high: <sticky> %CODE{"html"}% <body> <canvas id="myCanvas" width="300" height="300" > </canvas> </body> %ENDCODE%</sticky> * Now we can write code to draw something on this canvas: <sticky> %CODE{"javascript"}% init(); var context; function init() { context= myCanvas.getContext('2d'); context.beginPath(); // fill objects with blue color 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(); } %ENDCODE%</sticky> * How can we test this out? * Let's use jsfiddle : http://jsfiddle.net * If you create a login, you can name and save your code like on repl.it * Paste the html code into the html box, and the javascript code into the js box. * Hit "run" * If you run into problems you can get feedbck by usng the developer tools. <img alt="Screenshot_20181125_200346.png" height="215" src="%ATTACHURLPATH%/Screenshot_20181125_200346.png" style="background-color: transparent;" width="268" /> ---+++ Step 2 - Move the ball * Now that we have the circle, let’s try to move it. We’ll replace the hardcoded values of the coordinates in the .arc method (100, 100 — the first two arguments) with variables <code>x</code>and y, which we will then increment by an amount of dx and dy. * Also since we need to redraw the circle at the new positions, we’ll move the code into a function called draw() and call it every 10ms using <code>JavaScript’s setInterval()</code>function. * Try the code below <sticky> %CODE{"javascript"}% var context; var x=50; var y=50; var dx=5; var dy=5; init(); function init() { context= myCanvas.getContext('2d'); setInterval(draw,10); } function draw() { context.beginPath(); context.fillStyle="#0000ff"; // Draws a circle of radius 20 at the coordinates 100,100 on the canvas context.arc(x,y,20,0,Math.PI*2,true); context.closePath(); context.fill(); x+=dx; y+=dy; } %ENDCODE%</sticky> <img alt="Screenshot_20181125_201215.png" height="443" src="%ATTACHURLPATH%/Screenshot_20181125_201215.png" style="background-color: transparent;" width="491" /> We have a problem! The circle is actually forming a line! Why? How do we fix this? ---+++ 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, we’ll need to call the 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. Add the line below at the beginning of the draw function: <sticky> %CODE{"javascript"}% context.clearRect(0,0, 300,300); %ENDCODE%</sticky> * Try it out! * We stil have a problem, what is it? * What soluton can we try? ---+++ 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. * Add the following code to bounce the ball: <sticky> %CODE{"javascript"}% // Boundary Logic if( x<0 || x>300) dx=-dx; if( y<0 || y>300) dy=-dy; %ENDCODE%</sticky> * Notice how the balls goes corner to corner. How can we fix that? * Let's give the ball a random start point. Let's start by giving the height and width a name for a better program. Then use it to compute a random location at the beginning of the code: %CODE{"javascript"}% var height=300, width=300; var x=Math.random() * 300; var y=Math.random() * 300; %ENDCODE%</sticky> * Let's also now use the height and width in the clearRect function: %CODE{"javascript"}% context.clearRect(0,0, height, width); %ENDCODE%</sticky> * Next note the ball is going off the edge. How do we fix this? Let's start by making a variable for the radius, and then using that. %CODE{"javascript"}% var radius=20; %ENDCODE%</sticky> ---+++ Step 5 - Have fun! Add some features! <span style="background-color: transparent;">Can you try to add some more features?</span> * Make the box bigger. * Change the color of the ball whenever it hits the wall. * More than one ball. * Simulate the effects of gravity and friction (the ball's height decreases with each bounce, and the side to side motion slows down) * Whatever you can think of! Random color function: <sticky> %CODE{"javascript"}% function getRandomColor() { var letters = '0123456789ABCDEF'; var color = '#'; for (var i = 0; i < 6; i++) { color += letters[Math.floor(Math.random() * 16)]; } return color; } %ENDCODE%</sticky>
Attachments
Attachments
Topic attachments
I
Attachment
History
Action
Size
Date
Who
Comment
png
Screenshot_20181125_200346.png
r1
manage
2.3 K
2018-11-26 - 01:04
JimSkon
png
Screenshot_20181125_201215.png
r1
manage
4.5 K
2018-11-26 - 01:12
JimSkon
This topic: Main
>
WebHome
>
IntroToCSF2018
>
CanvasActivityIntroCS
Topic revision: r4 - 2019-03-18 - JimSkon
Copyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki?
Send feedback