Creative coder working at the intersection of computation and creativity.
await visibility(), bnb({
w: 540,
h: 540,
fps: 60,
numFrames: 60 * 3,
// record: true,
// video: 'mp4',
globals: {
offset: 0,
strum: 1,
},
setup: (sketch) => {
sketch.noStroke()
},
draw: (sketch, time, globals) => {
const hslValue = Math.floor(sketch.map(time + 0.5, 0, 1, 0, 360));
const color = `hsl(${hslValue % 360}, 100%, 50%)`;
const numberOfCircles = 4;
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.background(255);
sketch.fill(color)
for (let x = 0; x < numberOfCircles; x++) {
const posX = sketch.map(x, 0, numberOfCircles - 1, -150, 150);
const loopValue = sketch.sin((time + (x * 0.1)) * sketch.TAU);
const height = sketch.map(loopValue, 0, 1, 0, 50);
sketch.circle(posX, height, 50)
}
},
})
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.
