如何将一个对象推到另一个 p5js javascript

Question

我已经被困在这个问题上好几个小时了，我不确定该怎么做。

这是我的代码：

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>

它生成一个正方形网格，应该通过渐变线连接到不同的正方形网格。但是，出于某种原因，右下圆网格上只显示最底行和最右边的一列圆。我怎样才能使右下圆网格上的所有圆都在渐变线的前面？我已经尝试过 push、pop 和其他一切。我真的很困惑为什么只有一些圆圈出现，而其他圆圈却卡在这些渐变后面。

Answer 1

除非您在 WEBGL 模式下使用 p5.js，否则没有对象堆叠顺序或 z-index 或 z-buffer。您绘制的形状总是与之前绘制的形状重叠。因此，为了使一个形状出现在另一个形状之上，您需要先绘制下方的形状，然后再绘制上方的形状。我相信我可以通过稍微重新安排您的代码来实现这一目标：

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>

如何将一个对象推到另一个 p5js javascript

How to push one object infront of another p5js javascript

javascript

p5.js