Original sketch by  https://lindseyalbin.com

​

​

let particles = []

​

class Particle {

  constructor(x, y) {

    this.pos = createVector(x, y)

    this.origPos = createVector(x, y)

  }

  draw() {

    let target;

    let mouseDist = dist(mouseX, mouseY, this.origPos.x, this.origPos.y);

    if (mouseDist > 100) {

      // If the mouse is too far, the particle should go to the original XY position.

      target = this.origPos

    } else {

      // If the mouse is close enough, the particle should move 100 pixels 

      // away from the mouse.

      let pushVector = createVector(this.origPos.x - mouseX, this.origPos.y - mouseY)

      pushVector.setMag(50)

      target = p5.Vector.add(this.origPos, pushVector)

    }

    // Move towards the target

    let vel = p5.Vector.sub(target, this.pos)

    vel.setMag(vel.mag() * 0.07)

    this.pos = this.pos.add(vel)

    noFill();

    stroke('orange');

    textSize(10);

    text("QUIT", this.pos.x, this.pos.y)

  }

}

​

function setup() {

  createCanvas(540, 540);

  // for (let i = 0; i < 1000; i++) {

  //   particles.push(new Particle(random(width), random(height)))

  // }

  for (let x = 7; x < width; x+=15) {

    for (let y = 7; y < height;  y+=15) {

      particles.push(new Particle(x, y))

    }

  }

}

​

function draw() {

  background(217, 90, 78);

  for (let i = 0; i < particles.length; i++) {

    particles[i].draw();

  }

}