Kenyon Admitted Student Visit Day

A quick introduction to interactive web graphics

To start

Open Firefox or Chrome web browser and go to http://cs.kenyon.edu
Under "Special Events", select "Admitted Student Visit Day".

Introduction to Animation with HTML5 and JavaScript

HTML5 is the current language for building 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: Bouncing Ball Example
And a few more: Gravity Simulation, Ball Equilibrium
More Bouncing Balls (Bouncing balls with different sizes)

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 500 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>

Try it out

How can we test this out?
We need an editor to write and save a code file. Go to the Start menu, find type notepad, and then select either the Notepad editor or the Notepad++ editor. (Nodepad++ is nicer, but Notepad is on every Windows computer)
Copy the code shown in blue above and paste it into the editor.
Save the file as "Ball1.html" on the desktop. Note: 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 page should appear showing a simple blue circle.

Simple static ball:

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 20 ms (milliseconds) 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,20);
}

function draw()
{
  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="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).

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 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.

<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, 300,300);
  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="300" height="300" >
  </canvas>
</body>

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:

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,20);
}

function draw()
{
  context.clearRect(0,0, 300,300);
  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();
  // 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 your code to add the boundary logic (in blue above), and try it out as before!
This link shows a working example: Bouncing ball
This bouncing ball illustrates some fundamental methods used in programs to simulate moving objects. Similar animations are used in movies and game development, and this program could be rather easily extended to build a ping-pong game or a breaker-type of game.

Step 5

Can you try to make it better?

Notice how the goes partway off the canvas before bouncing. What is happening? How can we fix this?
Change the size of the ball, or the dimensions of the canvas area.
Change the color of the ball whenever it hits the wall. (see getRandomColor below. Use getRandomColor() in place of "#0000FF":)
Draw and move 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.

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

Links

KenyonAdmittedStudentDay.pptx: KenyonAdmittedStudentDay.pptx

Attachments

Topic attachments
I	Attachment	History	Action	Size	Date	Who
pptx	KenyonAdmittedStudentDay.pptx	r3 r2 r1	manage	3911.9 K	2017-04-10 - 14:36	JimSkon
png	example1.png	r1	manage	1.4 K	2017-03-30 - 05:14	JimSkon
png	example2.png	r1	manage	3.0 K	2017-03-30 - 05:14	JimSkon

Topic revision: r4 - 2017-04-10 - JimSkon