p5((s) => {
// store random values in variables
let red = s.random(0, 255)
let green = s.random(0, 255)
let blue = s.random(0, 255)
let height = 400
s.setup = function () {
s.createCanvas(width, height);
s.background(255);
s.noStroke();
s.frameRate(2)
};
s.draw = function () {
// reuse the random numbers previously generated
s.fill(red, green, blue);
s.rect(0, 0, width / 2, height);
s.fill(s.random(0, 255), s.random(0, 255), s.random(0, 255));
s.rect(width / 2, 0, width / 2, height);
};
})
p5((s) => {
let counter = 1
s.setup = function () {
s.createCanvas(width, 250);
s.noStroke();
s.fill(0);
counter = 400;
};
s.draw = function () {
s.background(255);
// add 1 to the value of counter. `counter ++` is a shorthand of `counter += 1` or `counter = counter + 1`
// counter ++;
counter = counter + 2;
// use `counter` as parameter. the % (modulo operater) limits the value:
// 1 % 100 = 1; 2 % 100 = 2; … ; 99 % 100 = 99; 100 % 100 = 0; 101 % 100 = 1
s.rect(0, 50, counter % width, 50);
// alternatively just use the given frameCount value
s.rect(0, 150, s.frameCount % width, 50);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 250);
s.background(255);
s.noStroke();
s.fill(0);
};
s.draw = function () {
s.background(255);
s.rect(0, 50, s.frameCount % width, 50);
s.rect(0, 150, s.millis() / (1000/30) % width, 50);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 250);
s.noStroke();
s.fill(0);
};
s.draw = function () {
s.background(255);
s.frameRate(s.random(3, 10))
s.rect(0, 50, s.frameCount % width, 50);
s.rect(0, 150, s.millis() / (1000/30) % width, 50);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 250);
};
s.draw = function () {
s.translate(s.width / 2, s.height / 2);
s.background(250);
s.rotate(s.frameCount * 0.01);
s.rect(-50, -50, 100, 100);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, 250);
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
s.background(250);
s.noStroke();
};
s.draw = function () {
s.translate(s.width / 2, s.height / 2);
s.fill(s.frameCount % 360, 100, 50)
s.rotate(s.frameCount * 0.01);
s.rect(-50, -50, 100, 100);
};
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
