animation of some function

This commit is contained in:
Magnus Ulimoen 2019-07-17 22:49:36 +02:00
parent c62e9fa15c
commit 9714088a38
2 changed files with 82 additions and 26 deletions

51
main.js
View File

@ -80,25 +80,18 @@ async function run() {
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); 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); 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(); const texture = gl.createTexture();
{ {
@ -136,7 +129,7 @@ async function run() {
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions); gl.enableVertexAttribArray(programInfo.attribLocations.vertexPositions);
} }
function drawMe() { function drawMe(t) {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
@ -146,10 +139,28 @@ async function run() {
gl.uniform1i(programInfo.uniformLocation.sampler, 0); 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 offset = 0;
const vertexCount = 4; const vertexCount = 4;
gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
window.requestAnimationFrame(drawMe);
} }
// https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324 // https://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport#8486324
@ -158,11 +169,11 @@ async function run() {
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
drawMe();
} }
window.addEventListener('resize', resizeCanvas, false); window.addEventListener('resize', resizeCanvas, false);
resizeCanvas(); resizeCanvas();
window.requestAnimationFrame(drawMe);
} }
run(); run();

View File

@ -11,11 +11,25 @@ pub fn set_panic_hook() {
#[wasm_bindgen] #[wasm_bindgen]
pub struct Universe { pub struct Universe {
width: u32,
height: u32,
field: Vec<f32>,
}
#[wasm_bindgen]
pub struct Drawable {
width: u32, width: u32,
height: u32, height: u32,
field: Vec<u8>, 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] #[wasm_bindgen]
impl Universe { impl Universe {
pub fn new(width: u32, height: u32) -> Self { pub fn new(width: u32, height: u32) -> Self {
@ -24,20 +38,51 @@ impl Universe {
Universe { Universe {
width, width,
height, 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 j in 0..self.height {
for i in 0..self.width { 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 {
// 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() self.field.as_mut_ptr()
} }
pub fn width(&self) -> u32 {
self.width
}
pub fn height(&self) -> u32 {
self.height
}
} }