Motion, Design, Art & Code
Published
Edited
May 12, 2019
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() {};
})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.