introduce prettierrc formatting

This commit is contained in:
John Gatward
2026-03-31 22:19:53 +01:00
parent 415b76532a
commit 7c58ce135c
100 changed files with 85618 additions and 11596 deletions

View File

@@ -6,7 +6,7 @@ export function setupCanvas(gl, canvas) {
return {
canvas,
gl,
aspectRatio: canvas.width / canvas.height
aspectRatio: canvas.width / canvas.height,
};
}
@@ -15,5 +15,9 @@ export function resizeCanvas(gl, canvas, program) {
canvas.height = canvas.clientHeight * window.devicePixelRatio;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.useProgram(program);
gl.uniform2f(gl.getUniformLocation(program, "u_resolution"), canvas.width, canvas.height);
gl.uniform2f(
gl.getUniformLocation(program, 'u_resolution'),
canvas.width,
canvas.height
);
}

View File

@@ -1,8 +1,8 @@
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";
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;
@@ -57,28 +57,31 @@ function createLineFragmentShader() {
}
async function run() {
const canvas = document.getElementById("tsp-canvas");
const pointCountInput = document.getElementById("pointCountInput");
const applyPointCountButton = document.getElementById("applyPointCountButton");
const pointCountStatus = document.getElementById("pointCountStatus");
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) {
if (
!canvas ||
!pointCountInput ||
!applyPointCountButton ||
!pointCountStatus
) {
return;
}
const gl = canvas.getContext("webgl2");
const gl = canvas.getContext('webgl2');
if (!gl) {
pointCountStatus.textContent = "WebGL2 unavailable in this browser.";
pointCountStatus.textContent = 'WebGL2 unavailable in this browser.';
return;
}
gl.clearColor(0.1, 0.1, 0.1, 1);
const {
initialisePoints,
getPointOrder,
memory
} = await initWasm();
const { initialisePoints, getPointOrder, memory } = await initWasm();
const vertexCode = `
attribute vec2 a_position;
@@ -93,7 +96,7 @@ async function run() {
const lineBuffer = gl.createBuffer();
if (!positionBuffer || !lineBuffer) {
pointCountStatus.textContent = "Unable to initialise WebGL buffers.";
pointCountStatus.textContent = 'Unable to initialise WebGL buffers.';
return;
}
@@ -103,20 +106,26 @@ async function run() {
const state = {
scene: null,
draggingIndex: -1
draggingIndex: -1,
};
function updateStatus(pointCount) {
pointCountStatus.textContent = `${pointCount} point${pointCount === 1 ? "" : "s"}`;
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));
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);
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;
@@ -133,10 +142,22 @@ async function run() {
}
const pointsPtr = initialisePoints(pointCount, Date.now());
const pointArray = new Float32Array(memory.buffer, pointsPtr, pointCount * 2);
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());
const program = createShaderProgram(
gl,
vertexCode,
createPointFragmentShader(pointCount)
);
const lineProgram = createShaderProgram(
gl,
vertexCode,
createLineFragmentShader()
);
state.scene = {
pointCount,
@@ -145,7 +166,7 @@ async function run() {
points,
pointOrder: [],
program,
lineProgram
lineProgram,
};
recalculateRoute(state.scene);
@@ -154,7 +175,7 @@ async function run() {
pointCountInput.value = String(pointCount);
}
canvas.addEventListener("mousedown", (e) => {
canvas.addEventListener('mousedown', (e) => {
if (!state.scene) {
return;
}
@@ -165,8 +186,8 @@ async function run() {
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 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) {
@@ -176,14 +197,16 @@ async function run() {
}
});
canvas.addEventListener("mousemove", (e) => {
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;
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);
@@ -193,26 +216,30 @@ async function run() {
state.draggingIndex = -1;
}
canvas.addEventListener("mouseup", stopDragging);
canvas.addEventListener("mouseleave", stopDragging);
canvas.addEventListener('mouseup', stopDragging);
canvas.addEventListener('mouseleave', stopDragging);
function applyPointCount() {
const nextPointCount = clampPointCount(Number.parseInt(pointCountInput.value, 10));
const nextPointCount = clampPointCount(
Number.parseInt(pointCountInput.value, 10)
);
initialiseScene(nextPointCount);
}
applyPointCountButton.addEventListener("click", applyPointCount);
pointCountInput.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
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)));
pointCountInput.addEventListener('blur', () => {
pointCountInput.value = String(
clampPointCount(Number.parseInt(pointCountInput.value, 10))
);
});
window.addEventListener("resize", () => {
window.addEventListener('resize', () => {
if (!state.scene) {
return;
}

View File

@@ -17,4 +17,3 @@ export function createShaderProgram(gl, vertexCode, fragCode) {
return program;
}

View File

@@ -1,7 +1,16 @@
// tsp-gl.js
import { updateLines } from "./utils.js";
import { updateLines } from './utils.js';
export function draw(gl, points, program, lineProgram, positionBuffer, lineBuffer, pointOrder, aspectRatio) {
export function draw(
gl,
points,
program,
lineProgram,
positionBuffer,
lineBuffer,
pointOrder,
aspectRatio
) {
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw Circles
@@ -22,10 +31,10 @@ function updateCircleUniforms(gl, points, program, positionBuffer) {
gl.useProgram(program);
gl.uniform2fv(gl.getUniformLocation(program, "u_centers"), centerArray);
gl.uniform2fv(gl.getUniformLocation(program, 'u_centers'), centerArray);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positionAttribLoc = gl.getAttribLocation(program, "a_position");
const positionAttribLoc = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttribLoc);
gl.vertexAttribPointer(positionAttribLoc, 2, gl.FLOAT, false, 0, 0);
@@ -38,7 +47,7 @@ function drawLines(gl, program, buffer, lineVertices) {
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, lineVertices, gl.DYNAMIC_DRAW);
const positionAttribLoc = gl.getAttribLocation(program, "a_position");
const positionAttribLoc = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttribLoc);
gl.vertexAttribPointer(positionAttribLoc, 2, gl.FLOAT, false, 0, 0);

View File

@@ -1,24 +1,27 @@
export async function initWasm() {
let wasmMemory = new WebAssembly.Memory({
initial: 256,
maximum: 256
maximum: 256,
});
let importObject = {
env: {
memory: wasmMemory,
}
},
};
const response = await fetch("./main.wasm");
const wasmModule = await WebAssembly.instantiateStreaming(response, importObject);
const { initialisePoints, getPointOrder, memory } = wasmModule.instance.exports;
const response = await fetch('./main.wasm');
const wasmModule = await WebAssembly.instantiateStreaming(
response,
importObject
);
const { initialisePoints, getPointOrder, memory } =
wasmModule.instance.exports;
return {
initialisePoints,
getPointOrder,
memory,
wasmMemory
}
wasmMemory,
};
}