Public
Edited
Apr 12, 2023
3 forks
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x = 150
let y = 150
let frame = 0
let tick = 0
let framesPerTick = 2
const loop = () => {
//ctx.clearRect(0,0,300,300)
if(tick < 50){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
ctx.beginPath()
ctx.arc(x,y,5,0,2*Math.PI)
ctx.fill()
ctx.closePath()
let r = Math.sign(d3.randomUniform(-1,1)())
x = x + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
y = y + 10*r
tick = tick + 1
}
frame = frame + 1
}
loop()
return canvas
}
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px solid black;"/>`
const ctx = canvas.getContext("2d")
let x = 150
let y = 150
let frame = 0
let tick = 0
let framesPerTick = 2
const loop = () => {
//ctx.clearRect(0,0,300,300)
if(tick < 100){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
let r = Math.sign(d3.randomUniform(-1,1)())
const x2 = x + 10*r
r = Math.sign(d3.randomUniform(-1,1)())
const y2 = y + 10*r
ctx.beginPath()
ctx.moveTo(x,y)
ctx.lineTo(x2,y2)
ctx.stroke()
ctx.closePath()
x = x2
y = y2
tick = tick + 1
}
frame = frame + 1
}
loop()
return 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.
