Creating 3D animation with math expressions

Processing Coding Questions
1

Hello

I’ve been trying to create this animation

36

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 :slight_smile: )

1 Like
2

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:

grafik

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.


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
3

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

Additional references:
https://processing.org/tutorials/trig

The above site is poorly formatted and this is cleaner:

x = cosine(theta)*radius 
y = sine(theta)*radius

float x = cos(radians(angle))*radius;
float y = sin(radians(angle))*radius;

Have fun!

:)

2 Likes
4

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
5

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