GPU.js Animations

by Harsh Khandeparkar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gpu.js/1.10.4/gpu.min.js"></script>
<canvas id="c"></canvas>
<i id="param"></i>

JavaScript

const canvas = document.getElementById("c");
  const gpu = new GPU({
    canvas: canvas,
    mode: "gpu"
  });

  const size = [720, 480];
  const centerX = size[0] / 2,
    centerY = size[1] / 2;

  const kernel = gpu.createKernel(
    function(x) {
      const dist = Math.sqrt(Math.pow(this.thread.x - this.constants.centerX, 2) + Math.pow(this.thread.y - this.constants.centerY, 2));

      this.color(
        Math.abs(sin(this.thread.x)) * dist / this.constants.centerX,
        Math.abs(sin(this.thread.y)) * this.constants.centerY / (dist * 32),
        Math.abs(cos(x)) * dist / 64
      );
    }, {
      output: size,
      graphical: true,
      constants: {
        centerX,
        centerY,
        sizeX: size[0],
        sizeY: size[1]
      }
    }
  );
  let param = 0.0;
  const doDraw = () => {
    kernel(param);
    param += 0.005;
    document.querySelector('#param').innerText = param;
    window.requestAnimationFrame(doDraw);
  };
  window.requestAnimationFrame(doDraw);