Creative coder working at the intersection of computation and creativity.
await visibility(), bnb({
w: 540,
h: 540,
webgl: true,
fps: 60,
numFrames: 60 * 10,
// record: true,
// video: 'mp4',
setup: (sketch, globals) => {
sketch.fill('white')
sketch.stroke('white')
},
draw: (sketch, time, globals) => {
sketch.background('#1b1b1b');
const loopValue = sketch.sin(time * sketch.TAU);
const radius = sketch.map(loopValue, 0, 1, 0, 180);
// const radius = sketch.map(time, 0, 1, 0, 360)
const proportionalHeight = sketch.height * .75;
const proportionalWidth = sketch.width * .75;
const halfBoundHeight = proportionalHeight / 2;
const halfBoundWidth = proportionalWidth / 2;
const depth = 50;
const size = 5;
sketch.rotateY(sketch.radians(radius));
sketch.translate(halfBoundWidth, halfBoundHeight);
points.map(pt => {
const posX = sketch.map(pt.x, 0, 25, -proportionalWidth/2, proportionalWidth/2) - halfBoundWidth;
const posY = sketch.map(pt.y, 0, 28, -proportionalHeight/2, proportionalHeight/2) - halfBoundHeight;
sketch.push();
sketch.translate(0, 0, -depth);
sketch.circle(posX, posY, size);
sketch.pop();
sketch.push();
sketch.translate(0, 0, depth);
sketch.circle(posX, posY, size);
sketch.pop();
sketch.push();
sketch.line(posX, posY, -depth, posX, posY, depth);
sketch.pop();
})
},
})
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.
