Author: alcai@andrew.cmu.edu

sketch

//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.