Implement full texture load, timestamp

And other bugfixes. It looks sweet now.

Gonna stuff the 94MB of assets into gh-pages. sorry, github..

Author: blendmaster

octave/pack_ocean.m

@@ -1,7 +1,22 @@
 % pack all the data downloaded into PNG files.
 pkg load image
-fst = pack16(datenum(2011, 01, 01));
-% XXX octave flips the alpha channel when saving images (and reading them), so
-% unflip it before write
-fst(:, :, 4) = 255 - fst(:, :, 4);
-imwrite(fst, 'packed16.png');
+
+last = datenum(2012, 12, 01);
+
+current = datenum(1993, 01, 02);
+n = 0;
+% there are 240 timeslices for an even 15 images,
+% uncompressed, they're 8mb each for a total of 1920 mb
+while current < last
+  printf('packing image %02i\n', n);
+  data = pack16(current);
+  
+  % XXX octave flips the alpha channel when saving images (and reading them), so
+  % unflip it before write
+  data(:, :, 4) = 255 - data(:, :, 4);
+
+  imwrite(data, sprintf('packed-%02i.png', n));
+
+  n = n + 1;
+  current = addtodate(current, 16, 'month');
+end

webgl/geoid.co

@@ -134,7 +134,7 @@ max-val.addEventListener \input !->
   if symmetric.checked
     min-val.value = 1 - parseFloat @value
 
-addWheelListener document.body, !->
+addWheelListener canvas, !->
   fov := clamp fov + it.deltaY / Math.abs(it.deltaY), 1, 100
 
 ctx = document.createElement \canvas .getContext \2d
@@ -295,10 +295,12 @@ $ \advection-steps .addEventListener \change !->
 mod = (num, base) -> ((num % base) + base) % base
 
 !function load-ocean-current-common program
+  slices-available = ocean-field.length
+
   time = parseFloat $(\time)value
   cur = Math.floor time / 2
-  last = mod cur - 1, 8
-  next = mod cur + 1, 8
+  last = mod cur - 1, slices-available
+  next = mod cur + 1, slices-available
 
   load-texture program, ocean-field[cur], \curOcean 0
   load-texture program, ocean-field[last], \prevOcean 1
@@ -327,34 +329,37 @@ initial = true
 
 # time state
 playing = true
-$ \play 
+$ \play
   &disabled = true
   &addEventListener \click !->
     playing := true
     @disabled = true
     $ \pause .disabled = false
-$ \pause 
+$ \pause
   &disabled = false
   &addEventListener \click !->
     playing := false
     @disabled = true
     $ \play .disabled = false
 
 export draw = !->
+  slices-available = ocean-field.length * 2
   t = parseFloat $(\time)value
   if playing
     speed = parseFloat $(\speed)value
-    new-t = mod t + speed, 16
+    new-t = mod t + speed, slices-available
     $ \time .value = new-t
     t = new-t
-    
+
+    update-timestamp!
+
   ##################################################################
   # first: random noise injection and initial advection
   load-plain-quad-program p.noise-transport, noise-transport.framebuffer
 
   #load-ocean-current-common p.noise-transport
   load-isWater p.noise-transport
-  
+
   # use random offset of noise to vary over time cheaply
   # TODO needs to be time correlated
   uniform gl, p.noise-transport, \randomOffset \2f Math.random!, Math.random!
@@ -393,7 +398,7 @@ export draw = !->
 
   gl.getUniformLocation p.advection, \h
     gl.uniform1f &, parseFloat($ \advection-h .value)
-  
+
   # use random offset of noise to vary over time cheaply
   # TODO time correlation?
   uniform gl, p.advection, \randomOffset \2f Math.random!, Math.random!
@@ -515,45 +520,88 @@ function set-texture texture, data
 ocean-field = []
 land-textures = []
 
-# 1 ocean texture (soon more)
+# 15 ocean textures (each with 16 timeslices) (load 2 first, since they take
+# up 240 MB memory total)
 # 1 land mask
 # 12 blue marble months
 # 1 dark marble
-textures-to-load = total-textures = 1 + 1 + 12 + 1
+textures-to-load = total-textures = 2 + 1 + 12 + 1
 maybe-draw = !->
-  $ \load-progress .value = 1 - total-textures / textures-to-load
+  $ \load-progress .value = 1 - textures-to-load / total-textures
 
   if textures-to-load is 0
     $ \loading .hidden = true
     $ \load-progress .value = 0
+
+    $ \time .setAttribute \max ocean-field.length * 2 - 0.01
+
+    $ \time .value = 0
     draw!
 
-load-image \packed16.png !->
-  c = document.createElement(\canvas) <<< @{width, height}
+pad = -> if it >= 10 then it else "0#{it}"
+
+function split-packed img, idx
+  c = document.createElement(\canvas) <<< img{width, height}
   ctx = c.getContext \2d
-  ctx.drawImage this, 0 0
+  ctx.drawImage img, 0 0
   # unpack sections
+  start = idx * 8
+  n = 0
   for y of [0 512 1024 1536]
     for x of [0 1024]
