Rotating

Yami89 · August 2016

I was wondering how to rotate something around a certain radius. Ultimately to make a solar system with the sun in the middle and the planets rotating around it.

Chrisir · August 2016

rotation around itself - NOT what you want

float a;                          // Angle of rotation
float offset = PI/24.0;             // Angle offset between boxes
int num = 12;                     // Number of boxes
color[] colors = new color[num];  // Colors of each box
color safecolor;

boolean pink = true;

void setup() 
{ 
  size(640, 360, P3D);
  //  noStroke();  
  for (int i=0; i<num; i++) {
    colors[i] = color(255 * (i+1)/num);
  }
  lights();
} 


void draw() 
{     
  background(0, 0, 26);

  lights(); 
  translate(width/2, height/2);
  a += 0.01;   

  //for (int i = 0; i < num; i++) {
  pushMatrix();
  fill(colors[1]);
  rotateY(a + offset*1);
  //rotateX(a/2 + offset*i);
  box(200);
  popMatrix();
  //}
}

Chrisir · August 2016

and another sketch with one blue planet and a red sun

float a;         // Angle of rotation 1
float a2;       // Angle of rotation 2

void setup() 
{ 
  size(940, 760, P3D);
} 

void draw() 
{     
  background(0, 0, 26);
  lights(); 

  // big gray box in the center 
  pushMatrix();
  translate(width/2, height/2, -922);
  fill(188);
  rotateY(a);
  box(200);
  popMatrix();

  // red box
  pushMatrix();
  translate(width/2, height/2, 0);
  translate(200, 230, 0 );
  fill(255, 2, 2);
  rotateY(a2);
  box(20);
  popMatrix();

  // blue box 
  pushMatrix();
  translate(width/2, height/2, 0);
  translate(200, 230, 0);
  fill(2, 2, 255);
  rotateY(a2);
  translate(123, 0, 0); 
  box(20);
  popMatrix();

  // increase angles 
  a += 0.01;
  a2 += 0.053;
}

Chrisir · August 2016

**explanation: **

What is box and rect?

First, you need to know that box() other than rect() is drawn always on the origin (0,0,0 in 3D space), meaning that half of its width is in the negative area, same for its height and for its depth. So the number in the brackets after box (its parameters) don't signify the position (as for rect()) but the size of it (one number / parameter means same size for width, height and depth, 3 numbers would be different width, height and depth).

What is 3D space all about?

Both sketches above are in 3D space (Just PM me if you need 2D space). The idea of 3D space is that you draw not on a canvas but inside a box / room where you can place stuff further away (away from you, inside the screen). The idea is that the first parameter is x (you move something left right on the table surface e.g.), the 2nd y is the height (you move something up and down above the table) and the 3rd z is that you move something back and forth on the table surface.

Please note that with translate we nearly never use Z in the examples above (Z is just 0). We only use Z with the big gray box in the center in translate.

Rotation

Now the important bit is that each rotation takes place around the origin too. That means that in 2D space we need to place the rect() on the origin to make it rotate around itself (its own center) as in rect(-20,-20,40,40); the translation to the right position must take place with the command translate() then before rotate.

The examples use rotateY, which is a rotation around the y-axis, what makes the rotated box just stay on the table surface with y staying the same and x and z being changed by the rotation. There is also rotateX and rotateZ of course - try it out!

Planet

As you see above the only box that rotates like a planet is the blue one. Here you see a 2nd (3rd) translate after rotate: translate(123, 0); which makes it turn around another point than itself like a planet does.

Best, Chrisir ;-)

kfrajer · August 2016

If I might add an important point, and to clarify, the order you call translate and rotate functions matter. For example:

  translate(width/2, height/2, 0);
  translate(200, 230, 0);
  fill(2, 2, 255);
  rotateY(a2);
  translate(123, 0, 0); 
  box(20);

is not the same as

  translate(width/2, height/2, 0);
  translate(200, 230, 0);  
  fill(2, 2, 255);
  translate(123, 0, 0); 
  rotateY(a2);
  box(20);

For the latter, all objects rotate around their own Y axis.

Kf

Chrisir · August 2016

Thanks!!!

Also, 2 translate()s in a row (without rotateY() inbetween) just add up

Yami89 · August 2016

Thanks for the in depth answers. What I had in mind was couple of ellipses going around one ellipse in 2D. Would I have to use PVector?

Chrisir · August 2016

PVector is not necessary (but ok)

Just use that code above

Replace rotateY with simple rotate

Use translate with 2 parameters (leaving out the last one which is Z)

Show your approach Chrisir

kfrajer · August 2016

Here is an example:

Kf

