Marginally better grid level transitions

client/index.js

@@ -232,7 +232,7 @@ async function main() {
 
         'wasm': {},
 
-        'background_pattern': 'dots',
+        'background_pattern': 'grid',
     };
 
     const context = {

client/webgl_draw.js

@@ -153,8 +153,18 @@ async function draw(state, context, animate, ts) {
         }
     } else if (state.background_pattern === 'grid') {
         const zoom = state.canvas.zoom;
-        const zoom_log10 = Math.log10(zoom);
+
-        const zoom_previous = Math.pow(10, Math.floor(zoom_log10));
+        let zoom_log8 = Math.log(zoom) / Math.log(8);
+        //if (zoom_log2 === Math.floor(zoom_log2)) {
+        //    zoom_log2 -= 0.001;
+        //}
+
+        const zoom_previous = Math.pow(8, Math.floor(zoom_log8));
+        let zoom_next = Math.pow(8, Math.ceil(zoom_log8));
+
+        if (zoom_next === zoom_previous) {
+            zoom_next = zoom_previous * 8;
+        }
 
         gl.useProgram(context.programs['pattern'].grid);
         buffers = context.buffers['pattern'];
@@ -170,10 +180,13 @@ async function draw(state, context, animate, ts) {
         gl.uniform2f(locations['u_translation'], state.canvas.offset.x, state.canvas.offset.y);
         gl.uniform1f(locations['u_fadeout'], 1.0);
 
-        // Previous level
+        // Opacity for major lines goes on a curve 0 / 1 \ 0
+
+        // Previous level (major lines)
         {
-            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 10 / zoom_previous, 10 / zoom_previous));
+            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 32 / zoom_previous, 32 / zoom_previous));
-            const t = Math.min(1.0, (zoom / zoom_previous) / 10.0);
+            let t = (zoom / zoom_previous - 1) / -7 + 1;
+            t = 0.25;
 
             gl.uniform1f(locations['u_fadeout'], t);
 
@@ -183,10 +196,11 @@ async function draw(state, context, animate, ts) {
             gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, grid_instances.length / 2); 
         }
 
-        // Next level
+        // Next level (minor lines)
         {
-            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 100 / zoom_previous, 100 / zoom_previous));
+            const grid_instances = new Float32Array(geometry_gen_fullscreen_grid_1d(state, context, 32 / zoom_next, 32 / zoom_next));
-            const t = Math.min(1.0, 1.0 - (zoom / zoom_previous) / 10.0);
+            let t = (zoom_next / zoom - 1) / 7;
+            t = Math.min(0.1, -t + 1);
 
             gl.uniform1f(locations['u_fadeout'], t);
 
@@ -358,7 +372,7 @@ async function draw(state, context, animate, ts) {
 }
 
 function update_canvas_zoom(state, current, target, dt) {
-    const rate = Math.min(1.0, dt / 16.66 * 0.2);
+    const rate = Math.min(1.0, dt / 16.66 * 0.3);
 
     if (Math.abs(1.0 - current / target) > 0.01) {
         state.canvas.zoom = current + (target - current) * rate;

client/webgl_geometry.js

@@ -350,9 +350,9 @@ function geometry_gen_fullscreen_grid_1d(state, context, step_x, step_y) {
     const bottomright = screen_to_canvas(state, {'x': width, 'y': height});
 
     topleft.x = Math.floor(topleft.x / step_x) * step_x;
-    topleft.y = Math.ceil(topleft.y / step_y) * step_y;
+    topleft.y = Math.floor(topleft.y / step_y) * step_y;
 
-    bottomright.x = Math.floor(bottomright.x / step_x) * step_x;
+    bottomright.x = Math.ceil(bottomright.x / step_x) * step_x;
     bottomright.y = Math.ceil(bottomright.y / step_y) * step_y;
 
     for (let x = topleft.x; x <= bottomright.x; x += step_x) {