gistfile1.txt

/*
  Example of Object Oriented Programming (OOP) using Hydra
  Objects of the Class Ball stored in an array
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  Ejemplo de Programación Orientada a Objetos usando Hydra
  Objectos de la Clase Ball almacenadas en un arreglo
  ++++++++++++++++++++++++++++++
  Hydra
  https://github.com/ojack/hydra
*/

p1 = new P5()
numberBalls = 50
ballList = []
ancho = 1400
alto = 800

Ball = class {
  constructor() {
    this.x = p1.random(100,ancho-100);
    this.y = p1.random(100,alto-100);
    this.speed_x = p1.random(-15, 15);
    this.speed_y = p1.random(-15, 15);
    this.diameter = 20;
    this.colour = p1.color(i*5, 100, i*5)
  }
  moveBall(){
    this.x += this.speed_x;
    this.y += this.speed_y;
    if (this.x < this.diameter/2 || this.x > ancho - this.diameter/2) {
      this.speed_x *=-1;
    }
    if (this.y < this.diameter/2 || this.y > alto - this.diameter/2) {
      this.speed_y *=-1;
    }
  }
  drawBall () {
    p1.fill(this.colour)
    p1.noStroke()
    p1.ellipse(this.x, this.y, this.diameter, this.diameter );
  }
}

for ( i = 0; i < numberBalls; i++) {
  ballList.push(new Ball)
}

// The draw must be the last to run
p1.draw = () => {
  p1.background(0,0,0)
  log(ballList.length)
  for (var i=0; i<ballList.length; i++){
    var b = ballList[i];
    b.moveBall()
    b.drawBall()
  }
}

p1.clear()

p1.remove()

OOPv2.js

/*
  Example of Object Oriented Programming (OOP) using Hydra
  Objects of the Class Ball stored in an array
  +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
  Ejemplo de Programación Orientada a Objetos usando Hydra
  Objectos de la Clase Ball almacenadas en un arreglo
  ++++++++++++++++++++++++++++++
  Hydra
  https://github.com/ojack/hydra
*/

p1 = new P5()
numberBalls = 50
ballList = []
ancho = 1400
alto = 800

Ball = class {
  constructor() {
    this.x = p1.random(100,ancho-100);
    this.y = p1.random(100,alto-100);
    this.speed_x = p1.random(-15, 15);
    this.speed_y = p1.random(-15, 15);
    this.diameter = 20;
    this.colour = p1.color(i*5, 100, i*5)
  }
  moveBall(){
    this.x += this.speed_x;
    this.y += this.speed_y;
    if (this.x < this.diameter/2 || this.x > ancho - this.diameter/2) {
      this.speed_x *=-1;
    }
    if (this.y < this.diameter/2 || this.y > alto - this.diameter/2) {
      this.speed_y *=-1;
    }
  }
  drawBall () {
    p1.fill(this.colour)
    p1.noStroke()
    p1.ellipse(this.x, this.y, this.diameter, this.diameter );
  }
}

for ( i = 0; i < numberBalls; i++) {
  ballList.push(new Ball)
}

// The draw must be the last to run
p1.draw = () => {
  p1.background(0,0,0)
  log(ballList.length)
  for (var i=0; i<ballList.length; i++){
    var b = ballList[i];
    b.moveBall()
    b.drawBall()
  }
}

p1.clear()

p1.remove()