wave-simulator.ts

import { Canvas, CanvasKit as CKType, CanvasKitInit } from 'canvaskit-wasm';

type Cell = {
  position: number;
  speed: number;
  mass: number;
};
type CKInit = typeof CanvasKitInit;
type Params = {
  canvas: {
    width: number;
    height: number;
  };
  cellsCount: number;
};

const params: Params = {
  canvas: {
    width: 200,
    height: 100,
  },
  cellsCount: 300,
};
(window as unknown as { CanvasKitInit: CKInit })
  .CanvasKitInit({
    locateFile: file => `https://unpkg.com/canvaskit-wasm@0.19.0/bin/${file}`
  })
  .then((ck) => {
    //console.clear();
    main(ck, params);
  });

function createPaint(CanvasKit: CKType, r: number, g: number, b: number, a: number) {
  const paint = new CanvasKit.Paint();
  paint.setColor(CanvasKit.Color4f(r, g, b, a));
  paint.setAntiAlias(false);

  return paint;
}

function main(CanvasKit: CKType, params: Params): void {
  let frame = 0;
  let cells: Cell[][] = [];

  for (let x = 0; x <= params.canvas.width; x += 1) {
    cells.push(
      Array(params.canvas.height)
        .fill(0)
        .map((_, y) => ({
          speed: 0,
          // position: x === 100 ? 10 : 0,
          position: 0,
          mass: 1,
        }))
    );
  }

  for (let i = 0; i < 1; i++) {
    for (let j = 0; j < params.canvas.height - 1; j++) {
      cells[70 + i + Math.round(Math.sin(j / 18) * 8)][j].mass = 0;
    }
  }

  cells[130][50].position = 50;
  for (let i = 120; i < 140; i++) {
    for (let j = 40; j < 60; j++) {
      cells[i][j].mass = 0.1;
    }
  }

  const surface = CanvasKit.MakeCanvasSurface('root');

  const [
    blackPaint,
  ] = [
    createPaint(CanvasKit, 0, 0, 0, 1),
  ];

  const calcCells = () => {
    for (let indexX = 1; indexX < params.canvas.width - 1; indexX++) {
      for (let indexY = 1; indexY < params.canvas.height - 1; indexY++) {
        let force = (
          cells[indexX - 1][indexY].position
          + cells[indexX + 1][indexY].position
          + cells[indexX][indexY - 1].position
          + cells[indexX][indexY + 1].position
        ) / 4;

        cells[indexX][indexY].speed += ((force - cells[indexX][indexY].position) * cells[indexX][indexY].mass);
      }
    }

    for (let indexX = 0; indexX < params.canvas.width - 1; indexX++) {
      for (let indexY = 0; indexY < params.canvas.height - 1; indexY++) {
        cells[indexX][indexY].position += cells[indexX][indexY].speed;
      }
    }
  }

  const drawCells = (canvas: Canvas) => {
    surface.flush();
    canvas.clear(CanvasKit.WHITE);
    cells.forEach((cellsY, indexX) => {
      cellsY.forEach((cell, indexY) => {
        const clr = createPaint(CanvasKit, 0, 0, 0, (cell.mass + cell.position) / 5);

        canvas.drawRect(
          [
            indexX,
            indexY,
            (indexX + 1),
            indexY + 1,
          ],
          cell.mass === 0 ? blackPaint : clr,
        );
      });
    });
  }

  function draw(canvas: Canvas) {
    drawCells(canvas);
    calcCells();
    frame += 1;
    surface.requestAnimationFrame(draw);
  }

  surface.requestAnimationFrame(draw);
}