# Creating 3D animation with math expressions
**URL:** https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152
**Category:** Coding Questions
**Tags:** homework
**Created:** [December 13, 2022, 1:51pm UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152 "2022-12-13T13:51:31Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@aalgoro](https://discourse.processing.org/u/aalgoro)
#### Post date: [December 13, 2022, 1:51pm UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152/1 "2022-12-13T13:51:31Z")
Hello
I’ve been trying to create this animation
However, I have very liitle idea on how i can make it. I wrote a code for two spinning ellipses, but I don’t think that it is correct to start with circles. Maybe PVector could help me, but I didn’t manage to make something useful with my skills.
This is the code that I have at the moment
```auto
float x,y,z,r;
void setup(){
size(1440, 720, P3D);
background(0);
r=PI/240;
ortho();
}
void draw(){
lights();
translate(width/2, height/2, 0);
background(0);
pushMatrix();
stroke(#16D681);
strokeWeight(10);
rotateY(r);
noFill();
ellipse(0,0,400,400);
popMatrix();
pushMatrix();
stroke(#F57520);
strokeWeight(10);
rotateY((PI/2)+r);
noFill();
ellipse(0,0,200,200);
popMatrix();
r=r+PI/100;
}
```
Any help would be greatly appreciated.
(I’m a beginner in Processing, as you can see. Also, english isn’t my native language, so I’m sorry if there are any mistakes 🙂 )
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [December 13, 2022, 2:13pm UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152/2 "2022-12-13T14:13:21Z")
looks nice.
Do you have the proper name?
Looks a bit like [Lissajous curve - Wikipedia](https://en.wikipedia.org/wiki/Lissajous_curve) but it’s not
When you have the name, start by reading the wikipedia article.
You need to get the math before you can go to programming.
When you make a screen shot you can see better what’s going on:
it’s a 3D circle which is twisted in itself
**Example**
here is a wrong approach with a 3D circle and Z has an additional sine().
The good thing is we can control each point on the circle.
Bad thing is that’s wrong. That’s mainly because the additional sine() is only with Z.
Please google the right formula.
```auto
float angleWholeCircle;
float divide= 45.0;
void setup() {
size(1440, 720, P3D);
background(0);
// r=PI/240;
// ortho();
}
void draw() {
background(0);
lights();
translate(width/2, height/2, 0);
pushMatrix();
rotateY(angleWholeCircle);
float angleCircle=0;
float angleCircle2=0;
for (int i = 0; i<360; i+=1) {
stroke(#16D681);
strokeWeight(10);
noFill();
noStroke();
fill(255, 0, 0);
float x= cos(angleCircle) * 80 + 0;
float y= sin(angleCircle) * 80 - 60;
float z= sin(angleCircle2) * 40 - 0;
pushMatrix();
translate(x, y, z);
// ellipse(0, 0, 4, 4);
sphere(6);
popMatrix();
angleCircle=angleCircle+TWO_PI/360;
angleCircle2=angleCircle2+TWO_PI/divide;
}
popMatrix();
// divide+=.40; // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
angleWholeCircle += PI / 100;
/*
pushMatrix();
stroke(#F57520);
strokeWeight(10);
rotateY((PI/2)+r);
noFill();
ellipse(0, 0, 200, 200);
popMatrix();*/
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [December 13, 2022, 8:14pm UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152/3 "2022-12-13T20:14:15Z")
Hello @aalgoro,
This topic may be of interest:
> [@How to go from plane to 3D](https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263):
>
> float t=1; void setup() { size(800, 800); } void draw() { background(0); noStroke(); fill(255); translate(width/2, height/2); for (int i = 0; i \< 100; i++) { float x = width/4 \* sin(t\*i\*PI\*2); float y = height/4 \* sin(t\*i\*PI\*3); rect(x,y,2,2); } t += 0.00001; } Hello, I have this system of equations that cause the points to move like on a Lissajous curve. I’m trying to add a third dimension to it and be able to change the point of view of the camera to visu…
Code from above simplified:
```auto
void setup()
{
size(800, 800, P3D);
}
void draw()
{
background(255);
strokeWeight(5);
translate(width/2, height/2);
for (int i = 0; i < 300; i++)
{
float x = width/4*sin(i*PI*2/100);
float y = height/4*sin(i*PI*3/100);
float z = 200*sin(i*PI*4/100);
point(x, y, z);
}
}
```
Additional references:
[https://processing.org/tutorials/trig](https://processing.org/tutorials/trig)
The above site is poorly formatted and this is cleaner:
```auto
x = cosine(theta)*radius
y = sine(theta)*radius
```
```auto
float x = cos(radians(angle))*radius;
float y = sin(radians(angle))*radius;
```
Have fun!
`:)`
---
### Author:  [@scudly](https://discourse.processing.org/u/scudly)
#### Post date: [December 14, 2022, 3:15am UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152/4 "2022-12-14T03:15:07Z")
Start by creating a circle of points so that we can manipulate their positions. We want the points connected by lines, so use `beginShape()`, a loop of `vertex()`es and `endShape()`. We can use `cos()` and `sin()` to position the points around the circle in the xy-plane.
`hint( ENABLE_STROKE_PERSPECTIVE );` lets our lines have some 3D depth. Otherwise, they are always the same thickness on the screen.
Then notice that the circle twists around the x-axis. So, we twist the y- and z-coordinates by an angle based on the x-coordinate of the circle points using another `cos()`/`sin()` pair. How much do we twist? Well, it comes and goes, so we use a `sin(time)` function, scale and shift it to the `0` to `1` range and then notice that it pauses at `0`, so we raise it to a power of `2` to hold it longer near `0`.
---
### Author:  [@aalgoro](https://discourse.processing.org/u/aalgoro)
#### Post date: [December 14, 2022, 12:42pm UTC](https://discourse.processing.org/t/creating-3d-animation-with-math-expressions/40152/5 "2022-12-14T12:42:19Z")
Thank you very much for your answer! It really helped a lot 🙂