# How to make my images spin around an ellipse in P3D?

**URL:** <https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745>\
**Category:** Coding Questions\
**Created:** [March 22, 2021, 11:28pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745 "2021-03-22T23:28:14Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rindoom](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@Rindoom](https://discourse.processing.org/u/Rindoom)\
**Post date:** [March 22, 2021, 11:28pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/1 "2021-03-22T23:28:14Z")

</div>

Hey, guys. I recently learned about the peasycam library, thus how convenient and handy is, when it comes to mouse-driven camera rotation. So I tried to use the library in my recent project. The idea was to create a ring of 3 or more images (or planes with applied images as a texture) with the camera rotating around them.

I did my best for the most part and I succeeded in integrating the library within my sketch. However, I don’t know how to make my images spin around an invisible ring/ellipse. For example, I want to achieve an effect, similar to the one used in the following p5.js sketch, which I found while searching on [openprocessing.org](http://openprocessing.org) [3D Image Ring Sample - OpenProcessing](https://openprocessing.org/sketch/662888#) To my regret, I am far away from understanding the p5.js syntax. So here is my code. Any ideas on how to fix it:

```auto
import peasy.*;

PeasyCam cam;

PImage img, img2, img3; 

void setup(){
  size(1920,1080,P3D); 
  
  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(50);
  cam.setMaximumDistance(5000);
  
  img = loadImage("1.jpg");
  img2 = loadImage("2.jpg");
  img3 = loadImage("3.jpg");
  
}
      
void draw(){
  rotateX(-.5);
  rotateY(-.5);
  background(0);
  pushMatrix();
  translate(CENTER,CENTER);
  
  imageMode(CENTER);
  img.resize(0,600);
  image(img,width/2,height/2);
  
  imageMode(CORNER);
  img2.resize(0,600);
  image(img2,width/9,height/18);
  
  imageMode(CORNER);
  img3.resize(0,600);
  image(img3,width/1.4,height/1.75);
  
  
  popMatrix();
}

```

P.S you can use whatever .jpg images you find. Just rename them to `1.jpg` and `2.jpg` Size doesn’t matter because they will be resized. Thanks in advance for any help you can rovide 😊

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 23, 2021, 12:29am UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/2 "2021-03-23T00:29:04Z")

</div>

Hi,

To start simple, let’s think about how we are going to do it in 2D.

We need a mathematical way to define the movement of our images and for this we have **trigonometry**.

Check this tutorial on the Processing website : [Trigonometry Primer \ Processing.org](https://processing.org/tutorials/trig/)

Check out this simple example :

```auto
// Dimensions of the circle
int diameter = 50;
float radius = diameter / 2.0;

// Angle increasing over time
float angle = 0;

void setup() {
  size(100, 100);
}

void draw() {
  background(255);
  
  // Move to the center of the window
  translate(width / 2, height / 2);
  
  // Draw the big circle
  stroke(0);
  strokeWeight(1);
  circle(0, 0, diameter);
  
  // Compute the point location
  float px = cos(angle) * radius;
  float py = sin(angle) * radius;
  
  // Display the point
  stroke(255, 0, 0);
  strokeWeight(10);
  point(px, py);
  
  // Move forward
  angle += 0.05;
}

```

And we have a point rotating over a circle using the `cos` and `sin` functions :

![rotate_circle](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/21ab26877cb22ef9880dfd0a96dd57cd02e7c5f4.gif)

Now you said that you want the images to rotate over an ellipse but how do we define an ellipse?

Simply we can say that an ellipse is a circle with dimensions on x and y axis that are not equal 😉

What if instead we say :

```auto
float px = cos(angle) * radiusX;
float py = sin(angle) * radiusY;

```

where `radiusX` and `radiusY` are the radius of the ellipse on the x and y axis.

Note that this is exactly what the parametric definition of an ellipse is (from the [Wikipedia page](https://en.wikipedia.org/wiki/Ellipse) on the ellipse):

 ![Capture d’écran de 2021-03-23 01-33-06](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/97e565d8eb656f3b1702d2fdc65e18e04eb1cef6.png)

![Capture d’écran de 2021-03-23 01-21-04](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/908f2ef11a9d15b7eee2c33da6ece11791fc41b6.png)

* * *

Let’s do this :

```auto
// Dimensions of the ellipse
float radiusX = 45;
float radiusY = 20;

// Angle increasing over time
float angle = 0;

void setup() {
  size(100, 100);
}

void draw() {
  background(255);
  
  // Move to the center of the window
  translate(width / 2, height / 2);
  
  // Draw the ellipse
  stroke(0);
  strokeWeight(1);
  ellipse(0, 0, radiusX * 2, radiusY * 2);
  
  // Compute the point location
  float px = cos(angle) * radiusX;
  float py = sin(angle) * radiusY;
  
  // Display the point
  stroke(255, 0, 0);
  strokeWeight(10);
  point(px, py);

  // Move forward
  angle += 0.05;
}

```

Which gives (two examples 😉 ):

![rotate_ellipse_2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/42f2d0931dbd0371b682ec36bea69baf046792a3.gif) ![rotate_ellipse](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2860b15166dda6df80455ba43f385fe09a0b7d64.gif)

Now this is just a matter of putting this in 3d since it’s a generalization of 2d but with one more axis.

You also need to find a way to move the images from their center and at different locations on the ellipse.

Have fun! 😋

---

<div class="post-metadata">

**Author:** ![Rindoom](https://avatars.discourse-cdn.com/v4/letter/r/e0b2c6/32.png) [@Rindoom](https://discourse.processing.org/u/Rindoom)\
**Post date:** [March 24, 2021, 1:27pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/3 "2021-03-24T13:27:12Z")

</div>

Hey, josephh. It’s nice to see you again here. Hope you are doing well and safe. 💪 😇

Thank you for providing all this information. I followed your guide and I am one step closer to reaching the wanted results. Besides, I am not sure if it is mathematically correct, but while playing around I found a way to scatter the images around the circle. Here is the updated version of my code with some notes:

```auto
import peasy.*;

PeasyCam cam;

PImage img;

float num_img = 10; //number of images

float dist = 1400; // distance between the images and the center

float angle = radians (360 / num_img); //// angle between the circles and the center 

float offset = radians (190); 

float amp = 0.02; //can be used to amplify the speed of the rotation

void setup() {
  size (1920, 1080, P3D);

  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(500);
  cam.setMaximumDistance(5000);

  img = loadImage("3.jpg");
}

void draw () {
  background (0);

  for (int i = 1; i <= num_img; i++) {

    float x = sin(angle *i + offset) * dist + width/2;
    float y = cos(angle *i + offset) * dist + height/2;

    imageMode(CENTER);
    img.resize(0, 800);
    image(img, x, y);
  }

  offset = offset + amp;
}

```

I understand that when it comes to 3D transformations additionally, one more argument is required. However, I am not quite sure how to manipulate my image coordinates with this newly added Z-axis? As far as I know, the image function requires only 3 parameters by default (the **img** parameter specifying the source image which should be displayed and X and Y being the parameters that define the location) Which of them must be modified? How can I nest the Z-axis in my sketch?

 ![Example](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bddeaa7253a529906ac3380d694864db8cb37cab.png)

Other than that, I wanted each image plane to display different photos, so I rewrote the code as it follows. However things didn’t go as planned 😂 🥴 At this point, all of the images are spinning way too fast. I didn’t want to mess up with the `frameRate();` of the sketch, because it also affects the movement speed of the peasy camera, so I thought it will be a good idea to use `float time -=` Sadly I didn’t make any difference. Any ideas on how to slow down the speed with the camera remaining unaffected?

```auto
import peasy.*;

PeasyCam cam;

PImage[] img;
int i = 0;

float time;

float num_img = 10; //number of images

float dist = 1400; // distance between the images and the center

float angle = radians (360 / num_img); //// angle between the circles and the center 

float offset = radians (190); 

float amp = 0.02; //can be used to amplify the speed of the rotation

void setup() {
  size (1920, 1080, P3D);
  img = new PImage[5];

  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(500);
  cam.setMaximumDistance(5000);

  img[0] = loadImage("3.jpg");
  img[1] = loadImage("1.jpg");
  img[2] = loadImage("2.jpg");
  img[3] = loadImage("4.jpg");
  img[4] = loadImage("5.jpg");
}

void draw () {
 time -= 50.55;
  background (0);

  for (int i = 1; i <= num_img; i++) {

    float x = sin(angle *i + offset) * dist + width/2;
    float y = cos(angle *i + offset) * dist + height/2;

    imageMode(CENTER);
    img[int(random(1, 5))].resize(0, 800);
    image(img[int(random(1, 5))], x, y);
    
    
  }

  offset = offset + amp;
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 24, 2021, 8:47pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/4 "2021-03-24T20:47:44Z")

</div>

> [@Rindoom](#):
>
> Hey, josephh. It’s nice to see you again here. Hope you are doing well and safe. 💪

Hi again! 😉

> [@Rindoom](#):
>
> I am not quite sure how to manipulate my image coordinates with this newly added Z-axis?

This is exactly right, I forgot that the `image()` function doesn’t accept `z` coordinate argument!

You can refer to this previous thread to see how to display images properly in P3D :

> [@Show Image in P3D space?](https://discourse.processing.org/t/show-image-in-p3d-space/2419):
>
> I have a P3D window in full screen mode: fullScreen(P3D). I am rotating a 3d model around, and would like to overlay an image over the screen, so that it is always on top of all elements. How can I do this? I’ve tried just image, and it doesn’t work for me.

* * *

For the second code, some improvements :

- The part where you load your images :

- 

> [@Rindoom](#):
>
> so I thought it will be a good idea to use `float time -=` Sadly I didn’t make any difference.

This is because the `time` variable is never used elsewhere other than the line where you subtract `50.55`. Therefore it does nothing 😋

> [@Rindoom](#):
>
> At this point, all of the images are spinning way too fast.

What drives the movement of the images is relies in this expression :

```auto
sin(angle *i + offset)

```

If you think about it, the trigonometric functions are oscillating with a period of `TWO_PI` (the time it takes to go from -1 to 1 and go back and if you go too fast, it’s oscillating very fast.

Therefore the `offset` variable is increasing too much, you can try to reduce the `amp` variable.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [March 24, 2021, 10:53pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/5 "2021-03-24T22:53:32Z")

</div>

example

```auto

// main image 
PImage[] img = new PImage[3];

int n=0, nAdd=5;

float angleMy; 

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

void setup() {
  size(1800, 800, P3D);

  img[0]=loadImage("page1.png"); 
  img[1]=loadImage("page2.jpg"); 
  img[2]=loadImage("page3.png");
  for (PImage img1 : img)
    img1.resize(320, 0);

  // set basics 
  textAlign(CENTER, CENTER); 
  ellipseMode(CENTER);
  imageMode(CENTER);
} // func 

void draw() {
  background(0);

  showImage3D(0, new PVector(170, 200, -320), 0.37); 
  showImage3D(1, new PVector(500, 600, -10), -0.4);
  showImage3D(2, new PVector(1300, 200, n+=nAdd), angleMy);

  if (n>120) 
    nAdd=-5; 

  if (n<-220) 
    nAdd=5; 

  angleMy+=0.0134;

  //
}//func draw()

void showImage3D(int i_, PVector pv, float angle) {
  pushMatrix();
  translate(pv.x, pv.y, pv.z);
  rotateY(angle); 
  image(img[i_], 0, 0);
  popMatrix();
}
//

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 24, 2021, 11:14pm UTC](https://discourse.processing.org/t/how-to-make-my-images-spin-around-an-ellipse-in-p3d/28745/6 "2021-03-24T23:14:38Z")

</div>

Yes thanks @chrisir it’s true that you can use `translate()` with `rotate()` to position your image freely in 3D space 😋