diff --git a/app-proto/inversive-display/src/main.rs b/app-proto/inversive-display/src/main.rs index b10f31a..72846fc 100644 --- a/app-proto/inversive-display/src/main.rs +++ b/app-proto/inversive-display/src/main.rs @@ -8,7 +8,7 @@ // extern crate js_sys; -/* use std::f64::consts::PI as PI; */ +use std::f64::consts::PI as PI; use sycamore::{prelude::*, rt::{JsCast, JsValue}}; use web_sys::{console, WebGl2RenderingContext, WebGlShader}; @@ -71,6 +71,7 @@ fn main() { console_error_panic_hook::set_once(); sycamore::render(|| { + let turn = create_signal(0.0); let tip = create_signal(0.0); let display = create_node_ref(); @@ -98,9 +99,11 @@ fn main() { out vec4 vertexColor; uniform mat4 world_to_clip; + uniform mat3 rotation; void main() { - gl_Position = world_to_clip * vec4(position, 1.); + vec3 world_pos = rotation * position - vec3(0., 0., 6.); + gl_Position = world_to_clip * vec4(world_pos, 1.); vertexColor = vec4(color, 1.); } "##, @@ -141,6 +144,7 @@ fn main() { let position_index = ctx.get_attrib_location(&program, "position") as u32; let color_index = ctx.get_attrib_location(&program, "color") as u32; let world_to_clip_loc = ctx.get_uniform_location(&program, "world_to_clip"); + let rotation_loc = ctx.get_uniform_location(&program, "rotation"); // create a vertex array and bind it to the graphics context let vertex_array = ctx.create_vertex_array().unwrap(); @@ -167,17 +171,17 @@ fn main() { let tip_shift = 4.0/3.0 * tip.get() as f32; let positions: [f32; 3*VERTEX_CNT] = [ // triangle 1 - 1.0 - tip_shift, 1.0 - tip_shift, -5.0 - tip_shift, - 1.0, -1.0, -7.0, - -1.0, 1.0, -7.0, + 1.0 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift, + 1.0, -1.0, -1.0, + -1.0, 1.0, -1.0, // triangle 2 - 1.0 - tip_shift, 1.0 - tip_shift, -5.0 - tip_shift, - -1.0, 1.0, -7.0, - -1.0, -1.0, -7.0, + 1.0 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift, + -1.0, 1.0, -1.0, + -1.0, -1.0, 1.0, // triangle 3 - 1.0 - tip_shift, 1.0 - tip_shift, -5.0 - tip_shift, - -1.0, -1.0, -7.0, - 1.0, -1.0, -7.0 + 1.0 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift, + -1.0, -1.0, 1.0, + 1.0, -1.0, -1.0 ]; bind_vertex_attrib(&ctx, position_index, 3, &positions); @@ -198,6 +202,17 @@ fn main() { ]; bind_vertex_attrib(&ctx, color_index, 3, &colors); + // set the rotation + let angle_val = (2.0*PI*turn.get()) as f32; + let angle_cos = angle_val.cos(); + let angle_sin = angle_val.sin(); + let rotation: [f32; 9] = [ + angle_cos, 0.0, angle_sin, + 0.0, 1.0, 0.0, + -angle_sin, 0.0, angle_cos, + ]; + ctx.uniform_matrix3fv_with_f32_array(rotation_loc.as_ref(), false, &rotation); + // clear the screen and draw the scene ctx.clear_color(0.0, 0.0, 0.0, 1.0); ctx.clear(WebGl2RenderingContext::COLOR_BUFFER_BIT); @@ -208,6 +223,12 @@ fn main() { view! { div(id="app") { canvas(ref=display, width="600", height="600") + input( + type="range", + max=1.0, + step=0.01, + bind:valueAsNumber=turn + ) input( type="range", max=1.0,