reactive-animation

%23%20%2F%2F%2F%20script%0A%23%20requires-python%20%3D%20%22%3E%3D3.11%22%0A%23%20dependencies%20%3D%20%5B%0A%23%20%20%20%20%20%22marimo%22%2C%0A%23%20%20%20%20%20%22numpy%22%2C%0A%23%20%20%20%20%20%22matplotlib%22%2C%0A%23%20%5D%0A%23%20%2F%2F%2F%0A%0Aimport%20marimo%0A%0A__generated_with%20%3D%20%220.23.13%22%0Aapp%20%3D%20marimo.App(width%3D%22medium%22)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%0A%20%20%20%20return%20(mo%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%20Reactive%20Animation%3A%20Auto-Animated%20Slider%0A%0A%20%20%20%20This%20demo%20shows%20how%20**marimo's%20reactive%20execution**%20works%3A%20changing%20a%20single%20value%20automatically%20re-runs%20all%20dependent%20cells.%0A%0A%20%20%20%20The%20slider%20below%20is%20**auto-animated**%20%E2%80%94%20it%20advances%20automatically%20every%20200ms.%20You%20can%20pause%20it%2C%20scrub%20manually%2C%20or%20change%20the%20animation%20speed.%0A%20%20%20%20%22%22%22).callout()%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Controls%0A%0A%20%20%20%20Use%20the%20buttons%20and%20slider%20to%20control%20the%20animation.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20timer%20%3D%20mo.ui.refresh(options%3D%5B%22200ms%22%2C%20%22500ms%22%2C%20%221s%22%5D%2C%20default_interval%3D%22200ms%22)%0A%20%20%20%20return%20(timer%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20animation_state%20%3D%20mo.state(%7B%22running%22%3A%20True%2C%20%22t%22%3A%200.0%2C%20%22speed%22%3A%200.05%2C%20%22direction%22%3A%201%7D)%0A%20%20%20%20return%20(animation_state%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(animation_state%2C%20timer)%3A%0A%20%20%20%20_tick%20%3D%20timer.value%20%20%23%20triggers%20on%20every%20refresh%0A%20%20%20%20_s%20%3D%20animation_state.value%0A%20%20%20%20if%20_s%5B%22running%22%5D%3A%0A%20%20%20%20%20%20%20%20new_t%20%3D%20_s%5B%22t%22%5D%20%2B%20_s%5B%22speed%22%5D%20*%20_s%5B%22direction%22%5D%0A%20%20%20%20%20%20%20%20if%20new_t%20%3E%3D%201.0%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20new_t%20%3D%201.0%0A%20%20%20%20%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B**_s%2C%20%22t%22%3A%20new_t%2C%20%22direction%22%3A%20-1%7D%0A%20%20%20%20%20%20%20%20elif%20new_t%20%3C%3D%200.0%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20new_t%20%3D%200.0%0A%20%20%20%20%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B**_s%2C%20%22t%22%3A%20new_t%2C%20%22direction%22%3A%201%7D%0A%20%20%20%20%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B**_s%2C%20%22t%22%3A%20new_t%7D%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(animation_state%2C%20mo)%3A%0A%20%20%20%20_state%20%3D%20animation_state.value%0A%0A%20%20%20%20play_pause%20%3D%20mo.ui.run_button(%0A%20%20%20%20%20%20%20%20label%3D%22%E2%8F%B8%20Pause%22%20if%20_state%5B%22running%22%5D%20else%20%22%E2%96%B6%20Play%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20speed_slider%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.01%2C%20stop%3D0.2%2C%20step%3D0.01%2C%20value%3D_state%5B%22speed%22%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22Speed%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20t_slider%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.0%2C%20stop%3D1.0%2C%20step%3D0.001%2C%20value%3D_state%5B%22t%22%5D%2C%0A%20%20%20%20%20%20%20%20label%3D%22Phase%20(t)%22%2C%0A%20%20%20%20)%0A%0A%20%20%20%20controls%20%3D%20mo.hstack(%5B%0A%20%20%20%20%20%20%20%20play_pause%2C%0A%20%20%20%20%20%20%20%20mo.md(f%22**Speed%3A**%20%7Bspeed_slider%7D%22)%2C%0A%20%20%20%20%20%20%20%20mo.md(f%22**Phase%3A**%20%7Bt_slider%7D%22)%2C%0A%20%20%20%20%5D%2C%20gap%3D1)%0A%0A%20%20%20%20controls%0A%20%20%20%20return%20play_pause%2C%20speed_slider%2C%20t_slider%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(animation_state%2C%20play_pause%2C%20speed_slider%2C%20t_slider)%3A%0A%20%20%20%20%23%20Toggle%20play%2Fpause%20when%20button%20clicked%0A%20%20%20%20if%20play_pause.value%3A%0A%20%20%20%20%20%20%20%20_s2%20%3D%20animation_state.value%0A%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B**_s2%2C%20%22running%22%3A%20not%20_s2%5B%22running%22%5D%7D%0A%0A%20%20%20%20%23%20Update%20speed%20from%20slider%0A%20%20%20%20_s3%20%3D%20animation_state.value%0A%20%20%20%20if%20speed_slider.value%20!%3D%20_s3%5B%22speed%22%5D%3A%0A%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B**_s3%2C%20%22speed%22%3A%20speed_slider.value%7D%0A%0A%20%20%20%20%23%20If%20user%20manually%20scrubs%20t%2C%20pause%20and%20update%0A%20%20%20%20if%20abs(t_slider.value%20-%20_s3%5B%22t%22%5D)%20%3E%200.001%3A%0A%20%20%20%20%20%20%20%20animation_state.value%20%3D%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20**animation_state.value%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22t%22%3A%20t_slider.value%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22running%22%3A%20False%2C%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20%23%23%20Reactive%20Wave%20Synthesis%0A%0A%20%20%20%20As%20the%20phase%20slider%20animates%2C%20three%20wave%20components%20update%20automatically.%20The%20plot%20below%20is%20**re-computed%20from%20scratch**%20on%20every%20tick%20%E2%80%94%20no%20manual%20event%20wiring%20required.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(animation_state)%3A%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20import%20matplotlib.pyplot%20as%20plt%0A%0A%20%20%20%20t%20%3D%20animation_state.value%5B%22t%22%5D%0A%20%20%20%20x%20%3D%20np.linspace(0%2C%204%20*%20np.pi%2C%20400)%0A%0A%20%20%20%20%23%20Three%20animated%20wave%20components%0A%20%20%20%20phase%20%3D%20t%20*%202%20*%20np.pi%0A%20%20%20%20y1%20%3D%20np.sin(x%20%2B%20phase)%0A%20%20%20%20y2%20%3D%200.5%20*%20np.sin(2%20*%20x%20-%20phase%20*%201.5)%0A%20%20%20%20y3%20%3D%200.25%20*%20np.sin(4%20*%20x%20%2B%20phase%20*%202)%0A%20%20%20%20y_sum%20%3D%20y1%20%2B%20y2%20%2B%20y3%0A%0A%20%20%20%20fig%2C%20axes%20%3D%20plt.subplots(2%2C%201%2C%20figsize%3D(10%2C%206)%2C%20sharex%3DTrue)%0A%0A%20%20%20%20%23%20Individual%20components%0A%20%20%20%20ax0%20%3D%20axes%5B0%5D%0A%20%20%20%20ax0.plot(x%2C%20y1%2C%20label%3D%22sin(x%20%2B%20%CF%86)%22%2C%20alpha%3D0.8)%0A%20%20%20%20ax0.plot(x%2C%20y2%2C%20label%3D%220.5%C2%B7sin(2x%20-%201.5%CF%86)%22%2C%20alpha%3D0.8)%0A%20%20%20%20ax0.plot(x%2C%20y3%2C%20label%3D%220.25%C2%B7sin(4x%20%2B%202%CF%86)%22%2C%20alpha%3D0.8)%0A%20%20%20%20ax0.set_ylabel(%22Amplitude%22)%0A%20%20%20%20ax0.set_title(%22Wave%20Components%22)%0A%20%20%20%20ax0.legend(loc%3D%22upper%20right%22)%0A%20%20%20%20ax0.set_ylim(-1.2%2C%201.2)%0A%20%20%20%20ax0.axhline(0%2C%20color%3D%22black%22%2C%20linewidth%3D0.5)%0A%0A%20%20%20%20%23%20Sum%0A%20%20%20%20ax1%20%3D%20axes%5B1%5D%0A%20%20%20%20ax1.plot(x%2C%20y_sum%2C%20color%3D%22crimson%22%2C%20linewidth%3D2%2C%20label%3D%22Sum%22)%0A%20%20%20%20ax1.fill_between(x%2C%20y_sum%2C%20alpha%3D0.2%2C%20color%3D%22crimson%22)%0A%20%20%20%20ax1.set_xlabel(%22x%22)%0A%20%20%20%20ax1.set_ylabel(%22Amplitude%22)%0A%20%20%20%20ax1.set_title(%22Superposition%22)%0A%20%20%20%20ax1.legend(loc%3D%22upper%20right%22)%0A%20%20%20%20ax1.set_ylim(-2%2C%202)%0A%20%20%20%20ax1.axhline(0%2C%20color%3D%22black%22%2C%20linewidth%3D0.5)%0A%0A%20%20%20%20plt.tight_layout()%0A%20%20%20%20plt.gcf()%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20mo.md(r%22%22%22%0A%20%20%20%20---%0A%0A%20%20%20%20%23%23%20What%20just%20happened%3F%0A%0A%20%20%20%201.%20%60mo.ui.refresh%60%20fires%20on%20a%20fixed%20interval%20(200ms).%0A%20%20%20%202.%20The%20timer%20tick%20triggers%20a%20state%20update%20via%20%60mo.state%60.%0A%20%20%20%203.%20The%20slider%20bound%20to%20that%20state%20re-renders%20with%20the%20new%20value.%0A%20%20%20%204.%20Because%20the%20slider%20value%20changed%2C%20marimo%20**automatically%20re-runs**%20the%20wave%20synthesis%20cell.%0A%20%20%20%205.%20The%20matplotlib%20figure%20is%20regenerated%20and%20displayed.%0A%0A%20%20%20%20No%20callbacks%2C%20no%20manual%20redraw%2C%20no%20threading%20%E2%80%94%20just%20reactive%20Python.%0A%20%20%20%20%22%22%22)%0A%20%20%20%20return%0A%0A%0Aif%20__name__%20%3D%3D%20%22__main__%22%3A%0A%20%20%20%20app.run()%0A