He estado atascado en esto durante horas y no estoy seguro de qué hacer.
Aquí está mi código:
var circles = []; var circles2 = []; function setup() { createCanvas(500, 500); //there's a "b" for every "a" for (var a = 50; a < width - 300; a += 20) { for (var b = 50; b < height - 300; b += 20) { //add the circles to the array at x = a and y = b circles.push(new Circle(a, b)); circles2.push(new Conn(a, b)); } } for (var a = 250; a < width - 50; a += 20) { for (var b = 250; b < height - 50; b += 20) { //add the circles to the array at x = a and y = b } } console.log(circles.length); } function draw() { background(50); for (var b = 0; b < circles.length; b++) { circles2[b].show(); circles[b].show(); //console.log("shown"); } for (var b = 0; b < circles2.length; b++) { //circles2[b].show(); //console.log("shown"); } } function Circle(x, y) { this.x = x; this.y = y; this.show = function() { fill(255); noStroke(); ellipse(this.x, this.y, 10, 10); //console.log("showing"); push(); fill(255); noStroke(); translate(250, 250); ellipse(this.x, this.y, 10, 10); pop(); } } function Conn(x, y) { this.x = x; this.y = y; this.show = function() { noStroke(); let h = 0; for (let i = 0; i < 251; i++) { fill(h, 90, 120); h = (h + 1) % 500; noStroke(); push() ellipse(this.x + i, this.y + i, 10, 10); noStroke(); noLoop(); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>Genera una cuadrícula de cuadrados que se supone que se conecta a una cuadrícula de cuadrados diferente a través de líneas de degradado. Sin embargo, solo la fila inferior y la columna más a la derecha de los círculos en la cuadrícula del círculo inferior derecho aparecen por alguna razón. ¿Cómo puedo hacer que todos los círculos en la cuadrícula del círculo inferior derecho estén frente a las líneas de degradado? He probado push, pop y todo lo demás. Estoy realmente confundido en cuanto a por qué solo aparecen algunos de los círculos, pero los otros están atrapados detrás de estos gradientes.
A menos que use p5.js en modo WEBGL, no hay orden de apilamiento de objetos ni índice z ni búfer z. Las formas que dibujas siempre se superponen a lo que se dibujó antes. Entonces, para hacer que una forma aparezca encima de otra, primero debe dibujar la forma debajo, seguida de la forma en la parte superior. Creo que pude lograr esto reorganizando un poco tu código:
var circles = []; var connections = []; function setup() { createCanvas(500, 500); //there's a "b" for every "a" for (var a = 50; a < width - 300; a += 20) { for (var b = 50; b < height - 300; b += 20) { //add the circles to the array at x = a and y = b circles.push(new Circle(a, b)); connections.push(new Conn(a, b)); } } for (var a = 250; a < width - 50; a += 20) { for (var b = 250; b < height - 50; b += 20) { //add the circles to the array at x = a and y = b } } console.log(circles.length); } function draw() { background(50); // Show connections first for (var b = 0; b < connections.length; b++) { connections[b].show(); } // Show circles second so that they appear on top of the connections for (var b = 0; b < circles.length; b++) { circles[b].show(); } } function Circle(x, y) { this.x = x; this.y = y; this.show = function() { fill(255); noStroke(); ellipse(this.x, this.y, 10, 10); //console.log("showing"); push(); fill(255); noStroke(); translate(250, 250); ellipse(this.x, this.y, 10, 10); pop(); } } function Conn(x, y) { this.x = x; this.y = y; this.show = function() { noStroke(); let h = 0; for (let i = 0; i < 251; i++) { fill(h, 90, 120); h = (h + 1) % 500; noStroke(); push() ellipse(this.x + i, this.y + i, 10, 10); noStroke(); noLoop(); } } } <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>