Added animation

2 years ago · 8a3362112f
4 changed files with 78 additions and 20 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,4 @@
 /target
 Cargo.lock
+wt.wasm
+wtrelease.wasm
--- a/index.html
+++ b/index.html
@ -1,8 +1,9 @@
+<meta charset='UTF-8'>
 <html>
  <head>
    <script defer src="index.js"></script>
  </head>
  <body id="body">
-    <canvas id="canvas" height=1000 width=1500></canvas>
+    <canvas id="canvas" height=500 width=500></canvas>
  </body>
 </html>
--- a/index.js
+++ b/index.js
@ -7,14 +7,41 @@ function get_string(memory, pointer, size)
  return (new TextDecoder()).decode(array);
 }

-function paint(memory, pointer, width, height)
 {
-  array = new Uint8ClampedArray(memory.buffer, pointer, 4 * width * height);
-  data = new ImageData(array, width, height);
-  ctx.putImageData(data, 0, 0);
+  var data;
+  function init_buffer(memory, pointer, width, height)
+  {
+    var array = new Uint8ClampedArray(memory.buffer, pointer, 4 * width * height);
+    data = new ImageData(array, width, height);
+  }
+
+  function paint()
+  {
+    ctx.putImageData(data, 0, 0);
+  }
+}
+
+{
+  var cb, rqn;
+  function anim(callback)
+  {
+    cb = callback;
+    rqn = window.requestAnimationFrame(anim_loop);
+  }
+
+  function stop_anim()
+  {
+    window.cancelAnimationFrame(rqn);
+  }
+
+  function anim_loop(ts)
+  {
+    rqn = window.requestAnimationFrame(anim_loop);
+    cb(ts);
+  }
 }

-fetch("wt.wasm").then(response => response.arrayBuffer()).then(bytes =>
+fetch("wtrelease.wasm").then(response => response.arrayBuffer()).then(bytes =>
  {
    var memory;
    WebAssembly.instantiate(bytes, { env:
@ -23,15 +50,22 @@ fetch("wt.wasm").then(response => response.arrayBuffer()).then(bytes =>
        {
          console.log(get_string(memory, str, len));
        },
+        extern_init_buffer: function(pointer, width, height)
+        {
+          init_buffer(memory, pointer, width, height);
+        },
        extern_paint: function(pointer, width, height)
        {
-          paint(memory, pointer, width, height);
-        }
+          paint();
+        },
      } }).then(mod =>
      {
        memory = mod.instance.exports.memory;
-        mod.instance.exports.entrypoint();
-        mod.instance.exports.paint_red(canvas.width, canvas.height);
+        //mod.instance.exports.entrypoint();
+        anim(function(ts)
+          {
+            mod.instance.exports.paint_red(canvas.width, canvas.height, ts);
+          });
      }
    )
  });
--- a/src/lib.rs
+++ b/src/lib.rs
@ -11,7 +11,9 @@ extern "C"
  #[no_mangle]
  fn console_log(_: *const u8, _: usize);
  #[no_mangle]
-  fn extern_paint(ptr: *const u8, w: usize, h: usize);
+  fn extern_init_buffer(ptr: *const u8, w: usize, h: usize);
+  #[no_mangle]
+  fn extern_paint();
 }

 fn log(string: &str)
@ -23,9 +25,14 @@ fn log(string: &str)
  }
 }

-fn paint(buffer: &[u8], w: usize, h: usize)
+fn init_buffer(buffer: &[u8], w: usize, h: usize)
+{
+  unsafe { extern_init_buffer(buffer.as_ptr(), w, h); }
+}
+
+fn paint()
 {
-  unsafe { extern_paint(buffer.as_ptr(), w, h); }
+  unsafe { extern_paint(); }
 }

 #[no_mangle]
@ -35,18 +42,32 @@ pub extern "C" fn entrypoint()
 }

 #[no_mangle]
-pub extern "C" fn paint_red(w: usize, h: usize)
+pub extern "C" fn paint_red(w: usize, h: usize, ts: f64)
 {
+  fn smooth_convert(v: f64, step: f64) -> u8
+  {
+    if 256.0 - v < step 
+    {
+      return ((256.0 - v) / step * 255.0) as u8;
+    } else
+    {
+      return (v * 255.0 / (256.0 - step)) as u8;
+    }
+  }
+  let t = (ts / 50.0).rem_euclid(256.0);
  let mut buffer = vec![0; 4 * w * h];
-  let mut c: (u8, u8, u8) = (0, 0, 0);
+  init_buffer(&buffer, w, h);
+  let mut c: (f64, f64, f64) = (t, t, t);
+  let step = (1.0, 254.0, 2.0);
  for ii in 0 .. w * h
  {
-    buffer[4 * ii] = c.0;
-    buffer[4 * ii + 1] = c.1;
-    buffer[4 * ii + 2] = c.2;
+    buffer[4 * ii]     = smooth_convert(c.0, step.0);
+    buffer[4 * ii + 1] = smooth_convert(c.1, step.1);
+    buffer[4 * ii + 2] = smooth_convert(c.2, step.2);
    buffer[4 * ii + 3] = 255;
-    c = (c.0.wrapping_add(1), c.1.wrapping_add(254), c.2.wrapping_add(2));
+    c = (c.0 + step.0, c.1 + step.1, c.2 + step.2);
+    c = (c.0.rem_euclid(256.0), c.1.rem_euclid(256.0), c.2.rem_euclid(256.0));
  }
-  paint(&buffer, w, h);
+  paint();
 }