-      ocean-field.push do
+      ocean-field[start + n] =
         set-texture gl.createTexture!, ctx.getImageData x, y, 1024 512
+      ++n
 
   --textures-to-load
   maybe-draw!
 
+for i til 2
+  let
+    load-image "packed-#{pad i}.png" !-> split-packed this, i
+
+# load the rest of textures
+$ \load-more .addEventListener \click !->
+
+  total-textures := 13
+  textures-to-load := 13
+  $ \loading .hidden = false
+  $ \load-progress .value = 0
+
+  for i from 2 til 15
+    let
+      load-image "packed-#{pad i}.png" !-> split-packed this, i
+
+$ \time .addEventListener \input update-timestamp
+
+function update-timestamp
+  # update text timestamp
+  months = parseFloat $(\time)value
+  years = Math.floor months / 12
+  y-months = Math.floor months - years * 12
+
+  # a diff date
+  date = new Date
+    &setFullYear do
+      1991 + years
+      y-months
+      1
+
+  $ \timestamp .textContent = 
+    "#{date.getFullYear!}-#{pad date.getMonth! + 1}"
+
 land-mask = gl.createTexture!
 load-image \land-mask.png !->
   set-texture land-mask, this
   --textures-to-load
   maybe-draw!
 
-pad = -> if it >= 10 then it else "0#{it}"
-
 for i from 1 to 12
-  load-image "blue-marble-#{pad i}.jpg" !->
-    land-textures.push set-texture gl.createTexture!, this
-    --textures-to-load
-    maybe-draw!
+  let
+    load-image "blue-marble-#{pad i}.jpg" !->
+      land-textures[i - 1] = set-texture gl.createTexture!, this
+      --textures-to-load
+      maybe-draw!
 
 night-texture = gl.createTexture!
 load-image \black-marble.jpg !->

webgl/geoid.js

@@ -2,7 +2,7 @@
 original commented source there. */
 (function(){
   "use strict";
-  var canvas, ref$, width, height, k, ref1$, v, x0$, arr, rotation, e, currentRot, fov, distance, symmetric, x1$, minVal, ref2$, x2$, maxVal, reclamp, ctx, buffers, latBands, lonBands, noiseTex, noiseTransport, orthogonalLic, advection, blend, setupBuffers, numTriangles, p, mod, frame, initial, playing, x3$, x4$, draw, oceanField, landTextures, texturesToLoad, totalTextures, maybeDraw, landMask, pad, i, nightTexture, pointUnder, x5$, out$ = typeof exports != 'undefined' && exports || this;
+  var canvas, ref$, width, height, k, ref1$, v, x0$, arr, rotation, e, currentRot, fov, distance, symmetric, x1$, minVal, ref2$, x2$, maxVal, reclamp, ctx, buffers, latBands, lonBands, noiseTex, noiseTransport, orthogonalLic, advection, blend, setupBuffers, numTriangles, p, mod, frame, initial, playing, x3$, x4$, draw, oceanField, landTextures, texturesToLoad, totalTextures, maybeDraw, pad, i, landMask, nightTexture, pointUnder, x5$, out$ = typeof exports != 'undefined' && exports || this;
   canvas = document.getElementById('canvas');
   ref$ = document.documentElement, canvas.width = ref$.clientWidth, canvas.height = ref$.clientHeight;
   width = canvas.width, height = canvas.height;
@@ -122,7 +122,7 @@ original commented source there. */
       minVal.value = 1 - parseFloat(this.value);
     }
   });
-  addWheelListener(document.body, function(it){
+  addWheelListener(canvas, function(it){
     fov = clamp(fov + it.deltaY / Math.abs(it.deltaY), 1, 100);
   });
   ctx = document.createElement('canvas').getContext('2d');
@@ -249,11 +249,12 @@ original commented source there. */
     return (num % base + base) % base;
   };
   function loadOceanCurrentCommon(program){
-    var time, cur, last, next, timeVal, x3$;
+    var slicesAvailable, time, cur, last, next, timeVal, x3$;
+    slicesAvailable = oceanField.length;
     time = parseFloat($('time').value);
     cur = Math.floor(time / 2);
-    last = mod(cur - 1, 8);
-    next = mod(cur + 1, 8);
+    last = mod(cur - 1, slicesAvailable);
+    next = mod(cur + 1, slicesAvailable);
     loadTexture(program, oceanField[cur], 'curOcean', 0);
     loadTexture(program, oceanField[last], 'prevOcean', 1);
     loadTexture(program, oceanField[next], 'nextOcean', 2);
@@ -287,13 +288,15 @@ original commented source there. */
     $('play').disabled = false;
   });
   out$.draw = draw = function(){
-    var t, speed, newT, x5$, x6$, x7$, x8$, x9$, rot, modelView, useDay, monthNo, nextNo, x10$, x11$, x12$, x13$, x14$, x15$, x16$;
+    var slicesAvailable, t, speed, newT, x5$, x6$, x7$, x8$, x9$, rot, modelView, useDay, monthNo, nextNo, x10$, x11$, x12$, x13$, x14$, x15$, x16$;
+    slicesAvailable = oceanField.length * 2;
     t = parseFloat($('time').value);
     if (playing) {
       speed = parseFloat($('speed').value);
-      newT = mod(t + speed, 16);
+      newT = mod(t + speed, slicesAvailable);
       $('time').value = newT;
       t = newT;
+      updateTimestamp();
     }
     loadPlainQuadProgram(p.noiseTransport, noiseTransport.framebuffer);
     loadIsWater(p.noiseTransport);
@@ -395,45 +398,78 @@ original commented source there. */
   }
   oceanField = [];
   landTextures = [];
