common.js

@@ -1,8 +1,3 @@
-function initializeContext(canvasId) {
-    const canvas = document.getElementById(canvasId);
-    const ctx = canvas.getContext("webgl2", { antialias: false });
-    return ctx;
-}
 class Vec2 {
     x;
     y;
@@ -14,16 +9,9 @@ class Vec2 {
         this.x += other.x;
         this.y += other.y;
     }
-    addScalar(scalar) {
-        this.x += scalar;
-        this.y += scalar;
-    }
     addNew(other) {
         return new Vec2(this.x + other.x, this.y + other.y);
     }
-    addScalarNew(scalar) {
-        return new Vec2(this.x + scalar, this.y + scalar);
-    }
     sub(other) {
         this.x -= other.x;
         this.y -= other.y;
@@ -32,9 +20,6 @@ class Vec2 {
         this.x *= scalar;
         this.y *= scalar;
     }
-    multNew(scalar) {
-        return new Vec2(this.x * scalar, this.y * scalar);
-    }
     splatToArray() {
         return [this.x, this.y];
     }
@@ -71,4 +56,4 @@ class Vec3 {
         this.z -= other.z;
     }
 }
-export { initializeContext, Vec2, Vec3 };
+export { Vec2, Vec3 };

common.ts

@@ -1,12 +1,3 @@
-function initializeContext(canvasId: string): WebGL2RenderingContext | null {
-    const canvas  = document.getElementById(canvasId) as HTMLCanvasElement;
-    const ctx = canvas.getContext("webgl2", {antialias: false});
-
-    return ctx;
-}
-
-type Color = [number, number, number, number]
-
 class Vec2 {
     x: number;
     y: number;
@@ -21,19 +12,10 @@ class Vec2 {
         this.y += other.y;
     }
 
-    addScalar(scalar: number) {
-        this.x += scalar;
-        this.y += scalar;
-    }
-
     addNew(other: Vec2): Vec2 {
         return new Vec2(this.x + other.x, this.y + other.y);
     }
 
-    addScalarNew(scalar: number): Vec2 {
-        return new Vec2(this.x + scalar, this.y + scalar);
-    }
-
     sub(other: Vec2) {
         this.x -= other.x;
         this.y -= other.y;
@@ -44,10 +26,6 @@ class Vec2 {
         this.y *= scalar;
     }
 
-    multNew(scalar: number): Vec2 {
-        return new Vec2(this.x * scalar, this.y * scalar);
-    }
-
     splatToArray(): Array<number> {
         return [this.x, this.y];
     }
@@ -93,4 +71,4 @@ class Vec3 {
     }
 }
 
-export { initializeContext, Vec2, Vec3, Color };
+export {Vec2, Vec3};

draw.js

@@ -1,92 +0,0 @@
-import { Vec2 } from "./common.js";
-function drawTriangle(gfx, positions, color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-    const points = [
-        positions[0].x, positions[0].y,
-        positions[1].x, positions[1].y,
-        positions[2].x, positions[2].y,
-    ];
-    const colors = [
-        color,
-        color,
-        color,
-    ];
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
-}
-function drawTriangleExts(gfx, position, exts, color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-    const points = [
-        position.x, position.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-    ];
-    const colors = [
-        color,
-        color,
-        color,
-    ];
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
-}
-function drawRectangle(gfx, position, exts, color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-    const points = [
-        position.x, position.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-        position.x + exts.x, position.y + exts.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-    ];
-    const colors = [
-        color,
-        color,
-        color,
-        color,
-        color,
-        color,
-    ];
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
-}
-function drawCircle(gfx, position, radius, color) {
-    const points = new Array();
-    const precision = 40;
-    const angle = 2.0 * Math.PI / precision;
-    let a = 0;
-    for (let i = 0; i < precision; ++i) {
-        var vec = Vec2.angle(a);
-        vec.mult(radius);
-        a += angle;
-        points.push(vec);
-    }
-    for (let i = 0; i < points.length; i++) {
-        const current = points[i];
-        const next = points[(i + 1) % points.length];
-        let center = position;
-        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
-    }
-}
-function drawLine(gfx, A, B, color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-    let points = [
-        A.x, A.y,
-        B.x, B.y,
-    ];
-    const colors = [
-        color,
-        color,
-    ];
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
-}
-export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine };

draw.ts

@@ -1,116 +0,0 @@
-import { Vec2 } from "./common.js"
-import { Graphics } from "./graphics.js";
-import { Color } from "./common.js";
-
-function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2], color: Color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-
-    const points: Array<number> = [
-        positions[0].x, positions[0].y,
-        positions[1].x, positions[1].y,
-        positions[2].x, positions[2].y,
-    ]
-
-    const colors: Array<number[]> = [
-        color,
-        color,
-        color,
-    ];
-
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
-}
-
-function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-
-    const points: Array<number> = [
-        position.x, position.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-    ]
-
-    const colors: Array<number[]> = [
-        color,
-        color,
-        color,
-    ];
-
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
-}
-
-function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2, color: Color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-
-    const points: Array<number> = [
-        position.x, position.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-        
-        position.x + exts.x, position.y + exts.y,
-        position.x + exts.x, position.y,
-        position.x, position.y + exts.y,
-    ]
-
-    const colors: Array<number[]> = [
-        color,
-        color,
-        color,
-        color,
-        color,
-        color,
-    ];
-
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
-
-}
-
-function drawCircle(gfx: Graphics, position: Vec2, radius: number, color: Color) {
-    const points: Array<Vec2> = new Array<Vec2>();
-
-    const precision = 40;
-    const angle = 2.0*Math.PI/precision;
-    let a = 0;
-    for (let i = 0; i < precision; ++i) {
-        var vec = Vec2.angle(a);
-        vec.mult(radius);
-        a += angle;
-        points.push(vec);
-    }
-
-    for (let i = 0; i < points.length; i++) {
-        const current = points[i];
-        const next = points[(i + 1) % points.length];
-        let center = position;
-        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)], color);
-    }
-}
-
-function drawLine(gfx: Graphics, A: Vec2, B: Vec2, color: Color) {
-    const a_position = gfx.getAttribute("a_position");
-    const a_color = gfx.getAttribute("a_color");
-
-    let points: Array<number> = [
-        A.x, A.y,
-        B.x, B.y,
-    ];
-
-    const colors: Array<number[]> = [
-        color,
-        color,
-    ];
-
-    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
-    a_color.data(gfx.ctx, colors.flat(), gfx.ctx.STATIC_DRAW);
-    gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
-}
-
-export { drawTriangle, drawTriangleExts, drawRectangle, drawCircle, drawLine }

