Okay, let's see. The user wants a single-page web app with a flow-field particle animation using p5.min.js. They specified it should be all in one index.html file, no external resources, and the p5 library is already present in the current directory.

First, I need to structure the HTML file. It should include the p5.min.js script tag. Since it's a single file, CSS in a style tag and JS in a script tag.

The main components are:
- Full-screen canvas, so the body and html should have no margin, padding, and be 100% height.
- Using p5.js in global mode because the user mentioned global p5.
- Thousands of particles moving with Perlin noise flow field.
- Fading trails, which probably means drawing a semi-transparent background each frame.
- Color shifting over time, maybe using hue rotation.

Wait, p5 has createCanvas with fullscreen parameters. Maybe using windowWidth and windowHeight, but for full-screen, perhaps using CSS to make the canvas cover the entire viewport.

Wait, the user said "full-screen", so maybe set the canvas to windowWidth and windowHeight, but also handle resize events. However, since it's a single file, the p5 sketch should adjust when the window resizes.

But the user said "full-screen", so maybe the canvas should take the whole screen. Let me check p5's fullscreen example. Usually, you set the canvas size to windowWidth and windowHeight, and maybe add a resize listener.

But for simplicity, maybe use CSS to make the canvas cover the entire screen. So in the style tag, set body and html to 100% height, no margin, and canvas to position: fixed, top:0, left:0, width:100%, height:100%.

But p5's createCanvas might not automatically resize. So perhaps in the p5 setup, set the canvas to windowWidth and windowHeight, and in the draw loop, check if the window size changed and resize accordingly. Alternatively, use the windowResized function in p5.

Wait, the user said "full-screen", so maybe the sketch should adjust when the window is resized. Let's plan to handle windowResized in p5.

Next, the flow field. Flow field uses Perlin noise to generate direction vectors. Each particle's velocity is determined by the flow field at its position.

Thousands of particles: need to create a particle array, each with position, velocity, maybe color.

Fading trails: each frame, draw a semi-transparent background (like fill(0, 5) for black with low alpha), so previous frames fade out.

Color shifting: maybe use a time-based hue value that increments each frame, so the color of particles changes over time.

Let's outline the steps:

1. HTML structure with style and script tags.
2. Load p5.min.js via script src="p5.min.js".
3. In the p5 sketch:
   - setup(): create canvas, initialize particles.
   - draw(): update and draw particles, apply flow field, fade background.

Wait, the p5 library is in the current directory, so the script tag should be <script src="p5.min.js"></script>.

Now, creating the particles. Each particle has x, y, maybe a velocity vector. The flow field is generated using noise(x, y) to get a direction.

Perlin noise in p5 is noise(), which returns a value between 0 and 1. To get a direction, multiply by TWO_PI.

For the flow field, at each point (x, y), compute noise(x * scale, y * scale) * TWO_PI to get the angle.

Particles move according to the flow field direction at their current position.

Thousands of particles: maybe 5000? Need to manage performance. Using p5's translate and rotate might help, but in JS, it's about efficient loops.

Each frame:
- Draw background with low alpha to create fade.
- For each particle:
   - Calculate flow direction at current position.
   - Update velocity based on flow.
   - Move particle.
   - Draw particle.

Color shifting: perhaps the stroke color uses a hue that increments over time. So in draw(), increment a hue variable, use colorMode(HSB), and set stroke(hue, 100, 100, 0.5) or something.

Wait, fading trails: if the background is semi-transparent, then previous particle positions fade. So each frame, fill(0, 5) rect(0,0,width,height) to create the fade effect.

Wait, but if you draw a semi-transparent background each frame, the trails fade. So in p5, background(0, 5) where 5 is the alpha.

But background() in p5 with alpha would do that. So background(0, 5) each frame.

Now, particles: need to create an array of particles. Each particle has x, y. Maybe also a speed or size.

Flow field function: function getFlow(x, y) {
  let angle = noise(x * flowScale, y * flowScale) * TWO_PI;
  return createVector(cos(angle), sin(angle));
}

Then, each particle's velocity is set to the flow direction at its position, scaled by some speed.

But to have smooth movement, maybe use a small step, like velocity = flowVector * speed.

Wait, but if particles just follow the flow exactly, they might move too fast. So maybe set velocity to flowVector multiplied by a speed factor.

