# Making fan blades rotate using cos & sin

Page 1 of 1

## 14 Replies - 2237 Views - Last Post: 15 June 2018 - 01:13 PMRate Topic: //<![CDATA[ rating = new ipb.rating( 'topic_rate_', { url: 'https://www.dreamincode.net/forums/index.php?app=forums&module=ajax&section=topics&do=rateTopic&t=411448&amp;s=f913feeb08e68d8ec3e9ad6861f3f8da&md5check=' + ipb.vars['secure_hash'], cur_rating: 0, rated: 0, allow_rate: 0, multi_rate: 1, show_rate_text: true } ); //]]>

### #1 Elite1

Reputation: 0
• Posts: 4
• Joined: 12-June 18

# Making fan blades rotate using cos & sin

Posted 12 June 2018 - 09:39 PM

Hi, first time posting on this website, I'm trying to make the blades rotate within the bounds of the fan using Cos & Theta in Processing 3.3.7, Im trying to just get one of the blades to rotate at the moment and I have my initial angle (theta) set to 0, and my radius is 125(half the size of the outer circle/boundary). I did some research and found out about a formula, cos(theta)*radius or sin(theta)*radius and Its in my code and Im currently trying to play around with it, any help/tips would be appreciated immensely, thanks. The following is my code.

```
final float TURN_SPEED = 5;
float theta = 0;
float speed = 0.1;
void setup()
{
size(500,500);
}

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

void drawFan()
{
float fX = width/2;
float fY = height/2;
float fSize = width/10;

fill(255);
ellipse(fX,fY,250,250);
ellipse(fX,fY,200,200);
ellipse(fX,fY,150,150);
ellipse(fX,fY,100,100);

fill(0,0,255);
triangle(250,250,135,300,175,250);
triangle(250,250,350,325,325,265);

fill(0);
ellipse(fX,fY,fSize,fSize);

}

void rotateFan()
{

theta = theta + speed;
}
```

This post has been edited by macosxnerd101: 12 June 2018 - 09:47 PM
Reason for edit:: Please use code tags: [code] Your code goes here [/code]

Is This A Good Question/Topic? 0

## Replies To: Making fan blades rotate using cos & sin

### #2 macosxnerd101

• Games, Graphs, and Auctions

Reputation: 12526
• Posts: 45,655
• Joined: 27-December 08

## Re: Making fan blades rotate using cos & sin

Posted 12 June 2018 - 09:48 PM

This doesn't look like a complete program. Do you have a runnable sample of code that illustrates the issue?

Also, what specific problems or errors are you encountering?

### #3 ndc85430

• I think you'll find it's "Dr"

Reputation: 972
• Posts: 3,832
• Joined: 13-June 14

## Re: Making fan blades rotate using cos & sin

Posted 12 June 2018 - 09:51 PM

Note that it's written in Processing, not regular Java (I've been caught out by this in the past, too).

### #4 Elite1

Reputation: 0
• Posts: 4
• Joined: 12-June 18

## Re: Making fan blades rotate using cos & sin

Posted 12 June 2018 - 09:59 PM

macosxnerd101, on 12 June 2018 - 09:48 PM, said:

This doesn't look like a complete program. Do you have a runnable sample of code that illustrates the issue?

Also, what specific problems or errors are you encountering?

Hi, I have linked a little video to what I want my end game to look like, currently that is all the code that I have, the exact problem I'm encountering is not being able to rotate the fans blade in a 360 as shown in the video using Sin and Cos, my blades are currently losing their shape and not rotating around the middle like I would want it to.

ndc85430, on 12 June 2018 - 09:51 PM, said:

Note that it's written in Processing, not regular Java (I've been caught out by this in the past, too).

Thank you for making the correction, I'm pretty new to programming and assumed they were the same.

### #5 Atspulgs

Reputation: 95
• Posts: 524
• Joined: 29-July 09

## Re: Making fan blades rotate using cos & sin

Posted 13 June 2018 - 05:36 AM

I am not an expert of either Processing or Trigonometry, but I believe you dont want to keep changing the shape of the triangle, but rather adjust the location of each of the point.
Ideally you want to make only 1 point change and the others would change with it keeping the overall shape of the triangle intact.
What you are doing is changing the angles of the triangle, multiplying it with the hard coded radius and adding it to the x and y coordinates?
For 2 out of 3 points too... I assume one of them is the the center one.

At this point I dont know what are the parameters of this work that youre doing. If this is just for fun, then we can discuss the solutions....
otherwise I need know the parameters....

Not sure what the thought process is here either...

### #6 Elite1

Reputation: 0
• Posts: 4
• Joined: 12-June 18

## Re: Making fan blades rotate using cos & sin

Posted 13 June 2018 - 06:50 AM

Atspulgs, on 13 June 2018 - 05:36 AM, said:

