Cymatics - Chladni Pattern Visualization - 3D & 2D
Interactive visualization of Chladni patterns in both 3D using Three.js and 2D using P5.js. This app simulates particle movement on vibrating surfaces, creating mesmerizing patterns controlled by adjustable parameters.
Overview
A Next.js-based application that visualizes Chladni cymatics patterns in both 2D and 3D environments. The 2D version uses P5.js to simulate particles that form patterns according to the Chladni equation, while the 3D version leverages Three.js and React Three Fiber for immersive visualization. The app features interactive controls allowing users to adjust frequency, amplitude, vibration strength, and particle count parameters to explore various cymatics patterns in real-time.
Challenges
Optimizing performance while rendering up to 20,000 particles in real-time
Creating smooth transitions between parameter changes to maintain visual appeal
Implementing the mathematical Chladni equations correctly to produce accurate cymatics patterns
Ensuring responsive design and consistent experience across both 2D and 3D visualizations
Solutions
Utilized instanced mesh rendering in Three.js for efficient 3D particle management
Implemented react-spring for smooth parameter transitions and animations
Applied mathematical optimization to the Chladni equation implementation
Created dynamic canvas sizing to adapt to different screen dimensions
Results
Achieved smooth real-time visualization with up to 20,000 particles
Implemented intuitive controls with informative tooltips for educational purposes
Successfully created both 2D and 3D visualization options with consistent interfaces
Ensured responsive design that adapts to various screen sizes and devices
