random walkers

// Walker class definition

class Walker {

  constructor(x, y) {

    // Initialize position

    this.x = x || random(width);

    this.y = y || random(height);

​

    // Initialize previous position (for drawing lines)

    this.px = this.x;

    this.py = this.y;

​

    // Initialize velocity

    this.velocityX = random(-2, 2);

    this.velocityY = random(-2, 2);

​

    // Assign a unique color for each walker

    this.color = color(random(100, 255), random(100, 255), random(100, 255), 100);

  }

​

  // Update walker position with randomness and cyclic principles

  move() {

    // Add cyclic noise to velocity for smooth movement

    this.velocityX += map(noise(this.x * 0.005, millis() * 0.001), 0, 1, -0.5, 0.5);

    this.velocityY += map(noise(this.y * 0.005, millis() * 0.001), 0, 1, -0.5, 0.5);

​

    // Update position

    this.x += this.velocityX;

    this.y += this.velocityY;

​

    // Wrap-around behavior (walker reappears on opposite side)

    if (this.x > width) this.x = 0;

    if (this.x < 0) this.x = width;

    if (this.y > height) this.y = 0;

    if (this.y < 0) this.y = height;

  }

​

  // Draw the walker path

  draw() {

    stroke(this.color); // Set the stroke color

    strokeWeight(1); // Adjust line thickness

    line(this.px, this.py, this.x, this.y); // Draw line from previous to current position

​

    // Update previous position

    this.px = this.x;

    this.py = this.y;

  }

}

​

// Array to store multiple walkers

let walkers = [];

​

function setup() {

  createCanvas(800, 800); // Set canvas size

  background(0); // Black background

​

  // Create multiple walkers

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

    walkers.push(new Walker());

  }

}

​

function draw() {

  // Add a translucent background for a fading effect

  fill(0, 20);

  rect(0, 0, width, height);

​

  // Update and draw each walker

  for (let walker of walkers) {

    walker.move();

    walker.draw();

  }

}

​