Initial CoolSoup implementation
CoolSoup is a React + TypeScript + Vite application that generates visual patterns and converts them to audio through spectral synthesis. Features multiple image generators (Tixy expressions, geometric tiles, external APIs) and an advanced audio synthesis engine that treats images as spectrograms.
This commit is contained in:
125
src/generators/waveform-generator/README.md
Normal file
125
src/generators/waveform-generator/README.md
Normal file
@ -0,0 +1,125 @@
|
||||
# Waveform Generator
|
||||
|
||||
A standalone module for generating random procedural waveforms with various interpolation methods and smoothing techniques.
|
||||
|
||||
## Features
|
||||
|
||||
- **Multiple Interpolation Types**: Linear, exponential, logarithmic, and cubic curves
|
||||
- **Randomness Strategies**: Uniform, Gaussian, and smooth distributions
|
||||
- **Variable Resolution**: 8-64 control points for different levels of detail
|
||||
- **Smooth Rendering**: Anti-aliased curves with bezier interpolation
|
||||
- **Configurable Aesthetics**: Line width, colors, and smoothness controls
|
||||
|
||||
## Quick Start
|
||||
|
||||
```typescript
|
||||
import { generateRandomWaveform } from './waveform-generator'
|
||||
|
||||
// Generate a single random waveform
|
||||
const waveform = generateRandomWaveform()
|
||||
document.body.appendChild(waveform.canvas)
|
||||
|
||||
// Generate with custom configuration
|
||||
const customWaveform = generateWaveform({
|
||||
splits: 32,
|
||||
interpolation: 'cubic',
|
||||
randomness: 'smooth',
|
||||
lineWidth: 3
|
||||
})
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### Main Functions
|
||||
|
||||
#### `generateWaveform(config?)`
|
||||
Generate a waveform with optional configuration override.
|
||||
|
||||
#### `generateRandomWaveform()`
|
||||
Generate a waveform with randomized parameters for maximum variety.
|
||||
|
||||
#### `generateWaveformBatch(count)`
|
||||
Generate multiple random waveforms efficiently.
|
||||
|
||||
### Configuration
|
||||
|
||||
```typescript
|
||||
interface WaveformConfig {
|
||||
width: number // Canvas width (default: 256)
|
||||
height: number // Canvas height (default: 256)
|
||||
splits: number // Number of control points (8-64)
|
||||
interpolation: InterpolationType // Curve type
|
||||
randomness: RandomnessStrategy // Distribution strategy
|
||||
lineWidth: number // Stroke width (1-4)
|
||||
backgroundColor: string // Background color
|
||||
lineColor: string // Line color
|
||||
smoothness: number // Curve smoothness (0-1)
|
||||
}
|
||||
```
|
||||
|
||||
### Interpolation Types
|
||||
|
||||
- **Linear**: Straight lines between points
|
||||
- **Exponential**: Accelerating curves (slow → fast)
|
||||
- **Logarithmic**: Decelerating curves (fast → slow)
|
||||
- **Cubic**: Smooth bezier-like curves
|
||||
|
||||
### Randomness Strategies
|
||||
|
||||
- **Uniform**: Pure random distribution (maximum variation)
|
||||
- **Gaussian**: Bell-curve distribution (center-biased)
|
||||
- **Smooth**: Smoothed random with edge tapering
|
||||
|
||||
## Algorithm
|
||||
|
||||
1. **Control Point Generation**: Create evenly-spaced X coordinates with random Y values
|
||||
2. **Randomness Application**: Apply distribution strategy (uniform/gaussian/smooth)
|
||||
3. **Smoothing**: Optional smoothing and tension application
|
||||
4. **Interpolation**: Generate curve points between control points
|
||||
5. **Rendering**: Draw smooth anti-aliased curves to canvas
|
||||
|
||||
## Project Structure
|
||||
|
||||
```
|
||||
waveform-generator/
|
||||
├── core/
|
||||
│ ├── types.ts # Interfaces and configuration
|
||||
│ ├── interpolation.ts # Curve interpolation functions
|
||||
│ └── generator.ts # Control point generation
|
||||
├── renderer/
|
||||
│ └── canvas.ts # Canvas rendering with smooth curves
|
||||
├── index.ts # Main exports
|
||||
└── README.md # This file
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Waveform
|
||||
```typescript
|
||||
const simple = generateWaveform({
|
||||
splits: 16,
|
||||
interpolation: 'linear'
|
||||
})
|
||||
```
|
||||
|
||||
### Smooth Organic Curves
|
||||
```typescript
|
||||
const organic = generateWaveform({
|
||||
splits: 24,
|
||||
interpolation: 'cubic',
|
||||
randomness: 'smooth',
|
||||
smoothness: 0.7
|
||||
})
|
||||
```
|
||||
|
||||
### Sharp Electronic Waveform
|
||||
```typescript
|
||||
const electronic = generateWaveform({
|
||||
splits: 32,
|
||||
interpolation: 'exponential',
|
||||
randomness: 'uniform',
|
||||
lineWidth: 1
|
||||
})
|
||||
```
|
||||
|
||||
The generated waveforms are perfect for audio visualization and spectral synthesis applications.
|
||||
Reference in New Issue
Block a user