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 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift,
-                    1.0, -1.0, -7.0,
+                    1.0, -1.0, -1.0,
-                    -1.0, 1.0, -7.0,
+                    -1.0, 1.0, -1.0,
                     // triangle 2
-                    1.0 - tip_shift, 1.0 - tip_shift, -5.0 - tip_shift,
+                    1.0 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift,
-                    -1.0, 1.0, -7.0,
+                    -1.0, 1.0, -1.0,
-                    -1.0, -1.0, -7.0,
+                    -1.0, -1.0, 1.0,
                     // triangle 3
-                    1.0 - tip_shift, 1.0 - tip_shift, -5.0 - tip_shift,
+                    1.0 - tip_shift, 1.0 - tip_shift, 1.0 - tip_shift,
-                    -1.0, -1.0, -7.0,
+                    -1.0, -1.0, 1.0,
-                    1.0, -1.0, -7.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,