Final Project – Alice Cai


//Alice Cai
//Section E
//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;
    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 ++) {
        translate(width /4, height / 2 - 110 + 75);
        fill(r, b, g);
        ellipse(50, y, 30, 30);
        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 ++) {
        translate(width / 4, height / 2 + 30);
        let xc = constrain(mouseX, 0, 50); //constrain diameter of circle
        fill(r, b, g);
        ellipse(xc, 0, 30, 30);
        angleA = angleA - i * 0.8;

    //draw C, made up of circles
    for (var i = 0; i <= 45; i ++) {
        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;

    //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 ++) {
        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;

    for (var a = 0; a <= 20; a ++) {
        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 ;

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.


Potential logo animations

For my final project, I drew inspiration from motion graphic designers and my personal interest in graphic design. As an aspiring graphic designer, I have always been fascinated by moving logos. They are extremely attention-grabbing on the home page of a webpage. I want to create and design a looping animation /interactive logo. I think that I may even think about using the turtle for my animation??? I am not 100% set on my design but I plan on designing something with my initials, AC. Hopefully, I will be able to use this logo in my portfolio website!

Looking Outwards 12


^Vapour by Nick Taylor

Nick Taylor is the Head of 3D at MancsMachine London. He was a creative coder who now is fully committed to motion design. However, he still integrates generative design, algorithms, and proceduralism in his work. He codes with Vex, Python, Hava, GLSL, and C++.

Vapour is an extremely dynamic and colorful video. It is a code-based exploration of turbulent particle systems and vivid color transitions. This project was created for Intel and produced by Future Deluxe. Nick Taylor used generative artwork and mixed it with in-camera techniques and optical tricks. The result is a beautiful motion graphic that looks organic yet digital.

Screenshot from video


^ Club Nomatic 2017 Night for LIFE WTR

Joshua Davis is a digital artist, web designer, toy designer, and also motion graphic artist. He works at his own studio, Joshua Davis Studios Inc. (freelance?). This project is actually for Life Wtr and Super Bowl 51, featuring music from DJ Khaled and Bruno Mars. He uses processing, HYPE framework, GLSL, Minim/FFT+SVG to generate this colorful graphic video. The video is filled with colorful animations that hold the essence of the brand LIFEWTR.

screenshots from video

INSPIRATION: While both of these motion graphic artists have very different styles, they both seem to play with motion design for advertising. As an aspiring graphic designer who is also interested in video/motion, I find their projects intruiging and much more interesting than a 2D poster. Therefore, for my project, I want to create an interactive poster/logo.

Project 11 Landscape Alice Cai


//alice cai
//section E
//week 11 assignment A

//terrain variables
var terrainSpeed = -0.0003;
var terrainDetail = 0.005;
var terrainSpeed2 = -0.0004;
var terrainDetail2 = 0.007;

//lantern variables
var List = [];
var moving = -5;
var end = -20;

function setup(){
    createCanvas (480,480);

    //call # of lanterns
    for (var j = 0; j < 20; j++) {
        var px = random(width);
        var py = random(height / 3);
        List[j] = makeLant(px, py);

    //define gradient colors
    yello=color(255, 187, 0);
    orang=color(250, 133, 0);


function draw() {
    background(100, 50, 122);
    //call moon
    //draw dessert mountains
    fill(10, 12, 71);
    rect(0, height/3 * 2, width, height);
    //render lanterns


//draw a mooon
function moon(){
    fill(255, 237, 186, 30);
    ellipse(width/2, height/3, 200,200);
    fill(255, 237, 186);
    ellipse(width/2, height/3, 150,150);


function mount(){
    //two mountain ranges
    fill(122, 55, 80);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    vertex(width, height);

    fill(53, 40, 105);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t1 = (x * terrainDetail) + (millis() * terrainSpeed);
        var y = map(noise(t1), 0, 1, 250, 300);
        vertex(x, y);
    vertex(width, height);


//make lantern with variable parameters, return object lant
function makeLant(px,py) {
    var lant = {x: px, 
                y: py,
                width: random(0,50),
                thic: random(20,30),
                speed: moving,
                update: lantUpdate,
                draw: lantDraw}

    return lant;

//draw lantern
function lantDraw() {
    //random size adds flickering 
    var size = this.thic + random(0,5);
    var thic =  this.width;
    translate(this.x, this.y * 3);
    //gradient line
    for (var i = 0; i < size; i++) {
        var inter = map(i, 0, size, 0, 1);
        var c = lerpColor(orang, yello, inter);
        line(0, i, 20, i);

//move the lanters and have them start over when they hit the end
function lantUpdate() {
    //speed of moving but with random to make wind/random travel speed effect
    this.x += this.speed + random(-5,5);
    if (this.x <= end) {
        this.x += width - end;

//render lantern, add to list array
function lantRender() {
    for (var i = 0; i < List.length; i++) {



This project took inspiration from the Disney movie Tangled, specifically from the final, super romantic scene of the lantern lighting. I wanted to recreate this scene with the warm colors and floating lanterns. The randomized sizes created flickering and the size varation created depth to the lanters that lit up the sky. The lanterns float across the screen like they are in the sky.  

lantern scene from tangled
purply lantern scene from tangled

Looking Outwards 11 Alice Cai



Dancer, designer, and  Dance Medicine Specialist Kristin Neidlinger is a bio media designer and founder of SENSOREE. SENSOREE specializes in therapeutic bio media. This concept was derived from her masters thesis. She wanted to look into the future: what will healthcare look like with all this new technology? She tackled issues like sensory processing disorder, a condition from ADHD and autism. Now with SENSOREE, she creates bioresponsive fashion that reflects and promotes externalized intimacy. 

Her project GER Mood Sweater uses electronic sensors used commonly in lie detectors. Her version, the Galvanic Extimacy Responder, is based on the Galvanic Skin Response which reads electrodermal activity. It shows excitement level. She uses her GER to detect and show emotion to externalize your most intimate emotions. The modern and cropped sweater is white, however, has a large collar with LED lights inside that change colors based on your emotions. The ironic concept of externalizing intimacy makes this piece of wearable art. interesting to ponder about.


Looking Outwards 10- Alice Cai

“And I will always love you…” 
This sound art by Martin Backes blurs the lines of AI and humans but at the same time makes it all the more clear. Martin Backs feeds a computed system number-one ballads from 1990, and all of them are extremely EMOTIONAL songs. He has the computer reproduce the song with its own “emotional interpretations”. The machine attempts to replicate the human sentiment in the original song. While I listen to the machine, I can hear what seems to be crescendos and decrescendos as well as vibratos in the notes. However, it is glitchy and very clearly electronically made. You can tell that code is constantly running during the song.
The code is calculating current pitch, found pitch, frequency, and loudness. 

I find this project extremely intriguing because I was actually very impressed with the replication of the song by the machine. However, because of the clear distinctions and flaws in the replication, it also reassures me that human emotion is the one thing that cannot be replaced by electronics.

Project 10 Sonic Sketch- Alice Cai


//Project 10
//Section E

//load all the sound links and set the volume
function preload() {
    a = loadSound("");
    b = loadSound("");
    c = loadSound("");
    d = loadSound("");

function setup() {
    createCanvas(400, 400);
    background(200, 220, 250);

function draw() {
    //color change if mouse is pressed
    //draw face
    if (mouseIsPressed) {
    } else {

    ellipse(width/4,height/5 *2 ,30,60);
    ellipse(width/4 * 3,height/5 *2 ,30,60);
    //change to tears when face is hit
    if (mouseIsPressed) {
        ellipse(width/4*3, height/5* 3,20,50);
        ellipse(width/4, height/5* 3,20,90);
    } else {
        arc(width/2, height/1.8, 200, 200, 0, PI, PI);


function mousePressed (){
    //call different sounds for where the mouse is clicked
    if (mouseX < width/2 & mouseY > height/2) {;

    if (mouseX > width/2 & mouseY < height/2) {;

    if (mouseY > height/2 & mouseX > height/2) {;

    if (mouseY < height/2 & mouseX < width/2) {;

This is my sound project. It plays four sounds when the mouse clicks (or “hits) the face: big slap, small slap, punch, and OOF!, depending on where the mouse is clicked (four quadrants). When the mouse is clicked the face turns red and starts crying too! I thought it would be funny and simple.

Looking Outwards 9- Alice Cai

I am reflecting on Gretchen’s Looking Outwards from Week 1! In this looking outwards, she studied “The Emotional Art Gallery”. The emotional art gallery is an installation in many public places in Stockholm like public transportation buildings. It was created by the company Clear Channel and a design studio called Affairs. The digital billboards display a portrayal of emotion; however, not just any emotion. It is actually an interaction with the people in Stockholm; the emotions that are displayed are a direct reflection of the mood of the city.

Gretchen’s refection of this project and understanding of the benefits of the projects is pretty similar to mine and overall aligns with the goals of the creators. Displaying these emotions makes this project a human center focus. While other artworks might display a unique perspective of emotion, the interaction allows viewers to learn not only about themselves but the community that they are in. This allows civilians to ponder about negative emotions and perhaps be more conscious of ways that they can create a positive impact. 

video on the gallery

Alice Cai Project 9


let img;
//my name is an array of letters
let name = ['a', 'l', 'i', 'c', 'e'];

//load image
function preload() {
  image = loadImage('');

function setup() {
  createCanvas(720, 400);

function draw() {
  let px = floor(random(image.width));
  let py = floor(random(image.height));
  let pix = image.get(px, py);
  fill(pix, 128);
  //call random letter from name array
  text(random(name), py, px);


Here is my “pointillism” self-portrait. I wanted to change the points to the letters of my name, so I created an array and called random letters from that array. The letters are called at random coordinates.

Alice Cai LookingOutwards 08

Daniel Shiffman an Associate Arts Professor  at NYU with degrees in math and philosophy from Yale and a master degree from the ITP. He works with the Interactive Telecommunications Program at NYU. He also wrote two books about processing: Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction and The Nature of Code . Perhaps his most well know the platform is youtube, where he has a channel with only 99k short of a million followers. This account is called The Coding Train, with a very fun and youthful theme with highlights of magenta throughout his videos and images (including his profile picture!). Here, he posts tutorials on coding for web, games, etc. with languages such as p5js, java, and more. He also posts challenges and other varieties of coding videos, Since youtube is so popular and accessible these days, I find his channel helpful in inspiring younger children ( or any beginner) to learn how to code. His fun theme of the train and bright colors makes coding seem inviting and welcoming. He also uses a green screen in all his videos so that he is shown talking in the corner with his laptop. It makes his videos, and especially his live streams, seem more personal and well edited. Overall, not only does Daniel work in a university setting and is very accessible to students, his platform on youtube and social media makes him even more influential in the coding community.