Added dvd bouncing effect as default example

common.js

@@ -14,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;
@@ -25,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];
     }

common.ts

@@ -21,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;
@@ -35,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];
     }

script.js

@@ -26,15 +26,15 @@ const fragmentShader = `#version 300 es
       outColor = color;
     }
 `;
-function draw(gfx) {
+function draw(gfx, dt, pos, velocity) {
-    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.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
+    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
-    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
+    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0)
-    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
+        velocity.x *= -1;
-    drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
+    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0)
-    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
+        velocity.y *= -1;
+    pos.add(velocity.multNew(dt));
 }
 (() => {
     const canvasId = "game";
@@ -48,9 +48,19 @@ function draw(gfx) {
     const a_color = gfx.createAttribute("a_color");
     a_color.format(4, gfx.ctx.FLOAT, false, 0, 0);
     gfx.createUniform("u_resolution");
-    draw(gfx);
+    let pos = new Vec2(300, 300);
-    window.onresize = () => {
+    let velocity = new Vec2(200, 200);
-        fullscreenCanvas(gfx, canvasId);
+    let prevTimestamp = 0;
-        draw(gfx);
+    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

@@ -33,16 +33,15 @@ const fragmentShader =
 
 
 
-function draw(gfx: Graphics) {
+function draw(gfx: Graphics, dt: number, pos: Vec2, velocity: Vec2) {
-    const position: Vec2 = 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.drawRectangle(gfx, position, new Vec2(200, 200), [0, 0, 1, 1]);
+    drawing.drawCircle(gfx, pos, 200, [1, 0, 0, 1]);
-    drawing.drawTriangle(gfx, [new Vec2(100, 100), new Vec2(200, 100), new Vec2(100, 200)], [1, 0, 0, 1]);
+
-    drawing.drawTriangleExts(gfx, new Vec2(200, 200), new Vec2(-100, -100), [0, 1, 0, 0.8]);
+    if (pos.x + 200 >= gfx.ctx.canvas.width || pos.x - 200 <= 0) velocity.x *= -1;
-    drawing.drawCircle(gfx, new Vec2(400, 200), 100, [0.7, 0.1, 0.1, 1]);
+    if (pos.y + 200 >= gfx.ctx.canvas.height || pos.y - 200 <= 0) velocity.y *= -1;
-    drawing.drawLine(gfx, new Vec2(100, 600), new Vec2(600, 600), [1, 0, 0, 1]);
+
+    pos.add(velocity.multNew(dt));
 }
 
 (() => {
@@ -60,10 +59,24 @@ function draw(gfx: Graphics) {
     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);
     
-    draw(gfx);
+    let prevTimestamp = 0;
-    window.onresize = () => {
+    const frame = (timestamp: number) => {
-        fullscreenCanvas(gfx, canvasId);
+        const deltaTime = (timestamp - prevTimestamp)/1000;
-        draw(gfx);
+        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);
+    });
 })();