```
//Alice Cai
//Section E
//alcai@andrew.cmu.edu
//Final Project
//global variables for letter A
//starting point of angles for turning
var angleA = 0;
var angleA2 = 0;
//starting velocity of turning
var velA2 = -1;
//starting location
var y = 0;
//color variables
var r;
var g;
var b;
//global variables for letter B
var angleC = 70;
var angleC2 = 90;
var cVel1 = 0;
var cVel2 = 0;
//varying starting sizes of circles
var size1 = 1;
var size = 0;
var rC;
var gC;
var bC;
function setup() {
createCanvas(600, 300);
frameRate(10); //slow down framerate
}
function draw() {
//background is random color
background(g, r, r);
//constrain black circle to height of canvas
let cc = constrain(mouseX, 0, height);
//keep ellipse concentric to either center of A or the entire A
if (mouseX > width / 5) {
var cy = height / 2;
} else {
cy = height / 2 + 30;
}
fill(0);
ellipse(width /4, cy, cc,cc);
//draw A cap/serif. Made up of a varying amount of circles controlled by mouseX
for (var i = 0; i <= mouseX; i ++) {
noStroke();
push();
translate(width /4, height / 2 - 110 + 75);
rotate(radians(angleA2));
fill(r, b, g);
ellipse(50, y, 30, 30);
pop();
angleA2 = angleA2 + velA2;
//constrain rotating movment of ellipses to the shape of a
if (angleA2 < -135 ) {
velA2 = velA2 * -1;
}
//if surpasses "semicircle", stop rotating and move downwards.
if (angleA2 >= 0 & velA2 === 1) {
angleA2 = 0;
y = y + velA2;
}
//if hits bottom, come back up
if (y > 115) {
y = y - 115;
velA2 = velA2 * -1;
angleA2 = angleA2 + velA2;
}
}
//draw circle made up of more circles, quantity/length controled by mouseX
for (var i = 0; i <= mouseX / 2; i ++) {
noStroke();
push();
translate(width / 4, height / 2 + 30);
rotate(radians(angleA));
let xc = constrain(mouseX, 0, 50); //constrain diameter of circle
fill(r, b, g);
ellipse(xc, 0, 30, 30);
pop();
angleA = angleA - i * 0.8;
}
//draw C, made up of circles
for (var i = 0; i <= 45; i ++) {
noStroke();
push();
translate(width / 4 * 3, height / 2);
//C is constantly roatating
rotate(radians(angleC + i * 5));
//constrain size of C based on mouseX
let xc = constrain(mouseX / 4, 0 , width / 8);
fill(bC, rC, gC);
ellipse(xc, 0, 30, 30);
angleC = angleC - cVel1;
pop();
}
//constrain rotation of C to go back and forth and not become a circular motion
if (angleC2 < 90) {
cVel1 = cVel1 * -1;
}
if (angleC2 > 0) {
cVel1 = cVel1 * -1;
}
//create two rings of circles around and inside C
let numb = constrain(mouseX, 0, 50)
for (var a = 0; a <= numb / 5; a ++) {
noStroke();
push();
translate(width / 4 * 3, height / 2);
rotate(radians(a * 25 + angleC2 ));
fill(rC, bC , gC );
size1 = size1 + cVel1
let xc = constrain(size1, 0, width / 8)
var size = 5;
//ellipse size varies with sin and cosine to create explosive firework effect when clicked
ellipse(xc - 30, 0, size + xc / 3 * cos(xc) / 2, size + xc / 3 * cos(xc) / 2);
angleC2 = angleC2 + cVel1;
pop();
}
for (var a = 0; a <= 20; a ++) {
noStroke();
push();
translate(width / 4 * 3, height / 2);
rotate(radians(a * 20 + angleC2 - 30));
fill(bC, gC, rC);
size1 = size1 + cVel2
let xc = constrain(size1, 0, width / 5)
var size = 5;
ellipse(xc, 0, size + xc / 3 * sin(xc), size + xc / 3 * sin(xc));
angleC = angleC - cVel2 ;
pop();
}
}
function mousePressed() {
loop(); //starts loop
r = random(100, 255); // r is a random number between 100 - 255
g = random(100, 255); // g is a random number betwen 100-255
b = random(100, 255); //b is a random number betwen 100 - 255
//set velocity and size for movement
size1 = 1
cVel2 = 1
cVel1 = 0.5
rC = random(100, 255);
gC = random(30, 200);
bC = random(100, 255);
}
function mouseReleased() {
noLoop(); //freezes loop
//set velocity and sizes to 0
size1 = 0
cVel2 = 0
cVel1 = 0
angleC = 70 //set C angle to standard
}
```

This is a fun animation of my initials AC; I wanted to get more into creating motion graphics and decided it would be useful to begin brainstorming animations for a logo or graphic for my website. Interact by clicking and releasing, as well as dragging your mouse across the page. Colors change every click. The motif of circles runs throughout the construction of each letter; every line is drawn with ellipses. Thus, at any frame of the animation, the composition is somewhat unified.