Speed Coded Cosine Dither
d = document
b = d.body
wh = 300
hs = wh / 2
S = 1.5
with(
b.appendChild(Object.assign(
d.createElement`canvas`, {
width: wh, height: wh
})).getContext`2d`) {
canvas.style.transformOrigin = '0 0'
canvas.style.transform = `scale(${S})`
canvas.style.imageRendering = 'pixelated'
fillStyle = 'gray'
fillRect(0, 0, wh, wh)
shadowBlur = 80
shadowColor = 'black';
shadowOffsetY = 20
for (let i = 0; i < 70; i++) {
save()
translate(hs, hs)
rotate(i / 33)
scale(1 - i / 100, 1)
translate(-hs, -hs)
fillStyle = `hsl(${i << 2}, 50%, 50%)`
beginPath()
arc(hs, hs, hs * .8, 0, 7)
fill()
restore()
shadowColor = 'transparent'
shadowBlur = 0
}
C = Object.assign(d.createElement`canvas`, {
width: wh, height: wh
}).getContext('2d')
C.drawImage(canvas, 0, 0);
im = getImageData(0, 0, wh, wh);
p = im.data
size = wh * wh * 4
modd = Math.random() * 5550
for (let i = 0; i < size; i += 4) {
if (Math.random() < 0.0001) modd = Math.random() * 5550
M = Math.cos(i % modd) * 255
p[i] = M < p[i] ? 255 : 0;
p[i + 1] = M < p[i + 1] ? 255 : 0;
p[i + 2] = M < p[i + 2] ? 255 : 0;
}
putImageData(im, 0, 0);
globalCompositeOperation = 'hard-light'
drawImage(C.canvas, 0, 0);
}
Some speed-coded canvas stuff with a dither inspired by #genuary2022