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

Author

Stephen G. Vinuya

Dec 03,2018

Tags: p5.js Javascript HTML5

My Blogs

Making Simple Bubble Screensaver Animation using p5.js part 1

Author

Stephen G. Vinuya

Leave a comment below...