Animated Triangle Fade - xelsed.ai

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100); // HSB with alpha
  background(0); // solid black to start

  for (let i = 0; i < NUM_BOIDS; i++) {
    const x = random(width);
    const y = random(height);

    // Warm gradient from red/orange to yellow (approx 10–60° hue)
    const hue = lerp(10, 60, i / (NUM_BOIDS - 1));

    boids.push(new Boid(x, y, hue));
  }
}

function draw() {
  // Fade previous frame slightly to create trails
  // Very low alpha so trails are subtle but visible
  background(0, 0, 0, 12); // black, ~12% opacity

  for (let b of boids) {
    b.flock(boids);
    b.update();
    b.edges();
    b.show();
  }
}

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

constructor(x, y, hue) {
  this.position = createVector(x, y);
  const angle = random(TWO_PI);
  this.velocity = p5.Vector.fromAngle(angle).mult(random(1, 2));
  this.acceleration = createVector(0, 0);

  this.maxSpeed = 3;    // max speed
  this.maxForce = 0.05; // max steering force

  this.hue = hue;

  // Trail history
  this.trail = [];
  this.trailLength = 12; // number of points in trail
}

applyForce(force) {
  this.acceleration.add(force);
}

flock(boids) {
  const separationForce = this.separate(boids).mult(1.5);
  const alignmentForce  = this.align(boids).mult(1.0);
  const cohesionForce   = this.cohesion(boids).mult(1.0);
  const mouseForce      = this.attractedToMouse().mult(0.8);

  this.applyForce(separationForce);
  this.applyForce(alignmentForce);
  this.applyForce(cohesionForce);
  this.applyForce(mouseForce);
}

update() {
  this.velocity.add(this.acceleration);
  this.velocity.limit(this.maxSpeed);
  this.position.add(this.velocity);
  this.acceleration.mult(0);

  // Update trail after moving
  this.trail.push(this.position.copy());
  if (this.trail.length > this.trailLength) {
    this.trail.shift();
  }
}

edges() {
  const margin = 10;
  if (this.position.x > width + margin)  this.position.x = -margin;
  if (this.position.x < -margin)         this.position.x = width + margin;
  if (this.position.y > height + margin) this.position.y = -margin;
  if (this.position.y < -margin)         this.position.y = height + margin;
}

seek(target) {
  const desired = p5.Vector.sub(target, this.position);
  const d = desired.mag();
  if (d === 0) return createVector(0, 0);

  desired.setMag(this.maxSpeed);
  const steer = p5.Vector.sub(desired, this.velocity);
  steer.limit(this.maxForce);
  return steer;
}

attractedToMouse() {
  if (mouseX < 0 || mouseX > width || mouseY < 0 || mouseY > height) {
    return createVector(0, 0);
  }
  const target = createVector(mouseX, mouseY);
  return this.seek(target);
}

separate(boids) {
  const desiredSeparation = 25;
  const steer = createVector(0, 0);
  let count = 0;

  for (let other of boids) {
    if (other === this) continue;

    const d = p5.Vector.dist(this.position, other.position);
    if (d > 0 && d < desiredSeparation) {
      let diff = p5.Vector.sub(this.position, other.position);
      diff.normalize();
      diff.div(d); // stronger repulsion when very close
      steer.add(diff);
      count++;
    }
  }

  if (count > 0) {
    steer.div(count);
  }

  if (steer.mag() > 0) {
    steer.setMag(this.maxSpeed);
    steer.sub(this.velocity);
    steer.limit(this.maxForce);
  }

  return steer;
}

align(boids) {
  const neighborDist = 50;
  const sum = createVector(0, 0);
  let count = 0;

  for (let other of boids) {
    if (other === this) continue;

    const d = p5.Vector.dist(this.position, other.position);
    if (d > 0 && d < neighborDist) {
      sum.add(other.velocity);
      count++;
    }
  }

  if (count > 0) {
    sum.div(count);
    sum.setMag(this.maxSpeed);
    const steer = p5.Vector.sub(sum, this.velocity);
    steer.limit(this.maxForce);
    return steer;
  }

  return createVector(0, 0);
}

cohesion(boids) {
  const neighborDist = 50;
  const sum = createVector(0, 0);
  let count = 0;

  for (let other of boids) {
    if (other === this) continue;

    const d = p5.Vector.dist(this.position, other.position);
    if (d > 0 && d < neighborDist) {
      sum.add(other.position);
      count++;
    }
  }

  if (count > 0) {
    sum.div(count); // centroid of neighbors
    return this.seek(sum);
  }

  return createVector(0, 0);
}

drawTrail() {
  if (this.trail.length < 2) return;

  noFill();
  strokeWeight(1.2);

  for (let i = 1; i < this.trail.length; i++) {
    const p1 = this.trail[i - 1];
    const p2 = this.trail[i];

    // Alpha increases toward the head of the trail
    const alpha = map(i, 1, this.trail.length - 1, 0, 55);
    stroke(this.hue, 80, 80, alpha);
    line(p1.x, p1.y, p2.x, p2.y);
  }
}

show() {
  // First draw the trail
  this.drawTrail();

  // Then draw the boid as a triangle
  push();
  translate(this.position.x, this.position.y);
  const angle = this.velocity.heading() + PI / 2; // point forward
  rotate(angle);

  noStroke();
  fill(this.hue, 90, 95, 95);

  const r = 6; // size
  beginShape();
  vertex(0, -r * 2);  // nose
  vertex(-r, r * 2);  // left wing
  vertex(r, r * 2);   // right wing
  endShape(CLOSE);

  pop();
}