I am not an expert of either Processing or Trigonometry, but I believe you dont want to keep changing the shape of the triangle, but rather adjust the location of each of the point.
Ideally you want to make only 1 point change and the others would change with it keeping the overall shape of the triangle intact.
What you are doing is changing the angles of the triangle, multiplying it with the hard coded radius and adding it to the x and y coordinates?
For 2 out of 3 points too... I assume one of them is the the center one.

At this point I dont know what are the parameters of this work that youre doing. If this is just for fun, then we can discuss the solutions....
otherwise I need know the parameters....

Not sure what the thought process is here either...

Hi, The parameters for the triangle is (x1,y1,x2,y2,x3,y3), I understand what you're trying to say but I cannot seem to figure out how to just change 1 point in this case and have the rest follow, and this is for a online class so I do not want the solution given to me, I just wanted some help with figuring out how the triangle class works with trig as I have it working for circles and rectangles but they have different parameters.

### #7 baavgai

• Dreaming Coder

Reputation: 7397
• Posts: 15,330
• Joined: 16-October 07

## Re: Making fan blades rotate using cos & sin

Posted 13 June 2018 - 11:30 AM

This was interesting enough I took it for a spin, as it were.

Some quick test code, just to see what's going on:
```var TURN_SPEED = 5;
var theta = 0;
var speed = 0.1;
function setup() {
// size(500,500);
createCanvas(500,500);
}

function draw() {
background(255);
drawFan();
// rotateFan();
}

}

function drawFan() {
var fX = width/2;
var fY = height/2;
var fSize = width/10;

fill('cyan'); ellipse(fX,fY,250,250); ellipse(fX,fY,200,200); ellipse(fX,fY,150,150); ellipse(fX,fY,100,100);

fill(0,0,255);
// triangle(250,250,135,300,175,250);
// triangle(250,250,350,325,325,265);

// fill(0);
// ellipse(fX,fY,fSize,fSize);
}

function rotateFan() {
theta = theta + speed;
}

```

Note, I couldn't get the Java one to play nice, so went with the easier to implement [url=https://p5js.org/]Progress.js[/ul]. It also makes it rather easy to demo. https://codepen.io/anon/pen/WyOajw

This is what I want you to do. Draw a single line, from the center to an arbitrary distance. Now, using your sin cos, draw another line from the center, same distance, but rotated slightly. Like hands on a clock. If you can figure out two such lines, then you should be able to figure out the rest.

Hope this helps.

### #8 mkkekkonen

Reputation: 16
• Posts: 71
• Joined: 10-May 18

## Re: Making fan blades rotate using cos & sin

Posted 13 June 2018 - 11:32 AM

Here's a small Javascript program/fiddle I made to illustrate the situation. I draw only one fan blade. Here's the code:

```const ANGLE_FROM_Y_AXIS = 10 // angle of triangle corners (not the center point) from the Y axis
const RADIUS = 50 // length of triangle sides
const CANVAS_WIDTH_HEIGHT = 400

const canvas = document.getElementById('canvas')
const context = canvas.getContext('2d')

const centerPoint = { x: 200, y: 200 }

// angles of triangle sides (starting from the positive X axis)
let theta1 = 90 + ANGLE_FROM_Y_AXIS
let theta2 = 90 - ANGLE_FROM_Y_AXIS

const degreesToRadians = (degrees) => {
return degrees * (Math.PI / 180)
}

const calculateX = (theta) => {
}

const calculateY = (theta) => {
}

const calculatePoint = (theta) => {
// displace the received coordinates by half of canvas size to center the triangle (otherwise the center point is at top left)
return {
x: calculateX(theta) + (CANVAS_WIDTH_HEIGHT / 2),
y: calculateY(theta) + (CANVAS_WIDTH_HEIGHT / 2)
}
}

const drawTriangle = () => {
// clear the canvas
context.clearRect(0, 0, CANVAS_WIDTH_HEIGHT, CANVAS_WIDTH_HEIGHT)

const point1 = calculatePoint(theta1)
const point2 = calculatePoint(theta2)

context.beginPath()
context.moveTo(centerPoint.x, centerPoint.y)
context.lineTo(point1.x, point1.y)
context.lineTo(point2.x, point2.y)
context.lineTo(centerPoint.x, centerPoint.y)
context.closePath()
context.stroke()
}

const rotate = () => {
theta1 += 5
theta2 += 5
}

drawTriangle()

setInterval(() => {
rotate()
drawTriangle()
}, 200)

```

Here's a nice article on circles and trigonometric functions.

Basically you keep the rotating tips/vertices of the fan blade on the perimeter of a circle and displace them from the positive X axis by theta. In my example, the two corners each have their own theta values. The length of the side of the fan blade is the radius of the circle. Then you get the X coordinate of the blade tip/vertex with

