import {p5, ParticleSystem} from "@tmcw/p5"
p5(sketch => {
let sites = new Array(50).fill(0).map(a => Math.floor(Math.random() * 2));
let rectWidth = 12.5;
sketch.setup = () => {
console.log(sites);
sketch.createCanvas(width, 300);
sketch.stroke('#131313');
for(let i=1;i<sites.length-1;i++){
sites[i] = (sites[i-1] + sites[i+1]) % 2;
}
}
sketch.draw = () => {
sketch.background("#131313");
for(let i=0;i<sites.length - 1;i++) {
sketch.fill(sites[i] == 0 ? "#131313" : "white");
sketch.rect(i*rectWidth,sketch.height/2,rectWidth,rectWidth);
}
}
})
p5(sketch => {
let sites = []
let rectWidth = 12.5;
sketch.setup = () => {
sketch.createCanvas(width, 300);
}
sketch.draw = () => {
sketch.background("#131313");
}
})
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.
