add play pause

frontend/www/index.ts

@@ -35,7 +35,6 @@ const RESOLUTION = [CANVAS.width, CANVAS.height];
 
 const GL = CANVAS.getContext("webgl");
 
-
 resizeCanvasToDisplaySize(<HTMLCanvasElement>GL.canvas);
 GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
 
@@ -59,6 +58,8 @@ class GameInstance {
     renderer: Renderer;
     planet_count: number;
 
+    playing = true;    // 0 is paused, 1 is playing but not rerendered, 2 is playing and rerendered
+    time_stopped_delta = 0;
     last_time = 0;
     frame = -1;
 
@@ -70,9 +71,11 @@ class GameInstance {
         this.shader = SHADERFACOTRY.create_shader(GL, {"MAX_CIRCLES": ''+this.planet_count});
         this.resizer = new Resizer(CANVAS, [...f32v(game.get_viewbox(), 4)], true);
         this.renderer = new Renderer();
-        // this.renderer.addToDraw(indexBuffer, vao, this.shader);
         this.game.update_turn(0);
 
+        // Setup key handling
+        document.addEventListener('keydown', this.handleKey.bind(this));
+
         const planets = f32v(game.get_planets(), this.planet_count * 3);
 
         for(let i=0; i < this.planet_count; i++){
@@ -123,9 +126,13 @@ class GameInstance {
     }
 
     render(time: number) {
+        COUNTER.frame(time);
+
+        if (!this.playing) {
+            this.last_time = time;
+            return;
+        }
         if (time > this.last_time + 500) {
-            const transparant = new Uniform3f(0, 0, 0);
-            const transform = new UniformMatrix3fv([0, 0, 0, 0, 0, 0, 0, 0, 0, ]);
 
             this.last_time = time;
             this.frame ++;
@@ -171,15 +178,29 @@ class GameInstance {
         GL.viewport(0, 0, GL.canvas.width, GL.canvas.height);
         GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);
 
-        this.shader.uniform(GL, "u_step_interval", new Uniform1f(500));
         this.shader.uniform(GL, "u_time", new Uniform1f((time - this.last_time) / 500));
         this.shader.uniform(GL, "u_mouse", new Uniform2f(this.resizer.get_mouse_pos()));
         this.shader.uniform(GL, "u_viewbox", new Uniform4f(this.resizer.get_viewbox()));
         this.shader.uniform(GL, "u_resolution", new Uniform2f(RESOLUTION));
 
-        this.renderer.render(GL);
+        this.shader.uniform(GL, "u_animated", new Uniform1i(+this.playing));
 
-        COUNTER.frame(time);
+        this.renderer.render(GL);
+    }
+
+    handleKey(event: KeyboardEvent) {
+        console.log(event.keyCode);
+        console.log(event.key);
+
+        // Space
+        if (event.keyCode == 32) {
+            if (this.playing) {
+                this.playing = false;
+            } else {
+                this.playing = true;
+            }
+
+        }
     }
 }
 

frontend/www/static/shaders/frag/simple.glsl

@@ -7,8 +7,14 @@ uniform float u_time;
 uniform vec3 u_color;
 uniform vec3 u_color_next;
 
+uniform bool u_animated;
+
 void main() {
-    float part = fract(u_time / u_step_interval);
-    vec3 color = mix(u_color, u_color_next, part);
+    vec3 color;
+    if (u_animated) {
+        color = mix(u_color, u_color_next, u_time);
+    } else {
+        color = u_color;
+    }
     gl_FragColor = vec4(color, 1.0);
 }

frontend/www/static/shaders/vert/simple.glsl

@@ -4,8 +4,6 @@ precision mediump float;
 
 attribute vec2 a_position;
 
-
-uniform float u_step_interval;
 uniform float u_time;
 
 uniform vec4 u_viewbox;         // [x, y, width, height]
@@ -13,13 +11,20 @@ uniform vec2 u_resolution;
 uniform mat3 u_trans;
 uniform mat3 u_trans_next;
 
+uniform bool u_animated;
+
 varying vec2 v_pos;
 
 void main() {
     vec3 pos = vec3(a_position, 1.0);
 
-    // float part = fract(u_time / u_step_interval);
-    mat3 trans = (u_trans_next * (1.0 - u_time)) + (u_trans * u_time);
+    mat3 trans;
+
+    if (u_animated) {
+        trans = (u_trans_next * (1.0 - u_time)) + (u_trans * u_time);
+    } else {
+        trans = u_trans;
+    }
 
     pos = trans * pos;