// nombre d'ellipse dans la page

var count = 10000;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  // pas de contour sur les ellipses

  noStroke();

  // Create objects

  for (var i = 0; i < count; i++) {

    points.push(new Jitter());

  }

}

function draw() {

  // permet la transparence et la trace des éléments 

  fill(0, 30);

  rect(0, 0, width, height);

  // couleur des ellipses

  fill(255);

  for (var i = 0; i < points.length; i++) {

    points[i].display();

  }

  movePoints();

​

}

​

function movePoints() {

  for (var i = 0; i < points.length; i++) {

    var x = points[i].x;

    var y = points[i].y;

    var p = createVector(mouseX - x, mouseY - y, 0);

    // changer la vitesse de déplacement des points en changeant le chiffre entre parenthèse

    p.limit(2);

    // changer l'impact de la souris sur les points plus le chiffre est élevé plus le nombre de points autour de la souris bougent

    if (dist(mouseX, mouseY, x, y) < 600) {

      x -= p.x;

      y -= p.y;

    }

    // changer le chiffre 0 pour changer la marge autour,ça change la taille du carré dans lequel les points sont enfermés 

    x = constrain(x, 0, width-0);

    y = constrain(y, 0, height-0);

    points[i].x = x;

    points[i].y = y;

  }

}

​

// Jitter class

class Jitter {

  constructor() {

    this.x = random(width);

    this.y = random(height);

    this.diameter = random(1, 3);

    this.speed = 1;

  }

​

  move() {

    this.x += random(-this.speed, this.speed);

    this.y += random(-this.speed, this.speed);

  }

​

  display() {

    ellipse(this.x, this.y, this.diameter, this.diameter);

  }

}