Lab 0 Due Class Time January 30

Introduction to Animation with HTML5 and JavaScript

  • HTML5 is the latest language for building web pages.
  • HTML5 has a feature called the <canvas> element that allows graphics.
  • Using a programming language called JavaScript, web developers can create graphics, static and moving.
  • Here is an example of a simple animation using HTML5: Bouncing Ball Example

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 50 pixels wide, and 400 pixels high:
<body>
  <canvas id="myCanvas"* width="500" height="400">
  </canvas>
</body>
  • Now we can write code to draw something on this canvas:
<script>
  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();
  }
</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
  • How can we test this out?
  • We need an editor. Go to the Start menu, find Assessories, and then the NotePad editor.
  • Copy the code above and paste it into the editor.
  • Save as "Ball1.html" on the desktop.
  • Go to the desktop, right click on the new file, and open with FireFox.

Simple static ball:
11-02_blue_circle.png

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 x 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 JavaScript’s setInterval() function.
  • Try the code below the same way, naming it "=ball2.html=". Simply add the new code in blue.
<script>
var context;
var x=100; var y=200; var dx=5; var dy=5;
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;
}
</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>

We have a problem! The circle is actually forming a line (see the image below, click image for an actual demo). 11-03_line_bug.png

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 draw()function so that it clears out the previous circle before it draws the new one.
<script>
var context;
var x=100;
var y=100;
var dx=5;
var dy=5;
function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}
function draw()
{
  context.clearRect(0,0, 300,300);
  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;
}
</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
  • Try it out as before, adding the new code in blue. .... the balls moves across the screen and disappears.
  • Click image below for a demo:

11-02_blue_circle.png

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.
<script>
var context;
var x=100;
var y=200;
var dx=5;
var dy=5;
function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}
function draw()
{
  context.clearRect(0,0, 300,300);
  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();
  // Boundary Logic
  if( x<0 || x>300) dx=-dx;
  if( y<0 || y>300) dy=-dy;
  x+=dx;
  y+=dy;
}
</script>
<body onLoad="init();">
  <canvas id="myCanvas" width="300" height="300" >
  </canvas>
</body>
  • Edit and try it out as before!
  • Click this link: Bouncing ball for an example.
  • This bouncing ball illustrates some fundamental methods of game development logic and it can be easily extended to build a ping-pong game or a breaker-type of game.

Step 5 - Putting on the internet

The course has a Web site where your work can be put on display. Assuming your work is called "ball.html", do the following to place it on the server.

1. Log into the server using WinSCP
  • Find and run WinSCP in the start menu:
    WinSCP1.GIF
  • Create a connection, hit "Login". Your pasword in your MVNU ID number.
    WinSCP3.GIF
  • You will now see local files on the left, remote (web sever) files on the right.
  • Click the open folder button over the right window, and enter in "/var/www/csc3003/username" where username is your user name.
  • Hit "Okay"
    WinSCP4.GIF
  • Drag your file on the left (here "ball.html") to the right window.
  • Cick "copy" on the dialog box:
    WinSCP5.GIF
  • You can now browse to "cs.mvnu.edu/csc3003/username".
  • Click on your file:
    WinSCP6.GIF
  • You should now open your work:
    WinSCP7.GIF
  • Now put the link on the wiki. Go to "cs.mvnu.edu", and then the wiki.
  • Next go to the class, and click on "student pages"
  • Click on your page, and edit it to include the URL of your page.
  • Try it out!
    WinSCP8.GIF

Step 6

Can you try to add some more features?

  • 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!
  • See the links below for some more ideas.

Turn in

  • HTML Code file ready to run
  • Put the code on the web server, and the link on the wiki.
  • Word Document with the following:
    1. What you learned from this exercise
    2. What features you added

Links

-- JimSkon - 2012-06-08 * *

*

Topic attachments
I Attachment Action Size Date Who Comment
GIFGIF WinSCP1.GIF manage 38.8 K 2013-01-30 - 18:52 JimSkon  
GIFGIF WinSCP2.GIF manage 57.9 K 2013-01-30 - 18:52 JimSkon  
GIFGIF WinSCP3.GIF manage 59.3 K 2013-01-30 - 18:53 JimSkon  
GIFGIF WinSCP4.GIF manage 122.9 K 2013-01-30 - 18:54 JimSkon  
GIFGIF WinSCP5.GIF manage 138.0 K 2013-01-30 - 18:54 JimSkon  
GIFGIF WinSCP6.GIF manage 39.8 K 2013-01-30 - 18:54 JimSkon  
GIFGIF WinSCP7.GIF manage 34.1 K 2013-01-30 - 18:54 JimSkon  
GIFGIF WinSCP8.GIF manage 96.0 K 2013-01-30 - 18:55 JimSkon  
Topic revision: r5 - 2014-09-24 - JimSkon
 
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback