Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
timer = new Timer({
duration: 4,
currentTime: 1,
autoplay: false,
loop: true,
playbackRate: 0.5,
defaultPlaybackRate: 1.,
delay: 200
})
viewof currentTime = videoControls(timer)
timer2 = {
const timer = new Timer();
timer.currentTime = 0.1;
timer.loop = true;
return timer;
}
timer2.duration
timer2.currentTime
timer2.paused
{
let loops = 0;
const div = html``;
function update() {
div.innerHTML = `The timer has looped <strong>${loops} times since the page has loaded</strong>.`;
}
function count() {
loops += 1;
update();
}
timer2.addEventListener('ended', count);
invalidation.then(() => timer2.removeEventListener('ended', count));
update();
timer2.play();
return div;
}
timer3 = new Timer({ duration: 10, autoplay: true, loop: true, delay: 1000 })
animation(timer3)
function animation(timer) {
const height = 33;
const radius = height / 2 - 5;
const context = DOM.context2d(width, height);
let frame;
(function tick() {
const x =
((Math.sin(timer3.currentTime) + 1) / 2) * (width - 2 * radius) + radius;
context.clearRect(0, 0, width, height);
context.beginPath();
context.arc(x, height / 2, radius, 0, 2 * Math.PI);
context.fill();
frame = requestAnimationFrame(tick);
})();
invalidation.then(() => cancelAnimationFrame(frame));
return context.canvas;
}
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.
