#### Howdy, Stranger!

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

# Triangle Code

edited September 2016

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!

Tagged:

• edited September 2016

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);
``````
• edited September 2016 Answer ✓

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?

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

• edited September 2016

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
``````
• edited September 2016

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?

• edited September 2016

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.

• edited September 2016

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!

• edited September 2016

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.

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

• edited September 2016 Answer ✓

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.