Animating shapes similar to an After Effects project

Processing Project Guidance
1

Hello there! :smiley:
I have this Processing project to make that basically consists of creating a short animation using shapes, text and music.
2 years ago I’ve done this animation in After Effects which I’d like to reproduce in Processing.
com-optimize

I’d like to know how can I approach this animation project and what to look for, also, since I couldn’t find any similar example online, I’d like to ask if you know any Sketches or examples I can draw inspiration from.

Thank you in advance!

2

looks great!

Here are some ideas:

https://www.processing.org/examples/trianglestrip.html

https://www.processing.org/tutorials/curves/

https://www.processing.org/examples/piechart.html

https://www.processing.org/examples/bezier.html

https://www.processing.org/tutorials/trig/

https://www.processing.org/examples/star.html

3

you need a means of having an animation, and different states of the animation

When one movement is over, another one starts.

You have to be clear about this before making the growing / moving form.

When one form has reached the target size / position, next form starts

here is an an example:

Chrisir



//vars
PFont myFont;

float s=1; 
float x1, y1;

int phase=0;

int xStart, xStart2;
;

void setup() {
  size(1500, 500, P2D);
  background(0);

  x1=width/2;
  y1=height/2;

  xStart=width+8;
  xStart2=width+18;

  myFont = createFont("ARIAL", 34);
  textFont(myFont);
  textAlign(CENTER, CENTER);
  textMode(SHAPE);
}

void draw() {
  background(0);

  animateThree();

  text("3", 
    xStart2, y1-33);
  xStart2-=3;
}//draw

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

void animateThree() {

  pushMatrix(); 

  if (phase==0) {
    if (xStart>width/2) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else
    {
      phase=1;
    }
  }
  // --- 
  else if (phase==1) {
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s+=.1;
    if (s>11) 
    {
      phase = 2;
    }
  }//if
  // ---
  else if (phase==2) {
    translate(x1, y1);
    scale (s);
    text("3", 
      0, 0);
    s-=.1;
    if (s<=1) 
    {
      phase = 3;
    }
  }//if
  // ---
  else if (phase==3) {
    if (xStart>-12) { 
      text("3", 
        xStart, y1);
      xStart-=3;
    } else phase=4;
  }//if
  // ---
  else if (phase==4) {
    // end
  }

  popMatrix();
}

void mousePressed() {
  //
}
//
4

see how an arc animation closing and opening


void setup() {
  fullScreen();
  background(0);  
}

float endAngle = 0;
float gap = 0.01;
float cut = HALF_PI;
float amt = 0.07;
boolean closing = true;

void draw() {
  background(0);
  animArc();
}

void animArc() {
  if (closing) {
    endAngle = lerp(endAngle, TWO_PI, amt);
    cut = lerp(cut, 0, amt);
  }else{
    endAngle = lerp(endAngle, 0, amt);
    cut = lerp(cut, TWO_PI, amt);
  }
  
  //drawing an arc with starting at angle 0, and stop at endAngle
  noFill();
  strokeWeight(20);
  stroke(255, 255, 100);
  arc(width/2, height/2, 500, 500, 0, endAngle); // outer arc
  arc(width/2, height/2, 400, 400, endAngle - cut, endAngle); // middle arc
  
  fill(255, 255, 100);
  noStroke();
  arc(width/2, height/2, 300, 300, 0, TWO_PI - endAngle); // inner arc
  
  
  //closing or opening?
  
  //lets say the target angle is TWO_PI, if we use lerp, the endAngle will never reach TWO_PI but it towards TWO_PI (gap = 1/infinity)
  //we cannot express, if(endAngle == TWO_PI) / if(endAngle == 0)
  //so to solve this, we define a gap between endAngle and target angle
  if(endAngle < gap) closing = true;
  else if(endAngle > TWO_PI-gap) closing = false;
}

outputhd__real%20(1)

5

@Chrisir @humayung
Thank you very much for your responses!
Tomorrow I will try to work with your ideas and I’ll move this topic o create a new one in “Coding Questions” if I have further queries :smile:
For now, thanks for taking your time to show me these helpful examples!
Cheers!

6

not sure how I’d approach this

in my approach you probably should make Phase as a class that

  • starts at certain millis() and
  • ends at certain millis and
  • holds a command (e.g. as a String or an int, e.g. “arcLeft”) that you pass to an executing function execCmd() outside the class
  • and parameters for the command such as 33,333…
  • think of a timeline https://en.wikipedia.org/wiki/Timeline
  • alternatively to start and end of millis execCmd() could return true when its current process has come to an end. That’s useful when you don’t know the millis a process takes but knows an end event, like a flying ball hitting its target.
    E.g. in the beautiful code above if(endAngle < gap) closing = true; would signify that execCmd() would return true and then the class would know to increase the current phase indexPhase.

Make an array / ArrayList phaseList of that class Phase using indexPhase as an index.
Fill phaseList with the parameters like “arcLeft”,33,333…

Chrisir