const num = 150;

const noiseScale = 0.01 / 2;

​

function setup() {

  createCanvas(400, 400);

  background(220);

  noFill();

  stroke(0);

  ellipse(width / 2, height / 2, 200, 200); // draw outer circle

​

  //flow field

  for (let i = 0; i < num; i++) {

    particles.push(createVector(random(width), random(height)));

  }

  stroke(255, 60); // adjust the last number for the transparency of the strokes

  strokeWeight(7); // adjust the thickness of the strokes

  clear();

}

​

function draw() {

  background(0, 5); //the smaller the last number is, the longer the strokes stay visible + the slower the background color switches.

  for (let i = 0; i < num; i++) {

    let p = particles[i];

    point(p.x, p.y);

    let n = noise(

      p.x * noiseScale,

      p.y * noiseScale,

      frameCount * noiseScale * noiseScale

    );

    let a = TAU * n;

    p.x += cos(a);

    p.y += sin(a);

    if (!onScreen(p)) {

      p.x = random(width);

      p.y = random(height);

    }

  }

​

  //circle

  let centerX = width / 2;

  let centerY = height / 2;

  let radius = 100;

​

  // loop through each pixel inside the circle

  for (let x = centerX - radius; x < centerX + radius; x++) {

    for (let y = centerY - radius; y < centerY + radius; y++) {

      let d = dist(x, y, centerX, centerY);

​

      // check if the pixel = inside the circle

      if (d < radius) {

        // calculate Perlin noise value based on pixel's position

        let noiseValue = noise(x * 0.01, y * 0.01);

​

        // map the noise value to control the grayscale color

        let gray = map(noiseValue, 0, 0.2, 50, 120);

​

        stroke(gray); // stroke color

        point(x, y); // draw a pixel at calculated position

      }

    }

  }

  // noLoop(); // stop the draw loop after one frame

  // end of circle

}

​

function mouseReleased() {

  noiseSeed(millis());

}

​

function onScreen(v) {

  return v.x >= 0 && v.x <= width && v.y >= 0 && v.y <= height;

}

​