Also, to have thousands of particles, need to initialize them in setup.

Let's think about the code structure.

In the HTML file:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="p5.min.js"></script>
  <script>
    // p5 sketch here
  </script>
</body>
</html>

In the p5 sketch:

let particles = [];
let flowScale = 0.01;
let hue = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 1);
  for (let i = 0; i < 5000; i++) {
    particles.push(new Particle());
  }
}

function draw() {
  background(0, 5); // fade effect
  hue = (hue + 0.1) % 360;
  for (let p of particles) {
    p.update();
    p.show();
  }
}

class Particle {
  constructor() {
    this.pos = createVector(random(width), random(height));
    this.vel = createVector(0, 0);
    this.acc = createVector(0, 0);
    this.maxSpeed = 2;
  }

  update() {
    let angle = noise(this.pos.x * flowScale, this.pos.y * flowScale) * TWO_PI;
    this.acc = p5.Vector.fromAngle(angle);
    this.acc.setMag(0.1);
    this.vel.add(this.acc);
    this.vel.limit(this.maxSpeed);
    this.pos.add(this.vel);
    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;
  }

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

Wait, but in this code, flowScale is 0.01. Maybe adjust for better flow.

Also, the background is set to (0,5), which is black with alpha 5 (out of 100 in HSB? Wait no, in p5, background with alpha: if using colorMode(RGB), then alpha is 0-255, but here colorMode is HSB with alpha 1. Wait, in the setup, colorMode(HSB, 360, 100, 100, 1), so alpha is 0-1.

Wait, background(0, 5) would be HSB(0,5, ...)? No, background() parameters depend on colorMode.

Wait, no. When you call background(0,5), in HSB mode with colorMode(HSB, 360, 100, 100, 1), the parameters are (h, s, b, a). So background(0, 0, 0, 0.05) would be black with 5% alpha. Wait, but the user said "fading trails", so each frame, a very transparent black is drawn over the previous, causing the trails to fade.

So in the code, background(0, 0, 0, 0.05) would set the background to black with 5% opacity.

But in the current code, background(0,5) would be h=0, s=5, but b and a not specified. Wait, no. If colorMode is HSB with ranges (360, 100, 100, 1), then background(h, s, b, a) where h is 0-360, s 0-100, b 0-100, a 0-1.

So to get a black background with alpha 0.05, it's background(0, 0, 0, 0.05). But maybe using HSB, black is s=0 and b=0.

Alternatively, maybe better to use RGB for the background. Wait, but the colorMode is set to HSB for the particles' color.

Hmm. Maybe set colorMode(HSB, 360, 100, 100, 1) for the hue shifting, but for the background, use RGB. Wait, no. The colorMode affects all drawing functions.

Alternatively, in the background call, use RGB values. Wait, no, if colorMode is HSB, then background parameters are in HSB.

So to get a black background with alpha 0.05, it's background(0, 0, 0, 0.05).

But perhaps it's easier to set colorMode(RGB) for the background and HSB for the particles. Wait, but colorMode is global.

Alternatively, maybe set colorMode to HSB for the hue shifting, and for the background, use HSB values where saturation and brightness are 0 to get black.

Yes. So background(0, 0, 0, 0.05) would be black with 5% alpha.

So in the draw function:

background(0, 0, 0, 0.05);

Then, for the particles, stroke(hue, 100, 100, 0.5) where hue is 0-360.

Wait, in the code above, hue is incremented by 0.1 each frame, modulo 360.

Also, the flowScale: 0.01 might be too small. Maybe 0.005 or similar to get smoother flow.

Testing parameters would be needed, but since this is a code generation task, we'll set reasonable defaults.

Another thing: the particles' update. The acceleration is added each frame, but maybe the velocity should be set directly to the flow direction times speed, instead of accumulating acceleration. Because in flow fields, particles usually follow the vector at their position, so velocity = flowVector * speed.

In the current code, the acceleration is added to velocity, which might cause the particles to accelerate, but maybe it's better to set velocity directly.

Wait, in the Particle class:

update() {
  let angle = noise(...) * TWO_PI;
  this.acc = p5.Vector.fromAngle(angle);
  this.acc.setMag(0.1);
  this.vel.add(this.acc);
  this.vel.limit(maxSpeed);
  ...
}

This means the velocity is gradually changing towards the flow direction, which might create smoother motion. Alternatively, setting velocity directly to the flow vector scaled by speed.

But the user said "advected by Perlin-noise vectors", which suggests that the velocity is determined by the flow field, so maybe velocity = flowVector * speed.

Let me adjust that.

Change the update method to:

update() {
  let angle = noise(this.pos.x * flowScale, this.pos.y * flowScale) * TWO_PI;
  this.vel = p5.Vector.fromAngle(angle);
  this.vel.setMag(1); // speed
  this.pos.add(this.vel);
  // wrap around edges
}

This way, each particle's velocity is directly set by the flow field direction.

This might create more coherent flow.

Also, the number of particles: 5000 might be a lot for performance, but p5 can handle it. Maybe start with 2000 to be safe.

Wait, the user said "thousands", so 2000-5000 is okay.

Now, handling window resize. In p5, the windowResized function can be used to resize the canvas.

Add:

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

But in the setup, the canvas is created with windowWidth and windowHeight, so when the window is resized, this function updates the canvas size.

Also, need to reposition particles if the canvas size changes, but maybe not necessary; they'll wrap around.

Putting it all together.

Now, check if p5.min.js is present. The user says it's in the current directory, so the script tag is correct.

Now, write the index.html file with all the code.

Make sure there are no external resources. The only external script is p5.min.js from the current directory.

Check for any possible errors:

- Correct HTML structure.
- Style to remove margins and set canvas to full screen.
- p5 script tag.
- The p5 sketch code.

Let me draft the index.html content.

The HTML should be:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Flow Field Particles</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: #000;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script src="p5.min.js"></script>
  <script>
    let particles = [];
    let flowScale = 0.005;
    let hue = 0;

    function setup() {
      createCanvas(windowWidth, windowHeight);
      colorMode(HSB, 360, 100, 100, 1);
      for (let i = 0; i < 2000; i++) {
        particles.push(new Particle());
      }
    }

    function draw() {
      background(0, 0, 0, 0.05);
      hue = (hue + 0.1) % 360;
      for (let p of particles) {
        p.update();
        p.show();
      }
    }

    function windowResized() {
      resizeCanvas(windowWidth, windowHeight);
    }

    class Particle {
      constructor() {
        this.pos = createVector(random(width), random(height));
        this.vel = createVector(0, 0);
        this.maxSpeed = 1;
      }

      update() {
        let angle = noise(this.pos.x * flowScale, this.pos.y * flowScale) * TWO_PI;
        this.vel = p5.Vector.fromAngle(angle);
        this.vel.mult(this.maxSpeed);
        this.pos.add(this.vel);
        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;
      }

      show() {
        stroke(hue, 100, 100, 0.5);
        strokeWeight(1);
        point(this.pos.x, this.pos.y);
      }
    }
  </script>
</body>
</html>

Check for possible issues:

- flowScale is 0.005, which is a reasonable value for Perlin noise scaling.
- 2000 particles, which is thousands.
- background with alpha 0.05 creates fading trails.
- hue increments by 0.1 each frame, cycling through colors.
- windowResized function to handle canvas resizing.

This should meet the user's requirements. Now, write this content to index.html using the write tool.

Okay, let me check if the user's request was fully addressed. They wanted a single-page web app with a flow-field particle animation using p5.min.js, all in one index.html file without external resources.

First, the HTML structure: I included the necessary meta tags, a style section to remove margins and set the canvas to full screen, and the script tags for p5.min.js and the custom code. The CSS looks good—no margins, overflow hidden, canvas as block.

The JavaScript part uses p5 in global mode. The setup creates a canvas with window dimensions, initializes 2000 particles. The draw function handles the fading background with low alpha, updates hue for color shifting, and processes each particle. The Particle class uses Perlin noise via p5's noise() function to determine direction, updates position with wrapping at edges, and draws points with the current hue.

I made sure there are no external resources—only p5.min.js from the current directory. The flowScale is set to 0.005 for smooth noise, and the number of particles is 2000, which is in the thousands as requested. The trails fade because of the semi-transparent background, and colors shift over time with the hue increment.

Window resizing is handled by the windowResized function, which resizes the canvas. All code is inline, no separate files. Looks like everything the user asked for is included. The write command was successful, so index.html is now present with the correct content.