Triangle Code

ghostwarmen

Hello all, I just need some quick hep with a simple code. I have a main triangle with the origin points P1(100,100) P2(200,100) P3(200,200). In the code, I need to rotate the triangle 60 degrees and get the new coordinates. Then using those coordinates I need to translate it by (-50, -200). Then with those new coordinates I need to scale it by 2. Here is the code I have thus far:

float px_new;
float py_new;

void setup(){
  size (600,600);
}

void draw(){

  background(255);
  for(int i=0; i<width; i+=10){
    stroke(0);
    strokeWeight(1);
    line(i,0,i,height);
 }
  for(int w=0; w<height; w+=10){
    stroke(0);
    line(0,w,width,w);
 }

  fill(255,0,0);
  stroke(255);
  ellipse(300,300,5,5);

  noFill();
  stroke(255,0,0);
  strokeWeight(4);
  triangle(100,100,200,100,200,200);

}

void transformRotate(float angle, float px, float py){
  px_new = cos(angle) * px - sin(angle) * py;
  py_new = sin(angle) * px + cos(angle) * py;
}

void transformScale(float scale, float px, float py){
  px_new = scale * px;
  py_new = scale * py;
}

void transformTranslate(float dx, float dy, float px, float py){
  px_new = px + dx;
  py_new = py + dy;
}

I am a tad confused as I need to use the different voids to draw the new triangles. I need help figuring out what to do. Thank you for any help!

jeremydouglass

You don't need these functions (transformRotate, transformScale, transformTranslate).

Read the Reference, looking at the examples under the "Transform" section. In the draw function, use rotate() to rotate, translate() to translate, and scale() to scale. That's it.

  triangle(100,100,200,100,200,200);

  rotate(PI/3);
  triangle(100,100,200,100,200,200);

  translate(-50, -200);
  triangle(100,100,200,100,200,200);

  scale(2);
  triangle(100,100,200,100,200,200);

TfGuy44

If it's homework, please say so.

Your triangle is made of three points. When you described your problem, you called them P1, P2, and P3. Each point has an x part, and a y part.

I think a good first step would be to have some more variables for the original position of the triangle. For example: original_p1_x, original_p3_y, etc.

Then re-write the code you have to use those variables.

Now, you want to rotate one of those points. You can pass those values into one of the three functions (void is the return type of these functions - it means they don't return anything - don't call functions "voids"), and this will cause some math to update the values stored in some variables you already have: px_new and py_new.

