/** * Animation Examples for Browser UI * * Total examples: 33 * * This file provides example animations for the Berry Animation Simulator. * Each example includes a name, description, category, and DSL code. * * Generated by: scripts/bundle-animation-examples.py */ (function(window) { 'use strict'; const examples = [ { id: "chap_1_10_plain", number: "1.10", name: "Plain", description: "Solid red background - the simplest animation", category: "1. Getting Started", code: "# @desc Solid red background - the simplest animation\n\nanimation back = solid(color=red)\nrun back" }, { id: "chap_1_20_plain_custom_color", number: "1.20", name: "Plain Custom Color", description: "Solid dark clue - using a custom color", category: "1. Getting Started", code: "# @desc Solid dark clue - using a custom color\n\ncolor space_blue = 0x000066 # Note: opaque 0xFF alpha channel is implicitly added\nanimation back = solid(color=space_blue)\nrun back" }, { id: "chap_1_30_twinkle", number: "1.30", name: "Twinkle", description: "Twinkle stars - using predefined animations", category: "1. Getting Started", code: "# @desc Twinkle stars - using predefined animations\n\nanimation stars = twinkle()\nrun stars" }, { id: "chap_1_40_twinke_params", number: "1.40", name: "Twinke Params", description: "Twinkle stars with parameters - using animation parameters", category: "1. Getting Started", code: "# @desc Twinkle stars with parameters - using animation parameters\n\n# Note: when parameters are in separate lines, you don't need a comma ','\nanimation stars = twinkle(\n color=0xFFFFAA # Light yellow sparkles\n density=8 # density (moderate sparkles)\n twinkle_speed=100ms # twinkle speed\n fade_speed=50 # when no unit, time unit is 'ms' \n)\nrun stars" }, { id: "chap_1_50_twinke_night", number: "1.50", name: "Twinke Night", description: "Twinkle night - twinkle stars over a dark night", category: "1. Getting Started", code: "# @desc Twinkle night - twinkle stars over a dark night\n\n# Dark blue background\ncolor space_blue = 0x000066 # Note: opaque 0xFF alpha channel is implicitly added\nanimation background = solid(color=space_blue)\nrun background\n\n# Note: when parameters are in separate lines, you don't need a comma ','\nanimation stars = twinkle(\n color=0xFFFFAA # Light yellow sparkles\n density=8 # density (moderate sparkles)\n twinkle_speed=100ms # twinkle speed\n fade_speed=50 # when no unit, time unit is 'ms'\n priority=8 # default priority is 10, so being lower than background puts it on top\n)\nrun stars" }, { id: "chap_2_10_palette_rotation", number: "2.10", name: "Palette Rotation", description: "Rainbow colors cycling through the entire strip over time", category: "2. Color Cycling", code: "# @desc Rainbow colors cycling through the entire strip over time\n\n# Define a color attribute that cycles over time, cycle is 5 seconds\n# PALETTE_RAINBOW defines 7 rainbow colors at roughly the same brightness\n# PALETTE_RAINBOW_W adds 8th color white\ncolor rainbow_color = color_cycle(colors=PALETTE_RAINBOW_W, period=5s)\nanimation back = solid(color=rainbow_color)\nrun back" }, { id: "chap_2_20_palette_rotation", number: "2.20", name: "Palette Rotation", description: "Rainbow colors cycling with custom palette", category: "2. Color Cycling", code: "# @desc Rainbow colors cycling with custom palette\n\n# Define a palette of rainbow colors including white with constant brightness\n# By default spacing in time is evenly spread over all colors\npalette rainbow_with_white = [\n 0xFC0000 # Red\n 0xFF8000 # Orange\n 0xFFFF00 # Yellow\n 0x00FF00 # Green\n 0x00FFFF # Cyan\n 0x0080FF # Blue\n 0x8000FF # Violet\n 0xCCCCCC # White\n]\n\n# Define a color attribute that cycles over time, cycle is 5 seconds\ncolor rainbow_color = color_cycle(colors=rainbow_with_white, period=5s)\n\n# Define a solid background with this dynamic color\nanimation back = solid(color=rainbow_color)\nrun back" }, { id: "chap_3_10_color_transition", number: "3.10", name: "Color Transition", description: "Smooth cycling through rainbow colors with custom palette", category: "3. Smooth Transitions", code: "# @desc Smooth cycling through rainbow colors with custom palette\n\nanimation back = rich_palette()\n# Equivalent to\n# animation back = rich_palette(colors=PALETTE_PALETTE_RAINBOW, period=5s,\n# transition_type=SINE, brightness=100%)\nrun back" }, { id: "chap_3_20_color_transition_palette", number: "3.20", name: "Color Transition Palette", description: "Smooth cycling through rainbow colors with custom palette", category: "3. Smooth Transitions", code: "# @desc Smooth cycling through rainbow colors with custom palette\n\n# This is the more explicit version\n# Define a palette of rainbow colors including white with constant brightness\npalette rainbow_with_white = [\n 0xFC0000 # Red\n 0xFF8000 # Orange\n 0xFFFF00 # Yellow\n 0x00FF00 # Green\n 0x00FFFF # Cyan\n 0x0080FF # Blue\n 0x8000FF # Violet\n 0xCCCCCC # White\n 0xFC0000 # Red - need to add the first color at last position to ensure roll-over\n]\n\n# Define a color attribute that cycles over time, cycle is 10 seconds\ncolor rainbow_color_rollover = rich_palette_color(period=10s)\n\n# Use the dynamic color in a simple 'solid' animation\nanimation back = solid(color=rainbow_color_rollover)\nrun back" }, { id: "chap_4_10_color_pattern", number: "4.10", name: "Color Pattern", description: "Rainbow pattern", category: "4. Spatial Patterns", code: "# @desc Rainbow pattern\n\n# Define a smooth palette using PALETTE_RAINBOW_W (7 colors + white)\n# 'period = 0' means that the colors don't change in time, only spatial change\ncolor rainbow_rich_color = rich_palette_color(colors=PALETTE_RAINBOW_W, period=0)\n\n# Define a gradient across the whole strip\nanimation back_pattern = palette_gradient(color_source = rainbow_rich_color)\nrun back_pattern" }, { id: "chap_4_12_color_pattern_spatial_2", number: "4.12", name: "Color Pattern Spatial 2", description: "Rainbow gradient with 2 repetitions across the strip", category: "4. Spatial Patterns", code: "# @desc Rainbow gradient with 2 repetitions across the strip\n\n\n# Define a smooth palette using PALETTE_RAINBOW_W (7 colors + white)\n# 'period = 0' means that the colors don't change in time, only spatial change\ncolor rainbow_rich_color = rich_palette_color(colors=PALETTE_RAINBOW_W, period=0)\n\n# Because strip_length is dynamic, we need to map it to a variable and can't use the function directly in formulas\nset strip_len = strip_length()\n\n# define a gradient across the whole strip\nanimation back_pattern = palette_gradient(color_source = rainbow_rich_color,\n spatial_period = strip_len / 2)\nrun back_pattern" }, { id: "chap_4_15_color_pattern_spatial_osc", number: "4.15", name: "Color Pattern Spatial Osc", description: "Rainbow gradient with oscillating spatial period between 100% and 50%", category: "4. Spatial Patterns", code: "# @desc Rainbow gradient with oscillating spatial period between 100% and 50%\n\n# Define a smooth palette using PALETTE_RAINBOW_W (7 colors + white)\n# 'period = 0' means that the colors don't change in time, only spatial change\ncolor rainbow_rich_color = rich_palette_color(colors=PALETTE_RAINBOW_W, period=0)\n\n# Because strip_length is dynamic, we need to map it to a variable and can't use the function directly in formulas\nset strip_len = strip_length()\n\n# Define the sine oscillator for spatial period between 1/2 strip_len and 3/2\nset period = sine_osc(min_value = (strip_len - 1) / 2, max_value = (3 * strip_len) / 2, duration = 5s)\n\n# Define a gradient across the whole strip with variable spatial_period\nanimation back = palette_gradient(color_source = rainbow_rich_color, spatial_period = period)\nrun back" }, { id: "chap_4_18_color_pattern_spatial_rotate", number: "4.18", name: "Color Pattern Spatial Rotate", description: "Rainbow gradient rotating along the strip over 5 seconds", category: "4. Spatial Patterns", code: "# @desc Rainbow gradient rotating along the strip over 5 seconds\n\n# Define a smooth palette using PALETTE_RAINBOW_W (7 colors + white)\n# 'period = 0' means that the colors don't change in time, only spatial change\ncolor rainbow_rich_color = rich_palette_color(colors=PALETTE_RAINBOW_W, period=0)\n\n# define a gradient across the whole strip\nanimation back = palette_gradient(color_source = rainbow_rich_color, shift_period = 5s)\nrun back" }, { id: "chap_4_30_color_pattern_meter", number: "4.30", name: "Color Pattern Meter", description: "VU-meter style animation with green-yellow-red gradient with sawtooth level", category: "4. Spatial Patterns", code: "# @desc VU-meter style animation with green-yellow-red gradient with sawtooth level\n\n# Define a palette of rainbow colors including white with constant brightness\npalette vue_meter_palette = [\n ( 0, 0x00FF00) # Green\n (143, 0x00FF00)\n\n (164, 0xFFFF00) # Yellow\n (207, 0xFFFF00)\n\n (228, 0xFF0000) # Red\n (255, 0xFF0000)\n]\n\n# Define a color palette pattern for 'vue_meter_palette'\ncolor rainbow_rich_color = rich_palette_color(colors=vue_meter_palette, period=0, transition_type=LINEAR)\n\n# Define a sawtooth value from 0% to 100%\nset level = sawtooth(min_value = 0%, max_value=100%, duration = 2s)\n\n# Define a vue-meter based on all elements above\nanimation back = palette_meter(color_source = rainbow_rich_color, level = level)\nrun back" }, { id: "chap_4_35_color_pattern_meter_random", number: "4.35", name: "Color Pattern Meter Random", description: "VU-meter with random level using custom Berry function", category: "4. Spatial Patterns", code: "# @desc VU-meter with random level using custom Berry function\n\n# Embed native Berry code to define a random generator function\nberry \"\"\"\n# define a pseudo-random generator, returns value in range 0..255\ndef rand_meter(engine)\n return (engine.time_ms * 2654435761) & 0xFF\nend\n\"\"\"\n\n# Declare the external function so it can be used in the animation\nextern function rand_meter\n\n# Define a palette of rainbow colors including white with constant brightness\npalette vue_meter_palette = [\n ( 0, 0x00FF00) # Green\n (143, 0x00FF00)\n\n (164, 0xFFFF00) # Yellow\n (207, 0xFFFF00)\n\n (228, 0xFF0000) # Red\n (255, 0xFF0000)\n]\n\n# Define a color palette pattern for 'vue_meter_palette'\ncolor rainbow_rich_color = rich_palette_color(colors=vue_meter_palette, period=0, transition_type=LINEAR)\n\n# Define a vue-meter based on all elements above\nanimation back = palette_meter(color_source = rainbow_rich_color, level = rand_meter())\nrun back" }, { id: "chap_5_10_beacon", number: "5.10", name: "Beacon", description: "Static beacon", category: "5. Beacons & Moving", code: "# @desc Static beacon\n\n# Simple beacon starting at pixel 6 with size of 7 pixels, no border\nanimation back = beacon(back_color = blue, color = red,\n pos = 5, beacon_size = 7)\nrun back" }, { id: "chap_5_15_beacon_slew", number: "5.15", name: "Beacon Slew", description: "Static beacon with slew", category: "5. Beacons & Moving", code: "# @desc Static beacon with slew\n\n# Simple beacon starting at pixel 6 with size of 7 pixels, no border\nanimation back = beacon(back_color = blue, color = red,\n pos = 5, beacon_size = 7, slew_size = 3)\nrun back" }, { id: "chap_5_20_beacon_slew_osc", number: "5.20", name: "Beacon Slew Osc", description: "Static beacon with oscillating slew", category: "5. Beacons & Moving", code: "# @desc Static beacon with oscillating slew\n\n# Define an oscillating value from 0 to 4 and back to 0 in 2 seconds\nset slew = cosine_osc(min_value = 0, max_value = 4, duration = 2s)\n\n# Simple beacon starting at pixel 6 with size of 7 pixels, no border\nanimation back = beacon(back_color = blue, color = red,\n pos = 5, beacon_size = 7, slew_size = slew)\nrun back" }, { id: "chap_5_30_cylon", number: "5.30", name: "Cylon", description: "Moving red beacon - Cylon style", category: "5. Beacons & Moving", code: "# @desc Moving red beacon - Cylon style\n\n# Because strip_length is dynamic, we need to map it to a variable and can't use the function directly in formulas\nset strip_len = strip_length()\n\n# In this example, the 'cosine_osc' is created within the call\nanimation back = beacon(\n color = red\n pos = cosine_osc(min_value = -1, max_value = strip_len - 2, duration = 5s)\n beacon_size = 3 # small 3 pixels eye\n slew_size = 2 # with 2 pixel shading around\n)\nrun back" }, { id: "chap_5_40_cylon_rainbow", number: "5.40", name: "Cylon Rainbow", description: "Moving rainbow beacon and stars", category: "5. Beacons & Moving", code: "# @desc Moving rainbow beacon and stars\n# In this example we combine a Twinkle star as background,\n# a moving beacon with a dynamic color using the rainbow palette\n\n# Because strip_length is dynamic, we need to map it to a variable and can't use the function directly in formulas\nset strip_len = strip_length()\n\nanimation stars = twinkle(\n color=0xFFFFAA # Light yellow sparkles\n density=2 # density (moderate sparkles)\n twinkle_speed=100ms # twinkle speed\n fade_speed=100 # when no unit, time unit is 'ms'\n # priority = 10 # this is the implicit priority\n)\nrun stars\n\n# We can combine a dynamic 'pos' value with a dynamic 'color'\nanimation back = beacon(\n color = rich_palette_color(colors=PALETTE_RAINBOW_W2, period=5s)\n pos = cosine_osc(min_value = -1, max_value = strip_len - 2, duration = 5s)\n beacon_size = 3 # small 3 pixels eye\n slew_size = 2 # with 2 pixel shading around\n priority = 5 # priority below 10 so it's on top of twinkle\n)\nrun back" }, { id: "chap_5_50_cylon_as_opacity", number: "5.50", name: "Cylon As Opacity", description: "Moving beacon used as opacity filter on pattern", category: "5. Beacons & Moving", code: "# @desc Moving beacon used as opacity filter on pattern\n# In this example we use the moving beacon as an opacity mask\n# on top of a pattern\n\n# Define 'strip_len' to make calculations\nset strip_len = strip_length()\n\n# Define a pattern that goes from red to blue to red across the strip\npalette red_blue_red_palette = [ red, 0x3333FF, red ]\n# Embed this raw palette into a rich_palette_color color provider\ncolor red_blue_red_color = rich_palette_color(colors=red_blue_red_palette)\n\n# Define a moving beacon to be used as an opacity mask\nanimation moving_eye = beacon(\n color = white # the color is not important, only the opacity counts here\n pos = cosine_osc(min_value = -1, max_value = strip_len - 2, duration = 5s)\n beacon_size = 3 # small 3 pixels eye\n slew_size = 2 # with 2 pixel shading around\n)\n\n# The palette gradient animation is used with an animation as opacity\nanimation eye_pattern = palette_gradient(\n color_source = red_blue_red_color # the beacon animation used as opacity\n # spatial_period = strip_len # implicit\n opacity = moving_eye\n)\nrun eye_pattern" }, { id: "chap_6_10_shutter", number: "6.10", name: "Shutter", description: "Shutter left to right using beacon", category: "6. Shutters & Sequences", code: "# @desc Shutter left to right using beacon\n\n# Define 'strip_len' to make calculations\nset strip_len = strip_length()\n\n# Define shutter_size as a sawtootgh from 0 to strip_len\nset shutter_size = sawtooth(min_value = 0, max_value = strip_len,\n duration = 1.5s)\n\n# Using beacon to move a shutter from left to right\n animation shutter_lr_animation = beacon(\n color = red\n back_color = blue\n pos = 0 # Start from position 0 (left)\n beacon_size = shutter_size # Oscillating size from 0 to strip_len\n)\nrun shutter_lr_animation" }, { id: "chap_6_20_shutter_rotating_colors", number: "6.20", name: "Shutter Rotating Colors", description: "Shutter left to right with rotating colors, using sequence", category: "6. Shutters & Sequences", code: "# @desc Shutter left to right with rotating colors, using sequence\n\n# Define 'strip_len' to make calculations\nset strip_len = strip_length()\n\n# Set a global variable for 'period'\nset period = 1.5s\n\n# Define shutter_size as a sawtootgh from 0 to strip_len\nset shutter_size = sawtooth(min_value = 0, max_value = strip_len,\n duration = period)\n\n# Define 2 color providers cycling through palette rainbow with white\n# 'col2' is shifted by 1 color from 'col1'\ncolor col1 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncolor col2 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncol2.next = 1 # Writing 1 to 'next' actually advances the color\n\n# Using beacon to move a shutter from left to right\nanimation shutter_lr_animation = beacon(\n color = col2 # Use two rotating colors\n back_color = col1 # Use two rotating colors\n pos = 0 # Start from position 0 (left)\n beacon_size = shutter_size \n # Oscillating size from 0 to strip_len\n)\n\n# Define a sequence running forever\nsequence shutter_seq repeat forever {\n restart shutter_size # Make sure that shutter_size is synced with the sequence\n play shutter_lr_animation for period # Play animation\n col1.next = 1 # set 'col1' to next color\n col2.next = 1 # set 'col2' to next color\n}\nrun shutter_seq" }, { id: "chap_6_30_shutter_central_rotating_colors", number: "6.30", name: "Shutter Central Rotating Colors", description: "Shutter central inout with rotating colors, using sequence", category: "6. Shutters & Sequences", code: "# @desc Shutter central inout with rotating colors, using sequence\n\n# Define 'strip_len' to make calculations\nset strip_len = strip_length()\nset strip_len_2 = (strip_len + 1) / 2 # half length rounded\n\n# Set a global variable for 'period'\nset period = 1.5s\n\n# Define shutter_size as a sawtootgh from 0 to strip_len\nset shutter_size = sawtooth(min_value = 0, max_value = strip_len,\n duration = period)\n\n# Define 2 color providers cycling through palette rainbow with white\n# 'col2' is shifted by 1 color from 'col1'\ncolor col1 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncolor col2 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncol2.next = 1 # Writing 1 to 'next' actually advances the color\n\n# Using beacon to move a shutter from in to out\nanimation shutter_inout_animation = beacon(\n color = col2 # Use two rotating colors\n back_color = col1 # Use two rotating colors\n pos = strip_len_2 - (shutter_size + 1) / 2\n beacon_size = shutter_size\n)\n\n# Use sequence to advance after each shutter animation\nsequence shutter_seq repeat forever {\n restart shutter_size # Make sure that shutter_size is synced with the sequence\n play shutter_inout_animation for period\n col1.next = 1 # set 'col1' to next color\n col2.next = 1 # set 'col2' to next color\n}\nrun shutter_seq" }, { id: "chap_6_40_shutter_central_inoutin", number: "6.40", name: "Shutter Central Inoutin", description: "Shutter central inout and outin with rotating colors, using sequence", category: "6. Shutters & Sequences", code: "# @desc Shutter central inout and outin with rotating colors, using sequence\n\n# Define 'strip_len' to make calculations\nset strip_len = strip_length()\nset strip_len_2 = (strip_len + 1) / 2 # half length rounded\n\n# Set a global variable for 'period'\nset period = 1.5s\n\n# Define shutter_size as a sawtootgh from 0 to strip_len\nset shutter_size = sawtooth(min_value = 0, max_value = strip_len,\n duration = period)\n\n# Define 2 color providers cycling through palette rainbow with white\n# 'col2' is shifted by 1 color from 'col1'\ncolor col1 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncolor col2 = color_cycle(colors=PALETTE_RAINBOW_W, period=0)\ncol2.next = 1 # Writing 1 to 'next' actually advances the color\n\n# Using beacon to move a shutter from in to out\nanimation shutter_inout_animation = beacon(\n color = col2 # Use two rotating colors\n back_color = col1 # Use two rotating colors\n pos = strip_len_2 - (shutter_size + 1) / 2\n beacon_size = shutter_size\n)\n\n# Similar but out to in\nanimation shutter_outin_animation = beacon(\n color = col1\n back_color = col2\n pos = strip_len_2 - (strip_len - shutter_size + 1) / 2\n beacon_size = strip_len - shutter_size\n)\n\nsequence shutter_seq repeat forever {\n repeat col1.palette_size times {\n restart shutter_size # Make sure that shutter_size is synced with the sequence\n play shutter_inout_animation for period\n col1.next = 1 # set 'col1' to next color\n col2.next = 1 # set 'col2' to next color\n }\n repeat col1.palette_size times {\n restart shutter_size # Make sure that shutter_size is synced with the sequence\n play shutter_outin_animation for period\n col1.next = 1 # set 'col1' to next color\n col2.next = 1 # set 'col2' to next color\n }\n}\nrun shutter_seq" }, { id: "chap_7_10_crenel", number: "7.10", name: "Crenel", description: "Crenel static", category: "7. Crenel Patterns", code: "# @desc Crenel static\n\n# Define a simple crenel 2+2 red/blue\nanimation back = crenel(\n color = red\n back_color = blue\n pulse_size = 2\n low_size = 2\n)\nrun back" }, { id: "chap_7_20_crenel_nb_pulses", number: "7.20", name: "Crenel Nb Pulses", description: "Crenel with variable number of pulses", category: "7. Crenel Patterns", code: "# Crenel with variable number of pulses\n\nset strip_len = strip_length()\nset period = 4 # pulse_size (2) + low_size (2)\nset max_pulses = (strip_len + period - 1) / period\n\nset nb_pulse = triangle(min_value = 0, max_value = max_pulses, duration = 2s)\n\nanimation back = crenel(\n color = red\n back_color = blue\n pulse_size = 2\n low_size = 2\n nb_pulse = nb_pulse\n)\nrun back" }, { id: "chap_7_30_crenel_size", number: "7.30", name: "Crenel Size", description: "Crenel static with variable size", category: "7. Crenel Patterns", code: "# @desc Crenel static with variable size\n\n# Move from 0 to 5 and back\nset pulse_size = triangle(min_value = 0, max_value = 4, duration = 2s)\n\n# Define a simple crenel 2+2 red/blue\nanimation back = crenel(\n color = red\n back_color = blue\n pulse_size = pulse_size\n low_size = 2\n)\nrun back" }, { id: "chap_7_40_crenel_colors", number: "7.40", name: "Crenel Colors", description: "Crenel static with variable color", category: "7. Crenel Patterns", code: "# @desc Crenel static with variable color\n\n# Define a color attribute that cycles over time, cycle is 5 seconds\ncolor rainbow_color = rich_palette_color(colors=PALETTE_RAINBOW_W2, period=5s)\n\n# Define a simple crenel 2+2\nanimation back = crenel(\n color = rainbow_color\n back_color = blue\n pulse_size = 2\n low_size = 2\n)\nrun back" }, { id: "chap_7_50_crenel_opacity", number: "7.50", name: "Crenel Opacity", description: "Crenel used as opacity mask", category: "7. Crenel Patterns", code: "# @desc Crenel used as opacity mask\n\n# Set a blue background with low priority (background)\nanimation back = solid(color = blue, priority = 20)\nrun back\n\n# Define a simple crenel 2+2 opaque/transparent\nanimation mask = crenel(\n color = white # plain color since it's used as opacity mask\n back_color = transparent # background is transparent\n pulse_size = 2\n low_size = 2\n)\n\n# Define a smooth palette using PALETTE_RAINBOW_W (7 colors + white)\ncolor rainbow_rich_color = rich_palette_color(colors=PALETTE_RAINBOW_W, period=0)\n# Define a gradient across the whole strip and use crenel as opacity mask\nanimation pattern = palette_gradient(\n color_source = rainbow_rich_color # use the rainow pattern\n shift_period = 2s # shifting over 2s\n opacity = mask # mask it with crenel pattern\n)\nrun pattern" }, { id: "chap_8_10_template_cylon_simple", number: "8.10", name: "Template Cylon Simple", description: "Template example for Cylon-style scanning eye", category: "8. Templates", code: "# @desc Template example for Cylon-style scanning eye\n\n# Define a full template with parameters: eye_color, back_color, period, priority\ntemplate animation cylon_eye {\n param eye_color type color default red\n param back_color type color default transparent\n param period type time default 5s\n param priority default 5\n\n set strip_len = strip_length()\n\n animation eye_animation = beacon(\n color = eye_color\n back_color = back_color\n pos = cosine_osc(min_value = -1, max_value = strip_len - 2, duration = period)\n beacon_size = 3 # small 3 pixels eye\n slew_size = 2 # with 2 pixel shading around\n priority = priority\n )\n\n run eye_animation\n}\n\nanimation eye = cylon_eye()\nrun eye" }, { id: "chap_8_20_template_color_cycle", number: "8.20", name: "Template Color Cycle", description: "Rainbow colors cycling with custom palette", category: "8. Templates", code: "# @desc Rainbow colors cycling with custom palette\n\n# Define a full template with parameters: colors, period\ntemplate animation color_cycle2 {\n param colors type palette\n param period default 5s\n\n # Define a color attribute that cycles over time, cycle is 5 seconds\n color rainbow_color = color_cycle(colors=colors, period=period)\n\n # Define a solid background with this dynamic color\n animation back = solid(color=rainbow_color)\n run back\n}\n\npalette rgb = [\n 0xFC0000 # Red\n 0x00FF00 # Green\n 0x0080FF # Blue\n]\n\nanimation main = color_cycle2(colors = rgb, period = 2s)\nrun main" }, { id: "chap_8_30_template_shutter_bidir_flags", number: "8.30", name: "Template Shutter Bidir Flags", description: "Template to illustrate the parameters and flags", category: "8. Templates", code: "# @desc Template to illustrate the parameters and flags\n\n# Define a template to package the shutter in-out-in from 6.40\n# with flags to enable or disable in-out or out-in\ntemplate animation shutter_bidir {\n param colors type palette\n param period default 2s\n param inout type bool default true # define to true to enable 'inout' part\n param outin type bool default true # define to true to enable 'outin' part\n\n # since 'strip_length()' is a value provider, it must be assigned to a variable before being used\n set strip_len = strip_length()\n set strip_len_2 = (strip_len + 1) / 2 # half length rounded\n\n # Define animated value for the size of the shutter, evolving linearly in time (sawtooth from 0% to 100%)\n set shutter_size = sawtooth(min_value = 0, max_value = strip_len, duration = period)\n\n # Define two rotating palettes, shifted by one color\n color col1 = color_cycle(colors=colors, period=0)\n color col2 = color_cycle(colors=colors, period=0)\n col2.next = 1 # move 'col2' to the next color so it's shifte by one compared to 'col1'\n\n # Shutter moving in in-out\n animation shutter_inout_animation = beacon(\n color = col2 # Use two rotating colors\n back_color = col1 # Use two rotating colors\n pos = strip_len_2 - (shutter_size + 1) / 2\n beacon_size = shutter_size\n )\n\n # shutter moving in out-in\n animation shutter_outin_animation = beacon(\n color = col1\n back_color = col2\n pos = strip_len_2 - (strip_len - shutter_size + 1) / 2\n beacon_size = strip_len - shutter_size\n )\n\n # this is the overall sequence composed of two sub-sequences\n # the first in ascending mode, the second in descending\n sequence shutter_seq repeat forever {\n if inout { # un only if 'ascending' is true\n repeat col1.palette_size times { # run the shutter animation\n restart shutter_size # resync all times for this animation, to avoid temporal drift\n play shutter_inout_animation for period # run the animation\n col1.next = 1 # then move to next color for both palettes\n col2.next = 1\n }\n }\n if outin { # run only if 'descending' is true\n repeat col1.palette_size times {\n restart shutter_size\n play shutter_outin_animation for period\n col1.next = 1\n col2.next = 1\n }\n }\n }\n run shutter_seq\n}\n\n# define a palette of rainbow colors including white with constant brightness\npalette rainbow_with_white = [\n 0xFC0000 # Red\n 0xFF8000 # Orange\n 0xFFFF00 # Yellow\n 0x00FF00 # Green\n 0x00FFFF # Cyan\n 0x0080FF # Blue\n 0x8000FF # Violet\n 0xCCCCCC # White\n]\n\nanimation main = shutter_bidir(colors = rainbow_with_white, period = 1.5s)\nrun main" } ]; const categories = ["1. Getting Started", "2. Color Cycling", "3. Smooth Transitions", "4. Spatial Patterns", "5. Beacons & Moving", "6. Shutters & Sequences", "7. Crenel Patterns", "8. Templates"]; /** * AnimationExamples - Provides access to example animations */ class AnimationExamples { /** * Get all examples * @returns {Array} Array of example objects */ getAll() { return examples; } /** * Get all categories * @returns {Array} Array of category names */ getCategories() { return categories; } /** * Get examples by category * @param {string} category - Category name * @returns {Array} Array of examples in that category */ getByCategory(category) { return examples.filter(ex => ex.category === category); } /** * Get example by ID * @param {string} id - Example ID * @returns {Object|null} Example object or null if not found */ getById(id) { return examples.find(ex => ex.id === id) || null; } /** * Search examples by name or description * @param {string} query - Search query * @returns {Array} Matching examples */ search(query) { const q = query.toLowerCase(); return examples.filter(ex => ex.name.toLowerCase().includes(q) || ex.description.toLowerCase().includes(q) ); } /** * Get example count * @returns {number} Total number of examples */ count() { return examples.length; } } // Create global instance window.animationExamples = new AnimationExamples(); // Also export the class for potential extension window.AnimationExamples = AnimationExamples; console.log(`[AnimationExamples] Loaded ${examples.length} examples in ${categories.length} categories`); })(window);