Forem: Pujaa M

Code a cannon to shoot colored balls when clicked using Vanilla JS

Pujaa M — Fri, 09 Feb 2024 08:47:23 +0000

Created a shooting cannon using the trajectory of projectile motion with just a click.

In this tutorial, we'll see how to create an engaging visual experience: a cannon launching colorful projectiles upon a click, each trajectory influenced by the user's mouse movement using CSS and JS. It's a fun and interactive way to play with angles and animation on the web!

To achieve the cannon shoot, follow the below steps.

1: Create a canvas

The entire process will be working on a canvas.

HTML

<canvas class="canvas"></canvas>

CSS

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

let canvas = document.querySelector(".canvas");
let pen = canvas.getContext("2d");

function setupCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.style.backgroundColor = "#000000";
}

setupCanvas();

window.addEventListener("resize", setupCanvas);

We have created a canvas to work on.

2: Find a point from where you to launch and fix it as the origin

In my case, I fixed the origin to somewhere in the bottom left. What I did was, I positioned my cannon image first then figured out the new origin.

I placed the origin at the point I marked with a blue dot.

My Origin

{
  x: 100,
  y: canvas.height -108
}

From now on, this point will be playing a vital role.

3: Rotate the Cannon and find the angle using 'mousemove' EventListener

From the mousemove EventListener we can figure out the x and y coordinates of the cursor pointer but how to find the angle? This is where some mathematics comes into play!

The below formula is for finding the angle between two lines:

Where m1 and m2 are the slopes of the given lines.

Let us consider that the first line is passing through the origin fixed by us and the cursor pointer and the second line is through that origin and any one point lying on the x-axis.

/* ... */

let cursorPointer = {
    x: 100,
    y: canvas.height - 108
}

/* ... */

function findAngle() {
    let x1 = 100;
    let y1 = canvas.height - 108;
    let x2 = cursorPointer.x;
    let y2 = cursorPointer.y;
    let tempX = 500;
    let tempY = canvas.height - 108;

    let m1 = (tempY - y1) / (tempX - x1);
    let m2 = (y2 - y1) / (x2 - x1);

    let angle = Math.atan(Math.abs((m2 - m1) / (1 + (m1 * m2))));

    return angle;
}

function rotateCannon(pointerX, pointerY) {
    cursorPointer.x = pointerX;
    cursorPointer.y = pointerY;

        // Start of code snippet for restricting the angle from 30deg to 75deg
    angle = findAngle() * (180 / Math.PI);
    if(cursorPointer.x < 100) {
        angle += 90;
    }

    if(cursorPointer.y > canvas.height - 108) {
        angle = -angle;
    }

    if(angle > 75) {
        angle = 75;
    }

    if(angle < 30) {
        angle = 30;
    }
        // End of code snippet

        // Rotating the cannon to the angle calculated
    /* let cannon = document.querySelector("#cannon");
    cannon.style.transform = "translateX(22px) rotate(-" + angle + "deg)"; */ 
}

document.addEventListener("mousemove", function(event) {
    rotateCannon(event.clientX, event.clientY);
});

/* ... */

At this moment, the angle changes according to the movement of the mouse. In my case, I rotate the cannon to the angle calculated along with the mouse movement.

4: Find the trajectory of the ball

Trajectory of a projectile is the path of an object moving in the air that is affected by external force such as gravity.

As we can see, the trajectory is parabolic.

For simplicity, we will be considering the acceleration of the ball as zero.

The equation for the trajectory of a projectile is:

The y-coordinates, we will be finding them using the above equation. To find them we will require:

x-coordinates: Roughly consider from 1 to 200
g: Acceleration due to gravity(~10m/s²)
V₀: Initial velocity
θ: Angle at which the ball is launched

/* ... */

function initializePathAndTrail() {
    for(let i = 0; i < numberOfPoints; i++) {
        path[i] = {
            x: 0,
            y: 0
        }
    }
}

initializePathAndTrail();

/* ... */

function getYTrajectoryPoint(pointerX) {
    let g = 10;
    let initialVelocity = 100;
    let radians = angle * (Math.PI / 180);

    let pointerY = (pointerX * Math.tan(radians)) - ((g * pointerX * pointerX) / (2 * initialVelocity * initialVelocity * Math.cos(radians) * Math.cos(radians)));

    return pointerY;
}

