Reactive Slider Demo

import%20marimo%0A%0A__generated_with%20%3D%20%220.23.13%22%0Aapp%20%3D%20marimo.App(width%3D%22full%22%2C%20app_title%3D%22Reactive%20Slider%20Demo%22)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%0A%20%20%20%20import%20marimo%20as%20mo%0A%20%20%20%20import%20numpy%20as%20np%0A%20%20%20%20import%20matplotlib.pyplot%20as%20plt%0A%0A%20%20%20%20return%20mo%2C%20np%2C%20plt%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Animation%20control%0A%20%20%20%20refresh%20%3D%20mo.ui.refresh(%0A%20%20%20%20%20%20%20%20options%3D%5B%220.5s%22%2C%20%221s%22%2C%20%222s%22%2C%20%225s%22%2C%20%2210s%22%2C%20%2230s%22%2C%20%2260s%22%5D%2C%0A%20%20%20%20%20%20%20%20default_interval%3D%2210s%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22Refresh%20interval%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(refresh%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Wave%20parameters%0A%20%20%20%20wave_count%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D1%2C%20stop%3D12%2C%20step%3D1%2C%20value%3D3%2C%0A%20%20%20%20%20%20%20%20label%3D%22Wave%20count%22%2C%0A%20%20%20%20)%0A%20%20%20%20amplitude%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.1%2C%20stop%3D2.0%2C%20step%3D0.05%2C%20value%3D1.0%2C%0A%20%20%20%20%20%20%20%20label%3D%22Amplitude%22%2C%0A%20%20%20%20)%0A%20%20%20%20frequency%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0.5%2C%20stop%3D5.0%2C%20step%3D0.1%2C%20value%3D2.0%2C%0A%20%20%20%20%20%20%20%20label%3D%22Frequency%22%2C%0A%20%20%20%20)%0A%20%20%20%20color_scheme%20%3D%20mo.ui.dropdown(%0A%20%20%20%20%20%20%20%20options%3D%7B%22viridis%22%3A%20%22Viridis%22%2C%20%22plasma%22%3A%20%22Plasma%22%2C%20%22inferno%22%3A%20%22Inferno%22%2C%20%22magma%22%3A%20%22Magma%22%2C%20%22cividis%22%3A%20%22Cividis%22%7D%2C%0A%20%20%20%20%20%20%20%20value%3D%22viridis%22%2C%0A%20%20%20%20%20%20%20%20label%3D%22Color%20scheme%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20amplitude%2C%20color_scheme%2C%20frequency%2C%20wave_count%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Auto-animated%20frame%20state%20(using%20mo.state%20for%20imperative%20updates)%0A%20%20%20%20get_frame%2C%20set_frame%20%3D%20mo.state(0)%0A%20%20%20%20return%20get_frame%2C%20set_frame%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(get_frame%2C%20mo%2C%20refresh%2C%20set_frame)%3A%0A%20%20%20%20%23%20Auto-increment%20the%20frame%20on%20each%20refresh%20tick%0A%20%20%20%20_tick%20%3D%20refresh.value%0A%20%20%20%20set_frame(lambda%20v%3A%20(v%20%2B%202)%20%25%20360)%0A%20%20%20%20mo.md(f%22**Frame%3A**%20%7Bget_frame()%7Ddeg%22)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(mo)%3A%0A%20%20%20%20%23%20Manual%20override%20slider%20(pauses%20auto-animation%20when%20scrubbed)%0A%20%20%20%20manual_frame%20%3D%20mo.ui.slider(%0A%20%20%20%20%20%20%20%20start%3D0%2C%20stop%3D359%2C%20step%3D1%2C%20value%3D0%2C%0A%20%20%20%20%20%20%20%20label%3D%22Manual%20phase%20override%20(degrees)%22%2C%0A%20%20%20%20)%0A%20%20%20%20return%20(manual_frame%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(get_frame%2C%20manual_frame%2C%20mo)%3A%0A%20%20%20%20%23%20Use%20manual%20frame%20if%20user%20has%20moved%20it%20away%20from%20the%20auto%20frame%0A%20%20%20%20%23%20Otherwise%20follow%20the%20auto-animated%20state%0A%20%20%20%20auto_frame%20%3D%20get_frame()%0A%20%20%20%20manual_val%20%3D%20manual_frame.value%0A%20%20%20%20%23%20If%20manual%20slider%20is%20within%204%20degrees%20of%20auto%2C%20treat%20as%20synced%0A%20%20%20%20diff%20%3D%20abs((manual_val%20-%20auto_frame%20%2B%20180)%20%25%20360%20-%20180)%0A%20%20%20%20if%20diff%20%3C%3D%204%3A%0A%20%20%20%20%20%20%20%20%23%20Sync%20manual%20slider%20to%20auto%20and%20use%20auto%0A%20%20%20%20%20%20%20%20frame%20%3D%20auto_frame%0A%20%20%20%20else%3A%0A%20%20%20%20%20%20%20%20%23%20User%20has%20manually%20overridden%0A%20%20%20%20%20%20%20%20frame%20%3D%20manual_val%0A%20%20%20%20mo.md(f%22**Active%20phase%3A**%20%7Bframe%7Ddeg%22)%0A%20%20%20%20return%20(frame%2C)%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_(%0A%20%20%20%20amplitude%2C%0A%20%20%20%20color_scheme%2C%0A%20%20%20%20frame%2C%0A%20%20%20%20frequency%2C%0A%20%20%20%20manual_frame%2C%0A%20%20%20%20mo%2C%0A%20%20%20%20np%2C%0A%20%20%20%20plt%2C%0A%20%20%20%20refresh%2C%0A%20%20%20%20wave_count%2C%0A)%3A%0A%20%20%20%20%23%20Generate%20the%20visualization%0A%20%20%20%20phase_rad%20%3D%20np.radians(frame)%0A%20%20%20%20t%20%3D%20np.linspace(0%2C%204%20*%20np.pi%2C%201000)%0A%0A%20%20%20%20fig%2C%20axes%20%3D%20plt.subplots(2%2C%201%2C%20figsize%3D(14%2C%2010)%2C%20gridspec_kw%3D%7B'height_ratios'%3A%20%5B2%2C%201%5D%7D)%0A%20%20%20%20fig.patch.set_facecolor('%230a0a0a')%0A%0A%20%20%20%20%23%20Main%20wave%20plot%0A%20%20%20%20ax1%20%3D%20axes%5B0%5D%0A%20%20%20%20ax1.set_facecolor('%230a0a0a')%0A%20%20%20%20cmap%20%3D%20plt.get_cmap(color_scheme.selected_key)%0A%0A%20%20%20%20y_total%20%3D%20np.zeros_like(t)%0A%20%20%20%20for%20i%20in%20range(wave_count.value)%3A%0A%20%20%20%20%20%20%20%20freq%20%3D%20frequency.value%20*%20(i%20%2B%201)%0A%20%20%20%20%20%20%20%20amp%20%3D%20amplitude.value%20*%20(1.0%20%2F%20(i%20%2B%201))%0A%20%20%20%20%20%20%20%20phase%20%3D%20phase_rad%20*%20(i%20%2B%201)%0A%20%20%20%20%20%20%20%20y%20%3D%20amp%20*%20np.sin(freq%20*%20t%20%2B%20phase)%0A%20%20%20%20%20%20%20%20y_total%20%2B%3D%20y%0A%20%20%20%20%20%20%20%20color%20%3D%20cmap(i%20%2F%20max(wave_count.value%20-%201%2C%201))%0A%20%20%20%20%20%20%20%20ax1.plot(t%2C%20y%2C%20alpha%3D0.4%2C%20linewidth%3D1%2C%20color%3Dcolor%2C%20label%3Df%22Wave%20%7Bi%2B1%7D%22)%0A%0A%20%20%20%20ax1.plot(t%2C%20y_total%2C%20color%3D'%23ffffff'%2C%20linewidth%3D2.5%2C%20label%3D%22Sum%22%2C%20alpha%3D0.9)%0A%20%20%20%20ax1.set_xlim(0%2C%204%20*%20np.pi)%0A%20%20%20%20ax1.set_ylim(-5%2C%205)%0A%20%20%20%20ax1.set_xlabel(%22t%22%2C%20color%3D'white'%2C%20fontsize%3D12)%0A%20%20%20%20ax1.set_ylabel(%22Amplitude%22%2C%20color%3D'white'%2C%20fontsize%3D12)%0A%20%20%20%20ax1.tick_params(colors%3D'white')%0A%20%20%20%20ax1.spines%5B'bottom'%5D.set_color('white')%0A%20%20%20%20ax1.spines%5B'top'%5D.set_color('white')%0A%20%20%20%20ax1.spines%5B'left'%5D.set_color('white')%0A%20%20%20%20ax1.spines%5B'right'%5D.set_color('white')%0A%20%20%20%20ax1.legend(loc%3D'upper%20right'%2C%20facecolor%3D'%231a1a1a'%2C%20edgecolor%3D'white'%2C%20labelcolor%3D'white')%0A%20%20%20%20ax1.set_title(%22Superposition%20of%20Sine%20Waves%22%2C%20color%3D'white'%2C%20fontsize%3D14%2C%20fontweight%3D'bold')%0A%20%20%20%20ax1.grid(True%2C%20alpha%3D0.15%2C%20color%3D'white')%0A%0A%20%20%20%20%23%20Phase%20circle%20visualization%0A%20%20%20%20ax2%20%3D%20axes%5B1%5D%0A%20%20%20%20ax2.set_facecolor('%230a0a0a')%0A%0A%20%20%20%20circle%20%3D%20plt.Circle((0%2C%200)%2C%201%2C%20fill%3DFalse%2C%20color%3D'white'%2C%20alpha%3D0.3%2C%20linewidth%3D1)%0A%20%20%20%20ax2.add_patch(circle)%0A%0A%20%20%20%20for%20i%20in%20range(wave_count.value)%3A%0A%20%20%20%20%20%20%20%20angle%20%3D%20phase_rad%20*%20(i%20%2B%201)%0A%20%20%20%20%20%20%20%20x%20%3D%20np.cos(angle)%0A%20%20%20%20%20%20%20%20y%20%3D%20np.sin(angle)%0A%20%20%20%20%20%20%20%20color%20%3D%20cmap(i%20%2F%20max(wave_count.value%20-%201%2C%201))%0A%20%20%20%20%20%20%20%20ax2.plot(%5B0%2C%20x%5D%2C%20%5B0%2C%20y%5D%2C%20color%3Dcolor%2C%20linewidth%3D2%2C%20alpha%3D0.7)%0A%20%20%20%20%20%20%20%20ax2.plot(x%2C%20y%2C%20'o'%2C%20color%3Dcolor%2C%20markersize%3D8)%0A%0A%20%20%20%20ax2.set_xlim(-1.5%2C%201.5)%0A%20%20%20%20ax2.set_ylim(-1.5%2C%201.5)%0A%20%20%20%20ax2.set_aspect('equal')%0A%20%20%20%20ax2.set_title(%22Phase%20Vectors%22%2C%20color%3D'white'%2C%20fontsize%3D14%2C%20fontweight%3D'bold')%0A%20%20%20%20ax2.tick_params(colors%3D'white')%0A%20%20%20%20ax2.spines%5B'bottom'%5D.set_color('white')%0A%20%20%20%20ax2.spines%5B'top'%5D.set_color('white')%0A%20%20%20%20ax2.spines%5B'left'%5D.set_color('white')%0A%20%20%20%20ax2.spines%5B'right'%5D.set_color('white')%0A%20%20%20%20ax2.grid(True%2C%20alpha%3D0.15%2C%20color%3D'white')%0A%0A%20%20%20%20plt.tight_layout()%0A%0A%20%20%20%20display%20%3D%20mo.vstack(%5B%0A%20%20%20%20%20%20%20%20mo.md(%22%23%20Reactive%20Wave%20Demo%22)%2C%0A%20%20%20%20%20%20%20%20mo.md(%22*A%20marimo%20notebook%20demonstrating%20auto-animated%20state%20and%20reactive%20computation.%20The%20phase%20increments%20automatically%20on%20each%20refresh%20tick%2C%20and%20every%20dependent%20cell%20re-executes%20in%20real%20time.%20Scrub%20the%20manual%20slider%20to%20override.*%22)%2C%0A%20%20%20%20%20%20%20%20mo.hstack(%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22%23%23%23%20Animation%20Controls%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20refresh%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(f%22**Auto%20frame%3A**%20%7Bframe%7Ddeg%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20manual_frame%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20mo.vstack(%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20mo.md(%22%23%23%23%20Wave%20Parameters%22)%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20wave_count%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20amplitude%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20frequency%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20color_scheme%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%5D)%2C%0A%20%20%20%20%20%20%20%20%5D)%2C%0A%20%20%20%20%20%20%20%20mo.mpl.interactive(fig)%2C%0A%20%20%20%20%5D)%0A%20%20%20%20return%0A%0A%0A%40app.cell(hide_code%3DTrue)%0Adef%20_()%3A%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