and the Y coordinate with

Then you increment both theta values by delta in the game loop, as you do now.

This post has been edited by mkkekkonen: 13 June 2018 - 11:41 AM

### #9 Atspulgs

Reputation: 95
• Posts: 524
• Joined: 29-July 09

## Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 03:42 AM

Elite1, on 13 June 2018 - 07:50 AM, said:

Atspulgs, on 13 June 2018 - 05:36 AM, said:

I am not an expert of either Processing or Trigonometry, but I believe you dont want to keep changing the shape of the triangle, but rather adjust the location of each of the point.
Ideally you want to make only 1 point change and the others would change with it keeping the overall shape of the triangle intact.
What you are doing is changing the angles of the triangle, multiplying it with the hard coded radius and adding it to the x and y coordinates?
For 2 out of 3 points too... I assume one of them is the the center one.

At this point I dont know what are the parameters of this work that youre doing. If this is just for fun, then we can discuss the solutions....
otherwise I need know the parameters....

Not sure what the thought process is here either...

Hi, The parameters for the triangle is (x1,y1,x2,y2,x3,y3), I understand what you're trying to say but I cannot seem to figure out how to just change 1 point in this case and have the rest follow, and this is for a online class so I do not want the solution given to me, I just wanted some help with figuring out how the triangle class works with trig as I have it working for circles and rectangles but they have different parameters.

Sorry, i got interrupted when typing this up, so maybe I wasnt quite clear, but when i said I was looking for the parameters i meant the project. I already see 2 solutions presented here so clearly there are ways to do it. I wanted to know how you need/want to do it.

I was looking for your thought process as well since i didnt quite understood what you were trying to do in your example.

### #10 Piet Souris

Reputation: 44
• Posts: 198
• Joined: 01-December 15

## Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 05:22 AM

I don't know this Processing,but is it possible to do a coordinate transform? In java you would use an AffineTransform, or use the rotate method of a Graphics2d object. In that way, you let the language do all the calculations (including scaling, if needed).

### #11 Atspulgs

Reputation: 95
• Posts: 524
• Joined: 29-July 09

## Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 09:00 AM

Processing is essentially Java... with some extra libraries and shortcuts.

I also think ive got something thhat may be helpful to do what the Author was looking for written for processing.
```float direction = 0; //In degrees
float radius = 100; // in pixels

void setup() {
size(500,500);
frameRate(30);
}

void draw() {
background(255);
stroke(0);
fill(240,240,240);
ellipse(250,250,200,200);
line(0, 250, 500, 250);
line(250, 0, 250, 500);

//Determining the location of the point based on radius and angle (direction is the angle)

fill(0,255,0);
ellipse(250+x,250+y,10,10); // This is the point we draw.
fill(0);
textSize(18);
text(direction+"°", 290,300);
text("x: "+(250+x)+" y: "+(250+y), 10, 50);

noFill();

line(250, 250, 250+x, 250+y); // This is the line from the middle to the point.
stroke(255,0,0);
arc(250,250,100,100,0,radians(direction)); // This is the angle arc.

direction = (direction + 1) % 360; //makes sure I only have 0-359 360=0, not strictly necessary but I am printing it out.
}

```

Its rough but should be simple and understandable regardless since most of the code is bells and whistles for the display.

I also wrote the fan blade program but I will keep that to myself

### #12 Elite1

Reputation: 0
• Posts: 4
• Joined: 12-June 18

## Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 10:33 AM

Atspulgs, on 14 June 2018 - 03:42 AM, said:

Elite1, on 13 June 2018 - 07:50 AM, said:

Atspulgs, on 13 June 2018 - 05:36 AM, said:

I am not an expert of either Processing or Trigonometry, but I believe you dont want to keep changing the shape of the triangle, but rather adjust the location of each of the point.
Ideally you want to make only 1 point change and the others would change with it keeping the overall shape of the triangle intact.
What you are doing is changing the angles of the triangle, multiplying it with the hard coded radius and adding it to the x and y coordinates?
For 2 out of 3 points too... I assume one of them is the the center one.

At this point I dont know what are the parameters of this work that youre doing. If this is just for fun, then we can discuss the solutions....
otherwise I need know the parameters....

Not sure what the thought process is here either...

Hi, The parameters for the triangle is (x1,y1,x2,y2,x3,y3), I understand what you're trying to say but I cannot seem to figure out how to just change 1 point in this case and have the rest follow, and this is for a online class so I do not want the solution given to me, I just wanted some help with figuring out how the triangle class works with trig as I have it working for circles and rectangles but they have different parameters.

Sorry, i got interrupted when typing this up, so maybe I wasnt quite clear, but when i said I was looking for the parameters i meant the project. I already see 2 solutions presented here so clearly there are ways to do it. I wanted to know how you need/want to do it.

