Flun Draw
const canvas = document.createElement('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth * 2
canvas.height = innerHeight * 2
document.body.append(canvas)
canvas.style.width = innerWidth + 'px'
canvas.style.height = innerHeight + 'px'
c.fillStyle = 'white'
c.fillRect(0, 0, canvas.width, canvas.height)
const flun = (
ax = innerWidth,
ay = innerHeight,
r = 0,
x = 0, y = 0,
t = 0,
dt = 0,
spin = 0,
spinc = .1,
rinc = 0,
col = 'black',
hist = []
) => {
const init = () => {
dt = Math.random() * Math.PI * 2
r = 0
rinc = Math.random() * 1
spinc = Math.random() * .01 - .005
col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']
[~~(Math.random() * 3)]
}
init()
return () => {
spin += spinc
if (Math.random() < .005) {
init()
} else {
r += rinc
}
if (Math.random() < .01) {
ax = x
ay = y
const inside = ax > 0 &&
ax < canvas.width &&
ay > 0 &&
ay < canvas.height
if (!inside) {
const p = hist[~~(Math.random() * hist.length)]
ax = p[0]
ay = p[1]
}
init()
}
t += (dt - t) / 22
x = ax + Math.cos(t + spin) * r
y = ay + Math.sin(t + spin) * r
if (x > 0 && x < canvas.width &&
y > 0 && y < canvas.height) {
hist.push([x, y])
}
c.fillStyle = col
c.fillRect(x, y, 4, 4)
}
}
const f = flun()
setInterval(() => {
for (let i = 0; i < 20; i++) f()
}, 16)
Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects