Flow-field particles · qwen3-30b-a3b

Okay, I need to create a full-screen flow-field particle animation using p5.js in the index.html file. Let me start by recalling the requirements. The user wants at least 2000 particles, guided by Perlin noise, with fading trails, color variation, and recycling particles. Also, controls for pause/resume and restart. All in a single HTML file with inline CSS and JS, no external resources.

First, I'll structure the HTML. The basic structure would have a script tag for p5.min.js, then a script tag for the custom code. But since the user said to use the provided p5.min.js via a local script tag, I need to make sure that's included. Wait, the user mentioned that the runner will inline it, so maybe I don't need to include it in the HTML? Or do I? The addendum says to load each with a plain <script src="NAME"></script> using its exact filename. So I should include <script src="p5.min.js"></script> in the HTML.

Next, the canvas. The viewport is 1200x800, so the canvas should be set to that size. But since it's full-screen, maybe use window's dimensions? Wait, the user says to fit the viewport and keep controls responsive at 1200x800. So perhaps set the canvas size to 1200x800.

For the particles, I'll need an array of particle objects. Each particle should have position, velocity, and maybe a trail. But to avoid growing trail history, I need to manage the trails efficiently. Maybe use a trail array for each particle, but limit its length. Alternatively, use a canvas with alpha blending to create fading trails.

Perlin noise for the flow field. The field should evolve over time, so the noise function's time parameter increments each frame. The direction for each particle is determined by the noise at their position, scaled appropriately.

Color variation: each particle's color can change over time, maybe using HSB color space where the hue varies. Also, the alpha (opacity) can decrease over time to create fading trails.

Recycling particles: when a particle goes off-screen, reset its position to the opposite side. But how to handle that? Check each particle's position each frame and wrap them around.

Controls: Pause/Resume and Restart. Need to add buttons in the HTML. But since the user didn't mention UI elements, maybe just have buttons in the HTML. However, the user said to keep controls responsive. So perhaps add buttons with event listeners.

Now, structuring the JavaScript. Using p5.js in instance mode might be better to avoid global variables. But the user mentioned using the provided p5.min.js as global p5. Wait, the addendum says to use the provided p5.min.js through a plain script tag. So maybe the code can use the global p5.

But to make it self-contained, I'll write the code in the HTML's script tag. Let me outline the steps:

1. Create the HTML structure with the script tags for p5.min.js and the custom code.
2. In the custom code, set up the canvas.
3. Create a Particle class with properties like position, velocity, trail, color.
4. Generate 2000 particles.
5. In the draw loop, update each particle's position based on the Perlin noise field.
6. Draw the particles with fading trails. To do this, maybe clear the canvas with a semi-transparent color each frame, or use a trail array that gets updated.
7. Handle the controls: pause/resume (toggle a boolean), restart (reset particles and trails).
8. Ensure particles wrap around the canvas edges.

Wait, for fading trails, if I clear the canvas each frame, the trails won't persist. Instead, I can use a transparent background and let the particles' trails fade out over time. Alternatively, draw each particle with a semi-transparent color, so overlapping trails blend and fade.

But to have a fading trail, maybe each particle's trail is a series of points with decreasing alpha. But managing that for 2000 particles might be computationally heavy. Alternatively, use the p5.js built-in functions like 'blendMode' or 'tint' to create fading effects.

Another approach: draw each particle with a semi-transparent color, and the canvas is cleared with a semi-transparent color each frame. For example, using 'background(0, 10)' to have a trailing effect. But this might not be precise enough.

Alternatively, use a separate buffer canvas for the trails and composite it with the current frame. But that's more complex.

For simplicity, maybe use a semi-transparent background each frame. Let's try that. In the draw function, set the background with some alpha to create a fading effect.

But the user wants fading trails and varying colors. So each particle's color could be based on its position in the noise field, and the alpha could decrease over time. However, managing individual alpha for each particle's trail might be tricky.

Alternatively, use the HSB color space, where the hue changes over time, and the alpha is set to a value that decreases as the particle moves. But again, managing that for each particle's trail.

Hmm. Maybe for simplicity, each particle's color is determined by the noise field, and the alpha is fixed. Then, the background is semi-transparent to create a trailing effect. That might be easier.

Now, the Perlin noise field. The direction for each particle is determined by the noise at their position. The noise function can be scaled to control the field's density. For example, using noise(x * scale, y * scale) to get a value between 0 and 1, then converting that to a direction vector.

But since Perlin noise is continuous, nearby particles will have similar directions, creating coherent motion.

The field should evolve over time. So the noise's time parameter increases each frame, causing the field to shift gradually.

For the particle movement: each frame, the particle's velocity is determined by the noise field at their current position. Then, the position is updated based on the velocity. But to make the motion smooth, maybe use a combination of the noise direction and the particle's speed.

Now, recycling particles: when a particle goes off the canvas, reset its position to the opposite side. For example, if x is less than 0, set x to width, and similarly for other edges.

For the controls: add buttons for Pause/Resume and Restart. When paused, the draw loop stops. Restart resets all particles to new positions and clears trails.

Putting this all together in the HTML file. Let's start writing the code.

First, the HTML structure:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flow Field Animation</title>
    <style>
        /* Fullscreen styles */
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }
        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button id="pauseBtn">Pause</button>
        <button id="restartBtn">Restart</button>
    </div>
    <script src="p5.min.js"></script>
    <script>
        // p5.js code here
    </script>
</body>
</html>

Now, the p5.js code. Let's set up the canvas to 1200x800.

In the setup function, create 2000 particles. Each particle has x, y, and maybe a velocity. But since the velocity is determined by the noise field, perhaps each particle's velocity is calculated each frame.

But for efficiency, maybe precompute some values. However, with 2000 particles, it's manageable.

The Perlin noise field: use noise(x, y, time) where time is a variable that increases each frame.

For the particle movement:

Each frame, for each particle, calculate the direction based on the noise at their current position. Then, move the particle in that direction, scaled by a speed factor.

But to make the motion smooth, maybe use the noise value to determine the direction vector. For example, the noise value can be mapped to an angle, or directly used as a vector component.

Alternatively, use the noise to generate a vector field. For example, the x and y components of the velocity can be based on the noise at (x, y, time).

Wait, the flow field is a vector field. For each point (x, y), the direction is determined by the noise. So for a particle at (x, y), the direction is (nx, ny), where nx and ny are the noise values at (x, y, time). But how to convert that into a direction? Maybe normalize the vector or use it as a direction.

Alternatively, use the noise to generate a direction. For example, the noise value can be used to determine the angle of the particle's velocity.

But perhaps a better approach is to use the noise to generate a vector. For example, the x component of the velocity is noise(x, y, time) * 2 - 1, and similarly for y. Then, normalize the vector to get a direction.

But this might not be necessary. Let's think: the Perlin noise function returns a value between 0 and 1. To get a direction, we can use the noise value to determine the angle. For example, angle = noise * TWO_PI, then calculate the velocity components as cos(angle) and sin(angle). But that might not give the coherent flow field. Alternatively, use the noise in x and y directions to create a vector.

Another approach: use the noise at (x, y, time) to determine the direction. For example, the x component of the velocity is noise(x, y, time) * 2 - 1, and the y component is noise(x + 1, y + 1, time) * 2 - 1. Then, normalize the vector to get a unit vector.

This would create a coherent vector field where nearby points have similar directions.

So, in code:

let angle = noise(x, y, time) * TWO_PI;
let vx = cos(angle);
let vy = sin(angle);

But this might not be the best way. Alternatively, use the noise in x and y directions to create a vector.

Alternatively, use the noise to create a velocity vector. For example:

let nx = noise(x * scale, y * scale, time) * 2 - 1;
let ny = noise(x * scale, y * scale, time + 1000) * 2 - 1;
let magnitude = sqrt(nx * nx + ny * ny);
nx /= magnitude;
ny /= magnitude;

But this could be computationally intensive for 2000 particles. However, with p5.js, it's manageable.

Once the velocity is determined, the particle's position is updated by adding the velocity multiplied by a speed factor.

Now, for the trails: using a semi-transparent background. In the draw function, set the background with some alpha. For example, background(0, 10) to have a trailing effect. But this might not be sufficient. Alternatively, use a blend mode. However, p5.js's blendMode might not be supported in all environments.

Another approach: for each particle, draw it with a semi-transparent color, so that overlapping draws create a fading effect. For example, each particle is drawn with a color that has an alpha value, and the canvas is cleared with a semi-transparent color each frame.

But if the background is cleared with a semi-transparent color, the trails will fade over time. Let's try that.

In the draw function:

background(0, 10); // 10 is the alpha value, which controls the fading speed.

Then, each particle is drawn with a color that has varying alpha. But how to vary the color over time? Maybe use HSB color space where the hue changes over time, and the alpha is fixed.

For example, each particle's color is determined by its position in the noise field. But that might not be necessary. Alternatively, each particle has a color that changes over time.

Alternatively, use a fixed color with varying alpha. But that might not be visually appealing. Let's go with HSB, where the hue is based on the particle's position or time, and the alpha is fixed.

But the user wants varying colors over time. So perhaps each particle's hue is updated over time, creating a color shift.

So, for each particle, have a hue value that increments each frame. Then, the color is hsb(hue, 100, 100, 100) (with alpha 100 for example).

But how to manage that. Let's think of the Particle class:

class Particle {
    constructor() {
        this.x = random(width);
        this.y = random(height);
        this.hue = random(255);
    }

    update() {
        // calculate velocity based on noise
        let nx = noise(this.x * scale, this.y * scale, time) * 2 - 1;
        let ny = noise(this.x * scale, this.y * scale, time + 1000) * 2 - 1;
        // normalize
        let magnitude = sqrt(nx * nx + ny * ny);
        nx /= magnitude;
        ny /= magnitude;
        this.x += nx * speed;
        this.y += ny * speed;

        // wrap around
        if (this.x < 0) this.x = width;
        if (this.x > width) this.x = 0;
        if (this.y < 0) this.y = height;
        if (this.y > height) this.y = 0;

        // update hue
        this.hue += 0.5;
        if (this.hue > 255) this.hue = 0;
    }

    show() {
        stroke(this.hue, 255, 255, 100);
        strokeWeight(1);
        point(this.x, this.y);
    }
}

But this would create a trail because the background is semi-transparent. However, the stroke is drawn each frame, and the background's alpha causes the previous frames to fade.

But the problem is that the background is cleared each frame, so the trails are not stored. Wait, no. If the background is set with a semi-transparent color, then each frame, the canvas is filled with that color, which fades the previous frames. So the particles' trails are the result of the semi-transparent background.

But in this case, the particles are drawn with a color that has alpha, and the background is also semi-transparent. This might create a fading effect.

Alternatively, the background is set to a semi-transparent color, and the particles are drawn with full opacity. The semi-transparent background causes the previous frames to fade.

But I need to test this. For example, if the background is set to (0, 10), then each frame, the canvas is filled with black with 10% opacity. So each frame, the previous drawings are slightly faded, creating a trailing effect.

This approach would work without needing to track individual trails.

So, the code would have:

function draw() {
    background(0, 10); // 10 is the alpha value
    // update and show all particles
}

Now, the particles are drawn with a color that has full opacity, but the background's semi-transparency causes the trails to fade.

But the user wants varying colors over time. So each particle's color changes over time. Using HSB with the hue varying.

Now, the controls: adding buttons for pause and restart.

In the HTML, the buttons have IDs 'pauseBtn' and 'restartBtn'. In the p5.js code, add event listeners.

But in p5.js, the setup and draw functions are called automatically. So, in the script, after defining the p5 sketch, add the event listeners.

But how to handle the pause and resume. Maybe have a variable like isPaused, and in the draw function, check if it's paused. If not, update and draw the particles.

For the restart, reset all particles to new positions and reset the time.

Putting this all together.

Now, the code:

Let me outline the variables:

- particles: array of Particle objects
- isPaused: boolean
- time: number (for the noise field)
- scale: number (controls the density of the flow field)
- speed: number (controls how fast particles move)

In the setup function:

particles = [];
for (let i = 0; i < 2000; i++) {
    particles.push(new Particle());
}

time = 0;
scale = 0.01;
speed = 1;

In the draw function:

if (!isPaused) {
    time += 0.01;
    for (let p of particles) {
        p.update();
    }
}

background(0, 10);
for (let p of particles) {
    p.show();
}

For the Particle class:

class Particle {
    constructor() {
        this.x = random(width);
        this.y = random(height);
        this.hue = random(255);
    }

    update() {
        let nx = noise(this.x * scale, this.y * scale, time) * 2 - 1;
        let ny = noise(this.x * scale, this.y * scale, time + 1000) * 2 - 1;
        let magnitude = sqrt(nx * nx + ny * ny);
        nx /= magnitude;
        ny /= magnitude;
        this.x += nx * speed;
        this.y += ny * speed;

        // wrap around
        if (this.x < 0) this.x = width;
        if (this.x > width) this.x = 0;
        if (this.y < 0) this.y = height;
        if (this.y > height) this.y = 0;

        this.hue += 0.5;
        if (this.hue > 255) this.hue = 0;
    }

    show() {
        stroke(this.hue, 255, 255, 100);
        strokeWeight(1);
        point(this.x, this.y);
    }
}

But wait, the noise function in p5.js is called with noise(x, y, z). So the code uses the x, y, and time as the parameters. But the time is a variable that increments each frame.

Now, the controls:

document.getElementById('pauseBtn').addEventListener('click', () => {
    isPaused = !isPaused;
    // Update button text
    const btn = document.getElementById('pauseBtn');
    btn.textContent = isPaused ? 'Resume' : 'Pause';
});

document.getElementById('restartBtn').addEventListener('click', () => {
    particles = [];
    for (let i = 0; i < 2000; i++) {
        particles.push(new Particle());
    }
    time = 0;
    isPaused = false;
    document.getElementById('pauseBtn').textContent = 'Pause';
});

But in the p5.js code, the variables like particles, isPaused, time, etc., need to be declared in the global scope or within the p5 sketch.

Wait, the p5.js code is inside the script tag. So the variables should be declared in the global scope.

But in p5.js, the setup and draw functions are part of the sketch. So perhaps the code should be structured as a p5 sketch.

Alternatively, using instance mode. But the user mentioned using the global p5, so maybe the code is written in the global scope.

But to avoid conflicts, perhaps define the variables in the global scope.

Putting it all together, the code in the script tag would be:

let particles;
let isPaused = false;
let time = 0;
const scale = 0.01;
const speed = 1;

class Particle {
    constructor() {
        this.x = random(width);
        this.y = random(height);
        this.hue = random(255);
    }

    update() {
        let nx = noise(this.x * scale, this.y * scale, time) * 2 - 1;
        let ny = noise(this.x * scale, this.y * scale, time + 1000) * 2 - 1;
        let magnitude = sqrt(nx * nx + ny * ny);
        nx /= magnitude;
        ny /= magnitude;
        this.x += nx * speed;
        this.y += ny * speed;

        // Wrap around
        if (this.x < 0) this.x = width;
        if (this.x > width) this.x = 0;
        if (this.y < 0) this.y = height;
        if (this.y > height) this.y = 0;

        this.hue += 0.5;
        if (this.hue > 255) this.hue = 0;
    }

    show() {
        stroke(this.hue, 255, 255, 100);
        strokeWeight(1);
        point(this.x, this.y);
    }
}

function setup() {
    createCanvas(1200, 800);
    particles = [];
    for (let i = 0; i < 2000; i++) {
        particles.push(new Particle());
    }
}

function draw() {
    if (!isPaused) {
        time += 0.01;
        for (let p of particles) {
            p.update();
        }
    }
    background(0, 10);
    for (let p of particles) {
        p.show();
    }
}

// Controls
document.getElementById('pauseBtn').addEventListener('click', () => {
    isPaused = !isPaused;
    const btn = document.getElementById('pauseBtn');
    btn.textContent = isPaused ? 'Resume' : 'Pause';
});

document.getElementById('restartBtn').addEventListener('click', () => {
    particles = [];
    for (let i = 0; i < 2000; i++) {
        particles.push(new Particle());
    }
    time = 0;
    isPaused = false;
    document.getElementById('pauseBtn').textContent = 'Pause';
});

But wait, the 'createCanvas' function is part of p5.js. So in the setup function, we need to call createCanvas(1200, 800).

But the user said to fit the viewport and keep controls responsive at 1200x800. So the canvas is set to that size.

Now, testing this code. However, there are a few potential issues:

1. The noise function in p5.js may require the parameters to be in a certain range. The scale variable controls how much the noise changes per unit distance. If the scale is too small, the field may be too smooth; if too large, too chaotic.

2. The wrap-around logic for particles. When a particle goes off the canvas, it's wrapped to the opposite side. This should work.

3. The background with alpha 10 creates a fading trail. The particles are drawn with a semi-transparent color (100 alpha), so the combination of the background and the stroke's alpha may create the desired effect.

4. The controls: the buttons are in the HTML, and their event listeners are added in the script. However, the script may run before the DOM is fully loaded, leading to null elements. To avoid this, the script should be placed after the buttons in the HTML, or use DOMContentLoaded event.

But in the current HTML structure, the script is after the buttons, so the elements should be available.

Another thing: the 'noise' function in p5.js is a 3D function. The parameters are x, y, z. So in the code, the time variable is used as the z component.

Now, the final step is to write this code into the index.html file.

But the user requires that the code is written into index.html using the write function. So I need to generate the complete HTML content with the script and style, then write it to index.html.

But the user also mentioned that the provided p5.min.js is already present in the current directory, so the script tag for it is correct.

Now, the code may have some issues. For example, the 'noise' function in p5.js may need to be called with the correct parameters. Also, the 'sqrt' function is from Math, so it should be Math.sqrt.

Wait, in the code, the 'sqrt' is used without 'Math.', which would cause an error. So that's a mistake. Need to correct that.

So in the Particle's update function:

let magnitude = Math.sqrt(nx * nx + ny * ny);

Same for other instances of sqrt.

Another possible issue: the 'createCanvas' function may not be called if the setup function is not properly defined. But in the code, the setup function is defined.

Another thing: the 'stroke' function in p5.js uses RGB or HSB depending on the color mode. By default, it's RGB. So to use HSB, the code should set the color mode.

So, in the setup function, add:

colorMode(HSB, 255, 255, 255, 255);

But the current code uses stroke(this.hue, 255, 255, 100), which would be HSB if the color mode is set to HSB.

So, in the setup function:

function setup() {
    createCanvas(1200, 800);
    colorMode(HSB, 255, 255, 255, 255);
    particles = [];
    for (let i = 0; i < 2000; i++) {
        particles.push(new Particle());
    }
}

This ensures that the stroke uses HSB color mode.

Another adjustment: the 'point' function in p5.js may not be visible with strokeWeight(1). Maybe increase the strokeWeight to 2 or 3 for better visibility.

Also, the alpha value of 100 for the stroke may be too high. Maybe reduce it to 50 or 30 for a more subtle trail.

Now, putting all these corrections into the code.

The final HTML code would be:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Flow Field Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        canvas {
            display: block;
        }
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
        }
        button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="controls">
        <button id="pauseBtn">Pause</button>
        <button id="restartBtn">Restart</button>
    </div>
    <script src="p5.min.js"></script>
    <script>
        let particles;
        let isPaused = false;
        let time = 0;
        const scale = 0.01;
        const speed = 1;

        class Particle {
            constructor() {
                this.x = random(width);
                this.y = random(height);
                this.hue = random(255);
            }

            update() {
                let nx = noise(this.x * scale, this.y * scale, time) * 2 - 1;
                let ny = noise(this.x * scale, this.y * scale, time + 1000) * 2 - 1;
                let magnitude = Math.sqrt(nx * nx + ny * ny);
                nx /= magnitude;
                ny /= magnitude;
                this.x += nx * speed;
                this.y += ny * speed;

                // Wrap around
                if (this.x < 0) this.x = width;
                if (this.x > width) this.x = 0;
                if (this.y < 0) this.y = height;
                if (this.y > height) this.y = 0;

                this.hue += 0.5;
                if (this.hue > 255) this.hue = 0;
            }

            show() {
                stroke(this.hue, 255, 255, 50);
                strokeWeight(2);
                point(this.x, this.y);
            }
        }

        function setup() {
            createCanvas(1200, 800);
            colorMode(HSB, 255, 255, 255, 255);
            particles = [];
            for (let i = 0; i < 2000; i++) {
                particles.push(new Particle());
            }
        }

        function draw() {
            if (!isPaused) {
                time += 0.01;
                for (let p of particles) {
                    p.update();
                }
            }
            background(0, 10);
            for (let p of particles) {
                p.show();
            }
        }

        // Controls
        document.getElementById('pauseBtn').addEventListener('click', () => {
            isPaused = !isPaused;
            const btn = document.getElementById('pauseBtn');
            btn.textContent = isPaused ? 'Resume' : 'Pause';
        });

        document.getElementById('restartBtn').addEventListener('click', () => {
            particles = [];
            for (let i = 0; i < 2000; i++) {
                particles.push(new Particle());
            }
            time = 0;
            isPaused = false;
            document.getElementById('pauseBtn').textContent = 'Pause';
        });
    </script>
</body>
</html>

Now, this should create the required index.html file. The code includes the necessary elements, uses p5.js, and implements the flow field with Perlin noise, fading trails, and controls.

But I need to check for any syntax errors. For example, the 'noise' function in p5.js requires three parameters. The code uses 'noise(this.x * scale, this.y * scale, time)', which is correct.

Another thing: the 'random' function in JavaScript is not the same as p5.js's random. Wait, in the code, 'random(width)' is used. But in p5.js, the random function is available, but if the code is using the global JavaScript random, that would be different. However, in the p5.js environment, the 'random' function is part of the p5 library, so it's safe to use.

Wait, no. In the code, the 'random' function is used in the Particle constructor. But in the global scope, if the p5.js library is loaded, then 'random' is a function provided by p5. So that's correct.

But to be safe, perhaps use 'p5.random' instead. However, in the p5.js environment, the 'random' function is available globally. So the code should work.

Another possible issue: the 'point' function in p5.js may not be visible with the current stroke settings. Testing with strokeWeight(2) and alpha 50 should make the points visible.

Now, the final step is to write this HTML content into the index.html file using the write function.

Okay, I need to verify the index.html file I created. Let me start by checking if the file was written correctly. The user mentioned that the browser should run the application, so I should make sure that the HTML structure is correct with the script tags for p5.min.js and the custom code.

First, I'll check the HTML structure. The doctype is correct, and the head section includes the meta charset, title, and style for full-screen display. The body has a div with controls (Pause and Restart buttons) and the script tags. The canvas is set to 1200x800, which matches the required viewport size.

Next, the JavaScript part. The code defines the Particle class with constructor, update, and show methods. The setup function initializes the particles, and the draw function handles the animation. The controls are added with event listeners for pause/resume and restart.

I should check for any syntax errors. The use of 'noise' function with three parameters is correct. The Math.sqrt is used properly. The colorMode is set to HSB, which allows the hue, saturation, brightness, and alpha values to be used in the stroke function. The strokeWeight is set to 2 for visibility, and the alpha value is 50 for fading trails.

The controls are implemented with buttons that toggle the isPaused variable and reset the particles on restart. The wrap-around logic for particles is there, ensuring they reappear on the opposite side when they go off-screen.

Now, I need to think about potential issues. The p5.js library is loaded via a local script tag, which the user said is already present. The code uses the global p5 functions, which should work if the library is correctly included.

Another thing to verify is the Perlin noise field. The noise function is called with x, y, and time parameters, which should create a smoothly varying vector field. The velocity calculation uses normalized noise values to determine direction, ensuring coherent motion.

The fading trails are achieved by setting the background with an alpha of 10, which gradually fades previous frames. The particles' stroke has an alpha of 50, contributing to the trail effect.

Testing the pause and resume functionality: when paused, the time variable stops incrementing, so the flow field doesn't change. Restarting resets the particles and time, clearing the trails.

I think the code meets all the requirements. The final step is to confirm that the index.html file is correctly written and that all elements are in place for the animation to run as expected.