Make zoom animation use delta time

README.txt

@@ -8,7 +8,6 @@ Release:
         + Do not copy memory to wasm, instead use wasm memory to store data in the first place
         + SIMD for LOD?
         + Multithreading for LOD
-        - Move BVH to WASM side
         - Z-prepass fringe bug (also, when do we enable the prepass?)
         - Textured quads (pictures, code already written in older version)
         - Resize and move pictures (draw handles)
@@ -38,7 +37,7 @@ Release:
         + Follow player
         + Color picker (or at the very least an Open Color color pallete)
         + EYE DROPPER!
-        * Dynamic svg cursor to represent the brush
+        + Dynamic svg cursor to represent the brush
         - Eraser
         - Line drawing
         - Undo/redo
@@ -66,8 +65,9 @@ Bonus:
         - Move whole curve
         - Move single point
         - Move multiple points
-    - Customizable background
+    * Customizable background
-        - Color, textures, procedural
+        + Dots pattern
+        * Grid pattern
 
 Bonus-bonus:
     - Actually infinite canvas (replace floats with something, some kind of fixed point scheme? chunks? multilevel scheme?)

client/index.js

@@ -266,6 +266,8 @@ async function main() {
 
         'gpu_timer_ext': null,
         'active_image': null,
+        'last_frame_ts': 0,
+        'last_frame_dt': 0,
     };
     
     load_player_cursor_template(state);

client/webgl_draw.js

@@ -1,7 +1,7 @@
-function schedule_draw(state, context) {
+function schedule_draw(state, context, animate = false) {
     if (!state.timers.raf) {
-        window.requestAnimationFrame(async () => {
+        window.requestAnimationFrame(async (ts) => {
-            await draw(state, context);
+            await draw(state, context, animate, ts);
         });
         state.timers.raf = true;
     }
@@ -76,9 +76,12 @@ function draw_html(state) {
 }
 
 
-async function draw(state, context) {
+async function draw(state, context, animate, ts) {
+    const dt = ts - context.last_frame_ts;
     const cpu_before = performance.now();
 
+    context.last_frame_ts = ts;
+
     const gl = context.gl;
     const width = window.innerWidth;
     const height = window.innerHeight;
@@ -346,14 +349,18 @@ async function draw(state, context) {
     }
 
     if (state.canvas.target_zoom != state.canvas.zoom) {
-        update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom);
+        update_canvas_zoom(state, state.canvas.zoom, state.canvas.target_zoom, animate ? dt : context.last_frame_dt);
-        schedule_draw(state, context);
+        schedule_draw(state, context, true);
     }
+
+    context.last_frame_dt = dt;
 }
 
-function update_canvas_zoom(state, current, target) {
+function update_canvas_zoom(state, current, target, dt) {
+    const rate = Math.min(1.0, dt / 16.66 * 0.2);
+
     if (Math.abs(1.0 - current / target) > 0.01) {
-        state.canvas.zoom = current + (target - current) * 0.2;
+        state.canvas.zoom = current + (target - current) * rate;
     } else {
         state.canvas.zoom = target;
     }