I am a novice Processing user, but I enjoyed using it for this assignment. There is plenty of documentation, which was quite helpful. This particular GIF originated from the workings of my hose nozzle face, which spins counter clockwise when water flows through it and the openings seem to grow and shrink during the rotation. In the GIF, the changing shapes seems proportional through the loop, but the overall animation seems less than smooth to me. I also feel like there could be more added to enhance the animation.

// This is a template for creating a looping animation in Processing. 
// When you press a key, this program will export a series of images
// into an "output" directory located in its sketch folder. 
// These can then be combined into an animated GIF. 
// Prof. Golan Levin, January 2014 - CMU IACD

//===================================================
// Global variables. 

int     nFramesInLoop = 10; // for lenticular export, change this to 10!
int     nElapsedFrames;
boolean bRecording; 

int     screenWidth = 500;
int     screenHeight = 500;

//===================================================
void setup() {
  size (screenWidth, screenHeight); 
  bRecording = false;
  nElapsedFrames = 0;
  frameRate (nFramesInLoop); 
  rectMode(CENTER);
}
//===================================================
void keyPressed() { 
  // Press a key to export frames to the output folder
  bRecording = true;
  nElapsedFrames = 0;
}

//===================================================
void draw() {

  // Compute a percentage (0...1) representing where we are in the loop.
  float percentCompleteFraction = 0; 
  if (bRecording) {
    percentCompleteFraction = (float) nElapsedFrames / (float)nFramesInLoop;
  } else {
    float modFrame = (float) (frameCount % nFramesInLoop);
    percentCompleteFraction = modFrame / (float)nFramesInLoop;
  }

  // Render the design, based on that percentage. 
  renderMyDesign (percentCompleteFraction);

  // If we're recording the output, save the frame to a file. 
  if (bRecording) {
    String myName = "ron";
    saveFrame("output/"+ myName + "-loop-" + nf(nElapsedFrames, 4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames == nFramesInLoop) {
      bRecording = false;
    }
  }
}

//===================================================
void renderMyDesign (float percent) {

  // This is an example of a function that renders a temporally looping design. 
  // It takes a "percent", between 0 and 1, indicating where we are in the loop. 
  // This example uses two different graphical techniques. 
  // Use or delete whatever you prefer from this example. 
  // Remember to SKETCH FIRST!

float rotationAmount = percent*90;

  //----------------------
  // here, I set the background and some other graphical properties
  //background (0, 153, 255);
  background (0, 0, 0);
  smooth();
  //stroke (255, 0, 0);
 stroke (255, 255, 255); 
  fill(255, 255, 255); 
  

  //----------------------
  // Here, I assign some handy variables. 
  float screenCenter = screenWidth / 2;
  
  //----------------------
  translate(screenCenter, screenCenter);
  rotate(radians(rotationAmount)); // rotate clockwise
  translate(-screenCenter, -screenCenter);

  pushMatrix();
  //map percent completion to width of collapsable diamond
  float diamondSideVertex = 0.0;
  if (percent < 0.5) {
    diamondSideVertex = map(percent, 0, 1, 0, 50);
  } else {
    diamondSideVertex = map((1-percent), 0, 1, 0, 50);
  }
  translate(250, 250);
  //Draw collapsable square-diamond-thingys
  stroke (0, 0, 0);
  strokeWeight(2);
  ellipse (0, 0, 100, 100);
  beginShape();
  vertex(0, 0);
  vertex(-diamondSideVertex, diamondSideVertex);
  vertex(0, 50);
  vertex(diamondSideVertex, diamondSideVertex);
  endShape(CLOSE);
  beginShape();
  vertex(0, 0);
  vertex(-diamondSideVertex, -diamondSideVertex);
  vertex(0, -50);
  vertex(diamondSideVertex, -diamondSideVertex);
  endShape(CLOSE);
  beginShape();
  vertex(0, 0);
  vertex(-diamondSideVertex, diamondSideVertex);
  vertex(-50, 0);
  vertex(-diamondSideVertex, -diamondSideVertex);
  endShape(CLOSE);
  beginShape();
  vertex(0, 0);
  vertex(diamondSideVertex, diamondSideVertex);
  vertex(50, 0);
  vertex(diamondSideVertex, -diamondSideVertex);
  endShape(CLOSE);
  popMatrix();

  // Draw 8 expanding/collapsing periphery circles
  pushMatrix();
  translate(108.58, 250);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(150, 150);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(250, 108.58);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(350, 150);

  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(391.42, 250);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(350, 350);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(250, 391.42);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();

  pushMatrix();
  translate(150, 350);
  if (percent <0.5) {
    ellipse(0, 0, 100*percent, 100*percent);
  } else {
    ellipse (0, 0, (100*(1-percent)), 100*(1-percent));
  }
  popMatrix();
}