Making Simple Bubble Screensaver Animation using p5.js part 2

This is the continuation from the part 1 of this article series.

What we have accomplished here so far is adding of bubbles with random color and radius on mouse click.

Next step is to make those bubble move around the screen, to do that we need to keep track of bubbles x, y location and as well as its velocity.

1. Creating a bubble object

We need to create a bubbles variable to contain all the bubbles that has been added to our canvas.

var bubbles = [];

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(0);    
}

Next is to create a Bubble Object that will contain position, velocity, color, radius.

var Bubble = (function () {

    function Bubble(pos, vel, col, radius) {
        this.pos = pos;
        this.vel = vel;
        this.col = col;
        this.radius = radius;
    }

    return Bubble;
    
})();

Next is to add show function in it, which is the same code we have in the mousePressed() function

var Bubble = (function () {

    function Bubble(pos, vel, col, radius) {
        this.pos = pos;
        this.vel = vel;
        this.col = col;
        this.radius = radius;
    }

    Bubble.prototype.show = function () {
        noStroke();
        fill(this.col);
        ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
    }

    return Bubble;
    
})();

Now let's move to our mousePressed() function and add new bubble object in the bubbles variable we have.

function mousePressed() {
    const pos = createVector(mouseX, mouseY) // x, y    
    const vel = createVector(0 , 0);
    const col = (color(
        random(0,255), // min, max
        random(0,255),
        random(0,255)
    ));
    const radius = random(50,150);

    bubbles.push(
        new Bubble(pos,vel,col,radius)
    );
}

createVector() takes 3 argument x, y, z which is the coordinates of our bubble, since we are doing this on 2d we are going to ignore z axis

If you try to run this now on our browser, you'll see nothing is displayed on the canvas, its because we have to loop and display all the bubbles.

On our draw() and setup() function, let's display all bubbles that has been created.

function setup() {
    createCanvas(windowWidth, windowHeight);  
}

function draw() {
    background(0);
    bubbles.forEach((bubble) => {
        bubble.show();
    });
}

If you run this on the browser we get to see same results as to our part1 of this article series. But what has improved or change, if we still get the same results?

In this case its easier to keep track and manipulate each bubble's properties since its already wrapped in an Object.

2. Making the Bubbles move

Next step is making our bubbles move, which a lot more easier than you think.

On our bubble object let's add an update() function that adds the velocity to our position, to make the bubbles move.

var Bubble = (function () {

    function Bubble(pos, vel, col, radius) {
        this.pos = pos;
        this.vel = vel;
        this.col = col;
        this.radius = radius;
    }

    Bubble.prototype.show = function () {
        noStroke();
        fill(this.col);
        ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
    }

    Bubble.prototype.update = function () {
        this.pos.add(this.vel);
    }

    return Bubble;
    
})();

On our mousePressed() function let's add a random velocity to our bubble, every mouse click

function mousePressed() {
    const pos = createVector(mouseX, mouseY) // x, y    
    const vel = createVector(random(-4,4),
                             random(-4,4));
    const col = (color(
        random(0,255), // min, max
        random(0,255),
        random(0,255)
    ));
    const radius = random(50,150);

    bubbles.push(
        new Bubble(pos,vel,col,radius)
    );
}

And call the update() function of the bubble on draw

function draw() {
    background(0);
    bubbles.forEach((bubble) => {
        bubble.update();
        bubble.show();
    });
}

If we run this on browser, here's the output.

Next step, is to make the bubbles not to leave the canvas when it hit the edges.

3. Making bubbles stay at the screen

Let's write an edges() function inside the Bubble object, which detects and inverses the velocity if it hits the edges of the canvas.

And let's call the edges() function inside the update() function.

var Bubble = (function () {

    function Bubble(pos, vel, col, radius) {
        this.pos = pos;
        this.vel = vel;
        this.col = col;
        this.radius = radius;
    }

    Bubble.prototype.show = function () {
        noStroke();
        fill(this.col);
        ellipse(this.pos.x, this.pos.y, this.radius, this.radius);
    }

    Bubble.prototype.update = function () {
        this.pos.add(this.vel);
        this.edges();
    }

    Bubble.prototype.edges = function () {
        if (this.pos.x - (this.radius / 2) < 0 || this.pos.x + (this.radius / 2) > width) {
            this.vel.x *= -1;
        }

        if (this.pos.y - (this.radius / 2) < 0 || this.pos.y + (this.radius / 2) > height) {
            this.vel.y *= -1;
        }
    }

    return Bubble;
    
})();