Understanding HTML5 Canvas

Question

I am trying to get to grips and understand how to use and create colliding balls with HTML5 canvas,examples I have looked at have a lot of JavaScript, but I need to break it down into much smaller chunks to get a better understanding of what's going on.

In my example what I understand so far is that I am redrawing the circles every 40 milliseconds onto the canvas, and calling the animate function each time. Every time this is called the position of the circle changes as I am changing it with

circles[0].x+=1;
circles[0].y+=-1.5;

So my circle objects are in an array, and there are 2 things I would like to achieve:

1) not to let the balls escape the canvas area

2) if the balls collide then bounce off each other and reverse in direction.

What I want to tackle first though is not letting the balls escape the canvas and how I would go about working that out.

I have access to the window.width and window.height, so it's a case of understanding how to get the position of each ball in the array, and ensure that it does not cross those boundaries.

I don't want to just have it work, would much prefer to understand what is happening.

Answer 1

This will check collisions on the bounds of the canvas. I updated your objects to store vx and vy (velocity) and the draw() function to move based on these properties. I added checkBounds() which reverses the velocity when the circle goes outside the bounds.

EDIT: modified so that it takes into account the radius of the circles too.

Doing a collision detect between the circles could follow a similar pattern

http://jsfiddle.net/3tfUN/5/

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius = 50;
    var strokewidth = 2;
    var strokestyle = '#666';
    var frameCount = 0;
    var w = canvas.width;
    var h = canvas.height;

    // Circle Objects
    var yellowCircle = {
        x: 50,
        y: h / 2,
        radius: radius,
        color: 'yellow',
        vx: 1,
        vy: 1.5
    }

    var redCircle = {
        x: 450,
        y: h / 2,
        radius: radius,
        color: 'red',
        vx: 1,
        vy: -1
    }

    var blueCircle = {
        x: 850,
        y: h / 2,
        radius: radius,
        color: 'blue',
        vx: -1,
        vy: -1.5
    }

    // Create empty array and then push cirlce objects into array
    var circles = [];
    circles.push(yellowCircle, blueCircle, redCircle);

    function checkBounds() {
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            if (c.x > w - c.radius || c.x < c.radius) {
                c.vx = -c.vx;
            }
            if (c.y > h - c.radius || c.y < c.radius) {
                c.vy = -c.vy;
            }
        }
    }

    // Clear last circle and draw again
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height); // Clear the circle from the from page
        for (var i = 0; i < circles.length; i++) {
            var c = circles[i];
            context.beginPath();
            context.fillStyle = c.color // Set the color of the circle using key:valuecontext.fill();
            context.lineWidth = strokewidth;
            context.strokeStyle = strokestyle;
            context.stroke();
            context.arc(c.x, c.y, c.radius, 0, Math.PI * 2); // X-axis Position, y-axis Position, radius, % of fill, ?
            context.closePath();
            context.fill();
        }
    }

    function animate() {
        for (i = 0; i <= 2; i++) {
            circles[i].x += circles[i].vx;
            circles[i].y += circles[i].vy;
        }
        checkBounds();
        draw();
    }

    var canvas = document.getElementById('ball-canvas');
    var context = canvas.getContext('2d')
    var radius = 50;
    setInterval(animate, 40);

Answer 2

circles[0].x+=1;
circles[0].y+=-1.5;

That's pretty tough to maintain. Instead, I'd suggest you have properties for X and Y speeds (I used moveX and moveY in the example).

Next, you need to check whether the position of the ball + the radius compensation is touching the canvas edges, and if so, reverse the speed value. So, for example, the X speed of the ball is 4 and now it hits the left or the right canvas egde, the X speed now becomes -4.

This is it, in a nutshell:

            var c = circles[i];

            // check rebounds
            if (c.x - c.radius <= 0 || c.x + c.radius  >= canvas.width)
                c.moveX = -c.moveX; // flip the horizontal speed component
            if (c.y - c.radius <= 0 || c.y + c.radius >= canvas.height)
                c.moveY = -c.moveY; // flip the vertical speed component

            // Yellow Circle
            c.x += c.moveX; // here we don't have to worry
            c.y += c.moveY; // about directions anymore

See my example here: http://jsfiddle.net/3tfUN/8/

The same principle applies for collisions between balls. I'm assuming you want to do simple collisions without angle changes.

But if you wish to simulate real ball collisions, that would require some more serious trigonometry to calculate when exactly the pixel-perfect collision happens, and to calculate the new X and Y speed components.

---

UPDATE

An example featuring slightly improved collision detection and speed transfer between balls: http://jsfiddle.net/3tfUN/12/

Answer 3

The canvas is just a "canvas" where you draw the circles. What you need to accomplish what you want is to model a "world" where the circles are object with width and height dimensions and their current position, and where the bounds are well defined. Once you have the width and height of each circle and their position, you can calculate where they are in respect to the bounds you set and see if you need to change direction or keep going.

Collisions stem from the same principle but are somewhat harder to model if you want them to be "realistic" (in the bounds problem you are only interested in the width and height of the circles because the bounding area is box shaped and the circle will always collide in the furthest point from its center, while when two circles collide you should take into account the radius of each circle instead of the "bounding box" around them.

I don't have time right now to show you this concepts with examples, but hopefully I sent you in the right track :).