I was looking for your thought process as well since i didnt quite understood what you were trying to do in your example. />

Hi, Thanks first off thanks for replying, and second I managed to finally figure it out, here is what I was aiming for so you could see for yourself,

/code

final float TURN_SPEED = 5;
float theta = PI+8;
float speed = 0.1;

float theta2 = PI+6;
float theta3 = PI+4;
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 o = 0.35;

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);

fill(0,0,255);
triangle(fX,fY,fX+OFFSET_X,fY+OFFSET_Y,fX+OFFSET2_X,fY+OFFSET2_Y);
triangle(fX,fY,fX+OFFSET_X2,fY+OFFSET_Y2,fX+OFFSET2_X2,fY+OFFSET2_Y2);
triangle(fX,fY,fX+OFFSET_X3,fY+OFFSET_Y3,fX+OFFSET2_X3,fY+OFFSET2_Y3);

fill(0);
ellipse(fX,fY,fSize,fSize);

}

void rotateFan()
{
theta = theta + speed;
theta2 = theta2 + speed;
theta3 = theta3 + speed;
}

### #13 Atspulgs

Reputation: 95
• Posts: 524
• Joined: 29-July 09

## Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 11:26 AM

Ah very nice and understandable
Well Done!

### #14 baavgai

• Dreaming Coder

Reputation: 7397
• Posts: 15,330
• Joined: 16-October 07

## Re: Making fan blades rotate using cos & sin

Posted 15 June 2018 - 07:16 AM

I got this thing to work in Java original. Win10 hates it, so I had to go with an old Linux box.

You have a lot of repetition there. You also end up recalculating each frame, which you kind of want to avoid.

Given what you have, I did this:
```// you never use this final float TURN_SPEED = 5;

Target target;

void setup() {
size(500,500);
final int circleSize = 250;
final float cx = width/2, cy = height/2;
target = new Target(cx, cy, circleSize, width/10);
for(int i=0; i<3; i++) {
blades[i] = new Blade(cx, cy, circleSize/2, circleSize/3, 0.35, (PI + 4 + (i * 2)), 0.1);
}
}

void draw() {
background(255);
target.display();
for(int i=0; i<3; i++) {
}
target.displayDot();
}

float theta;
theta = _theta;
speed = _speed;
x1 = _x1;
y1 = _y1;
offset = _offset;
}
void move() {
theta += speed;
}
void display() {
final float x2 = x1 + cos(theta) * radius1, y2 = y1 + sin(theta) * radius1;
final float x3 = x1 + cos(theta + offset) * radius2, y3 = y1 + sin(theta + offset) * radius2;
fill(0,0,255);
triangle(x1, y1, x2, y2, x3, y3);
}
}

class Target {
final float cx, cy, size, dotSize;
Target(float _cx, float _cy, float _size, float _dotSize) { cx = _cx; cy = _cy; size = _size; dotSize = _dotSize; }
void display() {
fill(255);
for(int i = 5; i>0; i--) {
final float circleSize = size * i/5;
ellipse(cx,cy,circleSize,circleSize);
}
}
void displayDot() {
fill(0);
ellipse(cx,cy,dotSize,dotSize);
}
}

```

New things to learn: objects and arrays.

I have two objects, Target and Blade. Blade is because the only thing that's really different is the internal angle offset. Target might be a little gratuitous, but I wanted setup to do as much initial work as possible and have my globals only be displayable objects.

Hope this helps.

### #15 baavgai

• Dreaming Coder

Reputation: 7397
• Posts: 15,330
• Joined: 16-October 07

## Re: Making fan blades rotate using cos & sin

Posted 15 June 2018 - 01:13 PM

For fun, transcribed the above to JS:
```var draw = null;

function setup() {
createCanvas(500,500);
const circleSize = 250, cx = width/2, cy = height/2;
var renderItems = [
() => {
background(255);
fill(255);
for(var i = 5; i>0; i--) {
const es = circleSize * i/5;
ellipse(cx,cy,es,es);
}
}];
for(var i=0; i<3; i++) { renderItems.push(createBlade(cx, cy, circleSize/2, circleSize/3, 0.35, (PI + 4 + (i * 2)), 0.1)); }
renderItems.push(() => {
fill(0);
const dotSize = width/10;
ellipse(cx,cy,dotSize,dotSize);

});
draw = () => renderItems.forEach(f => f());

return function() {
const x2 = x1 + cos(theta) * radius1, y2 = y1 + sin(theta) * radius1;
const x3 = x1 + cos(theta + offset) * radius2, y3 = y1 + sin(theta + offset) * radius2;
fill(0,0,255);
triangle(x1, y1, x2, y2, x3, y3);
theta += speed;
};
}
}

```

https://codepen.io/anon/pen/YvrLqW