Используйте мышь, чтобы повернуть прямоугольник

Question

У меня есть прямоугольник, указывающий на мышь. Что я хочу: когда я поднимаю мышь, щелкаю и перетаскиваю, чтобы прямоугольник вращался дальше.

Или чтобы я мог щелкнуть по любому углу, чтобы повернуть прямоугольник. Точно так же, как с пальцем и листом бумаги.

let angle = 0;

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

function draw() {
  background(220);

  push();
  translate(150, 150);
  rotate(angle);

  stroke(0);
  strokeWeight(2);
  rect(-100, -75, 200, 150);

  stroke(255, 0, 0);
  strokeWeight(5);
  line(-100, -75, 100, -75);

  stroke(0, 255, 0);
  point(0, 0);

  pop();
}

function mouseDragged() {
  m_angle = atan2(mouseY - 150, mouseX - 150);
  angle = /* MAGIC FORMULA HERE */ m_angle;
}

https://editor.p5js.org/jwglazebrook/sketches/p2pnhPSZE

Answer 1

Проблема:

Проблема с вашим кодом заключается в том, что вам нужно сохранить смещение от первоначального щелчка мыши до новой перетаскиваемой точки.

Решение:

Чтобы исправить отрывистое поведение, нам просто нужно сохранить предыдущий угол мыши и угол рамки и сравнить разницу с углом перетаскиваемой мыши.

Код:

let angle = 0;

function setup() {
  angleMode(DEGREES);
  createCanvas(400, 400);
}

function draw() {
  background(220);

  push();
  translate(150, 150);
  rotate(angle);

  stroke(0);
  strokeWeight(2);
  rect(-100, -75, 200, 150);

  stroke(255, 0, 0);
  strokeWeight(5);
  line(-100, -75, 100, -75);

  stroke(0, 255, 0);
  point(0, 0);

  pop();
}

let c_angle = 0;
let q_angle = 0;

function mousePressed() {
  c_angle = atan2(mouseY - 150, mouseX - 150); //The initial mouse rotation
  q_angle = angle; //Initial box rotation
}

function mouseDragged() {
  m_angle = atan2(mouseY - 150, mouseX - 150);

  let dangle = m_angle - c_angle; //How much the box needs to be rotated
  if (dangle>=360) dangle-=360; //clamping
  if (dangle<0) dangle+=360; //clamping
  angle =  q_angle + dangle; //Apply the rotation
  if (angle>=360) angle -= 360; //clamping
}