javascript - gpu.js "Error: not enough arguments for kernel"

Question

I have some heavily calculating canvas effects in a react app that I'm making. I have been trying to figure out how to do it for about 2 days, and It's almost working but I have this one error that I can't seem to figure out.

Here is the code running the calculation for one of the effects:

drawBubbles = () => {
  const ctx = this.Canvas.getContext("2d");

  ctx.strokeStyle = "white";
  ctx.globalAlpha = 0.6;

  if (this.bubbles.length) {
    const gpu = new GPU();
    const kernel = gpu
      .createKernel(function ([
        bubbles,
        canvasWidth,
        canvasHeight,
        beginPath,
        arc,
        stroke,
      ]) {
        const bubble = bubbles[this.thread.x];

        bubble[1] -= bubble[2];
        if (bubble[1] + bubble[2] * 2 < 0) {
          bubble[1] = canvasHeight + bubble[2] * 2;
          bubble[0] = Math.random() * canvasWidth;
        }

        if (Math.floor(Math.random() * 2) === 0) {
          bubble[0] += Math.random() * 6 - 2.5;
        }

        ctx.lineWidth = bubble[2] / 2.5;

        beginPath();
        arc(bubble[0], bubble[1], bubble[2] * 2, 0, 2 * Math.PI);
        stroke();

        return bubble;
      })
      .setOutput([this.bubbles.length]);

    this.bubbles = kernel([
      this.bubbles,
      this.Canvas.width,
      this.Canvas.height,
      ctx.beginPath,
      ctx.arc,
      ctx.stroke,
    ]);
  } else {
    for (let i = 0; i < 15; i++) {
      this.bubbles.push([
        // 0 = X
        Math.random() * this.Canvas.width,

        // 1 = Y
        Math.random() * this.Canvas.height,

        // 2 = Size/Speed
        Math.random() * 3 + 1,
      ]);
    }
  }
};

I got nothing about it when I looked it up, and if I don't implement this then my app will be going at 10-20 fps (or lower on slower computers)

question from:https://stackoverflow.com/questions/65889988/gpu-js-error-not-enough-arguments-for-kernel

Answer 1

Waitting for answers