Hello World!

This kind of 'Hello World!' example just draw 20 random circles on the canvas. The simplest way to start with p5.js. Refresh the page to get other new 20 random circles.

Here is the code of the sketch.js file that handle the behavior of this example (you can see all the details on the Github repository):

sketch.js

            
  function setup() {
    // Create the canvas
    var canvas = createCanvas(720, 400);
    canvas.parent('canvas');

    // Set fill color to black
    background(0);
    fill(255);

    // Create 20 random circles to draw
    for(var i = 0; i < 20; i++) {
      var rx = random(720) + 1;
      var ry = random(400) + 1;
      ellipse(rx, ry, 20, 20);
    }
  }

This is the result:

« Go Back