Public
Edited
Apr 13, 2023
{
const canvas = html`<canvas width = 300 height = 300 style = "border:1px black solid;"/>`
const ctx = canvas.getContext("2d")
let frame = 0
let tick = 0
let framesPerTick = 1
const walker = new walker(ctx,150,150,0)
const stepSize = 1
const loop = () => {
if(tick < 100){window.requestAnimationFrame(loop)}
if(frame%framesPerTick == 0){
tick = tick + 1
walker.step(stepSize)
walker.changeTheta()
}
frame = frame + 1
}
loop()
return canvas
}
class walker{
constructor(ctx,x,y,theta){
this.ctx = ctx
this.x = x
this.y = y
this.theta = theta //theta is the direction
}
step(stepSize){
const dx = stepSize*Math.cos(this.theta)
const dy = stepSize*Math.sin(this.theta)
const x2 = this.x + dx
const y2 = this.y + dy
this.ctx.beginPath()
this.ctx.moveTo(this.x,this.y)
this.ctx.lineTo(x2,y2)
this.ctx.stroke()
this.ctx.closePath()
}
changeTheta(){
const dtheta = d3.randomUniform(-Math.PI/6,Math.PI/6)()
this.theta = this.theta + dtheta
}
}
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.
