let torus = false;

let v = 1.0;  // Constant velocity, pixels/step

let bg;       // Background graphics for trails

let size = 2;  //  point size of rendered particles

let fps = 0; 

let decayStrength = 5;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  bg = createGraphics(windowWidth, windowHeight);  // Initialize background graphics

  bg.background(0);  // Start with a white background

​

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

    particles.push(new Particle());

  }

  textSize(16); // Set the text size for the frame rate display

  fill(255); // Set the text color to black

}

​

function draw() {

  decayBackground();

  image(bg, 0, 0);  // Display the trails image

  //bg.loadPixels();

  for (let particle of particles) {

    particle.update();

  }

  //bg.updatePixels();

  for (let particle of particles) {

    particle.show();

  }

  // Display the frame rate

  fps = fps * 0.95 + frameRate() * 0.05;

  fill(255);

  stroke(0);

  text(fps.toFixed(0), 10, 20); // Display frame rate rounded to 2 decimal places

}

​

function rotateVelocity(vel, angle) {

  let radianAngle = radians(angle);

  let newVel = createVector(

    vel.x * cos(radianAngle) - vel.y * sin(radianAngle),

    vel.x * sin(radianAngle) + vel.y * cos(radianAngle)

  );

  return newVel;

}

​

function decayBackground() {

  bg.noStroke();  // Ensure no outline

  bg.fill(0, decayStrength);  // Set fill to black with low alpha to create the fading effect

  bg.rect(0, 0, bg.width, bg.height);  // Cover the entire graphics with the semi-transparent black rectangle

}

​

class Particle {

  constructor() {

    this.pos = createVector(random(width), random(height));

    this.vel = createVector(0, v);

    this.vel = rotateVelocity(this.vel, random(360));

    this.type = (random() < 0.5) ? 1: 0;

  }

​

  update() {

    let radius = 50;  // Radius of detection (pixels)

​

    // Read color from background to decide behavior (optional, for advanced uses)

    let bgCol = bg.get(this.pos.x, this.pos.y);

    // Modify behavior based on color (placeholder logic)

    let greenComponent = bgCol[1]; 

  // Steer left for green, right for red

  let angleChange = map(bgCol[1], 0, 255, PI, -PI) + 

      map(bgCol[0], 0, 255, -PI, PI); 

  this.vel = rotateVelocity(this.vel, angleChange);

​

    // Update background graphics - leave a trail

    bgCol[this.type] = 255;

    if (bgCol[this.type] > 255) bgCol = 255;      

    bg.stroke(bgCol);   // Trail color

    bg.strokeWeight(2);  // Trail width

    bg.point(this.pos.x, this.pos.y);

    //bg.set(this.pos.x, this.pos.y, bgCol);

​

    // Update position

    this.pos.add(this.vel);

    // Handle edge wrapping

    if (torus) {

      this.pos.x = (this.pos.x + width) % width;

      this.pos.y = (this.pos.y + height) % height;

    } else {

      if (this.pos.x < 0 || this.pos.x > width) this.vel.x *= -1;

      if (this.pos.y < 0 || this.pos.y > height) this.vel.y *= -1;

    }

  }

​

  show() {

    if (this.type == 1) stroke(0, 255, 0); 

    else stroke(255, 0, 0);

    strokeWeight(2);

    fill(0,255,255);

    ellipse(this.pos.x, this.pos.y, size, size);

  }

}

​