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