function createTrajectory() {
    let x = 10;
    for(let i = 0; i < numberOfPoints; i++) {
        let y = getYTrajectoryPoint(x);
        path[i].x = x;
        path[i].y = y;
        if(angle <= 60) { //To increase the distance between the points since the distance between the points for an angle above 60deg is greater while increasing by 15.
            x += 20;
        }
        else {
            x += 15;
        }
    }
}

/* ... */

function draw() {
    pen.fillStyle = "cyan";
    for(let i = 0; i < path.length - 1; i++) {
        pen.beginPath();
        pen.arc(path[i].x, path[i].y, 10, 0, Math.PI * 2);
        pen.fill();
    }
}

document.addEventListener("click", function() {
    cancelAnimationFrame(animationId);
    initializePathAndTrail();
    createTrajectory();
}

We will get something like this:

As you can see, the trajectory projected is based on the initial origin. So we need to translate all these points according to the new origin.

/* ... */
function transformOrigin() {
    for(let i = 0; i < numberOfPoints; i++) {
        path[i].x = 100 + path[i].x;
        path[i].y = canvas.height - 108 - path[i].y;
    }
}

/* ... */

document.addEventListener("click", function() {

/* ... */

    transformOrigin();

/* ... */
});

5: Animating the ball

We have almost reached the result. We have figured out how to rotate the cannon, found the trajectory and now we will be animating the ball to travel along the trajectory whenever clicked.

To achieve this, we will be using requestAnimationFrame().

/* ... */

function draw() {
    pen.clearRect(0, 0, canvas.width, canvas.height);
    pen.beginPath();
    pen.arc(path[params.index].x, path[params.index].y, 10, 0, Math.PI * 2);
    pen.fill();
        params.index ++;
    if(params.index >= numberOfPoints) {
        params.index = numberOfPoints - 1;
    }

    animationId = requestAnimationFrame(draw);
}

document.addEventListener("click", function() {
    cancelAnimationFrame(animationId);
    initializePathAndTrail();
    createTrajectory();
    transformOrigin();
    params.index = 0;

    let num = Math.floor((Math.random() * 10) % 4);
    pen.fillStyle = color[num];

    draw();
});

And done! Now just click and launch the ball in various angles and play!

6: Creating a trail behind the ball(optional)

I am sharing a tutorial here on how to create a trail by @uuuuuulala

I am also sharing the code below:

/* ... */

function initializePathAndTrail() {
    for(let i = 0; i < numberOfPoints; i++) {
        path[i] = {
            x: 0,
            y: 0
        }
    }

    for(let i = 0; i < trailNumber; i++) {
        trail[i] = {
            x: 100,
            y: canvas.height - 108,
            dx: 0,
            dy: 0
        }
    }
}

/* ... */

function draw() {
    pen.clearRect(0, 0, canvas.width, canvas.height);
    let tempPointer = {
        x: 0,
        y: 0
    };

    tempPointer.x = path[params.index].x;
    tempPointer.y = path[params.index].y;

    trail.forEach((pointer, index) => {
        const previousPointer = (index === 0) ? tempPointer : trail[index - 1];

        const spring = params.spring;

        pointer.dx += (previousPointer.x - pointer.x) * spring;
        pointer.dy += (previousPointer.y - pointer.y) * spring;

        pointer.dx *= params.friction
        pointer.dy *= params.friction

        pointer.x += pointer.dx;
        pointer.y += pointer.dy;
    })

    pen.lineCap = "round";
    pen.beginPath();
    pen.moveTo(trail[0].x, trail[0].y);
    for(let i = 0; i < trail.length - 1; i++) {
        pen.lineWidth = trailNumber * 2 - i * 2;
        pen.globalAlpha = (i === 0) ? 1 : 0.1;
        pen.lineTo(trail[i].x, trail[i].y);
        pen.stroke();
    }
    params.index ++;
    if(params.index >= numberOfPoints) {
        params.index = numberOfPoints - 1;
    }

    animationId = requestAnimationFrame(draw);
}

document.addEventListener("click", function() {
    cancelAnimationFrame(animationId);
    initializePathAndTrail();
    createTrajectory();
    transformOrigin();
    params.index = 0;

    let num = Math.floor((Math.random() * 10) % 4);
    pen.strokeStyle = color[num];

    draw();
});

Hope you enjoyed this tutorial. Have a nice day.

SVG for the cannon and its support
Cannon

<svg id="cannon" width="200" height="129" viewBox="0 0 200 129" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="14.2857" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="42.8571" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="28.5714" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="14.2857" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="42.8571" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="28.5714" y="71.4286" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="14.2857" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="42.8571" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="28.5714" y="42.8571" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect y="57.1429" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect y="71.4286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect y="42.8571" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="42.8571" y="14.2857" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="28.5714" y="14.2857" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="14.2857" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="42.8571" y="28.5714" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="28.5714" y="28.5714" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="42.8571" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="42.8571" y="100" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="28.5714" y="100" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="42.8571" y="114.286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="14.2857" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="42.8571" y="85.7143" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="28.5714" y="85.7143" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="185.714" y="57.1429" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="185.714" y="71.4286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="185.714" y="42.8571" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="185.714" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="185.714" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="57.1429" y="57.1429" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="85.7143" y="57.1429" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="71.4286" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="57.1429" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="85.7143" y="71.4286" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="71.4286" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="57.1429" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="85.7143" y="42.8571" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="71.4286" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="142.857" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="171.429" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="157.143" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="142.857" y="71.4286" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="171.429" y="71.4286" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="157.143" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="142.857" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="171.429" y="42.8571" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="157.143" y="42.8571" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="100" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="128.571" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="114.286" y="57.1429" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="100" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="128.571" y="71.4286" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="114.286" y="71.4286" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="100" y="42.8571" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="128.571" y="42.8571" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="114.286" y="42.8571" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="57.1429" y="14.2857" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="85.7143" y="14.2857" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="71.4286" y="14.2857" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="57.1429" y="28.5714" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="85.7143" y="28.5714" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="71.4286" y="28.5714" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="57.1429" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="71.4286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="171.429" y="14.2857" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="142.857" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="171.429" y="28.5714" width="14.2857" height="14.2857" fill="#F7E1D4"/>
        <rect x="157.143" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="100" y="14.2857" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="100" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="128.571" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="114.286" y="28.5714" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="57.1429" y="100" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="85.7143" y="100" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="71.4286" y="100" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="57.1429" y="114.286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="71.4286" y="114.286" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="57.1429" y="85.7143" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="85.7143" y="85.7143" width="14.2857" height="14.2857" fill="#FFA2C4"/>
        <rect x="71.4286" y="85.7143" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="171.429" y="100" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="142.857" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="171.429" y="85.7143" width="14.2857" height="14.2857" fill="#F365FF"/>
        <rect x="157.143" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="100" y="100" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="100" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="128.571" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
        <rect x="114.286" y="85.7143" width="14.2857" height="14.2857" fill="#FF357E"/>
</svg>

Support

<svg id="support" width="200" height="110" viewBox="0 0 200 110" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="36.3636" y="54.5455" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="72.7273" y="54.5455" width="18.1818" height="18.1818" fill="#F365FF"/>
        <rect x="54.5455" y="54.5455" width="18.1818" height="18.1818" fill="#F7E1D4"/>
        <rect x="36.3636" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="72.7273" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="54.5455" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="72.7273" y="36.3636" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="54.5455" y="36.3636" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="145.455" y="54.5455" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="145.455" y="72.7273" width="18.1818" height="18.1818" fill="#F7E1D4"/>
        <rect x="163.636" y="72.7273" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="90.9091" y="54.5455" width="18.1818" height="18.1818" fill="#F365FF"/>
        <rect x="127.273" y="54.5455" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="109.091" y="54.5455" width="18.1818" height="18.1818" fill="#F365FF"/>
        <rect x="90.9091" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="127.273" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="109.091" y="72.7273" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="90.9091" y="36.3636" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="127.273" y="36.3636" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="109.091" y="36.3636" width="18.1818" height="18.1818" fill="#F7E1D4"/>
        <rect x="72.7273" y="18.1818" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="90.9091" y="18.1818" width="18.1818" height="18.1818" fill="#FFA2C4"/>
        <rect x="109.091" y="18.1818" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="36.3636" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="72.7273" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="54.5455" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="145.455" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="181.818" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="163.636" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="90.9091" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="127.273" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="109.091" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="18.1818" y="72.7273" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect x="18.1818" y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
        <rect y="90.9091" width="18.1818" height="18.1818" fill="#FF357E"/>
</svg>

Eye tracking dog

Pujaa M — Thu, 01 Feb 2024 15:32:09 +0000

The eyes of the dog track the direction of the cursor when moved.

In this tutorial, we'll explore the intricate process of synchronizing a virtual dog's eyes with the movement of your cursor.

1: Create a canvas in HTML

Using the canvas tag, create a canvas and setup the width, height and color of the canvas.

HTML

<canvas></canvas>

CSS

canvas {
    background-color: #A15A22;
}

const canvas = document.querySelector("canvas");
const pen = canvas.getContext("2d");
let radius = 50;
let trackerRadius = 30;

function setupCanvas() {
    canvas.width = 500;
    canvas.height = 500;
}

setupCanvas();

You will achieve something like this:

2: Draw eyeball(circle) at the center of the canvas

We can draw a circle on a canvas using the arc() method.

/* ... */
let radius = 125;
/* ... */

function draw() {
    let centerX1 = canvas.width * 0.5;
    let centerY1 = canvas.height * 0.5;

    pen.beginPath();
    pen.arc(centerX1, centerY1, radius, 0, 2 * Math.PI);
    pen.fillStyle = "white";
    pen.fill();
}

draw();

This circle that we have drawn will be the eyeball of the dog later on...

3: Draw iris the moves along with the cursor.

We will be using the arc() method again to draw a dot. Then we shall fetch the cursor position using EventListeners to update the position of the dot.

let trackerRadius = 30;

let cursorPointer = {
    x: canvas.width * 0.5,
    y: canvas.height * 0.5
};

/* ... */

function updateCursorPointer(pointerX, pointerY) {
    let boundary = canvas.getBoundingClientRect();
    cursorPointer.x = pointerX - boundary.left;
    cursorPointer.y = pointerY - boundary.top;
}

document.addEventListener("mousemove", function(event) {
    updateCursorPointer(event.clientX, event.clientY);
});

function draw() {
    pen.clearRect(0, 0, canvas.width, canvas.height);
/* ... */

    pen.beginPath();
    pen.moveTo(cursorPointer.x, cursorPointer.y);
    pen.arc(cursorPointer.x, cursorPointer.y, trackerRadius, 0, 2 * Math.PI);
    pen.fillStyle = "#03c2fc";
    pen.fill();

/* ... */

    requestAnimationFrame(draw);
}

The requestAnimationFrame() method schedules the draw() method for the next frame. The clearRect() method is used so that the canvas is completely cleared before painting the next frame.

We see that the dot, which will be the iris of the eyeball, moves along with the cursor all over the canvas but not bounded within the eyeball.

3: Bound the iris within the eyeball.

As we can observe from the image that the eyeball is actually a circle. So, in order to bound the iris within the eyeball, we need to check whether the points read from the cursor pointer is actually present within the circle or not.

Let us consider the equation of a circle:

Using the above equation, we can easily check whether the point lies within the cirlce or not.

function updateCursorPointer(pointerX, pointerY) {
let boundary = canvas.getBoundingClientRect();
    let tempX = pointerX - boundary.left;
    let tempY = pointerY - boundary.top;

    let h = canvas.width * 0.5;
    let k = canvas.height * 0.5;

    let boundaryRadius = radius - trackerRadius;
    let u = tempX - h;
    let v = tempY - k;
    let eq = (u * u) + (v * v);

    if(eq <= (boundaryRadius * boundaryRadius)) {
            cursorPointer.x = tempX;
            cursorPointer.y = tempY;
    }
}

4: Move iris wherever the cursor is within the window

As of now, the iris moves along to the cursor only when the cursor is inside the eyeball. In order to move the iris no matter where the cursor is on the window, we will be using the method to find the point of intersection between a line and a circle.

Refer this link for detailed explanation and examples on how to find points of intersection between a line and a circle.

So, when substituting the y obtained from the equation of line in the equation of circle, we get the following equation:

In our case, the circle obviously is the eyeball and the line is obtained from two points - the center of eyeball and cursor pointer's position.

We will find the slope m using the two points, find c from the equation of line y = mx + c and r being the radius of the eyeball.

Let us solve the above quadratic equation using

function lineEquation(x, slope, constant) {
   return (slope * x) + constant;
}

function discriminant(a, b, c) {
  return (b * b) - (4 * a * c);
}

function isPointBetween(x, y, x1, y1, x2, y2) {
  return (x >= Math.min(x1, x2) && x <= Math.max(x1, x2) &&
          y >= Math.min(y1, y2) && y <= Math.max(y1, y2));
}

function findIntersectionPoint(slope, h, k, point1X, point1Y, constant, circleRadius) {
    var a = 1 + (slope * slope);
      var b = -2 * (h + slope * (k - constant));
      var c = (h * h) + (k * k) - (circleRadius * circleRadius) + (constant * (constant - (2 * k)));

    var disc = discriminant(a, b, c);

    if (disc >= 0) {
      const x1 = (-b + Math.sqrt(disc)) / (2 * a);
      const x2 = (-b - Math.sqrt(disc)) / (2 * a);

      const y1 = lineEquation(x1, slope, constant);
      const y2 = lineEquation(x2, slope, constant);

            if(isPointBetween(x1, y1, point1X, point1Y, h, k)) {
                    cursorPointer.x = x1;
                    cursorPointer.y = y1;
            }
            else if(isPointBetween(x2, y2, point1X, point1Y, h, k)) {
                    cursorPointer.x = x2;
                    cursorPointer.y = y2;
            }
        }
}

function findCursorPointerPosition(h, k, tempX, tempY) {
    let boundaryRadius = radius - trackerRadius;
    let u = tempX - h;
    let v = tempY - k;
    let eq = (u * u) + (v * v);

    if(eq <= (boundaryRadius * boundaryRadius)) {
            cursorPointer.x = tempX
            cursorPointer.y = tempY;
    }
    else {
        let x1 = h;
        let y1 = k;
        let x2 = tempX;
        let y2 = tempY;

        let slope = (y2 - y1) / (x2 - x1);

        let constant = y2 - (slope * x2);

        findIntersectionPoint(slope, x1, y1, x2, y2, constant, boundaryRadius);
    }
}

Since the result gives out two points, we need to find the point that is between the center of the eyeball and the cursor pointer.

5: Create another eye

Since our dog needs two eyes to see, we will be repeating the same process for the other eye too. But this time, we will be relocating the center of the circles for the left and the right eyes.

/* ... */

let radius = 50;

/* ... */

function setupCanvas() {
    canvas.width = 250;
    canvas.height = 150;
}

let cursorPointerLeft = {
    x: canvas.width * 0.25,
    y: canvas.height * 0.5
}

let cursorPointerRight = {
    x: canvas.width * 0.75,
    y: canvas.height * 0.5
}

/* ... */

function updateCursorPointer(pointerX, pointerY) {
    let boundary = canvas.getBoundingClientRect();
    let tempX = pointerX - boundary.left;
    let tempY = pointerY - boundary.top;

    let h1 = canvas.width * 0.25;
    let k1 = canvas.height * 0.5;
    let h2 = canvas.width * 0.75;
    let k2 = canvas.height * 0.5;

    findCursorPointerPosition(h1, k1, tempX, tempY, cursorPointerLeft);
    findCursorPointerPosition(h2, k2, tempX, tempY, cursorPointerRight); // Add an additional parameter, cursorPointer, in findCursorPointerPosition() and findIntersectionPoint()
}

/* ... */

function draw() {
    pen.clearRect(0, 0, canvas.width, canvas.height);
    let centerX1 = canvas.width * 0.25;
    let centerY1 = canvas.height * 0.5;
    let centerX2 = canvas.width * 0.75;
    let centerY2 = canvas.height * 0.5;

    pen.beginPath();
    pen.arc(centerX1, centerY1, radius, 0, 2 * Math.PI);
    pen.fillStyle = "white";
    pen.fill();

    pen.beginPath();
    pen.arc(centerX2, centerY2, radius, 0, 2 * Math.PI);
    pen.fillStyle = "white";
    pen.fill();

    pen.beginPath();
    pen.moveTo(cursorPointerLeft.x, cursorPointerLeft.y);
    pen.arc(cursorPointerLeft.x, cursorPointerLeft.y, trackerRadius, 0, 2 * Math.PI);
    pen.fillStyle = "#03c2fc";
    pen.fill();

    pen.beginPath();
    pen.moveTo(cursorPointerLeft.x, cursorPointerLeft.y);
    pen.arc(cursorPointerLeft.x, cursorPointerLeft.y, trackerRadius * 0.75, 0, 2 * Math.PI);
    pen.fillStyle = "black";
    pen.fill();

    pen.beginPath();
    pen.moveTo(cursorPointerRight.x, cursorPointerRight.y);
    pen.arc(cursorPointerRight.x, cursorPointerRight.y, trackerRadius, 0, 2 * Math.PI);
    pen.fillStyle = "#03c2fc";
    pen.fill();

    pen.beginPath();
    pen.moveTo(cursorPointerRight.x, cursorPointerRight.y);
    pen.arc(cursorPointerRight.x, cursorPointerRight.y, trackerRadius * 0.75, 0, 2 * Math.PI);
    pen.fillStyle = "black";
    pen.fill();
    requestAnimationFrame(draw);
}

We have almost achieved what we require but the eyes look like the dog has got its fifth shot of Benedryl in a day >_< !

6: Correcting the eye movement

So instead of having two different centers for the eye we will gonna be having one, common for both.

Let us imagine there is a circle with the same radius as the eyeballs between the two eyeballs. We will be moving the irises according to that imaginary circle. Once we calculated the position according to that circle we will adjust the x-axes of the irises according to the eyeballs.

/* ... */

function findIntersectionPoint(slope, h, k, point1X, point1Y, constant, circleRadius) {
    var a = 1 + (slope * slope);
      var b = -2 * (h + slope * (k - constant));
      var c = (h * h) + (k * k) - (circleRadius * circleRadius) + (constant * (constant - (2 * k)));

    var disc = discriminant(a, b, c);

    if (disc >= 0) {
      const x1 = (-b + Math.sqrt(disc)) / (2 * a);
      const x2 = (-b - Math.sqrt(disc)) / (2 * a);

      const y1 = lineEquation(x1, slope, constant);
      const y2 = lineEquation(x2, slope, constant);

            if(isPointBetween(x1, y1, point1X, point1Y, h, k)) {
                    cursorPointerLeft.x = x1 - canvas.width * 0.25;
                    cursorPointerLeft.y = y1;
                    cursorPointerRight.x = x1 + canvas.width * 0.25;
                    cursorPointerRight.y = y1;
            }
            else if(isPointBetween(x2, y2, point1X, point1Y, h, k)) {
                    cursorPointerLeft.x = x2 - canvas.width * 0.25;
                    cursorPointerLeft.y = y2;
                    cursorPointerRight.x = x2 + canvas.width * 0.25;
                    cursorPointerRight.y = y2;
            }
        }
}

function updateCursorPointer(pointerX, pointerY) {
    let boundary = canvas.getBoundingClientRect();
    let tempX = pointerX - boundary.left;
    let tempY = pointerY - boundary.top;

    let h = canvas.width * 0.5;
    let k = canvas.height * 0.5;

    findCursorPointerPosition(h, k, tempX, tempY);
}

function findCursorPointerPosition(h, k, tempX, tempY) {
    let boundaryRadius = radius - trackerRadius;
    let u = tempX - h;
    let v = tempY - k;
    let eq = (u * u) + (v * v);

    if(eq <= (boundaryRadius * boundaryRadius)) {
            cursorPointerLeft.x = tempX - canvas.width * 0.25;
            cursorPointerLeft.y = tempY;
            cursorPointerRight.x = tempX + canvas.width * 0.25;
            cursorPointerRight.y = tempY;
    }
    else {
        let x1 = h;
        let y1 = k;
        let x2 = tempX;
        let y2 = tempY;

        let slope = (y2 - y1) / (x2 - x1);

        let constant = y2 - (slope * x2);

        findIntersectionPoint(slope, x1, y1, x2, y2, constant, boundaryRadius);
    }
}

/* ... */

To finish off, add your dog face(in my case I designed the dog face in Figma and exported the SVG). And to give a dramatic touch, I reduced the height of the canvas.

Hope you enjoyed this tutorial. Have a nice day!!!