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:
2025-09-29 14:44:48 +02:00
parent b564e41820
commit 623082ce3b
79 changed files with 6247 additions and 951 deletions

View 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.