Browse Source

Added animation

Thomas Johnson 7 months ago
parent
commit
8a3362112f
4 changed files with 78 additions and 20 deletions
  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
 

Loading…
Cancel
Save