Creative coder working at the intersection of computation and creativity.
await visibility(), bnb({
w: 540,
h: 540,
fps: 60,
numFrames: 60 * 5,
// record: true,
// video: 'mp4',
draw: (sketch, time, globals) => {
sketch.translate(sketch.width / 2, sketch.height / 2);
sketch.background('#478a54')
sketch.stroke('#9cbd64')
sketch.fill('#9cbd64')
const steps = 10;
for (let idx = 0; idx < steps; idx++) {
for (let idx2 = 0; idx2 < steps; idx2++) {
const posX = sketch.map(idx, 0, steps - 1, -200, 200)
const posY = sketch.map(idx2, 0, steps - 1, -200, 200)
const timeStep = sketch.map(time, 0, 1, 0, steps)
const size = ((idx - timeStep + (idx2 * 4)) % steps) * 5.5
sketch.circle(posX, posY, size)
}
}
sketch.stroke('#d8db9b')
sketch.fill('#d8db9b')
for (let idx = 0; idx < steps; idx++) {
for (let idx2 = 0; idx2 < steps; idx2++) {
const posX = sketch.map(idx, 0, steps - 1, -150, 150)
const posY = sketch.map(idx2, 0, steps - 1, -150, 150)
const timeStep = sketch.map(time, 0, 1, 0, steps)
const size = ((idx - timeStep + (idx2 * 8)) % steps) * 4.5
sketch.circle(posX, posY, size)
}
}
},
})
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.
