From: Brendan Hansen Date: Sat, 20 Feb 2021 20:02:14 +0000 (-0600) Subject: added ridiculous wiper animation X-Git-Url: https://git.brendanfh.com/?a=commitdiff_plain;h=344db13b6c1dc1c2de64d646b31bca31076c472e;p=onyx-prez.git added ridiculous wiper animation --- diff --git a/dist/index.js b/dist/index.js index d966c3d..c44496f 100644 --- a/dist/index.js +++ b/dist/index.js @@ -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); diff --git a/dist/prez.wasm b/dist/prez.wasm index 7978033..f8fed65 100644 Binary files a/dist/prez.wasm and b/dist/prez.wasm differ diff --git a/onyx.prez b/onyx.prez index b4531ca..01f7dae 100644 --- 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 @@ -39,13 +47,13 @@ [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 diff --git a/src/canvas.onyx b/src/canvas.onyx index 37d0dee..f06b128 100644 --- a/src/canvas.onyx +++ b/src/canvas.onyx @@ -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; diff --git a/src/show_parser.onyx b/src/show_parser.onyx index 5939e72..591d693 100644 --- a/src/show_parser.onyx +++ b/src/show_parser.onyx @@ -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 }; diff --git a/src/slides.onyx b/src/slides.onyx index ea6717b..413ba1a 100644 --- a/src/slides.onyx +++ b/src/slides.onyx @@ -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); } }