Cotangent is a liquid-based audio visualizer that utilizes Catmull-Rom splines to create a smooth, organic ferrofluid-like animation, driven by live audio frequency data. The project features a modern UI, real-time audio upload and playback, and visually appealing frequency-responsive animations.

• 🎵 Audio Upload & Playbackback: Upload your own audio files and watch the visualization react in real time.
• 🟢 Ferrofluid Visualizer: A central ferrofluid blob morphs smoothly using Catmull-Rom splines, with lobes and spikes responding to bass, mid, and treble frequencies.
• 📊 Frequency Bars: Minimalist horizontal bars show the current bass, mid, and treble levels.
• ⚡ Real-Time Animation: Responsive updates and performance-optimized rendering with requestAnimationFrame.
• 🌓 Modern UI: Clean, minimalist design using CSS, SVG icons, and custom controls.
• 🛠️ Customizable Settings: Options to adjust sensitivity, rotation speed, and outline display.

• The AudioProcessor class (see audio-processor.js) uses the Web Audio API to decode uploaded audio files and extract frequency data via an AnalyserNode.
• Frequency data is split into bass, mid, and treble, which update both the UI bars and the ferrofluid shape.

• The FerrofluidPhysics class (see ferrofluid-physics.js) maintains a ring of particles forming a shape in the center of the canvas.
• Each frame, the positions of the particles are modified by the current audio band values, creating large lobes (bass/mid/treble) and superimposed small waves.
• The shape outline is rendered using a Catmull-Rom spline for smoothness.

• The main interface is in index.html and styled with style.css.
• UI includes a header, frequency bars, a canvas for the visualizer, and custom audio controls.
• script.js coordinates the UI, file uploads, playback controls, and updates the visualization in sync with the audio.

index.html              # Main HTML file and UI layout
style.css               # Styles for the UI and visualizer
audio-processor.js      # Audio file handling and frequency extraction
ferrofluid-physics.js   # Visualization and shape physics
script.js               # Main coordination between UI, audio, and visualization
settings.js             # (Optional/Planned) Settings for sensitivity, rotation, etc
utils.js                # (Optional) Utility functions
favicon.svg             # SVG icon for browser tab
LICENSE                 # MIT License
License

1. Clone or Download this repository.
2. Open index.html in a modern browser (Chrome, Firefox, Edge; requires Web Audio API support).
3. Click the upload icon to select an audio file.
4. Use the play/pause button to control playback. Watch the ferrofluid visualization react in real time!

• JavaScript (ES6+)
• Web Audio API
• HTML5 Canvas
• Catmull-Rom Splines
• CSS3

MIT License
Copyright (c) 2025 Edwin Jojo Udhiniparambann

See LICENSE for details.

• Designed and developed by Edwin Jojo Udhiniparamban.
• Inspired by ferrofluid and audio visualization art.

Contributions, issues, and suggestions are welcome!