Trying to figure how to make a fan to Rotate in Processing

Question

I'm completely new to Java Processing and I am trying to figure out a way to deign a fan which will rotate and increase the speed when press the plus(+) button and decrease when press the negative(-) button. As well as a way to display the speed which the fan is rotating.

final int coverSize=250;
final int centralDiskSize=30;
final int rectSize=50;
final int bladeSize=30;
float xPos=0, yPos=0;
float angle=250;
float bladePosX=0, bladePosY=0; 
boolean button = false;

void setup(){
  size(500,500);
  bladePosX=width/2+coverSize;
  bladePosY=height/2;


}

void draw(){
  //rotateFan();
  drawFan();
  btton();
}


void drawFan(){
  background(200);
  strokeWeight(2);
  noFill();
  ellipse(xPos+250,yPos+250,coverSize,coverSize);
  ellipse(xPos+250,yPos+250,coverSize-40,coverSize-40);
  ellipse(xPos+250,yPos+250,coverSize-90,coverSize-90);
  ellipse(xPos+250,yPos+250,coverSize-130,coverSize-130);
  ellipse(xPos+250,yPos+250,coverSize-180,coverSize-180);
  fill(0);
  ellipse(xPos+250,yPos+250,centralDiskSize,centralDiskSize);
  noFill();
  rect(xPos+175,yPos+375,rectSize,rectSize);
  rect(xPos+225,yPos+375,rectSize,rectSize);
  rect(xPos+275,yPos+375,rectSize,rectSize);
}

void rotateFan(){
  background(200);
  ellipse(bladePosX,bladePosY,bladeSize,bladeSize);
  bladePosX=width/2+coverSize*cos(angle);
  bladePosY=height/2+coverSize*sin(angle);
  angle=angle+(PI/90);
  ellipse(bladePosX,bladePosY,bladeSize,bladeSize);
  //ellipse(xPos+250,yPos+250,centralDiskSize,centralDiskSize);
  //buttons();
}

void btton(){
  if(button){
    background(255);
    stroke(0);
    if (button){
      

void mousePressed (){
  if (mouseX >    xPos && mouseX < xPos+rectSize && mouseY > yPos && mouseY < yPos+rectSize){
    button = !button;
  }
}

i just uploaded the code that I have tried – Jrishi_del14 Oct 23 '22 at 14:11 — Jrishi_del14, Oct 23 '22 at 14:11

Alex P · Accepted Answer · 2022-10-23T15:01:22.687

Based on the code you posted, I'm guessing that you want to draw a fan, as opposed to having a sprite. The code below is a minimal example of the functionality you want. I highly suggest you familiarize yourself with the translate() and rotate() methods.

The position and rotation of the fan are handled by the translate and rotate methods respectively. By applying these transformations to the entire canvas, we can draw the desired fan with simple statements, without too much math. You can adapt the complexity of the graphic according to your needs, but this is a minimal example.

The rotation speed is expressed in degrees per second, to be intuitive. Thus, when calculating the angle of the fan, the elapsed time between frames must be taken into account. You could use the global time (e.g. millis) instead of the delta time (time between frames), but you would eventually run into overflow problems.

Finally, you can change the speed by adding (a positive or negative) number of degrees per second to the existing fan speed, for every frame the relevant keys are pressed.

You can easily adapt the code to more complex control mechanics, better graphics, using sprites instead of manually drawing the fan etc.

Fan fan;

void setup(){
  size(500, 500);
  
  fan = new Fan(width/2, height/2, 50, 360);
}

void draw(){
  background(255);
  
  fan.display();
  
  if (keyPressed && key == '+') fan.changeSpeed(1);
  if (keyPressed && key == '-') fan.changeSpeed(-1);
}

class Fan {
  int x, y;
  int size;
  float speed;              // in degrees per second
  private long lastUpdate;  // in milliseconds
  private float angle;      // in degrees
  
  Fan(int x, int y, int size, float speed){
    this.x = x;
    this.y = y;
    this.size = size;
    this.speed = speed;
    
    lastUpdate = 0;
    angle = 0;
  }
  
  void display(){
    translate(x, y);
    
    // Update the fan's angle
    angle += speed*(millis()-lastUpdate)/1000 % 360;
    rotate(radians(angle));
    lastUpdate = millis();
    
    // Draw red blade
    fill(255, 0, 0);
    triangle(0, 0, -size, -3*size, size, -3*size);
    
    // Draw blue blade
    rotate(radians(120));
    fill(0, 255, 0);
    triangle(0, 0, -size, -3*size, size, -3*size);
    
    // Draw green blade
    rotate(radians(120));
    fill(0, 0, 255);
    triangle(0, 0, -size, -3*size, size, -3*size);
    
    translate(-x, -y);
  }
  
  void changeSpeed(float amount){
    speed += amount;
  }
}

@RishithaJayathilaka consider upvoting the answer and accepting it as the solution — Alex P, Oct 23 '22 at 20:18

Trying to figure how to make a fan to Rotate in Processing

1 Answers1