Published
Edited
Nov 23, 2021
3 stars
{
const width = 500
const ctx = DOM.context2d(width,width)
const noise = new SimplexNoise()
ctx.fillStyle = 'hsla(0,0%,90%,1)'
const n = 30
const w = 7
const particles = []
let s = 100
let r = .3
let ts = 100
for (let i = 0; i < n; i++){
for (let j = 0; j < n; j++){
let ox = i * w + (width/2 - (n * w)/2)
let oy = j * w + (width/2 - (n * w)/2)
const p = {
ox: ox,
oy: oy,
x: ox,
y: oy,
w: w,
dx: noiseLoop(0, {x:ox/s, y:oy/s}, r, noise),
dy: noiseLoop(0, {x:ox/s + 100, y:oy/s}, r, noise),
toff: (noise.noise2D(ox/ts,oy/ts) * .5 + .5) * 5,
}
particles.push(p)
}
}
console.log(particles)
const td = 1/120
let t = 0
while (true) {
//update
for (let p of particles){
let i = smoothstep(mapv(t - p.toff,[0,9], [0,1]))
let k = mapv(t - p.toff, [0.5,9.5], [0,1])
let c = mapv(t - p.toff, [.5,1], [0,1])
p.x = (noiseLoop(i, {x:p.ox/s, y:p.oy/s}, r, noise) - p.dx) * 100 + p.ox
p.y = (noiseLoop(i, {x:p.ox/s + 100, y:p.oy/s}, r, noise) - p.dy) * 100 + p.oy
p.w = Math.pow((Math.cos((k) * Math.PI * 2) * .5 + .5),2) * w + 1
}
//draw
ctx.fillStyle = 'hsla(0,0%,30%,1)'
ctx.fillRect(0,0, width, width)
ctx.fillStyle = 'hsla(0,0%,90%,1)'
for (let p of particles){
ctx.beginPath()
ctx.rect(p.x - p.w/2, p.y - p.w/2, p.w, p.w)
ctx.fill()
ctx.closePath()
}
t += td
yield ctx.canvas
if (t > 17){
t = 0
}
}
}
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.
