p5(sketch => {
let system;
const c = sketch.color('#099268');
sketch.setup = function() {
sketch.createCanvas(700, 300);
sketch.textAlign(sketch.CENTER);
sketch.textFont('sans-serif');
sketch.textStyle(sketch.BOLD);
};
sketch.draw = function() {
sketch.translate(sketch.millis() / 10 % sketch.width, sketch.height / 2);
sketch.background(viewof background.valueAsNumber);
sketch.fill(c).textSize(100);
sketch.text('hello 👋🏿', 0, 0);
};
})
p5(sketch => {
let bubbles;
sketch.setup = function() {
sketch.createCanvas(900, 400);
bubbles = new ParticleSystem(sketch, sketch.createVector(sketch.width, 0));
};
sketch.draw = function() {
sketch.background("#a5d8ff");
bubbles.addParticle();
bubbles.run();
}
})
p5(sketch => {
let xScale = 0.015; let yScale = 0.02;
let gap; let offset;
sketch.setup = function() {
sketch.createCanvas(900, 400);
};
sketch.draw = function() {
sketch.background("#3d7262");
sketch.noStroke();
sketch.fill("RGBA(174, 62, 201, .8)");
// Using Perlin Noise algorithm (see https://p5js.org/examples/repetition-noise/)
gap = viewof g.valueAsNumber;
offset = 8;
for (let x = gap / 2; x < sketch.width; x += gap) {
for (let y = gap / 2; y < sketch.height; y += gap) {
let noiseValue = sketch.noise((x + offset) * xScale, (y + offset) * yScale);
let diameter = noiseValue * gap;
sketch.circle(x, y, diameter);
}
}
}
})
import {p5} from "@tmcw/p5";
//import {p5, ParticleSystem} from "@tmcw/p5"
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.
