# Difference: Stem2012 (1 vs. 2)

#### Revision 22014-09-24 - JimSkon

Line: 1 to 1

 META TOPICPARENT name="WebHome"

# Stem 2012 Animation Activity

Line: 42 to 42

• Save as "Ball1.html" on the desktop.
• Go to the desktop, right click on the new file, and open with `FireFox`.
Changed:
<
<

>
>

### 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.
Line: 76 to 76
We have a problem! The circle is actually forming a line (see the image below, click image for an actual demo).
Changed:
<
<
>
>

### 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.
Line: 114 to 114

• 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:
Changed:
<
<
>
>

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

```

#### Revision 12012-10-26 - JimSkon

Line: 1 to 1
>
>
 META TOPICPARENT name="WebHome"

# Stem 2012 Animation Activity

• Open Firefox browser and go to http://cs.mvnu.edu
• Click Link to CS Wiki.
• Under Fall 2012, select STEM DAY 2012.

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

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

### 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>
<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 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>
<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:

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

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.

-- JimSkon - 2012-06-08 * *

Copyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback