#### Howdy, Stranger!

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

# get the vertex to scale properly in rotating shape

edited April 2018

I got this rectangle shape drawn by vertex. Im creating the rectangle simply by offsetting one of the sides with the width of the rectangle. To get the edges of the rectangle to always be in 90 degrees according to the sides Im first calculating the theta and are then using the theta to calculate how much the side shall shrink or grow.

Im getting side of the rectangle correct in and are always 90 degrees but the scaling of the width is not correct and cant really figure out how to solve that.

Any hint?

``````void setup() {
size(500, 500, P2D);
background(255);
//noCursor();
}

void draw() {
background(255);
}

int rectWidth = 25;
float x1 = mouseX;
float y1 = mouseY;
float x2 = 250;
float y2 = 250;
color from = color(255, 0, 0);
color to = color(0);

// calculate the theta
float opposite = y2-y1;

float tanValue = opposite / adjecent;
float theta = atan(tanValue); // in radians
float angle = degrees(theta); // in degrees
println("theta: "+ theta + " tanValue " + tanValue + " angle: " + angle);

// calculate the change of the side of the second triangle
float opposite2 = tan(theta) * rectWidth;
println("opposite2: " + opposite2);

// draw the shape
beginShape();
noStroke();
strokeWeight(5);

fill(from);
vertex(x2, y2);  // övre till höger
fill(to);
vertex(x1, y1); // övre vänstra
fill(to);
vertex(x1+opposite2, y1-rectWidth); // undre vänstra
fill(from);
vertex(x2+opposite2, y2-rectWidth); // undre till höger
endShape();
}
``````
Tagged:

• Simply fix the line `float opposite2 = tan(theta) * rectWidth;` so it is using atan(), instead of tan(). ;)

• atan2() is preferred to atan() these days.

• Thanks koogs, I learn something new about Processing every time I work with it. :)

• Thanks for your replies. Sorry for late answer. Here is how I solved it:

``````int index = 0;
color[] cols = {  color(255, 0, 0), color(0, 255, 0), color(0, 0, 255), color(0, 0, 0), color(255), color(125)};
color fromColor, toColor;
float rectLength = 200;
int lineWidth = 6;

void setup() {
size(500, 500, P2D);
background(255);
}

void draw() {
background(255);
}

float rectWidth = 20;
float x1 = mouseX;
float y1 = mouseY;
float x2 = 250;
float y2 = 250;

// calculate the theta
float opposite = y2-y1;

float tanValue = opposite / adjecent;
float theta = atan(tanValue); // in radians

// calculate the change of the side of the second triangle
float opposite2 = tan(theta) * rectWidth;

// calculate the angle of the edge
float a = atan2(y1-(y1-rectWidth), x1-(x1+opposite2));

// draw the shape2
beginShape();
noStroke();
strokeWeight(5);
fill(cols);

vertex(x2, y2);
fill(cols);
vertex(x1, y1);
fill(cols);
vertex(x1+(cos(a)*rectWidth), y1+(sin(a)*rectWidth));
fill(cols);
vertex(x2+(cos(a)*rectWidth), y2+(sin(a)*rectWidth));
endShape();
}
``````