HTML5 Canvas | Text Animation and Circle Collision | Part 02

Video Tutorial

Overview

In the last tutorial, we have rendered the text using circles with Custom Colors and Radiuses, what left for us to do is animating the circles to start at a random position on the canvas then travels all the way into the Goal Position in order to form the text, releasing the circles on mouse over them and space bar click for back-in-time effect.

So Without Further a Do let’s get into it.

Circles Animation

under the draw function add new variables for storing the StartX, StartY at a random position and the velocity for taking the circles back to the desired position (Goal Position) and push it to the Circle’s Object

function drawCircle(x, y) {
    //Random X,Y
    var startX = Math.random() * canvas.width;
    var startY = Math.random() * canvas.height;

    //Velocity | moves toward the Goal Position
    var velX = (x - startX) / timeout;
    var velY = (y - startY) / timeout;

    circles.push({
        gX: x, ///< Goal X
        gY: y, ///< Goal Y
        stX: startX, ///< Start X
        stY: startY, ///< Start Y
        vel: { x: velX, y: velY }, ///< Velocity
        rels: true, ///< Release Circle
        col: "yellow", ///< Custom Circle Color
    });
}

and to make the changes takes effect we need to render each circle at the start Position rather than the Goal Pos

//Under the Render Function 
ctx.arc(circ.stX, circ.stY, circlRadius, 0, Math.PI * 2, false);

Now We Should see the Circles being Spotted at a random position but not moving toward the Text Pos, so for that, we need to use the velocity each frame under the update function

//Make Sure to Increase the itercount each frame, upon the update 
itercount++; ///< that will allow us to keep track of where the circles need to stop 

//For Moving the Circles 
if (circ.rels == true) {
    circ.stX += circ.vel.x;
    circ.stY += circ.vel.y;
}
//For Stopping the Circles at the Goal Position 
if (itercount == timeout) {
    circ.vel = { x: Math.random() * 6 * 2 - 6, y: Math.random() * 6 * 2 - 6 };
    circ.rels = false;
}

Now Running That, you should see a cool animation by the circles from a random position traveling to their Desired Spot.

Circle Collision

So for the Mouse Collision with the Circles, we need to create a circle around our mouse cursor (but we won’t be able to see it) then each frame we check for the collision with the other circles, so that would allow us to know whether we need to release the circle from its position or not

So there is an already made function that checks the collision between two circles comparing the distance between the radiuses

//Circle Collision
function isCircleCollided(x, y, radius, x1, y1, radius1) { 
    if (Math.abs(x1 - x) > radius1 + radius && Math.abs(y1 - y) > radius1 + radius) {
        ///No Need for Collision Checking
        return false;
    } else {
        var dx = x1 - x;
        var dy = y1 - y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        //DOUBLE CHECKING
        if (distance < radius1 + radius) {
            return true
        }
    }
    return false;
}

Also we need to get the mouse position and a custom radius for the mouse’s circle

//For Storing Position 
var mouse = {x: undefined, y: undefined, radius: 30};

window.addEventListener('mousemove', onMouseEnter);
window.addEventListener("mouseout", onMouseOut);

//ON Mouse Move
function onMouseEnter(event) {
    mouse.x = event.x;
    mouse.y = event.y;

    mouseOnScreen = true;
}
//ON Mouse Stop
function onMouseOut(event) {
    mouse.x = undefined;
    mouse.y = undefined;

    mouseOnScreen = false;
}

So we are going to use the above function for collision detection

Under the Render Callback

//Each Frame
if (isCircleCollided(circ.stX, circ.stY, circlRadius, mouse.x, mouse.y, mouse.radius)) {
    //Releasing Collided Circle
    circ.rels = true;
    //Random Color After Collision 
    circ.col = colors[Math.floor(Math.random() * colors.length)];
}

and by now, when going over a circle with the mouse the collided circles get released from its position and changes the color.

All left us to do is the Back-In-Time Effect

Back-In-Time Effect

Now we need to check for the Space KeyPress (or any other Key You Like to use) for that we use the JS event object

//Space Key Press (Back To Default)
var spaceKeyPressed = false;
//Space Key Down
window.addEventListener('keydown', (e) => {
    if (e.keyCode == 32) spaceKeyPressed = true;
});
//Space Key Up
window.addEventListener('keyup', (e) => {
    if (e.keyCode == 32) spaceKeyPressed = false;
});

We can use the spaceKeyPressed Boolean for knowing if spaceBar is pressed (being held) or not!

//Under the Render Callback 
if (spaceKeyPressed && circ.rels) {
    itercount = -50; ///< -50 is Only for a slow animation 
    //Change the Velocity Values to take the circle back in time 
    var velX = (circ.gX - circ.stX) / (timeout + 50);
    var velY = (circ.gY - circ.stY) / (timeout + 50);

    //New Velocity Towards the Default Position
    circ.vel.x = velX;
    circ.vel.y = velY;
}

Now try to refresh and Press the Space key down for the effect and that is after releasing circles using your mouse.

So that Was it for the Animation tutorial and Circles Effect.

For More Detailed Instructions please Make Sure to Watch the Video Tutorial Above.