In setup (because you only want to do the math once!), you should try rotating one of your points (like P1) by some angle (60 degrees (what's that in radian()s?)). Then print out the new point's x and y positions (which variable has those?). Use println( "X: " + px_new );

Can you do this rotation for the other points? Did you remember to save the results from the previous point somewhere? Do you need more variables?

After that, do the same thing, but translate them. Then scale them too. Do you need to remember the new values after each step? Can you draw more than one triangle to show the process after each step?

ghostwarmen

My apologies, yes this is homework. Yes, I need to rotate each point on the triangle, then translate then scale. There needs to be 4 triangles on the grid to represent the different transformations, and I have the original triangle on the grid. So I would first need to add some more variables and implement those into the rotation part? And then those new points would be saved then implemented to the transform, and same thing for scale? I'm sorry, just a tad confused by it and trying to understand it. Thanks again for the help!

TfGuy44

Yes, I would start by adding some more variables. Specifically, these:

p1_x_original
p1_y_original
p1_x_post_rotate
p1_y_post_rotate
p1_x_post_translate
p1_y_post_translate
p1_x_final
p1_y_final

p2_x_original
p2_y_original
p2_x_post_rotate
p2_y_post_rotate
p2_x_post_translate
p2_y_post_translate
p2_x_final
p2_y_final

p3_x_original
p3_y_original
p3_x_post_rotate
p3_y_post_rotate
p3_x_post_translate
p3_y_post_translate
p3_x_final
p3_y_final

ghostwarmen

Ok, thanks! So would something along these lines be right?

 void transformRotate(float angle, float px, float py){
  p1_x_post_rotate = cos(angle) * p1_x_original - sin(angle) * p1_y_original;
  p1_y_post_rotate = sin(angle) * p1_x_original + cos(angle) * p1_y_original;
}

void transformScale(float scale, float px, float py){
  p1_x_final = scale * p1_x_post_translate;
  p1_y_final = scale * p1_y_post_translate;
}

void transformTranslate(float dx, float dy, float px, float py){
  p1_x_post_translate = p1_x_post_rotate + dx;
  p1_y_post_translate = p1_y_post_rotate + dy;

And then just add in the other points for p2 & p3? And then that should draw the triangles on the grid?

jeremydouglass

So the point of your homework is to use Processing without using Processing functions -- in order to learn how to manually rotate and scale objects?

That's fine -- but just to be clear, under normal non-homework circumstances if you are drawing a shape while making a series of transformations in Processing then creating 20+ variables and making 12 calls to a set of 3 custom functions is a terrible way of doing it. It is hard to write, hard to read, hard to modify, and inefficient.

Here is the example sketch of one "Processing way": just call each transform functions and draw the same triangle over and over.

//// Triangle Code the Processing Way
//// https:// forum.processing.org/two/discussion/18240/triangle-code#latest

void setup(){
  size (600,600);
}

void draw(){
  background(255);
  for(int i=0; i<width; i+=10){
    stroke(0);
    strokeWeight(1);
    line(i,0,i,height);
  }
  for(int w=0; w<height; w+=10){
    stroke(0);
    line(0,w,width,w);
  }

  fill(255,0,0);
  stroke(255);
  ellipse(300,300,5,5);

  noFill();
  stroke(255,0,0);
  strokeWeight(4);

  triangle(100,100,200,100,200,200);

  rotate(PI/3);
  triangle(100,100,200,100,200,200);

  translate(-50, -200);
  triangle(100,100,200,100,200,200);

  scale(2);
  triangle(100,100,200,100,200,200);
}

To better understand how transformations are happening, read the Processing 2D Transformations Tutorial.

ghostwarmen

Ah, I see, thanks so much! Now, one quick question, I moved the origin to the center of the screen, but now the line grid is only at the bottom right? Anyway to fix it so they cover the entire screen? Thanks!

jeremydouglass

Show your code with the problem.

General solution: since you have code that draws grid lines and a center dot, move the origin to the center of your screen with translate after you draw your grid lines and dot.

Please remember to mark any answers that helped solve your problem.

ghostwarmen

Here is the code I have thus far:

float px_new;
float py_new;

void setup(){
  size (600,600);
}

void draw(){

  background(255);
  translate (300,300);

  for(int i=-1000; i<width; i+=10){
    stroke(0);
    strokeWeight(1);
    line(i,0,i,height);
 }
  for(int w=-1000; w<height; w+=10){
    stroke(0);
    line(0,w,width,w);
 }

  fill(255,0,0);
  stroke(255);
  ellipse(0,0,5,5);

  noFill();
  stroke(255,0,0);
  strokeWeight(4);
  triangle(100,100,200,100,200,200);

}

void transformRotate(float angle, float px, float py){
  px_new = cos(angle) * px - sin(angle) * py;
  py_new = sin(angle) * px + cos(angle) * py;
}

void transformScale(float scale, float px, float py){
  px_new = scale * px;
  py_new = scale * py;
}

void transformTranslate(float dx, float dy, float px, float py){
  px_new = px + dx;
  py_new = py + dy;
}

So the only problems I have left with this code that I need help on are:

Making the grid fill up the entire screen, and using the functions provided to rotate, translate, and scale the triangle. I need to use the coordinates from rotating the triangle as the ones that need translating, and the coordinates found from translating to scale.

Thanks again for the help!

jeremydouglass

Your translate command is in the wrong place. Start by following my advice: "move the origin to the center of your screen with translate after you draw your grid lines and dot."

You are also not calling your transform functions. If you must figure out how to use the transformRotate()etc. functions from your homework assignment, it seems your main problem is that you don't know how to call a function.

I suggest reading:

1. https://processing.org/examples/functions.html
2. https://processing.org/tutorials/anatomy/

... and then consider the advice from @TfGuy44 once you understand how a function can be called from the draw loop, what arguments to pass it, and what you return.