How to make an object move in a circle, as in revolving around a center

p5.js Coding Questions
1

what I am trying to do is to create a solar system. several ellipses revolve around a central point to simulate solar system. i know that i could use translate function to make it happen. however, what I am hoping to is to achieve the effect by changing the value of x, y, rather than using the built-in function. has anyone done this already. please advice.

thanks

2

can you show us that version?

if you use 2D use trigonometry function for position x,y,

if use 3D and object like sphere you should use
translate x,y,z
to that calculated position as that type of elements only draw at 0,0

if it has never been done ( i think you used google first )
can take a look at

but besides p5.js also see:
http://kll.engineering-news.org/tests/processingjs/index_SOL3Dorbit_v5b.html
http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here8

3

I think this is hard to do. I found a solution. If you want I can guide you through.

There is a tutorial on 3D on the processing website in tutorials section.
https://www.processing.org/tutorials/p3d/

First thing to understand in 3D is that you don’t draw on a canvas but place things (box, sphere…) in a room:

  • z is the depth (away from you into the screen is actually -z, positive z is towards you out of the screen).

  • X axis is normal: right and left

  • but y is now basically the height of the shape above the floor in your room.

Hence, when you want to make the circles (lying flat, parallel to the floor) they are made with x and z whereas y is constant (just the height of the solar system in the universe / above the floor).

Chrisir

:wink:

2 Likes
4

here is an example of positioning a sphere in 3D

the floor is just decoration

void setup() {
  size(600, 600, P3D);
}

void draw() {
  background (0);
  lights();
  drawFloor();

  drawSphereAtPositionXYZ(width/2+60, 200, -40);
}

void drawSphereAtPositionXYZ(float x, float y, float z) {
  pushMatrix();
  translate(x, y, z); 
  fill(255, 0, 0);//red fill
  noStroke();  // no lines 
  sphere(66);
  popMatrix();
}//func 

// ---------------------------------------------------------------------------

void drawFloor() {

  pushMatrix();

  //stroke(111);  // gray 
  noStroke(); 
  fill(0, 2, 255); // blue
  float factor1=80.0; // dist between boxes

  translate(width/2, height/2, 0); 

  for (int x=-55; x<55; x++) {
    for (int z=-55; z<55; z++) {

      pushMatrix(); 
      translate(x*factor1 - (4*factor1/2), 
        height-111, 
        z*factor1 - (4*factor1/2) );
      box(40);  // size of 40 (width, height and depth) 
      popMatrix();
    }
  }
  popMatrix();
}
5

Can you say more about why you want to do this? Is your goal to have absolute coordinates for each body you are rendering? Translate and pushmatrix pretty basic to rotation systems – translating to 0,0 of the circle / ellipse simplifies all the math.