Animated Color Pattern - xelsed.ai

A real-time interactive sketch that uses webcam input and hand tracking (via ml5.js or MediaPipe Hands) to dynamically generate and manipulate an organic, fluid 3D sculpture in a WebGL environment (three.js), where hand gestures control the form, texture, and movement of the sculpture.

Here's a sketch that creates a colorful, animated flow field using Perlin noise and a particle system, designed to be visually impressive with smooth movement and an interesting color palette.

The sketch uses a `Particle` class that moves through a Perlin noise field. The noise at each particle's position determines the direction of a force applied to it, creating organic, swirling patterns. A semi-transparent background is drawn each frame to create beautiful, fading trails.

---

### `sketch.js`
```javascript
// Global array to hold our particles
let particles = [];
// Number of particles in the simulation
let numParticles = 1000;
// Scale factor for the Perlin noise field.
// Smaller values create smoother, larger patterns. Larger values create more turbulent, detailed patterns.
let noiseScale = 0.005;
// Maximum speed a particle can reach
let maxSpeed = 2.5;

// Define a color palette
// These colors are inspired by natural, earthy tones and vibrant accents, providing a good visual contrast.
let colors = [
'#F4A261', // Sandy brown - warm, inviting
'#E76F51', // Burnt sienna - rich, deep orange
'#2A9D8F', // Teal - cool, calming
'#264653', // Dark charcoal - grounding, provides strong contrast
'#E9C46A' // Mustard yellow - bright, energetic accent
];

/**
* Particle class represents an individual particle in the flow field.
* Each particle has a position, velocity, acceleration, and a color.
*/
class Particle {
constructor() {
// Initialize particle position randomly across the canvas
this.pos = createVector(random(width), random(height));
// Initialize particle velocity with a random direction and small magnitude
this.vel = p5.Vector.random2D();
this.vel.mult(random(0.5, 1.5)); // Randomize initial speed slightly
// Initialize acceleration to zero
this.acc = createVector(0, 0);
// Assign a random color from our defined palette
this.color = colors[floor(random(colors.length))];
}

/**
* Updates the particle's position, velocity, and acceleration based on the Perlin noise flow field.
*/
update() {
// Calculate a force vector based on Perlin noise at the particle's current position.
// The noise value (0-1) is mapped to an angle (0 to 8*PI) to create varied swirling patterns.
let angle = noise(this.pos.x * noiseScale, this.pos.y * noiseScale) * TWO_PI * 4;
// Create a vector from the calculated angle
let force = p5.Vector.fromAngle(angle);
// Scale the force down to prevent particles from accelerating too quickly
force.mult(0.1);

// Apply the force to acceleration
this.acc.add(force);
// Add acceleration to velocity
this.vel.add(this.acc);
// Limit the velocity to prevent particles from becoming too fast
this.vel.limit(maxSpeed);
// Update position based on velocity
this.pos.add(this.vel);
// Reset acceleration for the next frame
this.acc.mult(0);

// Wrap particles around the edges of the canvas
if (this.pos.x > width) this.pos.x = 0;
if (this.pos.x < 0) this.pos.x = width;
if (this.pos.y > height) this.pos.y = 0;
if (this.pos.y < 0) this.pos.y = height;
}

/**
* Displays the particle as a point on the canvas.
*/
show() {
// Set the stroke color of the point to the particle's assigned color
stroke(this.color);
// Set the thickness of the point/line
strokeWeight(1.5);
// Draw the point at the particle's current position
point(this.pos.x, this.pos.y);
}
}

/**
* p5.js setup function: runs once when the sketch starts.
*/
function setup() {
// Create a full-window canvas
createCanvas(windowWidth, windowHeight);
// Set a dark, slightly muted background color to provide strong contrast for the particles
background(26, 70, 83);

// Initialize all particles
for (let i = 0; i < numParticles; i++) {
particles.push(new Particle());
}
}

/**
* p5.js draw function: runs continuously in a loop after setup.
*/
function draw() {
// Draw a semi-transparent rectangle over the entire canvas each frame.
// This creates a fading effect for the particle trails, making the animation smoother and more organic.
noStroke();
fill(26, 70, 83, 10); // Use the same background color with a low alpha value for subtle fading
rect(0, 0, width, height);

// Update and display each particle
for (let particle of particles) {
particle.update();
particle.show();
}
}

/**
* p5.js windowResized function: called automatically when the browser window is resized.
*/
function windowResized() {
// Resize the canvas to match the new window dimensions
resizeCanvas(windowWidth, windowHeight);
// Clear the background and reinitialize particles to adapt to the new canvas size
background(26, 70, 83);
particles = [];
for (let i = 0; i < numParticles; i++) {
particles.push(new Particle());
}
}

/**
* p5.js mousePressed function: called automatically when a mouse button is pressed.
* This provides a simple way to reset the sketch.
*/
function mousePressed() {
// Clear the background and reinitialize particles to create a fresh pattern
background(26, 70, 83);
particles = [];
for (let i = 0; i < numParticles; i++) {
particles.push(new Particle());
}
}
```

---

### `index.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Colorful Flow Field</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Load p5.js library first -->
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<!-- Then load your sketch.js file -->
<script src="sketch.js"></script>
</body>
</html>
```

---

### `style.css`
```css
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrollbars if canvas slightly exceeds window size */
}

canvas {
display: block; /* Remove extra space below the canvas */
}
```