旋转自定义形状将其移到角落

时间:2018-11-28 21:45:23

标签: javascript processing p5.js

使用translate(width / 2,height / 2)旋转自定义形状时;旋转(角度)), 它会在左下角移动形状。我尝试将转换值设为负,将其固定,但其原点位于0,0。我使用pop(); push()beginShape(); endShape并没有成功。

var points = [];
var r;
var lines = 30;

function setup() {
  createCanvas(window.innerWidth, window.windowHeight);
  angleMode(DEGREES);
  // get the points of the corners of the hexagon
  r = Math.min(width, height) * 0.4;
  var angle = 60;
  for (var i = 1; i < 7; i++) {
    var tempX = r * sin((angle * i + 30) % 360) + width / 2;
    var tempY = r * cos((angle * i + 30) % 360) + height / 2;
    points.push([tempX, tempY]);
  }
  background(0);
  stroke(0, 0, 255);
  rectMode(CENTER);
}

function draw() {
  background(0);
  // draw the lines of ...
  push();
  translate(width/2, height/2);
  rotate(frameCount * 0.75);
  beginShape();
  for (var i = 0; i < points.length; i++) {
    // ... the hexagon perimeter
    line(points[i][0], points[i][1], points[(i + 1) % 6][0], points[(i + 1) % 6][1]);
    var tempAngle = 240 + i * 60;
    var tempX = r * 1.1545 * sin(tempAngle) + points[i][0];
    var tempY = r * 1.1545 * cos(tempAngle) + points[i][1];
    for (var j = 0; j < lines + 1; j++) {
      // ... the lines inside the hexagon
      var tempAngle2 = tempAngle = (30 / lines * j) + 210 + i * 60;
      var distance = r / cos(30 / lines * j);
      var tempX2 = distance * sin(tempAngle2) + points[i][0];
      var tempY2 = distance * cos(tempAngle2) + points[i][1];;
      line(points[i][0], points[i][1], tempX2, tempY2);
    }
    endShape();
  }
  pop();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

1 个答案:

答案 0 :(得分:1)

我认为问题在于您正在使用x / y偏移量定义形状的点。通过从点定义中删除SparseQRstd::cout << (A.transpose()*(A*x-b)).norm() / (A.transpose()*b) << "\n"; ,可以使形状居中。​​

width / 2
height / 2