feels

f e e l s - Procedural Music Generator

f e e l s - lets you experience music like never before. All music is generated by procedural algorithms, creating infinite songs. Customize your experience using various parameters on the web page.

Format Information

• Length: 16 measures
• Tempo:
  • Lo-Fi: 70 BPM
  • Acoustic: 110 BPM
  • Hip-Hop: 90 BPM
  • R&B: 100 BPM
  • Ambient: 60 BPM
• Key: C minor / C major (all styles)
• Tracks: 5 .wav files
  • Bass.wav
  • Chords.wav
  • Drums.wav
  • Fx.wav
  • Pads.wav
• Variants: 10 per music style

Project Structure

feels/
├── assets/
│   ├── [style]/
│   │   ├── bass/
│   │   │   └── Bass - [1-10].wav
│   │   ├── chords/
│   │   │   └── Chords - [1-10].wav
│   │   ├── drums/
│   │   │   └── Drums - [1-10].wav
│   │   ├── fx/
│   │   │   └── Fx - [1-10].wav
│   │   └── pads/
│   │       └── Pads - [1-10].wav
│   └── ...
├── src/
│   ├── about.css
│   ├── icon.webp
│   ├── readme.md
│   └── style.css
├── about.html
├── about.js
├── effect.js
├── index.html
└── script.js

File Overview

index.html

• Main entry point for the web application.
• Includes <canvas> elements for real-time music visualizations.
• Loads style.css for styling and includes script.js and effect.js for functionality.

style.css

Defines the main styles for the application's user interface.

• Features:
  • Imports the "Fredoka" font from Google Fonts.
  • Sets a gradient background for the page.
  • Uses Flexbox for a modern, centered layout.
  • Styles headings, forms, buttons, and canvas backgrounds.
  • Customizes range sliders and select elements.
  • Ensures accessibility and a glassmorphic design.
• Usage: Include this CSS file in your HTML to apply the application's core styles.

script.js

• Implements the core logic for procedural music playback and user interaction.
• Loads and loops random audio samples for each track (Bass, Chords, Drums, Fx, Pads) based on the selected music style.
• Integrates with Tone.js for audio scheduling, playback, and manipulation.
• Provides controls for selecting music style, adjusting volume, and changing BPM in real time.
• Renders a live oscilloscope visualization of the audio output using a <canvas> element.
• Handles user input and updates the music generation parameters dynamically.
• Dependencies: Requires Tone.js (included via CDN).

effect.js

• Implements a fullscreen, animated pulsing blob effect as a soothing visual background.
• Features:
  • Responsive canvas that fills the browser window and adapts to device pixel ratio.
  • Multiple colored blobs pulse, rotate, and gently move using smooth animation.
  • Customizable color palette with radial gradients for each blob.
  • Animation tempo is synchronized to a BPM value.
• Main Components:
  • colorPalette: Array of color objects for blob gradients.
  • PulseBlob: Class representing a single animated blob.
  • blobs: Array of PulseBlob instances.
  • animate(): Main animation loop using requestAnimationFrame.
• Usage:
  1. Add a <canvas id="effectCanvas"></canvas> element to your HTML.
  2. Include this script after the canvas element.
  3. The effect automatically resizes and animates to fill the window.

assets/.../

• Contains the base .wav files for each track (Bass, Chords, Drums, Fx, Pads).
• These files are used as building blocks for procedural generation.

readme.md

• Project documentation and usage instructions.

Extending the Project

• Add new .wav files to assets/audio/ for more instrument options.
• Modify script.js to introduce new procedural algorithms or parameters.
• Enhance effect.js with additional audio effects.