animation of some function

main.js

@@ -80,25 +80,18 @@ async function run() {
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
 
 
-    const width = 4;
+    const width = 40;
-    const height = 5;
+    const height = 50;
     let universe = Universe.new(width, height);
-    /*
+
-    const field = new Uint8Array(width*height);
+    let t = performance.now();
-    for (let i = 0; i < height; i += 1) {
+    universe.set_initial(t/1000.0);
-        for (let j = 0; j < width; j += 1) {
+
-            // Each bin is the same size when +1
+    let drawable = universe.get_drawable();
-            // 0.1, 0.9, 1.0, ..., 255.0, 255.9, 256.0
+
-            // |------|,         ,|-----------|, |--RNG stops here--|
+    const field = new Uint8Array(wasm.memory.buffer,
-            field[i*width + j] = Math.floor(Math.random() * (255 + 1));
+            drawable.get_pointer(),
-        }
+            drawable.width()*drawable.height());
-    }
-    */
-    universe.set_something();
-    const field = new Uint8Array(wasm.memory.buffer, universe.get_field(), width*height);
-    console.log(field);
-    console.log(wasm.memory.buffer);
-    console.log(universe.get_field());
 
     const texture = gl.createTexture();
     {
@@ -136,7 +129,7 @@ async function run() {
         gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions);
     }
 
-    function drawMe() {
+    function drawMe(t) {
 
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
@@ -146,10 +139,28 @@ async function run() {
             gl.uniform1i(programInfo.uniformLocation.sampler, 0);
         }
 
+        universe.set_initial(t/1000.0);
+
+        let drawable = universe.get_drawable();
+
+        const field = new Uint8Array(wasm.memory.buffer,
+                drawable.get_pointer(),
+                drawable.width()*drawable.height());
+        {
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            const level = 0;
+            const internalFormat = gl.ALPHA;
+            const border = 0;
+            const srcFormat = gl.ALPHA;
+            const srcType = gl.UNSIGNED_BYTE;
+            gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, field);
+        }
 
         const offset = 0;
         const vertexCount = 4;
         gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+
+        window.requestAnimationFrame(drawMe);
     }
 
     // https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324
@@ -158,11 +169,11 @@ async function run() {
         canvas.height = window.innerHeight;
 
         gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-        drawMe();
     }
 
     window.addEventListener('resize', resizeCanvas, false);
     resizeCanvas();
+    window.requestAnimationFrame(drawMe);
 }
 
 run();

src/lib.rs

@@ -11,11 +11,25 @@ pub fn set_panic_hook() {
 
 #[wasm_bindgen]
 pub struct Universe {
+    width: u32,
+    height: u32,
+    field: Vec<f32>,
+}
+
+#[wasm_bindgen]
+pub struct Drawable {
     width: u32,
     height: u32,
     field: Vec<u8>,
 }
 
+const WAVESPEED: f32 = 1.0;
+
+fn func(x: f32, y: f32, t: f32) -> f32 {
+    use std::f32;
+    (2.0 * f32::consts::PI * (x + y) - WAVESPEED * t).sin()
+}
+
 #[wasm_bindgen]
 impl Universe {
     pub fn new(width: u32, height: u32) -> Self {
@@ -24,20 +38,51 @@ impl Universe {
         Universe {
             width,
             height,
-            field: vec![0u8; width as usize * height as usize],
+            field: vec![0.0; width as usize * height as usize],
         }
     }
 
-    pub fn set_something(&mut self) {
+    pub fn set_initial(&mut self, t: f32) {
         for j in 0..self.height {
             for i in 0..self.width {
-                self.field[(self.width * j + i) as usize] =
+                let x = i as f32 / self.width as f32;
-                    ((10 * i + 100 * j) % (u8::max_value() as u32)) as u8;
+                let y = j as f32 / self.height as f32;
+                self.field[(self.width * j + i) as usize] = func(x, y, t);
             }
         }
     }
 
-    pub fn get_field(&mut self) -> *mut u8 {
+    pub fn get_drawable(&self) -> Drawable {
-        self.field.as_mut_ptr()
+        // let fmin = self.field.iter().fold(0.0f32, |acc, x| acc.min(*x));
+        let fmin = -1.0;
+        // let fmax = self.field.iter().fold(0.0f32, |acc, x| acc.max(*x));
+        let fmax = 1.0;
+
+        let field = self
+            .field
+            .iter()
+            .map(|x| (u8::max_value() as f32 * (x - fmin) / (fmax - fmin)) as u8)
+            .collect::<Vec<_>>();
+
+        Drawable {
+            width: self.width,
+            height: self.height,
+            field,
+        }
+    }
+}
+
+#[wasm_bindgen]
+impl Drawable {
+    pub fn get_pointer(&mut self) -> *mut u8 {
+        self.field.as_mut_ptr()
+    }
+
+    pub fn width(&self) -> u32 {
+        self.width
+    }
+
+    pub fn height(&self) -> u32 {
+        self.height
     }
 }