Public
Edited
Apr 10, 2023
{
const canvas = html`<canvas width = 500 height = 500 style = "border:1px black solid;"/>`
const ctx = canvas.getContext("2d")
const framesPerTick = 10
const numTicks = 100
let tick = 0
let frame = 0
const walkers = []
for(let i = 0; i < 200; i = i + 1){
const x = d3.randomUniform(0,500)()
const y = d3.randomUniform(0,500)()
const theta = d3.randomUniform(0,2*Math.PI)()
const maxTheta = d3.randomUniform(0,2*Math.PI)()
const stepSize = d3.randomUniform(0,10)()
const walker = new Walker(ctx,x,y,theta,maxTheta,stepSize)
walkers.push(walker)
}
const loop = () => {
if(frame%framesPerTick == 0){
walkers.map(walker => walker.step())
walkers.map(walker => walker.changeTheta())
tick = tick + 1
}
if(tick < numTicks){
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.
