Flow Field

by Yaser · Oct 22, 2026

Thousands of tiny particles drift through a Perlin noise field, leaving glowing trails as they go. The sliders control speed, particle count, noise scale, spiral twist, and trail length, so you can shape anything from a calm river of light to a swirling galaxy.

Licence: CC BY-NC-SA 4.0: remix with credit, non-commercial, share alike

View the code

// Flow Field - ذرات روی میدان نویز با چرخش مارپیچی
// اسلایدرها (name / min / max / step / start):
//   speed  0   3     0.1  1
//   count  200 3000  100  1200
//   scale  1   10    0.5  4
//   twist  0   6     0.1  2
//   fade   2   30    1    8

let P = [];

function spawn() {
  return { x: random(width), y: random(height), h: random(170, 330) };
}

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 360, 100, 100, 100);
  noStroke();
  background(235, 45, 6);
}

function draw() {
  const n = floor(params.count);
  while (P.length < n) P.push(spawn());
  if (P.length > n) P.length = n;

  // محو شدن تدریجی برای ساختن رد حرکت
  fill(235, 45, 6, params.fade);
  rect(0, 0, width, height);

  const t = frameCount * 0.003 * params.speed;
  const s = params.scale * 0.01;

  for (const p of P) {
    // فاصله از مرکز برای ایجاد چرخش مارپیچی
    const dx = p.x - width / 2;
    const dy = p.y - height / 2;
    const d = sqrt(dx * dx + dy * dy) / (width / 2);

    const a = noise(p.x * s, p.y * s, t) * TWO_PI * 2 + d * params.twist * PI;

    p.x += cos(a) * (0.5 + params.speed * 1.5);
    p.y += sin(a) * (0.5 + params.speed * 1.5);

    // رنگ بر اساس زاویه‌ی جریان کمی تغییر می‌کند
    const hue = (p.h + a * 8) % 360;
    fill(hue, 65, 100, 70);
    circle(p.x, p.y, 1.6);

    // اگر از بوم بیرون رفت یا به‌صورت تصادفی، دوباره متولد شود
    if (p.x < 0 || p.x > width || p.y < 0 || p.y > height || random() < 0.003) {
      Object.assign(p, spawn());
    }
  }
}