day6.ts

import { Canvas, CanvasKit as CKType, CanvasKitInit } from 'canvaskit-wasm';
import { makeNoise2D } from 'fast-simplex-noise';
import hexRgb from 'hex-rgb';

((window as unknown as { CanvasKitInit: typeof CanvasKitInit }).CanvasKitInit as typeof CanvasKitInit)({ locateFile: (file) => `https://unpkg.com/canvaskit-wasm@0.19.0/bin/${file}` }).then(main);

function randomInteger(min: number, max: number) {
  let rand = min - 0.5 + Math.random() * (max - min + 1);
  return Math.round(rand);
}

function main(CanvasKit: CKType): void {
  const [width, height] = [1520, 870];
  const cellSize = 10;
  const surface = CanvasKit.MakeCanvasSurface('root');

  function drawGrid(canvas: Canvas): void {
    const [v, h] = [width / cellSize, height / cellSize];
    const alpha = 1;
    const black = new CanvasKit.Paint();
    black.setColor(CanvasKit.Color4f(0.9, 0.9, 0.9, alpha));
    black.setAntiAlias(false);

    for (let x = 0; x <= v; x++) {
      canvas.drawLine(x * (width / v) + 1, 0, x * (width / v) + 1, height, black);
    }

    for (let y = 0; y <= h; y++) {
      canvas.drawLine(0, y * (height / h), width, y * (height / h), black);
    }
  }

  const colors = ['#f0f2ec', '#f08d9b', '#f1e2e8', '#83969c', '#22768b'];
  const shadow = new CanvasKit.Paint();
  shadow.setColor(CanvasKit.Color4f(0, 0, 0, 0.5));

  function calcPerc(min: number, max: number, cur: number): number {
    const count = colors.length;

    const minN = Math.abs(min);
    const maxN = Math.abs(max) + minN;
    const curN = Math.abs(cur) + (minN / 2);

    return Math.round(curN / maxN * count);
  }

  let tick = 1;
  const noise = makeNoise2D(() => Math.random());

  function draw(canvas: Canvas) {
    tick += 0.001;
    surface.requestAnimationFrame(draw)
    const drawDebug = false;

    canvas.clear(CanvasKit.WHITE);
    drawGrid(canvas);

    const radius = 10;
    const columns = width / cellSize;
    const rows = height / cellSize;

    function drawFlow(grid: number[][], min: number, max: number): void {
      grid.forEach((columns, column) => {
        columns.forEach((angle, row) => {
          drawDebug && canvas.drawRect(
            [
              column * cellSize - 1,
              row * cellSize - 1,
              column * cellSize + 1,
              row * cellSize + 1,
            ],
            shadow
          );

          const { red, green, blue } = hexRgb(colors[calcPerc(min, max, angle)] || '#ffffff');
          const paint = new CanvasKit.Paint();
          paint.setColor(CanvasKit.Color4f(red / 256, green / 256, blue / 256, 1));

          canvas.drawRect([
            column * cellSize,
            row * cellSize,
            column * cellSize + cellSize,
            row * cellSize + cellSize,
          ], paint)

          drawDebug && canvas.drawLine(
            column * cellSize,
            row * cellSize,
            column * cellSize + (Math.sin(angle) * radius),
            row * cellSize + (Math.cos(angle) * radius),
            shadow
          );
        });
      });
    }

    const grid: number[][] = [];
    let min = 0;
    let max = 0;

    for (let x = 0; x < columns; x += 1) {
      grid[x] = [];

      for (let y = 0; y < rows; y += 1) {
        const scaledX = x * 0.0025;
        const scaledY = y * 0.005;

        const noiseValue = noise(scaledX, scaledY);

        grid[x][y] = Math.cos((noiseValue * (tick * 2)) * Math.PI) * Math.PI;

        if (min > grid[x][y]) {
          min = grid[x][y];
        }

        if (max < grid[x][y]) {
          max = grid[x][y];
        }
      }
    }

    drawFlow(grid, min, max);
  }

  surface.requestAnimationFrame(draw);
}