物品没有按照我的预期排列

Question

我正在为课堂做一个 p5.js 项目，我在编码时遇到了一个问题。

现在，代码应该在 Building 类下生成 5 个对象，然后用它在一条直线上绘制 5 个等距的框，但由于某种原因，这些框不是等距的，我不知道为什么.

非常感谢任何帮助。

//basically, I want this code to generate 5 equally spaced rectangular prisms centered on the screen

let buildings = []

class Building {
  constructor(spot, h, w) { //spot is basically how far along the line of buildings a given building should be (0 is at the beginning, 4 is at the end because it counts from 0), h and w are height and width, adn are currently the same for all objects for simplicity
    this.spot = spot;
    this.h = h;
    this.w = w;
  }

  create() {
    box(this.w, this.h, this.w)
    translate((this.spot*160)-200, 0, 0) //this is the line that is giving me issues. it SHOULD be moving the boxes so that they are equally spaced from each other, but instead they give me this weird almost exponential spacing. additionally, if the y or z are changed, a similar thing occurs, with the boxes just not being where youd expect them to be
  }
}

function setup() {
  createCanvas(800, 600, WEBGL);
  for (let i=0; i<5; i++) { //add 5 building objects to the array
    buildings[i] = new Building(i, 400, 40)
  }
}

function draw() {
  background(220);

  for (let Building of buildings) { //draw the 5 buildings
    Building.create()
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

Answer 1

translate()

积累。在

push()

之前使用

translate()

保存转换矩阵，然后使用

pop()

恢复它。

另外，先

translate()

，然后画你的箱子。

let buildings = [];

class Building {
  constructor(spot, h, w) {
    this.spot = spot;
    this.h = h;
    this.w = w;
  }

  draw() {
    push();
    translate(this.spot * 160 - 200, 0, 0);
    box(this.w, this.h, this.w);
    pop();
  }
}

function setup() {
  createCanvas(800, 600, WEBGL);
  
  buildings = [...Array(5)].map((_, i) =>
    buildings[i] = new Building(i, 400, 40)
  );
}

function draw() {
  background(220);

  for (const building of buildings) {
    building.draw();
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

spot

可能不是最清晰的变量名。

Answer 2

文件

转换是累积的，适用于之后发生的所有事情，后续调用函数会累积效果。例如，调用 translate(50, 0) 然后调用 translate(20, 0) 与 translate(70, 0) 相同。如果在 draw() 中调用了 translate()，则当循环再次开始时转换将被重置。

例子：

translate(30, 20);
rect(0, 0, 55, 55);

如你所见，先翻译后绘制

但它在你的代码中仍然不够，因为你会把事情越走越远，所以只需在翻译后重置它：

create() {
  const offset = (this.spot*160)-200
  translate(offset, 0, 0)
  box(this.w, this.h, this.w)
  translate(-offset, 0, 0)
}

//basically, I want this code to generate 5 equally spaced rectangular prisms centered on the screen

let buildings = []

class Building {
  constructor(spot, h, w) { //spot is basically how far along the line of buildings a given building should be (0 is at the beginning, 4 is at the end because it counts from 0), h and w are height and width, adn are currently the same for all objects for simplicity
    this.spot = spot;
    this.h = h;
    this.w = w;
  }

  create() {
    push()
    translate((this.spot * 160) - 200, 0, 0)
    box(this.w, this.h, this.w)
    pop()
  }
}

function setup() {
  createCanvas(800, 600, WEBGL);
  for (let i = 0; i < 5; i++) { //add 5 building objects to the array
    buildings[i] = new Building(i, 400, 40)
  }
}

function draw() {
  background(220);

  for (let Building of buildings) { //draw the 5 buildings
    Building.create()
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

甚至更好：

create() {
  push()
  translate((this.spot*160)-200, 0, 0)
  box(this.w, this.h, this.w)
  pop()
}

//basically, I want this code to generate 5 equally spaced rectangular prisms centered on the screen

let buildings = []

class Building {
  constructor(spot, h, w) { //spot is basically how far along the line of buildings a given building should be (0 is at the beginning, 4 is at the end because it counts from 0), h and w are height and width, adn are currently the same for all objects for simplicity
    this.spot = spot;
    this.h = h;
    this.w = w;
  }

  create() {
    const offset = (this.spot*160)-200
    translate(offset, 0, 0)
    box(this.w, this.h, this.w)
    translate(-offset, 0, 0)
  }
}

function setup() {
  createCanvas(800, 600, WEBGL);
  for (let i=0; i<5; i++) { //add 5 building objects to the array
    buildings[i] = new Building(i, 400, 40)
  }
}

function draw() {
  background(220);

  for (let Building of buildings) { //draw the 5 buildings
    Building.create()
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>