Creo que no entiendo las clases y la encapsulación lo suficientemente bien, porque cuando dibujo la clase vertical y horizontal al mismo tiempo, se influyen entre sí y cambian la forma en que dibujan. Pero cuando dibujo una clase a la vez, funciona como intentet. No entiendo por qué sucede esto, porque son dos clases separadas y no se debe acceder a las variables contenidas en ellas desde el exterior.
let spacing = 50; let xx = 0; let yy = 0; function setup() { createCanvas(1500, 1500); background(0); } function draw() { let hori = new Horizontal() let vert = new Vertical() hori.drawit(); vert.drawit(); } class Vertical{ constructor(){ } drawit(){ if (random(1) < 0.5) { fill(55, 24, 25) stroke(155); rect(yy+random(15),xx+random(20), random(10), random(100)); } else { rect(yy,xx, random(20), random(10)); } xx = xx + spacing; if (xx > width) { xx = 0; yy = yy + spacing; } } } class Horizontal{ constructor(){ } drawit(){ if (random(1) < 0.5) { fill(55, 24, 25) stroke(155); rect(yy+random(15),xx+random(20), random(10), random(100)); //line(xx, yy, xx + spacing, yy + spacing); } else { rect(yy,xx, random(20), random(10)); } yy = yy + spacing; if (yy > width) { yy = 0; xx = xx + spacing; } } }El comentario de @ggorlen te dio un gran consejo. Así es como se ve en el código.
La idea de encapsulación significa que su clase no debe cambiar ninguna variable fuera de la clase. Sus clases Vertical y Horizontal estaban modificando las mismas variables globales xx e yy . Es por eso que están interfiriendo entre sí. Lo hice para que cada uno tenga sus propias coordenadas this.x y this.y .
Llamar a new Horizontal() dentro de la función p5.js draw() significa que obtiene una nueva instancia de la clase Horizontal en cada cuadro de animación. Pero queremos que nuestras clases estén al tanto de sus últimas posiciones utilizadas. Así que estoy creando una sola instancia Horizontal y una sola instancia Vertical en la función setup() . Ambos comienzan en (0,0) y se mueven 50 px, vertical u horizontalmente, en cada cuadro de animación.
const spacing = 50; let hori; let vert; function setup() { createCanvas(1500, 1500); background(0); hori = new Horizontal(0, 0); vert = new Vertical(0, 0); } function draw() { fill(55, 24, 25); stroke(155); hori.drawit(); vert.drawit(); } class Vertical { constructor(x, y) { this.x = x; this.y = y; } drawit() { if (random(1) < 0.5) { rect(this.x + random(15), this.y + random(20), random(10), random(100)); } else { rect(this.x, this.y, random(20), random(10)); } this.y = this.y + spacing; if (this.y > height) { this.y = 0; this.x = this.x + spacing; } if (this.x > width) { this.x = 0; } } } class Horizontal { constructor(x, y) { this.x = x; this.y = y; } drawit() { if (random(1) < 0.5) { rect(this.x + random(15), this.y + random(20), random(10), random(100)); } else { rect(this.x, this.y, random(20), random(10)); } this.x = this.x + spacing; if (this.x > width) { this.x = 0; this.y = this.y + spacing; } if (this.y > height) { this.y = 0; } } } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>