在改变角度以正确方向平移后改变网格的 xoff 坐标

Question

我正在努力设置坐标这样当你改变角度时，网格就会像鼠标一样移动。所以如果我向上移动鼠标，网格也会上升，而不是我改变的角度。我将不胜感激任何提示。谢谢。这是我的代码：

let angle = 0.0;
let dim = 10
let sz;
let xoff;
let yoff;
function setup() {
  createCanvas(400, 400);
  sz = width/ dim;
}

function mouseDragged() {
  xoff += (mouseX - pmouseX)/10;
  yoff += (mouseY - pmouseY)/10;
}

function draw() {
  background(255);
  
  for (let i = 0; i < dim+2; i++) {
    for (let j = 0; j < dim+2; j++) {

      let x = ((pmouseX + j * sz) % (width+sz)) - sz;
      if (x < -sz) x += width+sz;

      let y = ((pmouseY + i * sz) % (height+sz)) - sz;
      if (y < -sz) y += height+sz;
push();
imageMode(CENTER);
rectMode(CENTER);
translate( width / 2  , height / 2  );
rotate(angle);
translate( -width / 2 , -height / 2  );
      rect(x, y, sz, sz);
      text(i * 10 + j, x + sz/2, y + sz/2);
      pop(); 
    }
  }
}

Answer 1

如果我对你的问题的理解正确，我认为你可以通过在绘图前应用旋转的相反方向旋转鼠标位置向量，将鼠标位置转换为你正在绘制的参考系：

// let angle = 0.0;
let dim = 10;
let sz;
let xoff;
let yoff;

let angleSlider;

function setup() {
  createCanvas(400, 400);
  sz = width / dim;
  
  angleSlider = createSlider(-180, 180, 0);
  angleSlider.position(10, 10);
  
  angleMode(DEGREES);
}

function mouseDragged() {
  xoff += (mouseX - pmouseX) / 10;
  yoff += (mouseY - pmouseY) / 10;
}

function draw() {
  background(255);

  let mousePos = createVector(mouseX, mouseY).rotate(-angleSlider.value());
  for (let i = 0; i < dim + 2; i++) {
    for (let j = 0; j < dim + 2; j++) {
      let x = ((mousePos.x + j * sz) % (width + sz)) - sz;
      if (x < -sz) x += width + sz;

      let y = ((mousePos.y + i * sz) % (height + sz)) - sz;
      if (y < -sz) y += height + sz;
      push();
      imageMode(CENTER);
      rectMode(CENTER);
      translate(width / 2, height / 2);
      rotate(angleSlider.value());
      translate(-width / 2, -height / 2);
      rect(x, y, sz, sz);
      text(i * 10 + j, x + sz / 2, y + sz / 2);
      pop();
    }
  }
}

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

在改变角度以正确方向平移后改变网格的 xoff 坐标

Changing the xoff coordinates of the mesh after changing the angle to pan in correct direction

gridview

rotation

pan

p5.js