havox/projects/tsp/main.js

import { initWasm } from './wasm.js';
import { setupCanvas, resizeCanvas } from './canvas.js';
import { createShaderProgram } from './shaders.js';
import { draw } from './tsp-gl.js';
import { initPoints } from './utils.js';

const DEFAULT_POINT_COUNT = 36;
const MIN_POINTS = 4;
const MAX_POINTS = 96;
const RADIUS_SIZE = 0.006;

function clampPointCount(value) {
  if (Number.isNaN(value)) {
    return DEFAULT_POINT_COUNT;
  }

  return Math.max(MIN_POINTS, Math.min(MAX_POINTS, value));
}

function createPointFragmentShader(pointCount) {
  return `
  precision mediump float;

  uniform vec2 u_resolution;
  uniform vec2 u_centers[${pointCount}];
  
  void main() {
      vec2 position = gl_FragCoord.xy / u_resolution;
      float aspect = u_resolution.x / u_resolution.y;
      vec2 scaledPosition = vec2(position.x * aspect, position.y);
      float radius = ${RADIUS_SIZE};

      for (int i = 0; i < ${pointCount}; i++) {
          vec2 center = u_centers[i];
          vec2 scaledCenter = vec2(center.x * aspect, center.y);
          float distance = length(scaledPosition - scaledCenter) * (1.0 / aspect);

          if (distance <= radius) {
              gl_FragColor = vec4(0.5, center, 1.0);
              return;
          }
      }

      gl_FragColor = vec4(0.1, 0.1, 0.1, 1.0);
  }
  `;
}

function createLineFragmentShader() {
  return `
    precision mediump float;

    void main(void) {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
  `;
}

async function run() {
  const canvas = document.getElementById('tsp-canvas');
  const pointCountInput = document.getElementById('pointCountInput');
  const applyPointCountButton = document.getElementById(
    'applyPointCountButton'
  );
  const pointCountStatus = document.getElementById('pointCountStatus');

  if (
    !canvas ||
    !pointCountInput ||
    !applyPointCountButton ||
    !pointCountStatus
  ) {
    return;
  }

  const gl = canvas.getContext('webgl2');
  if (!gl) {
    pointCountStatus.textContent = 'WebGL2 unavailable in this browser.';
    return;
  }

  gl.clearColor(0.1, 0.1, 0.1, 1);

  const { initialisePoints, getPointOrder, memory } = await initWasm();

  const vertexCode = `
  attribute vec2 a_position;
  void main(void) {
      gl_Position = vec4(a_position, 0.0, 1.0);
  }
`;

  setupCanvas(gl, canvas);

  const positionBuffer = gl.createBuffer();
  const lineBuffer = gl.createBuffer();

  if (!positionBuffer || !lineBuffer) {
    pointCountStatus.textContent = 'Unable to initialise WebGL buffers.';
    return;
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  const positions = [-1, -1, 3, -1, -1, 3];
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

  const state = {
    scene: null,
    draggingIndex: -1,
  };

  function updateStatus(pointCount) {
    pointCountStatus.textContent = `${pointCount} point${pointCount === 1 ? '' : 's'}`;
  }

  function recalculateRoute(scene) {
    const pointOrderPtr = getPointOrder(scene.pointsPtr, scene.pointCount);
    scene.pointOrder = Array.from(
      new Uint32Array(memory.buffer, pointOrderPtr, scene.pointCount)
    );
  }

  function syncPointsToMemory(scene) {
    scene.pointArray = new Float32Array(
      memory.buffer,
      scene.pointsPtr,
      scene.pointCount * 2
    );

    for (let i = 0; i < scene.points.length; i++) {
      scene.pointArray[i * 2] = scene.points[i].cx;
      scene.pointArray[i * 2 + 1] = scene.points[i].cy;
    }
  }

  function initialiseScene(rawPointCount) {
    const pointCount = clampPointCount(rawPointCount);

    if (state.scene) {
      gl.deleteProgram(state.scene.program);
      gl.deleteProgram(state.scene.lineProgram);
    }

    const pointsPtr = initialisePoints(pointCount, Date.now());
    const pointArray = new Float32Array(
      memory.buffer,
      pointsPtr,
      pointCount * 2
    );
    const points = initPoints(pointArray);
    const program = createShaderProgram(
      gl,
      vertexCode,
      createPointFragmentShader(pointCount)
    );
    const lineProgram = createShaderProgram(
      gl,
      vertexCode,
      createLineFragmentShader()
    );

    state.scene = {
      pointCount,
      pointsPtr,
      pointArray,
      points,
      pointOrder: [],
      program,
      lineProgram,
    };

    recalculateRoute(state.scene);
    resizeCanvas(gl, canvas, program);
    updateStatus(pointCount);
    pointCountInput.value = String(pointCount);
  }

  canvas.addEventListener('mousedown', (e) => {
    if (!state.scene) {
      return;
    }

    const rect = canvas.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width) * 2 - 1;
    const y = 1 - ((e.clientY - rect.top) / rect.height) * 2;

    for (let i = 0; i < state.scene.points.length; i++) {
      const point = state.scene.points[i];
      const dx = 0.5 * x + 0.5 - point.cx;
      const dy = 0.5 * y + 0.5 - point.cy;
      const distance = Math.hypot(dx, dy);

      if (distance <= RADIUS_SIZE) {
        state.draggingIndex = i;
        break;
      }
    }
  });

  canvas.addEventListener('mousemove', (e) => {
    if (!state.scene || state.draggingIndex === -1) {
      return;
    }

    const rect = canvas.getBoundingClientRect();
    state.scene.points[state.draggingIndex].cx =
      (e.clientX - rect.left) / rect.width;
    state.scene.points[state.draggingIndex].cy =
      1 - (e.clientY - rect.top) / rect.height;

    syncPointsToMemory(state.scene);
    recalculateRoute(state.scene);
  });

  function stopDragging() {
    state.draggingIndex = -1;
  }

  canvas.addEventListener('mouseup', stopDragging);
  canvas.addEventListener('mouseleave', stopDragging);

  function applyPointCount() {
    const nextPointCount = clampPointCount(
      Number.parseInt(pointCountInput.value, 10)
    );
    initialiseScene(nextPointCount);
  }

  applyPointCountButton.addEventListener('click', applyPointCount);
  pointCountInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
      applyPointCount();
    }
  });

  pointCountInput.addEventListener('blur', () => {
    pointCountInput.value = String(
      clampPointCount(Number.parseInt(pointCountInput.value, 10))
    );
  });

  window.addEventListener('resize', () => {
    if (!state.scene) {
      return;
    }

    resizeCanvas(gl, canvas, state.scene.program);
  });

  initialiseScene(DEFAULT_POINT_COUNT);

  function render() {
    if (state.scene) {
      draw(
        gl,
        state.scene.points,
        state.scene.program,
        state.scene.lineProgram,
        positionBuffer,
        lineBuffer,
        state.scene.pointOrder,
        1
      );
    }

    requestAnimationFrame(render);
  }

  render();
}

await run();