From 9714088a389786b02830fd1523e20283bdfbd30f Mon Sep 17 00:00:00 2001 From: Magnus Ulimoen Date: Wed, 17 Jul 2019 22:49:36 +0200 Subject: [PATCH] animation of some function --- main.js | 51 +++++++++++++++++++++++++++++------------------- src/lib.rs | 57 ++++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 82 insertions(+), 26 deletions(-) diff --git a/main.js b/main.js index 48ec5dd..6157288 100644 --- a/main.js +++ b/main.js @@ -80,25 +80,18 @@ async function run() { gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); - const width = 4; - const height = 5; + const width = 40; + const height = 50; let universe = Universe.new(width, height); - /* - const field = new Uint8Array(width*height); - for (let i = 0; i < height; i += 1) { - for (let j = 0; j < width; j += 1) { - // Each bin is the same size when +1 - // 0.1, 0.9, 1.0, ..., 255.0, 255.9, 256.0 - // |------|, ,|-----------|, |--RNG stops here--| - field[i*width + j] = Math.floor(Math.random() * (255 + 1)); - } - } - */ - 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()); + + let t = performance.now(); + 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()); 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(); diff --git a/src/lib.rs b/src/lib.rs index 6e19c4e..02d87c6 100644 --- a/src/lib.rs +++ b/src/lib.rs @@ -11,11 +11,25 @@ pub fn set_panic_hook() { #[wasm_bindgen] pub struct Universe { + width: u32, + height: u32, + field: Vec, +} + +#[wasm_bindgen] +pub struct Drawable { width: u32, height: u32, field: Vec, } +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] = - ((10 * i + 100 * j) % (u8::max_value() as u32)) as u8; + let x = i as f32 / self.width as f32; + 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 { - self.field.as_mut_ptr() + pub fn get_drawable(&self) -> Drawable { + // 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::>(); + + 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 } }