Public
Edited
Jul 26, 2023
Fork of Flowfield 1
1 fork
Insert cell
Insert cell
container = container_from(canvas);
Insert cell
sketch = function( p ) {
let res = 10;
let count = 20000;
p.setup = () => {
p.createCanvas(p.windowWidth, 800);
p.stroke(255);
p.noFill();
p.background(0);
p.noLoop();
}

p.draw = () => {
// for(let x = 0; x < p.width; x += res) {
// for(let y = 0; y < p.height; y += res) {
// let value = getValue(x, y);
// render(value, x, y);
// }
// }
for(let i = 0; i < count; i++) {
let x = Math.random() * p.width,
y = Math.random() * p.height;

let value = getValue(x, y);
render(value, x, y);
}
}

const getValue = (x, y) => {
return (x + y) * 0.01 * Math.PI * 2;
}

const render = (value, x, y) => {
p.push();
p.translate(x,y);
p.rotate(value);
p.beginShape();
p.vertex(0,0);
p.vertex(res, 0);
p.endShape(p.CLOSE);
p.pop();
}
}
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more