Animation, Inputs & Media

setInterval

collisions

form input

images & video

1

Write the formula for a random die value 1–6.

2

Where is (0, 0) on a canvas?

3

Which method draws a circle?

4

What does the variable firstturn remember?

A ball moves around a box and bounces off the walls. The player types new horizontal and vertical speeds into a form.

The book builds three versions: a ball drawn with code, an image ball with gradient-coloured walls, and a form that checks its own input.

This is computed animation: the position is recalculated and redrawn at fixed intervals. Cel animation, such as an animated GIF, shows pictures drawn in advance.

FROM THE BOOK

Chapter 3 · Bouncing Ball
pp. 67–96

YOU WILL BUILD

• bouncingballinputs.html
• bouncingballinputsvalidate.html
• bouncingcandybackground.html
• bouncintballinputsimggradients.html
• bouncingVideoOk2.html

01

Repeat code over time with setInterval; stop it with clearInterval.

02

Erase and redraw the canvas every frame so motion looks smooth.

03

Represent motion with a position and a velocity.

04

Detect collisions with the walls and reverse the velocity.

05

Read numbers from form fields with Number().

06

Use HTML5 input validation: type="number", min, max.

07

Draw images with drawImage and embed video with <video>.

A timer

Code runs at short, fixed intervals so the result looks like motion.

Virtual walls

There is no real ball or wall: compare positions and reverse the speed on a hit.

Player input

Form fields now send values in. In Week 2 they only showed results.

Robust input

Do not act on bad entries, and show the player which field is wrong.

1

Erase

clearRect wipes the box.

2

Move

moveandcheck works out the new position.

3

Draw

arc and fill paint the ball again.

CODE · script · canvas 400 × 200

var x = 20;
function frame() {
  ctx.clearRect(0, 0, 400, 200);   // erase
  x = x + 4;                       // move
  if (x > 400) x = 0;
  ctx.beginPath();
  ctx.arc(x, 100, 20, 0, 2 * Math.PI);
  ctx.fill();                      // draw
}
setInterval(frame, 30);

var x = 20;

ctx.clearRect(0, 0, 400, 200);

x = x + 4;

if (x > 400) x = 0;

setInterval(frame, 30);

20 is smooth and 500 is jerky. Without clearRect the ball leaves a trail.

1

Predict

nballx = ballx + ballvx

2

Test

Past a wall? Flip the sign of the velocity.

3

Commit

ballx = nballx

CODE · script · canvas 400 × 200

var x = 50, y = 50, vx = 5, vy = 3;
function frame() {
  ctx.clearRect(0, 0, 400, 200);
  x = x + vx;
  y = y + vy;
  if (x > 380 || x < 20) vx = -vx;  // sides
  if (y > 180 || y < 20) vy = -vy;  // top, bottom
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, 2 * Math.PI);
  ctx.fill();
}
setInterval(frame, 30);

vx = 5, vy = 3

x = x + vx;

x > 380 || x < 20

vx = -vx;

y > 180 || y < 20

Yes: the bounds are worked out from the box size and the radius, so the bounce stays accurate.

1

Input

The player types a speed and presses CHANGE.

2

Check

type, min and max; bad entries turn red.

3

Use

Number() turns the text into a number.

CODE · input.html

<style>
  input:valid   { background: palegreen; }
  input:invalid { background: salmon; }
</style>
<input type="number" min="0" max="10" value="4">
<input type="number" min="0" max="10" value="20">
<p id="out"></p>
<script>
  var t = "7";                    // field text
  document.getElementById("out").textContent =
    (t + 1) + " vs " + (Number(t) + 1);
</script>

type="number" min="0" max="10"

input:valid { … }

input:invalid { … }

t + 1

Number(t) + 1

20 and abc turn red and are blocked. Without Number(), 3 is treated as text and the movement goes wrong.

1

drawImage

A picture drawn on the canvas.

2

Gradient

Colours blended across a shape.

3

<video>

A player on the page, in several formats.

CODE · script · canvas 400 × 200

var g = ctx.createLinearGradient(0, 0, 400, 0);
g.addColorStop(0, "crimson");
g.addColorStop(1, "royalblue");
ctx.fillStyle = g;
ctx.fillRect(0, 0, 400, 60);       // gradient wall
// a small picture, drawn once...
var pic = document.createElement("canvas");
pic.width = pic.height = 40;
var p = pic.getContext("2d");
p.fillStyle = "gold"; p.fillRect(0, 0, 40, 40);
// ...then stamped at different sizes
ctx.drawImage(pic, 20, 100, 40, 40);
ctx.drawImage(pic, 100, 80, 80, 80);

createLinearGradient(0, 0, 400, 0)

addColorStop(0, "crimson")

addColorStop(1, "royalblue")

ctx.fillStyle = g;

drawImage(pic, x, y, w, h)

Your photo bounces inside walls in your own colours.

Fix: setInterval never runs: check onLoad="init();" is on the body tag.

Fix: Check the > and < signs, and flip with -ballvx or -ballvy.

Fix: Use onSubmit="return change();" and end change() with return false.

Fix: Put the media in the Week3 folder and match the file name exactly.

A

Run once after 100 ms

B

Run every 100 ms

C

Run 100 times

D

Wait 100 seconds

A

ballx = 0

B

ballvx = -ballvx

C

ballvy = 0

D

clearInterval

A

To validate it

B

Form values are text

C

To round it

D

To colour it

A

To play them all

B

Browsers support different formats

C

Better quality

D

For subtitles

1

Folder

Create a folder named Week3.

2

Copy

Copy the example files and their images, audio or video into it.

3

Open

Open the folder in VS Code or Sublime Text.

4

Save

Edit, then save with Ctrl+S.

5

Check

Refresh the browser (F5). Open the console (F12).

Press STOP, then type ballx and ballvx in the console to see where the ball really is.

NEXT WEEK

Week 4 · Objects & Physics

Cannonball and slingshot: gravity, angles, lists of objects and dragging with the mouse.