From 690360c3f26d68c1dfa3560d48cb9ac11e681078 Mon Sep 17 00:00:00 2001 From: Maciej Samborski Date: Mon, 9 Dec 2024 23:46:48 +0100 Subject: [PATCH] Moved Vec2 and Vec3 to common.ts file --- common.js | 59 ++++++++++++++++++++++++++++++++++++ common.ts | 74 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- script.js | 66 ++-------------------------------------- script.ts | 83 ++------------------------------------------------- tsconfig.json | 2 +- 6 files changed, 140 insertions(+), 146 deletions(-) create mode 100644 common.js create mode 100644 common.ts diff --git a/common.js b/common.js new file mode 100644 index 0000000..1a9768c --- /dev/null +++ b/common.js @@ -0,0 +1,59 @@ +class Vec2 { + x; + y; + constructor(x, y) { + this.x = x; + this.y = y; + } + add(other) { + this.x += other.x; + this.y += other.y; + } + addNew(other) { + return new Vec2(this.x + other.x, this.y + other.y); + } + sub(other) { + this.x -= other.x; + this.y -= other.y; + } + mult(scalar) { + this.x *= scalar; + this.y *= scalar; + } + splatToArray() { + return [this.x, this.y]; + } + static angle(angle) { + const eps = 1e-6; + let x = Math.cos(angle); + let y = Math.sin(angle); + if ((x > 0 && x < eps) + || (x < 0 && x > -eps)) + x = 0; + if ((y > 0 && y < eps) + || (y < 0 && y > -eps)) + y = 0; + return new Vec2(x, y); + } +} +class Vec3 { + x; + y; + z; + constructor(x, y, z) { + this.x = x; + this.y = y; + this.z = z; + } + add(other) { + this.x += other.x; + this.y += other.y; + this.z += other.z; + } + sub(other) { + this.x -= other.x; + this.y -= other.y; + this.z -= other.z; + } +} +export { Vec2, Vec3 }; diff --git a/common.ts b/common.ts new file mode 100644 index 0000000..2dfbf41 --- /dev/null +++ b/common.ts @@ -0,0 +1,74 @@ +class Vec2 { + x: number; + y: number; + + constructor(x: number, y: number) { + this.x = x; + this.y = y; + } + + add(other: Vec2) { + this.x += other.x; + this.y += other.y; + } + + addNew(other: Vec2): Vec2 { + return new Vec2(this.x + other.x, this.y + other.y); + } + + sub(other: Vec2) { + this.x -= other.x; + this.y -= other.y; + } + + mult(scalar: number) { + this.x *= scalar; + this.y *= scalar; + } + + splatToArray(): Array { + return [this.x, this.y]; + } + + static angle(angle: number): Vec2 { + const eps = 1e-6; + let x = Math.cos(angle); + let y = Math.sin(angle); + + if ((x > 0 && x < eps) + || (x < 0 && x > -eps)) + x = 0; + + if ((y > 0 && y < eps) + || (y < 0 && y > -eps)) + y = 0; + + return new Vec2(x, y); + } +} + +class Vec3 { + x: number; + y: number; + z: number; + + constructor(x: number, y: number, z: number) { + this.x = x; + this.y = y; + this.z = z; + } + + add(other: Vec3) { + this.x += other.x; + this.y += other.y; + this.z += other.z; + } + + sub(other: Vec3) { + this.x -= other.x; + this.y -= other.y; + this.z -= other.z; + } +} + +export {Vec2, Vec3}; diff --git a/index.html b/index.html index dbd3d39..70a71c5 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - + diff --git a/script.js b/script.js index 0f7a326..6759376 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,4 @@ -"use strict"; +import { Vec2 } from "./common.js"; var vertexShaderSource = `#version 300 es @@ -55,10 +55,6 @@ function createProgram(ctx, vertexShaderSource, fragmentShaderSource) { } return program; } -function createUniform(ctx, program, name) { - const loc = ctx.getUniformLocation(program, name); - return loc; -} function initializeContext(canvasId) { const canvas = document.getElementById(canvasId); const ctx = canvas.getContext("webgl2", { antialias: false }); @@ -192,64 +188,6 @@ class Graphics { return loc; } } -class Vec2 { - x; - y; - constructor(x, y) { - this.x = x; - this.y = y; - } - add(other) { - this.x += other.x; - this.y += other.y; - } - addNew(other) { - return new Vec2(this.x + other.x, this.y + other.y); - } - sub(other) { - this.x -= other.x; - this.y -= other.y; - } - mult(scalar) { - this.x *= scalar; - this.y *= scalar; - } - splatToArray() { - return [this.x, this.y]; - } - static angle(angle) { - const eps = 1e-6; - let x = Math.cos(angle); - let y = Math.sin(angle); - if ((x > 0 && x < eps) - || (x < 0 && x > -eps)) - x = 0; - if ((y > 0 && y < eps) - || (y < 0 && y > -eps)) - y = 0; - return new Vec2(x, y); - } -} -class Vec3 { - x; - y; - z; - constructor(x, y, z) { - this.x = x; - this.y = y; - this.z = z; - } - add(other) { - this.x += other.x; - this.y += other.y; - this.z += other.z; - } - sub(other) { - this.x -= other.x; - this.y -= other.y; - this.z -= other.z; - } -} function fullscreenCanvas(id) { const canvas = document.getElementById(id); canvas.width = window.innerWidth; @@ -268,7 +206,7 @@ function draw() { const position = new Vec2(ctx.canvas.width / 2 - 100, ctx.canvas.height / 2 - 100); gfx.clear(0, 0, 0, 0); ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height); - ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1); + ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1); drawRectangle(gfx, position, new Vec2(200, 200)); drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); diff --git a/script.ts b/script.ts index 8ca9ae7..ad42b51 100644 --- a/script.ts +++ b/script.ts @@ -1,3 +1,5 @@ +import { Vec2 } from "./common.js"; + var vertexShaderSource = `#version 300 es @@ -68,12 +70,6 @@ function createProgram(ctx: WebGL2RenderingContext, vertexShaderSource: string | return program; } -function createUniform(ctx: WebGL2RenderingContext, program: WebGLProgram, name: string): WebGLUniformLocation | null { - const loc = ctx.getUniformLocation(program, name); - - return loc; -} - function initializeContext(canvasId: string): WebGL2RenderingContext | null { const canvas = document.getElementById(canvasId) as HTMLCanvasElement; const ctx = canvas.getContext("webgl2", {antialias: false}); @@ -243,79 +239,6 @@ class Graphics { } } -class Vec2 { - x; - y; - - constructor(x: number, y: number) { - this.x = x; - this.y = y; - } - - add(other: Vec2) { - this.x += other.x; - this.y += other.y; - } - - addNew(other: Vec2): Vec2 { - return new Vec2(this.x + other.x, this.y + other.y); - } - - sub(other: Vec2) { - this.x -= other.x; - this.y -= other.y; - } - - mult(scalar: number) { - this.x *= scalar; - this.y *= scalar; - } - - splatToArray(): Array { - return [this.x, this.y]; - } - - static angle(angle: number): Vec2 { - const eps = 1e-6; - let x = Math.cos(angle); - let y = Math.sin(angle); - - if ((x > 0 && x < eps) - || (x < 0 && x > -eps)) - x = 0; - - if ((y > 0 && y < eps) - || (y < 0 && y > -eps)) - y = 0; - - return new Vec2(x, y); - } -} - -class Vec3 { - x; - y; - z; - - constructor(x: number, y: number, z: number) { - this.x = x; - this.y = y; - this.z = z; - } - - add(other: Vec3) { - this.x += other.x; - this.y += other.y; - this.z += other.z; - } - - sub(other: Vec3) { - this.x -= other.x; - this.y -= other.y; - this.z -= other.z; - } -} - function fullscreenCanvas(id: string) { const canvas = document.getElementById(id) as HTMLCanvasElement; canvas.width = window.innerWidth; @@ -338,7 +261,7 @@ function draw() { gfx.clear(0, 0, 0, 0); ctx.uniform2f(gfx.getUniform("u_resolution"), ctx.canvas.width, ctx.canvas.height); - ctx.uniform4f(gfx.getUniform("u_color"), 0.5, 0.2, 0.2, 1); + ctx.uniform4f(gfx.getUniform("u_color"), Math.random(), Math.random(), Math.random(), 1); drawRectangle(gfx, position, new Vec2(200, 200)) drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]); drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100)); diff --git a/tsconfig.json b/tsconfig.json index 8b80bf7..41ff6ae 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -25,7 +25,7 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "commonjs", /* Specify what module code is generated. */ + "module": "es2022", /* Specify what module code is generated. */ // "rootDir": "./", /* Specify the root folder within your source files. */ // "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */