如何移动与循环功能做了一些矩形

Question

我怎样才能搬完6个矩形。我想我已经改变X和循环中的Y，但我不知道怎么办。我喜欢一些帮助。

这是代码：https://editor.p5js.org/AlexArek/sketches/r1eVquBkV

let cols = 3;
let rows = 3;


function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(90, 140, 210);

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * 110;
      let y = j * 110;
      noFill()
      rect(x, y, 100, 100)
    }
  }
//How can I move this whole thing in the middle of the screen?
}

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

Answer 1

首先，你必须计算你的对象框（宽度和高度）：

let obj_w = 110 * (cols-1) + 100;
let obj_h = 110 * (rows-1) + 100;

然后你有对象的中心移动到画布由translate()中心。

内置的变量width和height包含画布的大小。如果你会被画布大小的一半移动，那么对象的左上角将在画布的中心：

translate(width/2, height/2);

如果你在对面直接通过移动物体的一半大小，然后将对象的中心是在画布的中心：

translate(-obj_w/2, -obj_h/2);

let cols = 3;
let rows = 3;

function setup() {
  createCanvas(600, 600);
}

function draw() {
  background(90, 140, 210);

  let obj_w = 110 * (cols-1) + 100;
  let obj_h = 110 * (rows-1) + 100;
  translate(width/2, height/2);
  translate(-obj_w/2, -obj_h/2);

  for (let i = 0; i < cols; i++) {
    for (let j = 0; j < rows; j++) {
      let x = i * 110;
      let y = j * 110;
      noFill()
      rect(x, y, 100, 100)
    }
  }
}

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