Artwork

https://youtu.be/3kV6MmwO86A?t=87

Scene

I was taken by the overlaying and its repetition at different intervals. I thought I could use the idea of Amplitude as Zack demonstrated, but since I'm using Processing I couldn't translate that. So I drew each ellipse individually, but I think this is where my code fell short because I couldn't animate each one separately.

Using sin(angle) instead of sin(ofGetElapsedTimef())

for (int i = 0; i < 6; i++) {
    float amt = map(i, 0, 6, 0, 200);
    float angle = 0.0;
    float x = map(sin(angle), -1, 1, -amt, amt);
    ellipse(x, (i*22)+(height/2), 600, 50);
    angle += PI/40.0;
  }

for (int i = 0; i < 6; i++) {
    float amt = map(i, 0, 6, 0, 200);
    float x = map(sin(millis()/1000), -1, 1, -amt, amt);
    ellipse(x, (i*22)+(height/2), 600, 50);
  }

Data

I was also trying to add this film texture, already added to the "data" folder with the Sketch file. No use.

float x = 50.0;
float speed = 1.0;
int direction = 1;
float easing = 0.05;

PImage filmText; 

void setup() {
  size(640, 360);
  filmText = loadImage("filmtexture.jpg"); // (?) image isn't loading
  background(0);
}

void draw() {
  
  image(filmText, 0, 0, width, height); // (?) image isn't loading
  
  
  background(0);
  
  // film effect/gradient 
  for (int i = 0; i < 30; i++) {
    
    float n = norm(x, 0.0, 100.0); 
    float val = n * 12.0;
    noStroke();
    fill(val, 50);
    rect(0, 0, 640, 360); 
    
  }

  // ellipses 
  noFill();
  strokeWeight(27);
  stroke(255, 255, 255, 100);
  
  ellipse(x+0, (height/2)-100, 600, 50);
    ellipse(x+30, (height/2)-50, 600, 50);
       ellipse(x+60, (height/2)+0, 600, 50);
           ellipse(x+90, (height/2)+50, 600, 50);
               ellipse(x+120, (height/2)+100, 600, 50);
                   ellipse(x+150, (height/2)+150, 600, 50);
   // animation 
     float targetX1 = width;
     float targetX2 = -width; 
     
  if ((x == width) || (x == -width)) {
     // (?)
  }
     
     
     x += (speed * direction) * 12; // (?) how to make them arrive to
                                    // x = 0 || x = width at different intervals? 
  
  if ((x > 600) || (x < 0)) {
    direction = -direction;
  }
  
  
}

Reattempting the last bit

// ellipses 
  noFill();
  strokeWeight(27);
  stroke(255, 255, 255, 100);
  
  ellipse((x+0)/2, (height/2)-100, 600, 50);
    ellipse((x+30)/2.1, (height/2)-50, 600, 50);
       ellipse((x+60)/2.2, (height/2)+0, 600, 50);
           ellipse((x+90)/2.3, (height/2)+50, 600, 50);
               ellipse((x+120)/2.4, (height/2)+100, 600, 50);
                   ellipse((x+150)/2.5, (height/2)+150, 600, 50);
      
     x += (speed * direction) * 7; // (?) how to make them arrive to
                                    // x = 0 || x = width at different intervals? 
  
  if ((x > width) || (x < 0)) {
    direction = -direction;
  }