p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
// Grayscale
s.background(250);
// RGB
s.fill(255, 0, 0);
s.rect(50, 150, 50, 50);
// Hexadecimal
s.fill("#c4c4c4");
s.rect(150, 150, 50, 50);
// Grayscale
s.fill(150);
s.rect(250, 150, 50, 50);
// RGBA
s.fill(0, 0, 255, 100);
s.rect(350, 150, 50, 50);
s.fill(255, 0, 255, 100);
s.rect(360, 160, 50, 50);
// CSS Named Colours (full list: https://developer.mozilla.org/en-US/docs/Web/CSS/named-color)
s.fill("yellow");
s.rect(450, 150, 50, 50);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
s.background(255);
};
s.draw = function () {
s.background(250);
// Lightness 100%
s.fill(0, 100, 50); // Fully saturated red
s.rect(50, 100, 50, 50);
// Lightness 75%
s.fill(0, 100, 75);
s.rect(150, 100, 50, 50);
// Lightness 50%
s.fill(0, 100, 50);
s.rect(250, 100, 50, 50);
// Lightness 25%
s.fill(0, 100, 25);
s.rect(350, 100, 50, 50);
// Saturation 100%
s.fill(0, 100, 50); // Fully saturated red
s.rect(50, 200, 50, 50);
// Saturation 75%
s.fill(0, 75, 50);
s.rect(150, 200, 50, 50);
// Saturation 50%
s.fill(0, 50, 50);
s.rect(250, 200, 50, 50);
// Saturation 25%
s.fill(0, 25, 50);
s.rect(350, 200, 50, 50);
};
})
p5((s) => {
let rectSize = 50;
s.setup = function () {
s.createCanvas(width, height);
s.background(255);
};
s.draw = function () {
s.background(250);
// RGB color mode
s.colorMode(s.RGB, 255, 255, 255);
s.fill(255, 0, 0); // Fully saturated red in RGB
s.rect(50, 150, rectSize, rectSize);
// HSB color mode
s.colorMode(s.HSB, 360, 100, 100); // Set color mode to HSB
s.fill(0, 100, 100); // Fully saturated red in HSB
s.rect(150, 150, rectSize, rectSize);
// HSL color mode
s.colorMode(s.HSL, 360, 100, 100); // Set color mode to HSL
s.fill(0, 100, 50); // Fully saturated red in HSL
s.rect(250, 150, rectSize, rectSize);
};
})
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.
