NOISY

An interactive Perlin noise visualization tool built with Nuxt 4 and TypeScript. Generate beautiful, animated noise patterns with customizable colors and download them as images.

✨ Features

• Real-time Perlin Noise Generation: Smooth, continuous noise patterns using Perlin noise algorithm
• Animated Visualization: Watch noise patterns evolve over time at 30 FPS
• Customizable Colors: Choose your own light and dark colors for the noise gradient
• Interactive Controls: Play/pause animation, generate new seeds, and download images

🚀 Quick Start

Prerequisites

• Node.js 24+
• npm

Installation

# Clone the repository
git clone https://github.com/JeremyMees/NOISY.git
cd NOISY

# Install dependencies
npm install

Development

Start the development server:

npm run dev

Visit http://localhost:3000 to see the application.

🎮 Usage

1. Color Customization: Use the color pickers to set your preferred light and dark colors
2. Animation Control: Toggle the "Animate" checkbox to start/stop the noise animation
3. Generate New Patterns: Click "Generate New Seed" to create a completely new noise pattern
4. Download Images: Click "Download Image" to save the current noise pattern as a PNG file

🏗️ Architecture

Core Components

• PerlinNoise Class: Implements the Perlin noise algorithm with gradient vectors and interpolation
• Canvas Rendering: High-performance pixel manipulation for real-time visualization

📚 How It Works

The application uses the Perlin noise algorithm to generate smooth, natural-looking noise patterns:

1. Gradient Grid: Creates a grid of random gradient vectors
2. Dot Products: Calculates dot products between grid vectors and distance vectors
3. Interpolation: Uses smooth interpolation functions to create continuous noise
4. Color Mapping: Maps noise values to a gradient between light and dark colors
5. Animation: Offsets the noise coordinates over time for animated effects