//Simple planetarium simulation using vector operations.
//Two bodies are depicted in this example and their 
//properties labelled either 1 or 2. First body rotates
//around the center of the sketch. Second body rotates  
//around first body's reference frame. This reference
//frame is defined as a coordinate system where the center
//lays right on top of the body's center point.
//This demonstrates vector addition applied on second
//body. Points x2 and y2 are coordinates of the second body
//wrt the coordinate frame of the first body.
//
//Same effects can be achieved using proper combinations 
//of translations and rotations function calls. Another way
//to do this is to use a PVector object and using its member
//functions described in https://processing.org/reference/PVector.html
//
//TRACING:
//Mouse click enables or disabling tracing. Number of traced points
//depends on capacity of container defined by maxItems. Notice not all
//points are loaded into the tracing container. Refer to the addTrace()
//function.

//Reference: https://processing.org/reference/PVector.html
//Reference: https://processing.org/reference/ArrayList.html

float a1;       // Angle of rotation body 1
float a2;       // Angle of rotation body 2
int R1, R2;      //Radius of movement of body 1and body wrt their reference frames
int r1, r2;      //Bodies' radius
color c1, c2;    //Bodies' color
color traceColor;

ArrayList<PVector> traces; 
int maxItems;
int ctr;
boolean tracesFlag;

void setup() 
{ 
  size(940, 760, P2D);
  noStroke();

  a1=0;
  a2=0;
  r1=10;
  r2=35;
  R1=90;
  R2=(r1+r2)*2;
  c1=color(155, 155, 200);
  c2=color(15, 100, 200);
  traceColor=color(92);

  maxItems=250;
  traces = new ArrayList<PVector>(maxItems);
  for (int i=0; i<maxItems; i++)
    traces.add(new PVector(R1*cos(a1),R1*sin(a1)));

  ctr=0;
  tracesFlag=false;
} 

void draw() 
{     
  background(0, 0, 26);
  lights(); 

  float x1, y1, x2, y2;

  pushMatrix();

  translate(width>>1, height>>1);
  x1=R1*cos(a1);
  y1=R1*sin(a1);
  addTrace(x1, y1);


  x2=R2*cos(a2);
  y2=R2*sin(a2);
  addTrace(x1+x2, y1+y2);


  drawTraces();
  fill(c1);
  ellipse(x1, y1, r1, r1);  
  fill(c2);
  ellipse(x1+x2, y1+y2, r2, r2);

  popMatrix();

  a1+=0.01;
  a2+=0.04;
}

void addTrace(float x, float y) {

  //Loads into traces only every fourth point 
  if(frameCount%4!=0)
    return;

  if (ctr>=maxItems)
    ctr=0;

  traces.set(ctr, new PVector(x, y));
  ctr++;
}

void drawTraces() {

  if(!tracesFlag)
  return;

  fill(traceColor);
  for (PVector p : traces)
    ellipse(p.x, p.y, 3, 3);
}

void mouseReleased(){
  tracesFlag=!tracesFlag; //Toggle value 
}

Chrisir · August 2016

Full Code solution?!?

WHY?

koogs · August 2016

Full Code solution?!?

my thoughts exactly.

when you get two questions that are very similar within a day of each other then you've got to think 'homework assignment'.

kfrajer · August 2016

@koogs Maybe I answer both questions at the same time. What its called two birds with a single stone. This is the big challenge on internet at university/school level, to avoid plagiarism. I will encourage students not to ask these questions then, or to have a private forum btw tutor and students.

I will say the question was answer before my posting. I just presented a solution using vectors instead of doing translations and rotations of the whole scene.

Yami89 · August 2016

I would like to model the Earth and the moon in 2D. Going through some videos it shows how to make a 'class' was wondering if there was a way not do it and model by incorporating mass and the gravitational force?

float earthX, earthY;
float moonDist, moonAng;
float oribiterDist, orbiterAng;


void setup() {
  size(400, 400);
  moonDist = 160;
  moonAng = PI/4;
  noStroke();
}

void draw() {
  earthX = width/2;
  earthY = height/2;
  moonAng += 0.008;
  orbiterAng ++;
  background(0);
  displaySystem();
}

void displaySystem() {
  pushMatrix();
  translate(earthY, earthX);
  fill(200, 200, 0);
  ellipse(0, 0, 50, 50);
  displayMoon();
  popMatrix();
}

void displayMoon() {
  pushMatrix();
  translate(moonDist * cos(moonAng), moonDist *sin(moonAng));
  fill(220, 100, 0);
  ellipse(0, 0, 15, 15);
  popMatrix();
}

Yami89 · August 2016

and I do not copy your work, I go through them trying to understand and try to come up with my own code :)

Howdy, Stranger!

Categories

In this Discussion

Rotating

Best Answers

Answers