const width = document.body.offsetWidth

const height = 300

setTimeout(() => {

  const gpu = new GPU({mode: 'webgl'});

  gpu.addFunction(function toX(width, oldX) {

    return width / 2 - oldX

  })

  gpu.addFunction(function toY(height, oldY) {

    return height / 2 - oldY

  })

  gpu.addFunction(function circle(x, y, radius, red, green, blue) {

    if (Math.pow(x, 2) + Math.pow(y, 2) < Math.pow(radius, 2)) {

      return [red, green, blue]

    } else {

      return [1, 1, 1]

    }

  }, {returnType: 'Array(3)'})

  gpu.addFunction(function red() {

    return [1, 0, 0]

  }, {returnType: 'Array(3)'})

  const r = gpu.createKernel(function(width, height, t) {

    const x = toX(width, this.thread.x)

    const y = toY(height, this.thread.y)

    const rgb = circle(x+t, y, 50, 0, 1, 0)

    this.color(rgb[0], rgb[1], rgb[2]) 

  })

  .setOutput([width, height])

  .setGraphical(true)

  let i = 0

  setInterval(() => r(width, height, i++ / 10), 10)  

​

  const canvas = r.getCanvas();

  canvas.width=width

  canvas.height = height

  document.getElementsByTagName('body')[0].appendChild(canvas);

}, 0)

​

​

​

​

​

​

​