Published
Edited
May 10, 2020
4 stars
{
const ctx = DOM.context2d(500,500)
let t = 0
while (true){
t += 1
ctx.fillStyle = 'rgba(255,255,255,1)'
ctx.fillRect(0,0,500,500)
ctx.strokeStyle = 'rgba(0,0,0,.5)'
//ctx.moveTo(250,100)
for (let j = 1; j < 20; j++){
ctx.beginPath()
ctx.strokeStyle = `hsla(${j/20 * 360}, 80%, 80%, .8)`
for (let i = 0; i < 300; i++){
const percent_height = i/300
const c = (-Math.pow(2 * percent_height - 1,2) + 1)
const x = 250 + Math.sin(-t/50 + (j/10) + i/50) * 50 * c
const y = i + 100
ctx.lineTo(x, y)
}
ctx.stroke()
}
yield ctx.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.
