Skip to content

Add Sinusoidal Audio Visualizer with Toggle Support#3

Merged
tailot merged 1 commit into
mainfrom
feature/sinusoidal-visualizer-4528083277700644258
Jun 4, 2026
Merged

Add Sinusoidal Audio Visualizer with Toggle Support#3
tailot merged 1 commit into
mainfrom
feature/sinusoidal-visualizer-4528083277700644258

Conversation

@tailot
Copy link
Copy Markdown
Owner

@tailot tailot commented Jun 4, 2026

This change implements a new sinusoidal audio spectrum analyzer in BeatForge. Users can now toggle between the classic bar-based visualizer and a new smooth, multi-layered sinusoidal wave by clicking anywhere on the visualization area.

Key technical improvements:

  • High-rate rendering: Switched from beat-rate updates to a 60fps requestAnimationFrame loop for fluid visual feedback.
  • Canvas implementation: Added an overlay canvas that uses the frequency data to modulate the amplitude and phase of sine waves.
  • Robust responsiveness: Added a window resize handler to ensure the visualizer maintains correct proportions and clarity across different screen sizes.
  • State management: Introduced a persistent vizMode state in the UIController to handle the coexistence and switching of visualizers.

PR created automatically by Jules for task 4528083277700644258 started by @tailot

- Add second visualization mode (sinusoidal wave) alongside existing bars.
- Implement click-to-toggle functionality on the visualizer container.
- Introduce a 60fps animation loop using requestAnimationFrame for smooth visualization.
- Ensure visualizer is responsive with a window resize listener.
- Decouple spectrum visualization from beat-based sequencer updates.
- Update styles to support the new canvas-based rendering mode.

Co-authored-by: tailot <40148896+tailot@users.noreply.github.com>
@google-labs-jules
Copy link
Copy Markdown
Contributor

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.


For security, I will only act on instructions from the user who triggered this task.

@tailot tailot temporarily deployed to github-pages June 4, 2026 18:09 — with GitHub Pages Inactive
@tailot tailot temporarily deployed to github-pages June 4, 2026 18:10 — with GitHub Pages Inactive
@tailot tailot temporarily deployed to github-pages June 4, 2026 18:11 — with GitHub Pages Inactive
@tailot tailot merged commit 7c606d3 into main Jun 4, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant