DISK 03 / PLASMA

plasma, the moving oil-on-water colour the demo makers of the early nineties showed off with: four sine waves added together at every pixel, and the colours cycled through a palette so it never stops flowing

a floppy disk out of the vending machine, run by pino on the computer at the internet cafe, with colder colours. a demoscene classic; written again for the cafe.

function setup(ctx, W, H) {
var k = { hue: 0, speed: 1, scale: 1 }
Object.assign(k, {"hue":2})
var n = 128
var c = document.createElement('canvas')
c.width = n
c.height = n
var cx = c.getContext('2d')
var pal = []
for (var i = 0; i < 256; i++) {
  var a = Math.PI * i / 128
  pal.push([128 + 127 * Math.sin(a + k.hue) | 0, 128 + 127 * Math.sin(a * 2 + 2 + k.hue) | 0, 128 + 127 * Math.sin(a * 3 + 4) | 0])
}
return { k: k, n: n, c: c, cx: cx, img: cx.createImageData(n, n), pal: pal }
}
function update(state, t, W, H) {
state.time = t * state.k.speed
}
function render(ctx, state, t, W, H) {
var n = state.n, d = state.img.data, T = (state.time || t) / 20, s = 16 * state.k.scale, pal = state.pal
for (var y = 0; y < n; y++) {
  for (var x = 0; x < n; x++) {
    var v = Math.sin(x / s + T) + Math.sin(y / (s / 2) - T * 0.7) + Math.sin((x + y) / s + T * 0.5) + Math.sin(Math.sqrt((x - 64) * (x - 64) + (y - 64) * (y - 64)) / (s / 2) - T)
    var c = pal[((v * 32 + T * 40) | 0) & 255]
    var i = (y * n + x) * 4
    d[i] = c[0]; d[i + 1] = c[1]; d[i + 2] = c[2]; d[i + 3] = 255
  }
}
state.cx.putImageData(state.img, 0, 0)
ctx.imageSmoothingEnabled = false
ctx.drawImage(state.c, 0, 0, W, H)
}

more of these