# Creating 3D animation with math expressions

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

``````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 )

1 Like

looks nice.

Do you have the proper name?

Looks a bit like Lissajous curve - Wikipedia 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.

``````
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();*/
}

``````
5 Likes

Hello @aalgoro,

This topic may be of interest:

Code from above simplified:

``````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);
}
}
``````

The above site is poorly formatted and this is cleaner:

``````x = cosine(theta)*radius
``````
``````float x = cos(radians(angle))*radius;
``````

Have fun!

`:)`

2 Likes

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`.

3 Likes

Thank you very much for your answer! It really helped a lot