get the vertex to scale properly in rotating shape

Per

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);
  gradientRectangle(); 
}

void gradientRectangle() {
  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 adjecent = x2-x1;
  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();
}

Niels

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

koogs

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

Niels

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

Per

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);
  gradientRectangle(); 
}

void gradientRectangle() {
  float rectWidth = 20; 
  float x1 = mouseX;
  float y1 = mouseY;
  float x2 = 250;
  float y2 = 250;

  // calculate the theta
  float adjecent = x2-x1;
  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[3]);

  vertex(x2, y2);  
  fill(cols[0]);
  vertex(x1, y1); 
  fill(cols[0]);
  vertex(x1+(cos(a)*rectWidth), y1+(sin(a)*rectWidth)); 
  fill(cols[3]);
  vertex(x2+(cos(a)*rectWidth), y2+(sin(a)*rectWidth)); 
  endShape();
}