random-walkers-con-vectores.js

//Óscar A. Montiel
//twitter: @_geosmina
//github: https://animanoir.github.io/

//Crea un arreglo.
var walkers = new Array(250);

function setup() {
  //Escenario
  createCanvas(800, 600);
  background(0);
  smooth(); //Creo que le agrega antialias.

  //Inicializa objetos en el arreglo.
  for (var i = 0; i < walkers.length; i++) {
    walkers[i] = new Walker();
  }
}

function draw() {
  for (var i = 0; i < walkers.length; i++) {
    walkers[i].display();
    walkers[i].update();
  }
}

//Walker class
function Walker() {
  var escalar = random(10); //Esto multiplicará el noise.
  var n = noise(millis()) * escalar;
  this.pos = createVector(random(width), random(height));  //Crea un Walker (de muchos) en un lugar al azar del canvas.
  var c = color(random(255), random(250), random(255));
  
  //Funciones
  this.update = function () {
    var mouse = createVector(mouseX, mouseY); //Vector del Mouse
    this.acc = p5.Vector.sub(mouse, this.pos); //Vector de aceleración.
    this.acc.mult(0.01);
    this.vel = createVector(random(-5, 5), random(-5, 5));//Mueve el objeto al azar.
    this.vel.add(this.acc);
    this.pos.add(this.vel);
  };

  this.display = function () {
    //Dibuja un círculo como un Walker
    noStroke();
    fill(c);
    ellipse(this.pos.x, this.pos.y, n, n); //this.pos.x y .y se refiere a los atributos x y y de un createVector.
  };
}

 //Esto hace que, al hacer click, se recargue el sketch.
 function mouseClicked(){
    setup();
  }