#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# how to draw a point on border of rotating rect

edited March 2014

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();
}
``````
Tagged:

• 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.

• 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...

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.

``````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);

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);
}
``````