Published
Edited
May 12, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
p5(sketch => {

  sketch.setup = function() {
sketch.createCanvas(960, 420);
    sketch.background(0,0,33);
sketch.smooth();
sketch.noStroke();
sketch.rectMode(sketch.CENTER);
// the loop structure is made up of the following :
// - declaration of a variable with an initial value >>> int i=0;
// - a condition to test the variable >>> i<5000
// - increment or update of the variable as long as the test condition is true

// Then
// For as long as we are within the loop, the program executes what is within the main body
// i.e. between the curly brackets.
for (var i=0; i<5000; i++) {

var x = sketch.random(sketch.width); // generate a random x value
var y = sketch.random(sketch.height); // generate a random y value
var dia = sketch.random(1, 9); // generate a random value for modifying the circle's diameter

// we draw 5000 circles, each with a random position & size
sketch.ellipse(x, y, dia, dia);
}
};
sketch.draw = function() {};

})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more