Question

我正在尝试将整个画布居中放置，以便可以缩放它，因为边缘不完整，并且我无法使用小于或大于画布的值来填充空间，因为它会带来错误。 Here is a picture without scaling and with scaling。

var rows = 10;
var cols = 10;
var points = [];
var sat = 70;
var bright = 80;
var timesDrawed = 0;

function setup() {
  createCanvas(600, 600);
  colorMode(HSB, 100, 100, 100);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  translate(width/2,height/2);
  if (timesDrawed >= 3) {
    noLoop();
  } else {
    timesDrawed++;
  }
  scale(1.2);
  for (var r = 0; r < rows; r++) {
    for (var c = 0; c < cols; c++) {
      var tempX = random((width / (cols)) * c - (width / cols * 0.5), (width / (cols)) * c + (width / cols * 0.5));
      var tempY = random((height / (rows)) * r - (height / rows * 0.5), (height / (rows)) * r + (height / rows * 0.5));
      points.push([tempX, tempY]);
    }
  }
  print(points);
  for (var r = 0; r < rows - 1; r++) {
    for (var c = 0; c < cols -1; c++) {
      fill(random(0, 100), sat, bright);
      var point1 = c + (r * rows);
      var point2 = c + (r * rows) + 1;
      var point3 = c + (r * rows) + rows;
      triangle(points[point1][0], points[point1][1], points[point2][0], points[point2][1], points[point3][0], points[point3][1]);
      fill(random(0, 100), sat, bright);
      var point1 = c + (r * rows) + rows;
      var point2 = c + (r * rows) + 1;
      var point3 = c + (r * rows) + rows + 1;
      triangle(points[point1][0], points[point1][1], points[point2][0], points[point2][1], points[point3][0], points[point3][1]);
    }
  }
}

Answer 1

如果将画布平铺在列（cols和行rows中，则每列的开始是c * width/cols，而每列的结束是(c+1) * width/cols，每行的开头是（r *高度/行and the end of each row is（r + 1）*高度/行, where c is the column and r`是行。

由于画布的中心是（0，0），因此必须从坐标中减去一半和一半高度：

var tempX = random(c * width/cols  - width/2,  (c+1) * width/cols  - width/2); 
var tempY = random(r * height/rows - height/2, (r+1) * height/rows - height/2);

或

var tempX = random(c, c+1) * width/cols  - width/2; 
var tempY = random(r, r+1) * height/rows - height/2;

查看预览，在其中将建议的更改应用于原始代码，并删除了比例尺 ~~{scale(1.2)~~ ：

var rows = 10;
var cols = 10;
var points = [];
var sat = 70;
var bright = 80;
var timesDrawed = 0;

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 100, 100, 100);
    noStroke();
    rectMode(CENTER);
}

function draw() {
    background(64);
    translate(width/2,height/2);
    if (timesDrawed >= 3) {
        noLoop();
    } else {
        timesDrawed++;
    }
    //scale(1.2);
    for (var r = 0; r < rows; r++) {
        for (var c = 0; c < cols; c++) {
            var tempX = random(c, c+1) * width/cols  - width/2; 
            var tempY = random(r, r+1) * height/rows - height/2; 
            points.push([tempX, tempY]);
        }
    }
    print(points);
    for (var r = 0; r < rows - 1; r++) {
        for (var c = 0; c < cols -1; c++) {
            fill(random(0, 100), sat, bright);
            var point1 = c + (r * rows);
            var point2 = c + (r * rows) + 1;
            var point3 = c + (r * rows) + rows;
            triangle(points[point1][0], points[point1][1], points[point2][0], points[point2][1], points[point3][0], points[point3][1]);
            fill(random(0, 100), sat, bright);
            var point1 = c + (r * rows) + rows;
            var point2 = c + (r * rows) + 1;
            var point3 = c + (r * rows) + rows + 1;
            triangle(points[point1][0], points[point1][1], points[point2][0], points[point2][1], points[point3][0], points[point3][1]);
        }
    }
}

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

使画布居中将其移动到角落

1 个答案: