diff --git a/frontend/www/index.ts b/frontend/www/index.ts index d3e7fe6..cb210ef 100644 --- a/frontend/www/index.ts +++ b/frontend/www/index.ts @@ -35,7 +35,6 @@ const RESOLUTION = [CANVAS.width, CANVAS.height]; const GL = CANVAS.getContext("webgl"); - resizeCanvasToDisplaySize(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; + } + + } } } diff --git a/frontend/www/static/shaders/frag/simple.glsl b/frontend/www/static/shaders/frag/simple.glsl index 2f266c7..812fdbd 100644 --- a/frontend/www/static/shaders/frag/simple.glsl +++ b/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); } diff --git a/frontend/www/static/shaders/vert/simple.glsl b/frontend/www/static/shaders/vert/simple.glsl index 38cc502..e340029 100644 --- a/frontend/www/static/shaders/vert/simple.glsl +++ b/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;