Creative coder working at the intersection of computation and creativity.
await visibility(), bnb({
w: 540,
h: 540,
fps: 15,
numFrames: 60,
// record: true,
// video: 'mp4',
setup: (sketch) => {
sketch.noStroke()
sketch.rectMode(sketch.CENTER)
},
draw: (sketch, time, globals) => {
const grid = 10;
const hslValue = Math.floor(sketch.map(time + 0.5, 0, 1, 0, 360));
const margin = sketch.width * .2;
sketch.background('white');
for (let x = 0; x < grid; x ++) {
const posY = sketch.map(x, 0, grid, margin, sketch.height - margin);
const size = (sketch.height - margin) / grid;
const step = sketch.map(x, 0, grid - 1, 0, 180);
const hslColor = (hslValue - step) % 360;
const color = `hsl(${hslColor}, 100%, 50%)`;
sketch.fill(color)
sketch.rect(sketch.height / 2, posY, sketch.width * .1, 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.
