add play pause

This commit is contained in:
ajuvercr 2019-09-21 10:17:35 +02:00
parent 3aa61d683d
commit bcd0665c17
3 changed files with 45 additions and 13 deletions

View file

@ -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;
}
}
}
}

View file

@ -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);
}

View file

@ -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;