## Final Project – Alice Cai

``````//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);
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);
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
//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.

## PROJECT 12: PROPOSAL

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

1. http://nicholas-taylor.com/portfolio/centered-stack-full-width-2-2

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

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

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

``````//alcai@andrew.cmu.edu
//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);
frameRate(10);

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

yello=color(255, 187, 0);
orang=color(250, 133, 0);

}

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

}

//draw a mooon
function moon(){
noStroke();
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
noStroke();
beginShape();
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);
endShape();

noStroke();
beginShape();
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);
endShape();

}

//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() {
noFill();
noStroke();
var size = this.thic + random(0,5);
var thic =  this.width;
push();
translate(this.x, this.y * 3);
for (var i = 0; i < size; i++) {
var inter = map(i, 0, size, 0, 1);
var c = lerpColor(orang, yello, inter);
stroke(c);
strokeWeight(thic);
line(0, i, 20, i);
}
pop();
}

//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++) {
List[i].update();
List[i].draw();
}

}

``````

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.

## Looking Outwards 11 Alice Cai

SENSOREE

http://sensoree.com/

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.

## Project 10 Sonic Sketch- Alice Cai

``````//alcai@andrew.cmu.edu
//AliceCai
//Project 10
//Section E

a.setVolume(1);
b.setVolume(1);
c.setVolume(1);
d.setVolume(1);
}

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

function draw() {
//color change if mouse is pressed
//draw face
if (mouseIsPressed) {
fill('red');
noStroke();
ellipse(width/2,height/2,400,400);
} else {
fill('yellow');
noStroke();
ellipse(width/2,height/2,400,400);
}

fill('black');
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) {
fill('blue')
ellipse(width/4*3, height/5* 3,20,50);
ellipse(width/4, height/5* 3,20,90);
} else {
fill('pink');
arc(width/2, height/1.8, 200, 200, 0, PI, PI);
}

print(mouseIsPressed);
}

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

if (mouseX > width/2 & mouseY < height/2) {
b.play();
}

if (mouseY > height/2 & mouseX > height/2) {
c.play();
}

if (mouseY < height/2 & mouseX < width/2) {
d.play();
}
}``````

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.

https://www.emotionalartgallery.com/

## Alice Cai Project 9

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

}

function setup() {
createCanvas(720, 400);
imageMode(CENTER);
noStroke();
background(255);
}

function draw() {
let px = floor(random(image.width));
let py = floor(random(image.height));
let pix = image.get(px, py);
fill(pix, 128);
textSize(20);
textFont("Impact");
//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.