Click to generate crazy particles - with Canvas

SamrithaS — Thu, 03 Feb 2022 13:05:40 +0000

Let's use HTML Canvas to generate crazy particles on clicking.

Check it out here:

STEPS

The HTML file contains <canvas></canvas> that would create a canvas element.

The rest of the code belongs to the JS file.
Now that we have the canvas element,

const canvas = document.querySelector("canvas");
const c = canvas.getContext("2d");
canvas.style.background = "black";

This helps us get the canvas element from the DOM,const c = canvas.getContext("2d") defines the drawing context of the canvas which is 2D and canvas.style.background = "black sets a background color to it.

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

Now, we are setting the window's width and height to the canvas's width and height respectively, also making sure that when the window is resized, the width and height are in sync.

Let's create a class named Circle which would help us generate the circular particles on clicking,

class Circle {
    constructor(x, y, color, radius) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.radius = radius;
    }
    draw() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
        c.fillStyle = this.color;
        c.fill();
        c.closePath();
    }
    update() {
        this.draw();
        this.x += Math.random() * 8 - 4;
        this.y += Math.random() * 8 - 4;
    }
}

The parameters of the class are x, y, color and radius corresponding to positions, color and radius of the circle.
There are two methods in the class: draw() and update(),
draw method will help us draw a circle using beginPath() which would begin drawing a path in the canvas and c.arc(x, y, radius, startAngle, endAngle [, counterclockwise]) will help us create an arc, this would take x, y, radius, startAngle, endAngle and counterclockwise(boolean) arguments.

update() is the method that makes the circle particles act a bit crazy by updating the x and y positions of the particles, making it move around a bit.

let prevX;
let prevY;
let circles = [];
document.addEventListener("click", () => {
    clientx = window.event.clientX;
    clienty = window.event.clientY;
    for (let i = 0; i < 10; i++) {
        const x = Math.random() * i * 20 + clientx;
        const y = Math.random() * i * 20 + clienty;
        const radius = Math.random() * 5;
        let val = i * 200 * Math.random() * clienty;
        let perc = Math.random() * 90;
        let color = `hsl(${val}, ${perc}%, 60%)`;
        let rad = Math.random() * 20;
        circles.push(new Circle(x, y, color, rad));
    }
    animate();
});

After adding a click event listener, window.event.clientX and window.event.clientY gives us the vertical and horizontal coordinates of the mouse pointer.
Since I want 10 circles to be generated on each click, I have a loop running from 0 to 10, and each of the circles would have different positions, colors and sizes with the help of Math.random(). Next we'll be creating an instance of the class Circle and pushing these instances into the 'circles' array. Finally, the animate function will be called which is:

function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0, 0, canvas.width, canvas.height);
    circles.forEach((circle) => {
        circle.update();
    });
}

requestAnimationFrame tells the browser that we wish to perform an animation, it takes a callback function, in our case it's the animate function itself - it would be called recursively creating the crazy effect we need.
Last but not the least, for each element of the 'circles' array, which contains all the instances of circles created, we would call the update() method.
Notice that, the update method calls the draw method itself which is why we haven't called it elsewhere. So the update method draws a circle and also updates it's position everytime the animate function is called.

and that's about it.

Thank you for coming this far, hope you loved the blog as much as I loved writing it.
Here's where we can connect:

instagram: https://www.instagram.com/artzy_artoholic/
twitter: https://twitter.com/Samritha22
codepen: https://codepen.io/samritha

My CSS-art Codepens!

SamrithaS — Fri, 02 Jul 2021 13:54:53 +0000

Hello there!
This is Samritha.S, a front-end dev exploring things that make a website interesting.
Welcome to my list of CSS-art codepens

1. Css owl with sneaky eyes

This is a css owl with some javascript.

2. Pure CSS Pizza loader

Who doesn't love pizza? checkout my pure CSS Pizza loader!

3. Pure Css Parrot

4. Moving car

Speedy car with pure css

5. Css man

He says hello.

Thank you for coming this far, hope you loved them as much as I loved creating them.
Here's where we can connect: