added ridiculous wiper animation
authorBrendan Hansen <brendan.f.hansen@gmail.com>
Sat, 20 Feb 2021 20:02:14 +0000 (14:02 -0600)
committerBrendan Hansen <brendan.f.hansen@gmail.com>
Sat, 20 Feb 2021 20:02:14 +0000 (14:02 -0600)
dist/index.js
dist/prez.wasm
onyx.prez
src/canvas.onyx
src/show_parser.onyx
src/slides.onyx

index d966c3de991472ae2674c2f9c5d807746d22aedf..c44496f601db28e7adb49b92ced381c82e3d2bd8 100644 (file)
@@ -161,6 +161,18 @@ let canvas_import_obj = {
         data_view.setFloat32(20, transform.f, true);
     },
 
+    setScissor(canvas, x, y, w, h) {
+        canvasCtx.save();
+
+        canvasCtx.beginPath();
+        canvasCtx.rect(x, y, w, h);
+        canvasCtx.clip();
+    },
+
+    clearScissor(canvas) {
+        canvasCtx.restore();
+    },
+
     measureText(canvas, text_ptr, text_len, measure_ptr) {
         const data = new Uint8Array(wasm_instance.exports.memory.buffer, text_ptr, text_len);
         const text = new TextDecoder().decode(data);
index 7978033d617b2b6719fd8ac70c8cabf8b067b557..f8fed65ff1a2e7f8064b4f6c70aecfa5e0d65e49 100644 (file)
Binary files a/dist/prez.wasm and b/dist/prez.wasm differ
index b4531cad4414cfc2f72b13fb4cd0efafec7500ad..01f7daef102df479dc0cd7ce549d762cfbae22de 100644 (file)
--- a/onyx.prez
+++ b/onyx.prez
@@ -6,7 +6,15 @@
 
 [var back_r 20]
 [var back_g 20]
-[var back_b 40]
+[var back_b 30]
+
+[var cover_r 30]
+[var cover_g 30]
+[var cover_b 40]
+
+[var image_border_r 20]
+[var image_border_g 20]
+[var image_border_b 30]
 
 [define_text_style normal color   $text_r $text_g $text_b font_size 40 font_name "Arial" left padding 10]
 [define_text_style title color    $text_r $text_g $text_b font_attr bold font_size 72 font_name "Arial" centered]
@@ -23,8 +31,8 @@
 [slide] [background $back_r $back_g $back_b]
 [animation fade]
 
-[rect color 40 40 40 x 0 w 100 y 35 h 30]
-[rect color 0   0  0 x 0 w 100 y 40 h 20] 
+[rect color $cover_r $cover_g $cover_b x 0 w 100 y 35 h 30]
+[rect color 0        0        0        x 0 w 100 y 40 h 20] 
 
 [text_style title font_size 96]
 [y 50] Onyx
 
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] What is Onyx?
 
 [text_style normal]
-[y 22] New programming language for WebAssembly developed entirely by me.
+[y 22] New programming language for WebAssembly designed and developed by me.
 
 [y 34] Some important design features:
 [text_style inherit padding 15]
@@ -55,7 +63,8 @@
 ▪ Easy to read
 
 [image onyx_example x 50 y 30 width 35
-    border_color 30 30 30 border_width 2]
+    border_color $image_border_r $image_border_g $image_border_b
+    border_width 2]
 
 
 # ---------------------------------------------
@@ -63,7 +72,7 @@
 
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] Brief aside of WebAssembly
@@ -75,8 +84,8 @@
 [text_style inherit padding 15]
 ▪ Virtual Instruction Set Architecture
 ▪ Linear Memory Model
-▪ Arbitrary imports
 ▪ Safe indirect function calls
+▪ Arbitrary imports
 
 [text_style normal]
 [y 60] Multiple embeddings:
@@ -90,7 +99,8 @@
 https://webassembly.org/
 
 [image wasm_logo x 65 y 34 width 20
-    border_width 20 border_color 20 20 20]
+    border_color $image_border_r $image_border_g $image_border_b
+    border_width 10]
 
 
 # ---------------------------------------------
@@ -98,7 +108,7 @@ https://webassembly.org/
 
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] High Level Design
@@ -127,9 +137,31 @@ https://webassembly.org/
 # ---------------------------------------------
 # Hello, World!
 
+[slide]
+[animation wiper]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
+[rect color 0  0  0  x 0 w 100 y 5 h 10]
+[text_style header]
+[y 12] Obligatory 'Hello, World!' in Onyx
+
+[rect color 10 10 10 x 15 y 34 w 70 h 40]
+
+[text_style code]
+[y 40]
+ 1  #load "core/std"
+ 2
+ 3  use package core
+ 4
+ 5  main :: (args: [] cstr) {
+ 6      println("Hello, World!");
+ 7  }
+
+# ---------------------------------------------
+# Hello, World!
+
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] Obligatory 'Hello, World!' in Onyx
@@ -146,6 +178,9 @@ https://webassembly.org/
  6      println("Hello, World!");
  7  }
 
