14 Replies - 2208 Views - Last Post: 15 June 2018 - 01:13 PM Rate Topic: -----

#1 Elite1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • 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;
float radius = 125;
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;
  
  float xR = cos(theta)*radius;

  float yR = sin(theta)*radius;
  
  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+cos(theta)*radius,125+sin(theta)*radius,250,240,280+xR,180+yR);
  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   User is online

  • Games, Graphs, and Auctions
  • member icon




Reputation: 12494
  • View blog
  • Posts: 45,628
  • 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?
Was This Post Helpful? 0
  • +
  • -

#3 ndc85430   User is offline

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

Reputation: 934
  • View blog
  • Posts: 3,742
  • 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).
Was This Post Helpful? 0
  • +
  • -

#4 Elite1   User is offline

  • New D.I.C Head

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

Re: Making fan blades rotate using cos & sin

Posted 12 June 2018 - 09:59 PM

View Postmacosxnerd101, 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.

View Postndc85430, 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.
Was This Post Helpful? 0
  • +
  • -

#5 Atspulgs   User is offline

  • D.I.C Addict

Reputation: 95
  • View blog
  • 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...

Can you please elaborate?
Was This Post Helpful? 0
  • +
  • -

#6 Elite1   User is offline

  • New D.I.C Head

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

Re: Making fan blades rotate using cos & sin

Posted 13 June 2018 - 06:50 AM

View PostAtspulgs, 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...

Can you please elaborate?


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.
Was This Post Helpful? 0
  • +
  • -

#7 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7361
  • View blog
  • Posts: 15,284
  • 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;
var radius = 125;
function setup() {
  // size(500,500);
  createCanvas(500,500);
}

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

function drawBlade(theta) {
  var xR = cos(theta)*radius;
  var yR = sin(theta)*radius;
  // console.log(250+cos(theta)*radius,125+sin(theta)*radius,250,240,280+xR,180+yR);
  triangle(250+cos(theta)*radius,125+sin(theta)*radius,250,240,280+xR,180+yR);

}

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);
  drawBlade(theta);
  drawBlade(theta + speed);
  drawBlade(theta + HALF_PI);
  // console.log(250+cos(theta)*radius,125+sin(theta)*radius,250,240,280+xR,180+yR);
  // triangle(250+cos(theta)*radius,125+sin(theta)*radius,250,240,280+xR,180+yR);
  // 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.
Was This Post Helpful? 0
  • +
  • -

#8 mkkekkonen   User is offline

  • D.I.C Head

Reputation: 16
  • View blog
  • 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 thetaRad = degreesToRadians(theta)
  return Math.cos(thetaRad) * RADIUS
}

const calculateY = (theta) => {
  const thetaRad = degreesToRadians(theta)
  return Math.sin(thetaRad) * RADIUS
}

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

x = cos(theta) * radius

and the Y coordinate with

y = sin(theta) * radius

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

Was This Post Helpful? 0
  • +
  • -

#9 Atspulgs   User is offline

  • D.I.C Addict

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

Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 03:42 AM

View PostElite1, on 13 June 2018 - 07:50 AM, said:

View PostAtspulgs, 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...

Can you please elaborate?


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. :)
Was This Post Helpful? 0
  • +
  • -

#10 Piet Souris   User is offline

  • D.I.C Head

Reputation: 44
  • View blog
  • Posts: 197
  • 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).
Was This Post Helpful? 0
  • +
  • -

#11 Atspulgs   User is offline

  • D.I.C Addict

Reputation: 95
  • View blog
  • 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)
  float x = (radius*cos(radians(direction)));
  float y = (radius*sin(radians(direction)));
  
  
  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 :D
Was This Post Helpful? 0
  • +
  • -

#12 Elite1   User is offline

  • New D.I.C Head

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

Re: Making fan blades rotate using cos & sin

Posted 14 June 2018 - 10:33 AM

View PostAtspulgs, on 14 June 2018 - 03:42 AM, said:

View PostElite1, on 13 June 2018 - 07:50 AM, said:

View PostAtspulgs, 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...

Can you please elaborate?


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 radius1 = circleSize/2;
float radius2 = circleSize/3;

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

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

final float OFFSET_X2 = cos(theta2)*radius1;
final float OFFSET_Y2 = sin(theta2)*radius1;
final float OFFSET2_X2 = cos(theta2+o)*radius2;
final float OFFSET2_Y2= sin(theta2+o)*radius2;

final float OFFSET_X3 = cos(theta3)*radius1;
final float OFFSET_Y3 = sin(theta3)*radius1;
final float OFFSET2_X3 = cos(theta3+o)*radius2;
final float OFFSET2_Y3= sin(theta3+o)*radius2;

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;
}
Was This Post Helpful? 0
  • +
  • -

#13 Atspulgs   User is offline

  • D.I.C Addict

Reputation: 95
  • View blog
  • 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!
Was This Post Helpful? 0
  • +
  • -

#14 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7361
  • View blog
  • Posts: 15,284
  • 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;
Blade [] blades;

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);
  blades = new Blade[3];
  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++) {
    blades[i].display();
    blades[i].move();
  }
  target.displayDot();
}

class Blade {
  final float speed, x1, y1, radius1, radius2, offset;
  float theta;
  Blade(float _x1, float _y1, float _radius1, float _radius2, float _offset, float _theta, float _speed) {
    theta = _theta;
    speed = _speed;
    x1 = _x1;
    y1 = _y1;
    radius1 = _radius1; 
    radius2 = _radius2;
    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.
Was This Post Helpful? 0
  • +
  • -

#15 baavgai   User is offline

  • Dreaming Coder
  • member icon


Reputation: 7361
  • View blog
  • Posts: 15,284
  • 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());

   function createBlade(x1, y1, radius1, radius2, offset, theta, speed) {
    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
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1