introduce prettierrc formatting
This commit is contained in:
@@ -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
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -17,4 +17,3 @@ export function createShaderProgram(gl, vertexCode, fragCode) {
|
||||
|
||||
return program;
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user