graphics.js

@@ -1,9 +1,3 @@
-function fullscreenCanvas(gfx, id) {
-    const canvas = document.getElementById(id);
-    canvas.width = window.innerWidth;
-    canvas.height = window.innerHeight;
-    gfx.ctx.viewport(0, 0, canvas.width, canvas.height);
-}
 function createShader(ctx, type, source) {
     var shader = ctx.createShader(type);
     if (!shader) {
@@ -107,4 +101,4 @@ class Attribute {
         ctx.vertexAttribPointer(this.loc, this.size, this.type, this.normalized, this.stride, this.offset);
     }
 }
-export { fullscreenCanvas, Graphics, Attribute };
+export { Graphics, Attribute };

graphics.ts

@@ -1,12 +1,3 @@
-import { Vec2 } from "./common.js"
-
-function fullscreenCanvas(gfx: Graphics, id: string) {
-    const canvas  = document.getElementById(id) as HTMLCanvasElement;
-    canvas.width  = window.innerWidth;
-    canvas.height = window.innerHeight;
-    gfx.ctx.viewport(0, 0, canvas.width, canvas.height);
-}
-
 function createShader(ctx: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader {
     var shader = ctx.createShader(type);
     if (!shader) {
@@ -145,4 +136,4 @@ class Attribute {
     }
 }
 
-export { fullscreenCanvas, Graphics, Attribute }
+export { Graphics, Attribute }

script.js

@@ -1,6 +1,5 @@
-import { initializeContext, Vec2 } from "./common.js";
+import { Vec2 } from "./common.js";
-import { Graphics, fullscreenCanvas } from "./graphics.js";
+import { Graphics } from "./graphics.js";
-import * as drawing from "./draw.js";
 const vertexShader = `#version 300 es
      
     in vec2 a_position;
@@ -26,41 +25,131 @@ const fragmentShader = `#version 300 es
       outColor = color;
     }
 `;
-function draw(gfx, dt, pos, velocity) {
+function initializeContext(canvasId) {
+    const canvas = document.getElementById(canvasId);
+    const ctx = canvas.getContext("webgl2", { antialias: false });
+    return ctx;
+}
+function drawTriangle(gfx, positions) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+    const points = [
+        positions[0].x, positions[0].y,
+        positions[1].x, positions[1].y,
+        positions[2].x, positions[2].y,
+    ];
+    const color = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
+}
+function drawTriangleExts(gfx, position, exts) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+    const points = [
+        position.x, position.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+    ];
+    const color = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
+}
+function drawRectangle(gfx, position, exts) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+    const points = [
+        position.x, position.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+        position.x + exts.x, position.y + exts.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+    ];
+    const color = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
+}
+function drawCircle(gfx, position, radius) {
+    const points = new Array();
+    const precision = 40;
+    const angle = 2.0 * Math.PI / precision;
+    let a = 0;
+    for (let i = 0; i < precision; ++i) {
+        var vec = Vec2.angle(a);
+        vec.mult(radius);
+        a += angle;
+        points.push(vec);
+    }
+    for (let i = 0; i < points.length; i++) {
+        const current = points[i];
+        const next = points[(i + 1) % points.length];
+        let center = position;
+        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
+    }
+}
+function drawLine(gfx, A, B) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+    let points = [
+        A.x, A.y,
+        B.x, B.y,
+    ];
+    const color = [
+        1, 0, 0, 1,
+        0, 0, 1, 1,
+    ];
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
+}
+function fullscreenCanvas(id) {
+    const canvas = document.getElementById(id);
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+function draw(gfx) {
+    const position = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
     gfx.clear(0, 0, 0, 0);
     gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
-    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
+    drawRectangle(gfx, position, new Vec2(200, 200));
-    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0)
+    drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
-        velocity.x *= -1;
+    drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
-    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0)
+    drawCircle(gfx, new Vec2(400, 200), 100);
-        velocity.y *= -1;
+    drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
-    pos.add(velocity.multNew(dt));
 }
 (() => {
     const canvasId = "game";
+    fullscreenCanvas(canvasId);
     const ctx = initializeContext(canvasId);
     if (ctx === null)
         return;
     const gfx = new Graphics(ctx, vertexShader, fragmentShader);
-    fullscreenCanvas(gfx, canvasId);
     const a_position = gfx.createAttribute("a_position");
     a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
     const a_color = gfx.createAttribute("a_color");
     a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);
     gfx.createUniform("u_resolution");
-    let pos = new Vec2(300, 300);
+    draw(gfx);
-    let velocity = new Vec2(200, 200);
+    window.onresize = () => {
-    let prevTimestamp = 0;
+        fullscreenCanvas(canvasId);
-    const frame = (timestamp) => {
+        draw(gfx);
-        const deltaTime = (timestamp - prevTimestamp) / 1000;
-        const time = timestamp / 1000;
-        prevTimestamp = timestamp;
-        fullscreenCanvas(gfx, "game");
-        draw(gfx, deltaTime, pos, velocity);
-        window.requestAnimationFrame(frame);
     };
-    window.requestAnimationFrame((timestamp) => {
-        prevTimestamp = timestamp;
-        window.requestAnimationFrame(frame);
-    });
 })();

script.ts

@@ -1,6 +1,5 @@
-import { initializeContext, Vec2 } from "./common.js";
+import { Vec2 } from "./common.js";
-import { Graphics, fullscreenCanvas } from "./graphics.js";
+import { Graphics } from "./graphics.js";
-import * as drawing from "./draw.js";
 
 const vertexShader = 
     `#version 300 es
@@ -31,26 +30,150 @@ const fragmentShader =
     }
 `;
 
+function initializeContext(canvasId: string): WebGL2RenderingContext | null {
+    const canvas  = document.getElementById(canvasId) as HTMLCanvasElement;
+    const ctx = canvas.getContext("webgl2", {antialias: false});
 
+    return ctx;
+
+}
+
+function drawTriangle(gfx: Graphics, positions: [Vec2, Vec2, Vec2]) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+
+    const points: Array<number> = [
+        positions[0].x, positions[0].y,
+        positions[1].x, positions[1].y,
+        positions[2].x, positions[2].y,
+    ]
+
+    const color: Array<number> = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
+}
+
+function drawTriangleExts(gfx: Graphics, position: Vec2, exts: Vec2) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+
+    const points: Array<number> = [
+        position.x, position.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+    ]
+
+    const color: Array<number> = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 3);
+}
+
+function drawRectangle(gfx: Graphics, position: Vec2, exts: Vec2) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+
+    const points: Array<number> = [
+        position.x, position.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+        
+        position.x + exts.x, position.y + exts.y,
+        position.x + exts.x, position.y,
+        position.x, position.y + exts.y,
+    ]
+
+    const color: Array<number> = [
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+        1, 0, 0, 1,
+        0, 1, 0, 1,
+        0, 0, 1, 1,
+    ];
+
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.TRIANGLES, 0, 6);
+
+}
+
+function drawCircle(gfx: Graphics, position: Vec2, radius: number) {
+    const points: Array<Vec2> = new Array<Vec2>();
+
+    const precision = 40;
+    const angle = 2.0*Math.PI/precision;
+    let a = 0;
+    for (let i = 0; i < precision; ++i) {
+        var vec = Vec2.angle(a);
+        vec.mult(radius);
+        a += angle;
+        points.push(vec);
+    }
+
+    for (let i = 0; i < points.length; i++) {
+        const current = points[i];
+        const next = points[(i + 1) % points.length];
+        let center = position;
+        drawTriangle(gfx, [center, center.addNew(current), center.addNew(next)]);
+    }
+}
+
+function drawLine(gfx: Graphics, A: Vec2, B: Vec2) {
+    const a_position = gfx.getAttribute("a_position");
+    const a_color = gfx.getAttribute("a_color");
+
+    let points: Array<number> = [
+        A.x, A.y,
+        B.x, B.y,
+    ];
+
+    const color: Array<number> = [
+        1, 0, 0, 1,
+        0, 0, 1, 1,
+    ];
+
+    a_position.data(gfx.ctx, points, gfx.ctx.STATIC_DRAW);
+    a_color.data(gfx.ctx, color, gfx.ctx.STATIC_DRAW);
+    gfx.ctx.drawArrays(gfx.ctx.LINES, 0, 2);
+}
+
+function fullscreenCanvas(id: string) {
+    const canvas  = document.getElementById(id) as HTMLCanvasElement;
+    canvas.width  = window.innerWidth;
+    canvas.height = window.innerHeight;
+}
+
+function draw(gfx: Graphics) {
+    const position: Vec2 = new Vec2(gfx.ctx.canvas.width / 2 - 100, gfx.ctx.canvas.height / 2 - 100);
 
-function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
     gfx.clear(0, 0, 0, 0);
     gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
-    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
+    drawRectangle(gfx, position, new Vec2(200, 200))
-
+    drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)]);
-    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0) velocity.x *= -1;
+    drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100));
-    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0) velocity.y *= -1;
+    drawCircle(gfx, new Vec2(400, 200), 100);
-
+    drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
-    pos.add(velocity.multNew(dt));
 }
 
 (() => {
     const canvasId = "game";
+    fullscreenCanvas(canvasId);
     const ctx = initializeContext(canvasId);
     if (ctx === null) return;
 
     const gfx = new Graphics(ctx, vertexShader, fragmentShader);
-    fullscreenCanvas(gfx, canvasId);
 
     const a_position = gfx.createAttribute("a_position");
     a_position.format(2, gfx.ctx.FLOAT, false, 0, 0);
@@ -59,24 +182,10 @@ function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
     a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);
 
     gfx.createUniform("u_resolution");
-
-    let pos = new Vec2(300, 300);
-    let velocity = new Vec2(200, 200);
     
-    let prevTimestamp = 0;
+    draw(gfx);
-    const frame = (timestamp: number) => {
+    window.onresize = () => {
-        const deltaTime = (timestamp - prevTimestamp)/1000;
+        fullscreenCanvas(canvasId);
-        const time = timestamp/1000;
+        draw(gfx);
-        prevTimestamp = timestamp;
-
-        fullscreenCanvas(gfx, "game");
-        draw(gfx, deltaTime, pos, velocity);
-
-        window.requestAnimationFrame(frame);
     }
-
-    window.requestAnimationFrame((timestamp) => {
-        prevTimestamp = timestamp;
-        window.requestAnimationFrame(frame);
-    });
 })();

style.css

@@ -1,7 +1,6 @@
 html, body {
     margin: 0px;
     padding: 0px;
-    width: 100vw;
+    width: 100%;
-    height: 100vh;
+    height: 100%;
-    overflow: hidden;
 }