Chain Attraction

Hau Phan / May 18, 2022

1 min read

var points;

function setup() {
  createCanvas(1280, 720);
  points = [new PointA()];
  for (let i = 1; i < 160; i++) {
    points.push(new Point(200 - i, points[i - 1]));
  }
}

function draw() {
  background(255);
  stroke(50);
  strokeWeight(10);
  points.forEach((point) => {
    point.update();
    point.show();
  });
}

class PointA {
  constructor() {
    this.x = random(0, width);
    this.y = random(0, height);
    this.speed = 50;
  }

  update() {
    let dy =
      (this.speed * (mouseY - this.y)) / dist(this.x, this.y, mouseX, mouseY);
    let dx =
      (this.speed * (mouseX - this.x)) / dist(this.x, this.y, mouseX, mouseY);
    this.x += dx;
    this.y += dy;
  }
  show() {
    point(this.x, this.y);
  }
}

class Point {
  constructor(index, point) {
    this.x = random(0, width);
    this.y = random(0, height);
    this.speed = index * 0.1 + 2;
    this.point = point;
  }

  update() {
    let dy =
      (this.speed * (this.point.y - this.y)) /
      dist(this.x, this.y, this.point.x, this.point.y);
    let dx =
      (this.speed * (this.point.x - this.x)) /
      dist(this.x, this.y, this.point.x, this.point.y);
    this.x += dx;
    this.y += dy;
  }
  show() {
    point(this.x, this.y);
    // line(this.x, this.y, this.point.x, this.point.y);
  }
}

Contact me!

Below are my primary work email address.
You can also message me on LinkedIn and Facebook.

Reply times tend to be 1-2 days (at most).