Added dvd bouncing effect as default example

common.js

@@ -1,3 +1,8 @@
+function initializeContext(canvasId) {
+    const canvas = document.getElementById(canvasId);
+    const ctx = canvas.getContext("webgl2", { antialias: false });
+    return ctx;
+}
 class Vec2 {
     x;
     y;
@@ -9,9 +14,16 @@ 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;
@@ -20,6 +32,9 @@ 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];
     }
@@ -56,4 +71,4 @@ class Vec3 {
         this.z -= other.z;
     }
 }
-export { Vec2, Vec3 };
+export { initializeContext, Vec2, Vec3 };

common.ts

@@ -1,3 +1,12 @@
+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;
@@ -12,10 +21,19 @@ 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;
@@ -26,6 +44,10 @@ 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];
     }
@@ -71,4 +93,4 @@ class Vec3 {
     }
 }
 
-export {Vec2, Vec3};
+export { initializeContext, Vec2, Vec3, Color };

draw.js

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,116 @@
+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,3 +1,9 @@
+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) {
@@ -101,4 +107,4 @@ class Attribute {
         ctx.vertexAttribPointer(this.loc, this.size, this.type, this.normalized, this.stride, this.offset);
     }
 }
-export { Graphics, Attribute };
+export { fullscreenCanvas, Graphics, Attribute };

graphics.ts

@@ -1,3 +1,12 @@
+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) {
@@ -136,4 +145,4 @@ class Attribute {
     }
 }
 
-export { Graphics, Attribute }
+export { fullscreenCanvas, Graphics, Attribute }

script.js

@@ -1,5 +1,6 @@
-import { Vec2 } from "./common.js";
-import { Graphics } from "./graphics.js";
+import { initializeContext, Vec2 } from "./common.js";
+import { Graphics, fullscreenCanvas } from "./graphics.js";
+import * as drawing from "./draw.js";
 const vertexShader = `#version 300 es
      
     in vec2 a_position;
@@ -25,131 +26,41 @@ const fragmentShader = `#version 300 es
       outColor = color;
     }
 `;
-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);
+function draw(gfx, dt, pos, velocity) {
     gfx.clear(0, 0, 0, 0);
     gfx.ctx.uniform2f(gfx.getUniform("u_resolution"), gfx.ctx.canvas.width, gfx.ctx.canvas.height);
-    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));
-    drawCircle(gfx, new Vec2(400, 200), 100);
-    drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
+    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
+    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0)
+        velocity.x *= -1;
+    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0)
+        velocity.y *= -1;
+    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");
-    draw(gfx);
-    window.onresize = () => {
-        fullscreenCanvas(canvasId);
-        draw(gfx);
+    let pos = new Vec2(300, 300);
+    let velocity = new Vec2(200, 200);
+    let prevTimestamp = 0;
+    const frame = (timestamp) => {
+        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,5 +1,6 @@
-import { Vec2 } from "./common.js";
-import { Graphics } from "./graphics.js";
+import { initializeContext, Vec2 } from "./common.js";
+import { Graphics, fullscreenCanvas } from "./graphics.js";
+import * as drawing from "./draw.js";
 
 const vertexShader = 
     `#version 300 es
@@ -30,150 +31,26 @@ 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);
-    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));
-    drawCircle(gfx, new Vec2(400, 200), 100);
-    drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600));
+    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
+
+    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0) velocity.x *= -1;
+    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0) velocity.y *= -1;
+
+    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);
@@ -183,9 +60,23 @@ function draw(gfx: Graphics) {
 
     gfx.createUniform("u_resolution");
 
-    draw(gfx);
-    window.onresize = () => {
-        fullscreenCanvas(canvasId);
-        draw(gfx);
+    let pos = new Vec2(300, 300);
+    let velocity = new Vec2(200, 200);
+    
+    let prevTimestamp = 0;
+    const frame = (timestamp: number) => {
+        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);
+    });
 })();

style.css

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