Note: The code was slow. However, I included speed on the GIF website.

​

 

//small square (first animation).  

float rectX = 100;

float rectY = 600; // Move to the 500 y-axis point  

int rectSize1 = 150; // Equal width and height for a square  

float overlapSpeed = 1.5;  

int currentOverlap = 0;  

boolean isExpanding = true;    

 

//the enlarged square (second animation).  

float rectAlpha = 0;  

float rectFadeSpeed = 2.7;  

float rectSize = 150; // Initial size of the square  

float easingFactor = 0.02; // Adjust this value to control the smoothness of expansion.     

 

//The combining function.  

int firstCodeStartTime;  

int firstCodeEndTime;  

int secondCodeStartTime;  

int secondCodeEndTime;

   

//The ending circles.  

float circle1X, circle2X, circle3X;  

float circle1Y;  

float targetX, targetY;  

int maxAlpha = 1000; // Maximum alpha value for the fading effect. 

 

void setup() {  

size(1000, 1000);  

background(255);    

 

//Centre the square horizontally.   

rectX = width / 1.4 - rectSize / 2;  

rectY = height / 1.9 - rectSize / 2;

     

circle1X = 70;  

circle2X = 170;  

circle3X = 270;  

circle1Y = height / 2;  

targetX = 600;  

targetY = 600;      

 

// Set up timing for the animation  

firstCodeStartTime = 60 * 3; // 0 seconds (60 frames per second)  

firstCodeEndTime = firstCodeStartTime + 180; // 3 seconds  

secondCodeStartTime = firstCodeEndTime + 20; // Start second code 1 second after the first animation   secondCodeEndTime = secondCodeStartTime + 190; // 3 seconds  

}  

​

void draw() {  

background(255);  

 

if (frameCount >= firstCodeStartTime && frameCount < firstCodeEndTime) {    

// First animation code  

// Draw two white rectangles with black strokes  

fill(255);  

rect(rectX, rectY, rectSize, rectSize);  

// Draw the black rectangle that slowly covers both rectangles vertically  

fill(0,0,0);    

​

if (isExpanding) {  

if (currentOverlap <= rectSize) {  

currentOverlap = min(currentOverlap + int(overlapSpeed), rectSize1);  

} else {

isExpanding = false;  

currentOverlap = rectSize1;  

}  

} else {  

if (currentOverlap <= rectSize1) {

currentOverlap = max(currentOverlap - int(overlapSpeed), rectSize1);  

} else {  

noLoop(); // Stop the animation when the square is fully covered in black  

}  

}

rect(rectX, rectY + (rectSize - currentOverlap) / 2, rectSize, currentOverlap);  

}      

if (frameCount >= secondCodeStartTime) {    

// Second animation code        

​

fill(20, int(rectAlpha)); //stroke(20, int(rectAlpha));  

float centerX = width / 1.4;  

float centerY = height / 2;  

 

drawSquare(centerX, centerY, rectSize);  

 

if (rectSize <= min(width, height)) {    

rectSize += (min(width, height) - rectSize) * easingFactor;  

}  

rectAlpha += rectFadeSpeed;  

}      

 

// Draw moving circles animation at the end  

if (frameCount >= secondCodeStartTime + 270) {    

//third animation code.    

//Draw circles  

circle1X = lerp(circle1X, targetX, 0.01 );  

circle2X = lerp(circle2X, targetX, 0.01 );  

circle3X = lerp(circle3X, targetX, 0.01 );      

 

// Calculate alpha value based on circle position  

int circle1Alpha = int(map(circle1X, 0, targetX, maxAlpha, 0 ));  

int circle2Alpha = int(map(circle2X, 0, targetX, maxAlpha, 0 ));  

int circle3Alpha = int(map(circle3X, 0, targetX, maxAlpha, 0 ));  

   

fill(255, circle1Alpha);  

noStroke();  

ellipse(circle1X, circle1Y, 70, 70);    

 

fill(255, circle2Alpha);  

noStroke();  

ellipse(circle2X, circle1Y, 70, 70);

     

fill(255, circle3Alpha);  

noStroke();  

ellipse(circle3X, circle1Y, 70, 70);  

}  

}  

void drawSquare(float x, float y, float size) {  

rect(x - size / 2, y - size / 2, size, size);  

}