Published
Edited
Oct 5, 2021
Insert cell
Insert cell
{
const width = 300
const height = 300

const canvas = html`<canvas width = ${width} height = ${height} style = "border:1px solid black"/>`
const ctx = canvas.getContext("2d")

const segSize = 10
const stepSize = 2
const framesPerTick = segSize/stepSize

let x = 150
let y = 150
let theta = d3.randomUniform(0,2*Math.PI)()
let tick = 0
let frame = 0

function loop(){
ctx.beginPath()
ctx.moveTo(x,y)
x = x + stepSize*Math.cos(theta)
y = y + stepSize*Math.sin(theta)
ctx.lineTo(x,y)
ctx.stroke()
ctx.closePath()

if(frame%framesPerTick == 0){
tick = tick + 1
theta = d3.randomUniform(0,2*Math.PI)()
}

if(tick < 100){
frame = frame + 1
window.requestAnimationFrame(loop)
}
}

window.requestAnimationFrame(loop)

return canvas
}
Insert cell

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.
Learn more