// https://actionsnippet.com/?p=349

// zxlp : Hidden Sierpiński

const canvas = document.createElement('canvas')

const c = canvas.getContext('2d')

let s = .5

canvas.width = innerWidth * s

canvas.height = innerHeight * s

canvas.style.transformOrigin = '0 0'

canvas.style.scale = 1 / s

canvas.style.imageRendering = 'pixelated'

document.body.append(canvas)

const frame = document.createElement('canvas')

const fc = frame.getContext('2d')

frame.width = canvas.width

frame.height = canvas.height

const copy = document.createElement('canvas')

const cc = copy.getContext('2d')

copy.width = canvas.width

copy.height = canvas.height

frame.style.left = '100px' 

frame.style.top = '100px'

fc.fillStyle = 'red'

fc.fillRect(0, 0, 100, 100)

const _ = c.getImageData(0, 0, canvas.width, canvas.height)

const size = canvas.width * canvas.height * 4

let mx = 0

let mouseX = 0

onpointermove = e => {

  mx = e.clientX

}

function loop() {

  mouseX += (mx - mouseX) / 50

  for (let i = 0; i < size; i += 4) {

    let ox = (~~(i / 4)) % canvas.width

    let oy = (~~(i / 4)) / canvas.width

    let col = ((ox | oy) * mouseX / 20) % 255

    _.data[i] = 0

    _.data[i + 1] = col

    _.data[i + 2] = col

    _.data[i + 3] = 255

  }

  c.putImageData(_, 0, 0)

  requestAnimationFrame(loop);

}

loop();