-  texturesToLoad = totalTextures = 1 + 1 + 12 + 1;
+  texturesToLoad = totalTextures = 2 + 1 + 12 + 1;
   maybeDraw = function(){
-    $('load-progress').value = 1 - totalTextures / texturesToLoad;
+    $('load-progress').value = 1 - texturesToLoad / totalTextures;
     if (texturesToLoad === 0) {
       $('loading').hidden = true;
       $('load-progress').value = 0;
+      $('time').setAttribute('max', oceanField.length * 2 - 0.01);
+      $('time').value = 0;
       draw();
     }
   };
-  loadImage('packed16.png', function(){
-    var c, ref$, ctx, i$, ref1$, len$, y, j$, ref2$, len1$, x;
-    c = (ref$ = document.createElement('canvas'), ref$.width = this.width, ref$.height = this.height, ref$);
+  pad = function(it){
+    if (it >= 10) {
+      return it;
+    } else {
+      return "0" + it;
+    }
+  };
+  function splitPacked(img, idx){
+    var c, ref$, ctx, start, n, i$, ref1$, len$, y, j$, ref2$, len1$, x;
+    c = (ref$ = document.createElement('canvas'), ref$.width = img.width, ref$.height = img.height, ref$);
     ctx = c.getContext('2d');
-    ctx.drawImage(this, 0, 0);
+    ctx.drawImage(img, 0, 0);
+    start = idx * 8;
+    n = 0;
     for (i$ = 0, len$ = (ref1$ = [0, 512, 1024, 1536]).length; i$ < len$; ++i$) {
       y = ref1$[i$];
       for (j$ = 0, len1$ = (ref2$ = [0, 1024]).length; j$ < len1$; ++j$) {
         x = ref2$[j$];
-        oceanField.push(setTexture(gl.createTexture(), ctx.getImageData(x, y, 1024, 512)));
+        oceanField[start + n] = setTexture(gl.createTexture(), ctx.getImageData(x, y, 1024, 512));
+        ++n;
       }
     }
     --texturesToLoad;
-    maybeDraw();
+    return maybeDraw();
+  }
+  for (i = 0; i < 2; ++i) {
+    (fn$.call(this, i));
+  }
+  $('load-more').addEventListener('click', function(){
+    var i;
+    totalTextures = 13;
+    texturesToLoad = 13;
+    $('loading').hidden = false;
+    $('load-progress').value = 0;
+    for (i = 2; i < 15; ++i) {
+      (fn$.call(this, i));
+    }
+    function fn$(i){
+      loadImage("packed-" + pad(i) + ".png", function(){
+        splitPacked(this, i);
+      });
+    }
   });
+  $('time').addEventListener('input', updateTimestamp);
+  function updateTimestamp(){
+    var months, years, yMonths, x5$, date;
+    months = parseFloat($('time').value);
+    years = Math.floor(months / 12);
+    yMonths = Math.floor(months - years * 12);
+    x5$ = date = new Date;
+    x5$.setFullYear(1991 + years, yMonths, 1);
+    return $('timestamp').textContent = date.getFullYear() + "-" + pad(date.getMonth() + 1);
+  }
   landMask = gl.createTexture();
   loadImage('land-mask.png', function(){
     setTexture(landMask, this);
     --texturesToLoad;
     maybeDraw();
   });
-  pad = function(it){
-    if (it >= 10) {
-      return it;
-    } else {
-      return "0" + it;
-    }
-  };
   for (i = 1; i <= 12; ++i) {
-    loadImage("blue-marble-" + pad(i) + ".jpg", fn$);
+    (fn1$.call(this, i));
   }
   nightTexture = gl.createTexture();
   loadImage('black-marble.jpg', function(){
@@ -487,9 +523,16 @@ original commented source there. */
     x5$.addEventListener('mouseup', stop);
     x5$.addEventListener('mouseleave', stop);
   });
-  function fn$(){
-    landTextures.push(setTexture(gl.createTexture(), this));
-    --texturesToLoad;
-    maybeDraw();
+  function fn$(i){
+    loadImage("packed-" + pad(i) + ".png", function(){
+      splitPacked(this, i);
+    });
+  }
+  function fn1$(i){
+    loadImage("blue-marble-" + pad(i) + ".jpg", function(){
+      landTextures[i - 1] = setTexture(gl.createTexture(), this);
+      --texturesToLoad;
+      maybeDraw();
+    });
   }
 }).call(this);