Published
Edited
Mar 25, 2021
Insert cell
Insert cell
(await visibility(),
bnb({
w: 540,
h: 540,
fps: 60,
numFrames: 60 * 5,
// record: true,
// video: 'mp4',
draw: (sketch, time, globals) => {
sketch.background('black');
sketch.translate(sketch.width / 2, sketch.height / 2);

const circleHeight = 200;
const angle = sketch.map(time * .5, 0, 1, 0, 90);
const mouthDegrees = sketch.map(sketch.sin(angle), -1, 1, 0, 30);
const hslValue = Math.floor(sketch.map(time + 0.5, 0, 1, 0, 360));
const color = `hsl(${hslValue % 360}, 100%, 50%)`;

sketch.fill('yellow');
sketch.arc(
0,
0,
circleHeight,
circleHeight,
sketch.radians(0 + mouthDegrees),
sketch.radians(360 - mouthDegrees),
sketch.PIE
);
}
}))
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more