Skip to content

Add interactive 3D sinusoidal spiral with particle flow (8-period limit)#5

Open
curtisahuang wants to merge 6 commits intomasterfrom
cosine/feature/tab5-3d-sinusoidal-spiral-particles
Open

Add interactive 3D sinusoidal spiral with particle flow (8-period limit)#5
curtisahuang wants to merge 6 commits intomasterfrom
cosine/feature/tab5-3d-sinusoidal-spiral-particles

Conversation

@curtisahuang
Copy link
Collaborator

@curtisahuang curtisahuang commented Mar 13, 2026

This PR introduces a new 3D spiral visualization with interactive camera controls and particle motion, and wires it into the existing project system.

What changed

  • Added assets/animation-spiral-3d.js

    • Renders a sinusoidal 3D spiral that is visually bound by 8 periods to prevent unbounded distances.
    • Precomputes the spiral path and populates particles that travel along the line with varied speeds, sizes, and colors.
    • Implements a camera system (orbit and pan) with mouse interactions: drag to rotate, right-click/ctrl/shift-drag (or equivalent) to pan, and mouse wheel to zoom.
    • Uses a simple perspective projection with per-point depth handling and alpha/size modulation to convey depth.
    • The spiral uses a base radius, wobble, and frequency settings tuned for a pleasing 3D look while keeping everything within a reasonable distance.
  • Added assets/animation-starfield.js

    • Lightweight starfield background to complement the new 3D spiral, providing parallax and ambient motion.
    • Responds to pointer events for a subtle parallax effect and updates each frame.
  • Updated assets/main.js

    • Imported and registered the new starfield and spiral-3d projects.
    • Added createStarfieldProject and createSpiral3dProject to the environment so they appear as additional tabs (including the new fifth tab scenario).

How this solves the issue

  • Provides a fifth-tab-ready 3D sinusoidal spiral visualization that users can rotate, pan, and zoom with the mouse.
  • Renders a finite spiral by capping to about 8 periods, ensuring the scene remains performant and visually contained.
  • Adds dynamic particles with varied sizes and speeds that travel along the spiral for a more engaging visualization.
  • Integrates seamlessly with the existing project system, keeping behavior consistent with other animations in the app.

https://cosine.sh/cosine/animation-playground/task/52ezj7p2jom9
https://cosine.sh/gh/CosineAI/animation-playground/pull/5
Author: Curtis Huang

curtisahuang and others added 6 commits March 13, 2026 14:58
… animation

Co-authored-by: Cosine <agent@cosine.sh>
Co-authored-by: Cosine <agent@cosine.sh>
…r-based particle motion with damping

Co-authored-by: Cosine <agent@cosine.sh>
…tening to particle velocities

Co-authored-by: Cosine <agent@cosine.sh>
Co-authored-by: Cosine <agent@cosine.sh>
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