how to draw a point on border of rotating rect

rackatansky

hi! I need to draw a point on a border of a rectangle. The point should be located on border at place where mouse is pointing (so on line between rect center and mouse pointer). I need to use trigonometry as rect will be rotating. Below the code which i was able to produce squeezing my math skills to the limit ;) It enables me to draw point but only on south border... then point leaves to +-infinity. i think i need to switch phase by 90 degrees somehow but i don't know how... any help here? thanks :)

int size = 200;

void setup() {
  size(1200,500);
  smooth();
  ellipseMode(CENTER);
  rectMode(CENTER);

}

void draw() {
  background(255);
  noFill();

  PVector center = new PVector(width/2,height/2);
  PVector mouse = new PVector(mouseX, mouseY);

  float mouseDistance = PVector.dist(center,mouse);

  mouse.sub(center);

  float t = atan2(mouse.y, mouse.x);

  float borderDistance = (size/2) / sin(t);  
  float bx = cos(t) * borderDistance; 
  float by = sin(t) * borderDistance;

  pushMatrix(); 
    translate(center.x, center.y);
    strokeWeight(5);
    stroke(255,0,0); 
    point(0,0);
    point(mouse.x, mouse.y);
    point(cos(t)*size/2, sin(t)*size/2);
    point(bx,by);
    strokeWeight(1);
    stroke(0);
    ellipse(0, 0, size, size);
    rect(0,0, size, size);
    stroke(0,255,0); 
    line(0, 0, mouse.x, mouse.y);
  popMatrix();
}

amnon

I suggest you first implement the rotating rectangle. For your purpose you probably want a rotation method that will give you four coordinates for "rotated points" of the rectangle. Then you can use those points to do four line-line intersection checks, between center-mouse line versus each side of the rectangle.

rackatansky

hi Amnon, thanks for answer, i have managed to draw point on border of a rectangle, you can see sketch here. Unfortunately when i make rectangle to rotate then the mouse vector is being rotated as well... not sure how i could correct it though...

amnon

Given you existing sketch it's probably easiest to just correct the mouse coordinates. There are also a few other optimizations possible with regard to using .set instead of creating new PVector's and use else if.

Adapted Code

PVector center, mouse, borderPoint;
float angle;
int r = 100;

void setup() {
  size(500, 500);
  center = new PVector(width/2, height/2);
  mouse = new PVector();
  borderPoint = new PVector();
  rectMode(CORNERS);
  noFill();
}

void draw() {
  background(255);
  angle += 0.01;

  mouse.set(mouseX, mouseY);
  mouse.sub(center);
  mouse.rotate(-angle);

  float mouseTheta = mouse.heading();
  if (mouseTheta<0) mouseTheta += TWO_PI;

  borderPoint.set(tan(mouseTheta-HALF_PI)*r, -r); // north
  if (mouseTheta > TWO_PI-QUARTER_PI || mouseTheta < QUARTER_PI) borderPoint.set(r, tan(mouseTheta)*r); // east
  else if (mouseTheta >= QUARTER_PI && mouseTheta < QUARTER_PI+HALF_PI) borderPoint.set(-tan(mouseTheta-HALF_PI)*r, r); // south
  else if (mouseTheta >= HALF_PI+QUARTER_PI && mouseTheta < PI+QUARTER_PI) borderPoint.set(-r, -tan(mouseTheta)*r); // east

  translate(center.x, center.y);
  rotate(angle);

  strokeWeight(1);
  stroke(0);
  rect(-r, -r, r, r);
  stroke(0, 0, 255);
  rect(0, 0, borderPoint.x, borderPoint.y);

  stroke(0, 255, 0);
  line(0, 0, mouse.x, mouse.y);
  stroke(0, 0, 255);
  line(mouse.x, mouse.y, borderPoint.x, borderPoint.y);

  stroke(0);
  strokeWeight(5);
  point(0, 0);
  point(mouse.x, mouse.y);
  point(borderPoint.x, borderPoint.y);
}