Creative coder working at the intersection of computation and creativity.
await visibility(), bnb({
w: 540,
h: 540,
fps: 30,
numFrames: 60 * 2,
// record: true,
// video: 'mp4',
globals: {
offset: 0,
strum: 1,
},
setup: (sketch) => {
sketch.rectMode(sketch.CENTER)
},
draw: (sketch, time, globals) => {
sketch.background(255);
const hslValue = Math.floor(sketch.map(time + 0.5, 0, 1, 0, 360));
const color = `hsl(${hslValue % 360}, 100%, 50%)`;
sketch.fill(color)
sketch.stroke(color)
sketch.beginShape();
sketch.vertex(0, sketch.height);
for(let x = 0; x < sketch.width; x++){
const angle = globals.offset + x * 0.01;
const y = sketch.map(sketch.sin(angle), -globals.strum, globals.strum, 150, 250);
sketch.vertex(x, y);
}
sketch.vertex(sketch.width, sketch.height);
sketch.endShape();
globals.offset += 0.1;
},
})
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.
