Public
Edited
Apr 10, 2023
1 star
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px black solid;"/>`
const ctx = canvas.getContext("2d")
let x1 = 250
let y1 = 250
let theta = 0
let x2
let y2
let stepSize = 1
const steps = 500
const framesPerTick = 1
let frame = 0
let tick = 0
const loop = () => {
//ctx.clearRect(0,0,500,500)
if(frame%framesPerTick == 0){
if(tick > 1){
x1 = x2
y1 = y2
}
const dtheta = d3.randomUniform(-Math.PI/6,Math.PI/6)()
theta = theta + dtheta
const dx = Math.cos(theta)*stepSize
const dy = Math.sin(theta)*stepSize
x2 = x1 + dx
y2 = y1 + dy
tick = tick + 1
}
ctx.beginPath()
ctx.moveTo(x1,y1)
ctx.lineTo(x2,y2)
ctx.stroke()
ctx.closePath()
if(tick < steps){
frame = frame + 1
window.requestAnimationFrame(loop)
}
}
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.
