How to push one object infront of another p5js javascript

Question

I have been stuck on this for hours and am unsure on what to do.

Here is my code:

 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>

It generates a grid of squares that is supposed to connect to a different grid of squares through gradient lines. However, only the bottom row and right most column of circles on the bottom right circle grid show up for some reason. How can I make it that all circles on the bottom right circle grid are in front of the gradient lines? I've tried push, pop, and everything else. I'm really confused as to why only some of the circles are showing up, but the others are stuck behind these gradients.

Answer 1

Unless you use p5.js in WEBGL mode then there is no object stacking order or z-index or z-buffer. Shapes that you draw always overlap whatever was drawn before them. So in order to make a shape appear on top of another you need to draw the shape underneath first, followed by the shape on top. I believe I was able to achieve this by rearranging your code a little:

 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>