Animate a propeller in java

Question

I am trying to animate a propeller in java and have come to this code:

int x = 0;
int y = 230;
int h = 40;
int i = 0;
int center = 250;

void setup() {
  size(500, 400);
}

void draw () {
  if (i == 0) {
    if(y>200) {
    ellipse(x, y, 20, h);
    y--;
    h+=2;
    x+=1;
    } else { i = i + 1; }
  } 
  if (i == 1) {
    if(y<=230) {
    ellipse(x, y, 20, h);
    y++;
    h-=2;
    x+=1;
    } else { i = i + 1; }
  } 
  if (i == 2) {
    if(h<70) {
    ellipse(x, y, 20, h);
    y++;
    h+=1;
    x+=1;
    } else { i = i + 1; }
  } 
  if (i == 3) {
    if(h>=40) {
    ellipse(x, y, 20, h);
    y--;
    h-=1;
    x+=1;
    } else { i = 0; }
  } 
}

Is there a way of making this shorter, because I want to have 4 propellers and dont want to have so much code for this part.

Answer 1

You're going about this the wrong way. Very wrong, in fact. And the reason might be that you think you're doing this in "Java...in the program 'processing'"

The reason this sort of thinking is wrong is because it is equivalent to someone working with C++ saying, "I am creating classes in C using the program 'C++'". Processing is based on Java but it is a different programming language. If you're uncomfortable stretching the idea of Processing to that of a "programming language" then at least think of it as a framework...a framework that provides you with its own implementation of various tools that are put together to help with the creation of art using computers.

Now your thinking seems to have affected you in your particular case a lot. Just like Jose Gonzalez above suggested, you haven't even thought about rotate(), which is a function built into Processing. Tim B's suggestion about Objects is spot on as well but if you want to do things in Processing, try to do them the Processing way.

Here's a very quick sketch that I did for you to understand what I mean:

Prop myProp1;
Prop myProp2;
Prop myProp3;
Prop myProp4;
float angle;

void setup() {
  size(500, 500);
  background(255);
  angle = 0;
  fill(0);
  ellipseMode(CENTER);
  myProp1 = new Prop(50,50);
  myProp2 = new Prop(75,75);
  myProp3 = new Prop(100,100);
  myProp4 = new Prop(125,125);
}

void draw() {
  background(255);
  angle = ((angle + 0.1) % 360);
  myProp1.buildAndRotate(angle, width*3/4, height/4);
  myProp2.buildAndRotate(angle, width/4, height/4);
  myProp3.buildAndRotate(angle, width*3/4, height*3/4);
  myProp4.buildAndRotate(angle, width/4, height*3/4);
}

class Prop {
  int propX;
  int propY;
  int propW;
  int propH;

  Prop() {
    propX = 0;
    propY = 0;
    propW = 50;
    propH = 50;
  }

  Prop(int w, int h) {
    propX = 0;
    propY = 0;
    propW = w;
    propH = h;
  }

  void buildAndRotate(float angle, float moveToX, float moveToY) {
    pushMatrix();
    translate(moveToX, moveToY);
    rotate(angle);
    ellipse(propX, propY, propW, propH);
    ellipse(propX+propW/2, propY+propH/2, propW, propH);
    ellipse(propX-propW/2, propY+propH/2, propW, propH);
    ellipse(propX+propW/2, propY-propH/2, propW, propH);
    ellipse(propX-propW/2, propY-propH/2, propW, propH);
    popMatrix();
  }
}

Now, this is by no means meant to be the way to do things in Processing but it uses various tools provided by the programming language to do exactly what you want to do. Also, the Object Prop can be built in various different ways and my implementation is not supposed to be top-notch at all.

So what is going on? Well, run the sketch and you will see four propellers rotating on their own axes. I just put four of them there, you can delete them or add more as you please.

What the hell is a Prop made of? It is made of five ellipses. The concept, and this may be different than yours, is based on the idea of a ceiling fan (or other fans for that matter or even a prop engine). These fans have a circular thing in the middle to which all the blades are attached. The center circle rotates and that results in all the blades around it rotating with it. What you get in the end is a rotating fan.

How is this thing rotating? Similar to the fan analogy above, there is an ellipse in the middle that rotates around its center. There are four ellipses "attached" to it that rotate around this center ellipses. This gives the illusion of a prop rotating. What you have to understand is that in Processing rotate() rotates things around the origin. This is the reason the center ellipse starts at (0,0). Then later in buildAndRotate() it is translated using translate(). Using translate() does not move the object, it instead moves the origin resulting in the object moving with it, and then when you execute rotate() it rotates the object around its center. Since all the other ellipses are built around this center ellipse, they all rotate around it too (in actual implementation, they're just rotating around the origin, you can see that by removing the center ellipse). pushMatrix() and popMatrix() are used so all the translate() and rotate() commands don't affect everything else in the sketch and keep all movements and rotations applied to each object to that very object.

What else is going on? The rest is pretty simple (this is all very simple once you get the hang of it). Background is being cleared constantly which is a common animation technique to give the illusion of movement. You can delete the statement for background() from draw() but I wouldn't recommend it because it will leave a big black round circle after a while and you won't be able to see the props. The angle is being changed constantly in the draw() method which is why you see the props rotating. You can speed up or slow down the rotation by changing that + 0.1 value being added to angle if you want.

What else do I do? Read the reference (not the Java reference, Processing has its own reference) by using Google or following links such as: http://www.processing.org/reference/rotate_.html, http://www.processing.org/reference/pushMatrix_.html, http://www.processing.org/reference/popMatrix_.html, http://www.processing.org/reference/translate_.html, and many more.

Hope this helps and leave questions in the comment if you need clarification on something.

Answer 2

You need to think in terms of objects and iteration rather than writing out everything explicitly. You are correct that the code you have above contains a lot of un-needed duplication, which is a bad thing.

For a more complex case you would define each part of the propeller as an object. Have an array of parts within the Propeller object. Each time to do the draw you run through the list of objects and render each one out.

In this case it can be even simpler, just use a for loop.

At the top of your program define:

 private static final int NUM_BLADES = 4;

Then you want a loop that looks something like this:

 for (int i=0;i<360;i+=360/NUM_BLADES) {
     // Draw elipse at current rotation position + the angle for this blade
 }

Now you can change the number of blades just by changing the static define as well.