Trig with triangles

Processing Coding Questions
1

Hi, I’m trying to figure out how I would make a triangle rotate 360 degrees around a center point, I have it working for a circle that can spin around a central location at any given radius, but I cannot seem to figure out how I would do this for a triangle. any help/tips would be appreciated.(Below is the example given on how to make a circular object spin, and I’m trying to accomplish this with a triangle instead of ellipse)

float theta = 0;

float delta = 0.1;

float radius = 150;

float size = 10;

 

void setup()

{

 size(500, 500);

}

void draw()

{

 background(0);

 float x = cos(theta)*radius;

 float y = sin(theta)*radius;

 ellipse(250+x,250+y,20,20);

 theta = theta + delta;

}
2

Hey Gbhinder!

Since you are making an ellipse from the middle of the screen rotate, I just created a triangle as if it were also in the middle, by having the three connecting points of the triangle (0,-10), (-10,10) and (10,10) from the center (by adding 250 to all point coordinates). Once I did that, I added the x and y variables to each point, which makes the triangle rotate.

triangle(250+x,240+y,240+x,260+y,260+x,260+y);

Try adding this instead of your ellipse. Let me know if this is what you were going for and if you need any additional clarification!

1 Like
3

Hi! thanks for replying, It is the right idea but what I actually am trying to get my triangle to do is act like a fan blade and spin in 360 when its rotating, I would need it to constantly turn also while it was spinning like a fan. also, i’m curious as to how u got those specific points for the triangle in order for it to rotate around properly, would you be able to explain further or perhaps link something that explains that kind of thing? thanks again.

4

@Gbhinder You need to become familiar with this tutorial: https://processing.org/tutorials/transform2d/

After you read this tutorial, then you need to figure out what is the center of your triangle. This is easily doneby via google.

After you know the center of the triangle (I am assuming you know the vertices of your triangle), then you need to use translate, rotate and then you draw the triangle by providing the vertex coordinates with respect to its center. Also, you might find this useful:

https://processing.org/reference/pushMatrix_.html
https://processing.org/reference/popMatrix_.html

Kf

1 Like
5

@kfrajer is right. To make the triangle rotate on itself while it is rotating around the center requires functions and concepts you can learn from the links he posted.

I made a quick graphic in paint to explain how I got the triangle positions. Hope this helps!

triangles%20in%20processing
triangles in processing.png824×488 6.77 KB

2 Likes
6

@kfrajer @nicolaskellum thank you to both of you for your help! i managed to figure out what I needed after some research and messing around with it all day! this is what I was going for so you can see for yourself. (I only made 1 blade work currently working on rest)

final float TURN_SPEED = 5;
float theta = 0;
float speed = 0.1;
float radius = 125;

float num = 5;
void setup()
{
  size(500,500);
}

void draw()
{
  background(255);
  drawFan();
  rotateFan();
}

void drawFan()
{
  int circleSize = 250;
  float fX = width/2;
  float fY = height/2;
  float fSize = width/10;
  float radius1 = circleSize/2;
  float radius2 = circleSize/3;
  

  
  fill(255);
  
  ellipse(fX,fY,circleSize,circleSize);
  ellipse(fX,fY,circleSize*4/5,circleSize*4/5);
  ellipse(fX,fY,circleSize*3/5,circleSize*3/5);
  ellipse(fX,fY,circleSize*2/5,circleSize*2/5);

  final float OFFSET_X = cos(theta)*radius1;
  final float OFFSET_Y = sin(theta)*radius1;
  final float OFFSET2_X = cos(theta+0.35)*radius2;
  final float OFFSET2_Y = sin(theta+0.35)*radius2;

  
  fill(0,0,255);
  triangle(fX,fY,fX+OFFSET_X,fY+OFFSET_Y,fX+OFFSET2_X,fY+OFFSET2_Y);
  triangle(fX,fY,135,300,175,250);
  triangle(fX,fY,350,325,285,315);
  
  fill(0);
  ellipse(fX,fY,fSize,fSize);

}

void rotateFan()
{
  theta = theta + speed;
}
2 Likes