Programación con funciones, clases y arreglos para artistas

Clases en ficheros

En esta pequeña lección vamos a introducir el uso de ficheros JavaScript para organizar mejor nuestro código cuando utilizamos clases.

Partiendo del ejemplo anterior:

class Circulo {
	constructor(x, y, d) {
		this.x = x;
		this.y = y;
		this.d = d;
	}

	draw(){
		ellipse(this.x, this.y, this.d, this.d);
	}
}

var circulo = new Circulo(100, 100, 50);
var circulo2 = new Circulo(200, 200, 50);
var circulo3 = new Circulo(300, 300, 50);

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  circulo.draw();
  circulo2.draw();
  circulo3.draw();
}

La idea consiste en crear un fichero específico para cada clase y cargarlo en el sketch para tener un código pulido y bien organizado.

Para hacerlo desplegaremos el panel a la izquierda del editor, donde encontraremos los ficheros que componen un sketch en p5.js:

  • sketch.js: El script donde se maneja el código para dibujar en el sketch.
  • index.html: El fichero principal del proyecto con la estructura HTML.
  • style.css: El fichero con los estilos visuales en formato CSS.

Bien, pues lo que vamos a hacer es crear un nuevo script JavaScript con el nombre de la clase, en nuestro casp circulo.js y dentro trasladaremos la definición de la clase:

circulo.js

class Circulo {
	constructor(x, y, d) {
		this.x = x;
		this.y = y;
		this.d = d;
	}

	draw(){
		ellipse(this.x, this.y, this.d, this.d);
	}
}

Lo único que tendremos que hacer es cargar el fichero en las cabeceras del index.html, justo antes de cargar el sketch.js.

Es muy importante cargarlo antes porque como se hace uso de la clase Circulo en el fichero sketch.js, ésta tiene que haberse importado antes:

index.html

<body>
	<script src="circulo.js"></script>
	<script src="sketch.js"></script>
</body>

¡Listo! Con esto tenemos nuestro proyecto usando clases definidas en sus propios ficheros, una forma perfecta de organizar mejor nuestro código.