iwrjgnb
const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth * 2
canvas.height = innerHeight * 2
canvas.style.scale = '.5 .5'
canvas.style.transformOrigin = '0 0'
c.fillStyle = 'rgba(255, 236, 168, 1)'
c.fillRect(0, 0, canvas.width, canvas.height)
document.body.append(canvas)
let width = 300
let height = 300
function cell(ox = 0, oy = 0) {
let ax = ox + width / 2
let ay = oy + height / 2
let x, y
let r = width * Math.random()
let rx = r
let ry = r
if (Math.random() < .5) rx *= Math.random()
if (Math.random() < .5) ry *= Math.random()
let t = Math.random() * 7
let ti = Math.random() * .1 - .05
let te;
let dr = 0
if (ti > 0) {
te = t + Math.random() * 7
dr = 1
} else {
te = t - Math.random() * 7
}
let rm = 0
if (Math.random() < .5) rm = Math.random() * 3
return () => {
x = ax + rx * Math.cos(t)
y = ay + ry * Math.sin(t)
if (rm !== 0) {
rx -= rm;
ry -= rm
}
t += ti
if ((t > te && dr === 1) || (t < te && dr === 0)) {
return
}
c.fillStyle = 'black'
c.fillRect(x, y, 2, 2)
if (Math.random() < .5) {
cls.push(cl(x, y))
}
}
}
function cl(x, y) {
let vy = .2 + Math.random() * 2 - 1
let col = 'rgba(0, 0, 0, 0.08)'
if (Math.random() < .1) col = 'rgba(0, 178, 227, .3)'
if (Math.random() < .01) col = 'rgba(255, 0, 0, .3)'
let vx = 0
if (Math.random() < .03) {
vx = 1
vy = 0;
col = 'rgba(255, 255, 255, .2)'
}
let dead = false;
return () => {
if (dead) return
y += vy
x += vx
if (Math.random() < .01) {
dead = true
}
c.fillStyle = col
c.fillRect(x, y, 2, 2)
}
}
let NUM = 5
let cs = []
let cls = []
for (let j = 0; j < NUM; j++) {
let yy = Math.random() * innerHeight
let xx = Math.random() * innerWidth
let num = 5 + ~~(Math.random() * Math.random() * 10)
if (Math.random() < .3) num = Math.random() * 50
for (let i = 0; i < NUM; i++) {
for (let k = 0; k < num; k++) {
cs.push(cell(xx, yy))
}
}
}
function loop() {
cs.forEach(f => f())
cls.forEach(f => f())
requestAnimationFrame(loop)
}
loop()
Just posting more code from recent shorts… more here