toggle menu

My Blogs

MY Profile

Stephen G. Vinuya
Dec 05,2018

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;
})();


After running, we can now see this as our final result.



Source code: https://github.com/onecompileman/simple-bubble-screen-animation

Try it here: https://www.openprocessing.org/sketch/631480



Read More
MY Profile

Stephen G. Vinuya
Dec 03,2018

Making Simple Bubble Screensaver Animation using p5.js part 1


In this article we are going to make a simple Bubble screen saver like animation in HTML5.


We are going to use p5.js, a Javascript library for rendering web animations in Canvas.

To get started let us download click here.    




Select Single Files > p5.js. 


After that we can now start coding this simple animation.


1. Place the downloaded p5.js file in our project folder, create two files in it named sketch.js and index.html

The folder structure should be like this: 


index.html - Referenced the 2 js files inside the project

DOCTYPE html>
<html lang="en">
<head>
    <title>Simple Bubble Screen savertitle> head>
<body>
    <script src="p5.js">script>
    <script src="sketch.js">script> body>
html>


sketch.js 

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

function draw() { background(0);
}    


setup() and draw() are the two main functions in p5.js

setup - in p5.js being called once here after the document has loaded.

- draw - is being called every frame per second(fps), 

- createCanvas(windowWidth, windowHeight) - creates a canvas on our HTML, where we render our bubble animation with the size same as the window.

- background(0) - Renders black colored canvas


2. Creating bubbles

Let's add a bubble on our canvas, using the ellipse function

function draw() {
background(0);
fill(255); // Fills the bubble with white color
noStroke(); // Remove the border of the bubble
ellipse(width / 2, height / 2, 100,100); // x, y, radiusX, radiusY
}


width / 2 and height / 2 makes our bubble be at the center of our screen


Let's open our index.html and try to see in browser, what our web animation currently looks like.

Cool, now we have our first bubble, the next step would be adding bubbles, every time the mouse is Pressed on the screen.

We are going to use p5.js function mousePressed(), to keep track of mouse clicks on the canvas.


Let's move the background(0), in the setup() for the mean time 

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


Leave the draw() function as blank.

function draw() {

}


And let's create bubble every mouse click.

function mousePressed() {
fill(255); // Fills the bubble with white color
noStroke(); // Remove the border of the bubble
ellipse(mouseX, mouseY, 100, 100); // x, y, radiusX, radiusY
}


mouseX and mouseY is current mouse position in the screen after we clicked the canvas.


After running and playing with mouse clicks, we should see something like this.


Let's try playing with this some more, by using random() function of p5.js.

function mousePressed() {
fill(color(
random(0,255), // min, max
random(0,255),
random(0,255)
));
noStroke(); // Remove the border of the bubble
const radius = random(50,150);
ellipse(mouseX, mouseY, radius, radius); // x, y, radiusX, radiusY
}


- random() accepts two parameters the min and max value range to randomize

color() accepts the rgb values


Let's run it again and try playing with it.




Cool! now we have something like this, next step is to make it move.

Next article: http://onecompileman.com/blogs/2



Read More