thajohns
/
webasm-dabble
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Added animation

Thomas Johnson 1 year ago
parent
e228870c5c
commit
8a3362112f
4 changed files with 78 additions and 20 deletions
Split View Show Diff Stats
  1. 2
    0
      .gitignore
  2. 2
    1
      index.html
  3. 43
    9
      index.js
  4. 31
    10
      src/lib.rs

+ 2
- 0
.gitignore View File 

@@ -1,2 +1,4 @@
1 1 
 /target
2 2 
 Cargo.lock
3 
+wt.wasm
4 
+wtrelease.wasm

+ 2
- 1
index.html View File 

@@ -1,8 +1,9 @@
1 
+<meta charset='UTF-8'>
1 2 
 <html>
2 3 
   <head>
3 4 
     <script defer src="index.js"></script>
4 5 
   </head>
5 6 
   <body id="body">
6 
-    <canvas id="canvas" height=1000 width=1500></canvas>
7 
+    <canvas id="canvas" height=500 width=500></canvas>
7 8 
   </body>
8 9 
 </html>

+ 43
- 9
index.js View File 

@@ -7,14 +7,41 @@ function get_string(memory, pointer, size)
7 7 
   return (new TextDecoder()).decode(array);
8 8 
 }
9 9
10 
-function paint(memory, pointer, width, height)
11 10 
 {
12 
-  array = new Uint8ClampedArray(memory.buffer, pointer, 4 * width * height);
13 
-  data = new ImageData(array, width, height);
14 
-  ctx.putImageData(data, 0, 0);
11 
+  var data;
12 
+  function init_buffer(memory, pointer, width, height)
13 
+  {
14 
+    var array = new Uint8ClampedArray(memory.buffer, pointer, 4 * width * height);
15 
+    data = new ImageData(array, width, height);
16 
+  }
17 
+
18 
+  function paint()
19 
+  {
20 
+    ctx.putImageData(data, 0, 0);
21 
+  }
22 
+}
23 
+
24 
+{
25 
+  var cb, rqn;
26 
+  function anim(callback)
27 
+  {
28 
+    cb = callback;
29 
+    rqn = window.requestAnimationFrame(anim_loop);
30 
+  }
31 
+
32 
+  function stop_anim()
33 
+  {
34 
+    window.cancelAnimationFrame(rqn);
35 
+  }
36 
+
37 
+  function anim_loop(ts)
38 
+  {
39 
+    rqn = window.requestAnimationFrame(anim_loop);
40 
+    cb(ts);
41 
+  }
15 42 
 }
16 43
17 
-fetch("wt.wasm").then(response => response.arrayBuffer()).then(bytes =>
44 
+fetch("wtrelease.wasm").then(response => response.arrayBuffer()).then(bytes =>
18 45 
   {
19 46 
     var memory;
20 47 
     WebAssembly.instantiate(bytes, { env:
 
@@ -23,15 +50,22 @@ fetch("wt.wasm").then(response => response.arrayBuffer()).then(bytes =>
23 50 
         {
24 51 
           console.log(get_string(memory, str, len));
25 52 
         },
53 
+        extern_init_buffer: function(pointer, width, height)
54 
+        {
55 
+          init_buffer(memory, pointer, width, height);
56 
+        },
26 57 
         extern_paint: function(pointer, width, height)
27 58 
         {
28 
-          paint(memory, pointer, width, height);
29 
-        }
59 
+          paint();
60 
+        },
30 61 
       } }).then(mod =>
31 62 
       {
32 63 
         memory = mod.instance.exports.memory;
33 
-        mod.instance.exports.entrypoint();
34 
-        mod.instance.exports.paint_red(canvas.width, canvas.height);
64 
+        //mod.instance.exports.entrypoint();
65 
+        anim(function(ts)
66 
+          {
67 
+            mod.instance.exports.paint_red(canvas.width, canvas.height, ts);
68 
+          });
35 69 
       }
36 70 
     )
37 71 
   });

+ 31
- 10
src/lib.rs View File 

@@ -11,7 +11,9 @@ extern "C"
11 11 
   #[no_mangle]
12 12 
   fn console_log(_: *const u8, _: usize);
13 13 
   #[no_mangle]
14 
-  fn extern_paint(ptr: *const u8, w: usize, h: usize);
14 
+  fn extern_init_buffer(ptr: *const u8, w: usize, h: usize);
15 
+  #[no_mangle]
16 
+  fn extern_paint();
15 17 
 }
16 18
17 19 
 fn log(string: &str)
 
@@ -23,9 +25,14 @@ fn log(string: &str)
23 25 
   }
24 26 
 }
25 27
26 
-fn paint(buffer: &[u8], w: usize, h: usize)
28 
+fn init_buffer(buffer: &[u8], w: usize, h: usize)
29 
+{
30 
+  unsafe { extern_init_buffer(buffer.as_ptr(), w, h); }
31 
+}
32 
+
33 
+fn paint()
27 34 
 {
28 
-  unsafe { extern_paint(buffer.as_ptr(), w, h); }
35 
+  unsafe { extern_paint(); }
29 36 
 }
30 37
31 38 
 #[no_mangle]
 
@@ -35,18 +42,32 @@ pub extern "C" fn entrypoint()
35 42 
 }
36 43
37 44 
 #[no_mangle]
38 
-pub extern "C" fn paint_red(w: usize, h: usize)
45 
+pub extern "C" fn paint_red(w: usize, h: usize, ts: f64)
39 46 
 {
47 
+  fn smooth_convert(v: f64, step: f64) -> u8
48 
+  {
49 
+    if 256.0 - v < step
50 
+    {
51 
+      return ((256.0 - v) / step * 255.0) as u8;
52 
+    } else
53 
+    {
54 
+      return (v * 255.0 / (256.0 - step)) as u8;
55 
+    }
56 
+  }
57 
+  let t = (ts / 50.0).rem_euclid(256.0);
40 58 
   let mut buffer = vec![0; 4 * w * h];
41 
-  let mut c: (u8, u8, u8) = (0, 0, 0);
59 
+  init_buffer(&buffer, w, h);
60 
+  let mut c: (f64, f64, f64) = (t, t, t);
61 
+  let step = (1.0, 254.0, 2.0);
42 62 
   for ii in 0 .. w * h
43 63 
   {
44 
-    buffer[4 * ii] = c.0;
45 
-    buffer[4 * ii + 1] = c.1;
46 
-    buffer[4 * ii + 2] = c.2;
64 
+    buffer[4 * ii]     = smooth_convert(c.0, step.0);
65 
+    buffer[4 * ii + 1] = smooth_convert(c.1, step.1);
66 
+    buffer[4 * ii + 2] = smooth_convert(c.2, step.2);
47 67 
     buffer[4 * ii + 3] = 255;
48 
-    c = (c.0.wrapping_add(1), c.1.wrapping_add(254), c.2.wrapping_add(2));
68 
+    c = (c.0 + step.0, c.1 + step.1, c.2 + step.2);
69 
+    c = (c.0.rem_euclid(256.0), c.1.rem_euclid(256.0), c.2.rem_euclid(256.0));
49 70 
   }
50 
-  paint(&buffer, w, h);
71 
+  paint();
51 72 
 }
52 73

Write Preview
Loading…
Cancel
Save