+ [text_style normal centered font_attr italic]
+ [y 80] Not the simplest 'Hello, World!', but this is not meant to be a simple language.
+
 
 # ---------------------------------------------
 # Compiler internals
@@ -154,7 +189,7 @@ https://webassembly.org/
 
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] Compiler Internal Design
@@ -186,7 +221,7 @@ https://webassembly.org/
 
 [slide]
 [animation swipe]
-[rect color 40 40 40 x 8 w 84  y 5 h 95]
+[rect color $cover_r $cover_g $cover_b x 8 w 84 y 5 h 95]
 [rect color 0  0  0  x 0 w 100 y 5 h 10]
 [text_style header]
 [y 12] What has been made in Onyx
index 37d0dee873965a32d4634c2abccb4f616e62b903..f06b128d0ba24de684aa6f6bc803ea8dcb3e6ad5 100644 (file)
@@ -18,6 +18,9 @@ Canvas :: struct {
 
     set_transform :: (handle: Handle, matrix: TransformMatrix) -> void #foreign "canvas" "setTransform" --- 
     get_transform :: (handle: Handle, out_matrix: TransformMatrix) -> void #foreign "canvas" "getTransform" ---
+    
+    set_scissor   :: (handle: Handle, x: f32, y: f32, w: f32, h: f32) -> void #foreign "canvas" "setScissor" ---
+    clear_scissor :: (handle: Handle) -> void #foreign "canvas" "clearScissor" ---
 
     TextMetrics :: struct {
         width : f32;
index 5939e725bddc55dce8bf427964c31f6fc0a5eb8b..591d6935154f36d80be98194ce00c65b29a4304f 100644 (file)
@@ -30,10 +30,11 @@ parse_slideshow :: (source: str, slideshow: ^Slideshow) {
     variables := map.make(str, u32);
     defer map.free(^variables);
 
-    animations := map.make(str, #type (Allocator) -> ^Slide_Animation, default=null_proc, hash_count=2);
+    animations := map.make(str, #type (Allocator) -> ^Slide_Animation, default=null_proc, hash_count=4);
     defer map.free(^animations);
     map.put(^animations, "swipe", Slide_Animation_Swipe.make);
     map.put(^animations, "fade",  Slide_Animation_Fade.make);
+    map.put(^animations, "wiper", Slide_Animation_Wiper.make);
 
     parse_context := ParseContext.{ ^show_reader, ^variables };
 
index ea6717bd4a1784a430a5e93bd98cbdc720c8137e..413ba1a25a84312474c518f7e5ed60aa01563df9 100644 (file)
@@ -372,9 +372,9 @@ Slide_Animation :: struct {
 
 Slide_Animation_Swipe :: struct {
     use base := Slide_Animation.{
-        init   = swipe_animation_init,
-        update = swipe_animation_update,
-        render = swipe_animation_render
+        init   = init,
+        update = update,
+        render = render
     };
 
     t  : f32 = 0;
@@ -387,47 +387,45 @@ Slide_Animation_Swipe :: struct {
         
         return anim;
     }
-}
 
-#private_file
-swipe_animation_init :: (use anim: ^Slide_Animation_Swipe, source := -1, target := -1) {
-    source_slide = source;
-    target_slide = target;
+    init :: (use anim: ^Slide_Animation_Swipe, source := -1, target := -1) {
+        source_slide = source;
+        target_slide = target;
 
-    t = 0;
-}
+        t = 0;
+    }
 
-#private_file
-swipe_animation_update :: (use anim: ^Slide_Animation_Swipe) -> bool {
-    t += dt;
-    return t >= 1;
-}
+    update :: (use anim: ^Slide_Animation_Swipe) -> bool {
+        t += dt;
+        return t >= 1;
+    }
 
-#private_file
-swipe_animation_render :: (use anim: ^Slide_Animation_Swipe, slideshow: ^Slideshow) {
-    source := ^slideshow.slides[source_slide];    
-    target := ^slideshow.slides[target_slide];
+    render :: (use anim: ^Slide_Animation_Swipe, slideshow: ^Slideshow) {
+        source := ^slideshow.slides[source_slide];    
+        target := ^slideshow.slides[target_slide];
 
-    canvas_width := cast(f32) Canvas.get_width(canvas);
+        canvas_width := cast(f32) Canvas.get_width(canvas);
 
-    multiplier := -1.0f;
-    if target_slide < source_slide do multiplier = 1;
+        multiplier := -1.0f;
+        if target_slide < source_slide do multiplier = 1;
 
-    offset := (1 - math.pow(1 - t, 3)) * canvas_width * multiplier;
-    trans := f32.[ 1, 0, 0, 1, offset, 0 ];
-    Canvas.set_transform(canvas, trans);
-    slide_render(source);
+        offset := (1 - math.pow(1 - t, 3)) * canvas_width * multiplier;
+        trans := f32.[ 1, 0, 0, 1, offset, 0 ];
+        Canvas.set_transform(canvas, trans);
+        slide_render(source);
 
-    trans[4] -= canvas_width * multiplier;
-    Canvas.set_transform(canvas, trans);
-    slide_render(target);
+        trans[4] -= canvas_width * multiplier;
+        Canvas.set_transform(canvas, trans);
+        slide_render(target);
+    }
 }
 
+
 Slide_Animation_Fade :: struct {
     use base := Slide_Animation.{
-        init   = fade_animation_init,
-        update = fade_animation_update,
-        render = fade_animation_render
+        init   = init,
+        update = update,
+        render = render
     };
 
     t  : f32 = 0;
@@ -440,39 +438,92 @@ Slide_Animation_Fade :: struct {
         
         return anim;
     }
-}
 
-#private_file
-fade_animation_init :: (use anim: ^Slide_Animation_Fade, source := -1, target := -1) {
-    source_slide = source;
-    target_slide = target;
+    init :: (use anim: ^Slide_Animation_Fade, source := -1, target := -1) {
+        source_slide = source;
+        target_slide = target;
 
-    t = 0;
-}
+        t = 0;
+    }
+
+    update :: (use anim: ^Slide_Animation_Fade) -> bool {
+        t += dt;
+        return t >= 1;
+    }
+
+    render :: (use anim: ^Slide_Animation_Fade, slideshow: ^Slideshow) {
+        source := ^slideshow.slides[source_slide];    
+        target := ^slideshow.slides[target_slide];
 
-#private_file
-fade_animation_update :: (use anim: ^Slide_Animation_Fade) -> bool {
-    t += dt;
-    return t >= 1;
+        canvas_width, canvas_height := cast(f32) Canvas.get_width(canvas), cast(f32) Canvas.get_height(canvas);
+
+        if t < 0.5 {
+            slide_render(source);
+
+            Canvas.fill_rect(canvas, 0, 0, canvas_width, canvas_height,
+                             0, 0, 0, t * 2);
+        } else {
+            slide_render(target);
+
+            Canvas.fill_rect(canvas, 0, 0, canvas_width, canvas_height,
+                             0, 0, 0, (1 - t) * 2);
+        }
+    }
 }
 
-#private_file
-fade_animation_render :: (use anim: ^Slide_Animation_Fade, slideshow: ^Slideshow) {
-    source := ^slideshow.slides[source_slide];    
-    target := ^slideshow.slides[target_slide];
+Slide_Animation_Wiper :: struct {
+    use base := Slide_Animation.{
+        init   = init,
+        update = update,
+        render = render
+    };
 
-    canvas_width, canvas_height := cast(f32) Canvas.get_width(canvas), cast(f32) Canvas.get_height(canvas);
+    t  : f32 = 0;
+    dt : f32 = 0.03;
+    
+    draw_line := false;
+
+    make :: (allocator := context.allocator) -> ^Slide_Animation_Wiper {
+        anim := new(Slide_Animation_Wiper, allocator=allocator);
+        *anim = Slide_Animation_Wiper.{};
+        
+        return anim;
+    }
 
-    if t < 0.5 {
+    init :: (use anim: ^Slide_Animation_Wiper, source := -1, target := -1) {
+        source_slide = source;
+        target_slide = target;
+
+        t = 0;
+    }
+
+    update :: (use anim: ^Slide_Animation_Wiper) -> bool {
+        t += dt;
+        return t >= 1;
+    }
+
+    render :: (use anim: ^Slide_Animation_Wiper, slideshow: ^Slideshow) {
+        source := ^slideshow.slides[source_slide];    
+        target := ^slideshow.slides[target_slide];
+
+        canvas_width, canvas_height := cast(f32) Canvas.get_width(canvas), cast(f32) Canvas.get_height(canvas);
+
+        x := t * canvas_width;
+        y := 0.0f;
+        w := (1 - t) * canvas_width;
+        h := canvas_height;
+        
+        Canvas.set_scissor(canvas, x, y, w, h);
         slide_render(source);
+        Canvas.clear_scissor(canvas);
 
-        Canvas.fill_rect(canvas, 0, 0, canvas_width, canvas_height,
-                         0, 0, 0, t * 2);
-    } else {
+        x = 0;
+        w = canvas_width - w;
+        Canvas.set_scissor(canvas, x, y, w, h);
         slide_render(target);
+        Canvas.clear_scissor(canvas);
 
-        Canvas.fill_rect(canvas, 0, 0, canvas_width, canvas_height,
-                         0, 0, 0, (1 - t) * 2);
+        if draw_line do Canvas.fill_rect(canvas, t * canvas_width - 2, 0, 4, canvas_height, 1, 1, 1, 1);
     }
 }