## Cathy Dong-Looking Outwards-07

Originally developed by Scott Hessels and Gabriel Dunne, “Celestial Mechanics” project used Adobe After Effects and Maya. With time lapse animation, the project visualizes air traffic data and turns it into a series of videos and drawings, and perhaps art. Through still 2D drawings and screen captures, it displays the dynamics. Information shows the origin, end and path of the journey. Comparing the density of parts, readers find the busier ports in North America within a period of twenty-four hours. Also as it reveals multiple iterations of multiple iterations of flight patterns during the cycle, the project implies weather systems and no-fly zones.

## Cathy Dong-07-Curve

``````/* Cathy Dong
Section D
yinhuid@andrew.cmu.edu
Project 07 - Composition with Curves
*/

var density = 200;

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

function draw() {
background(0);
stroke(255);
noFill();

//call devil's curve
strokeWeight(1);
push();
translate(width/ 2, height / 2);
devilDraw()
pop();

//call curve and make its center move with mouse
strokeWeight(.5);
push();
var xDraw = constrain(mouseX, width / 5, width / 5 * 4);
var yDraw = constrain(mouseY, width / 8, height / 8 * 7);
translate(xDraw, yDraw);
hypocycloidDraw();
pop();
}

//draw hypocycloid move with mouse
function hypocycloidDraw() {
var xA;
var yA;
var aA = map(mouseX, 0, width, 0, width / 5);
var bA = map(mouseY, 0, height, 0, height / 8);
beginShape();
for (var i = 0; i < density; i++) {
var t = map(i, 0, density, 0 ,PI * 2);
xA = (aA - bA) * cos(t) - bA * cos((aA - bA) * t);
yA = (aA - bA) * sin(t) - bA * sin((aA - bA) * t);
vertex(xA, yA);
}
endShape();
}

// draw devil's curve function
function devilDraw() {
var xD;
var yD;
var aD = map(mouseX, 0, width, 10, width/ 8);
var bD = map(mouseY, 0, height, 10, height / 10);
beginShape();
for (var j = 0; j < density; j++) {
var t = map(j, 0 , density, 0, PI * 2);
xD = cos(t) * sqrt((pow(aD, 2) * pow(sin(t), 2) - pow(bD, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
yD = sin(t) * sqrt((pow(aD, 2) * pow(sin(t), 2) - pow(bD, 2) * pow(cos(t), 2)) / (pow(sin(t), 2) - pow(cos(t), 2)));
vertex(xD, yD);
}
endShape();
}
``````

I started the project with browsing Mathworld Curves and found the curves that I am interested in. I used devil’s curve and hypocycloid. Devil’s curve remains at canvas center and its long diagonal edges change side when mouse moves, whereas hypocyloid itself flies with mouseX and mouseY. Hypocyloid is the smallest when it’s at upper left corner and largest at lower left. It is less complex and mouse moves to left of the canvas. The longest devil curve edges and the hypocyloid would only appear to be at the same edge when mouse is at upper right.

## Cathy Dong – Looking Outwards – 06

Norimichi Hirakawa is a Japanese artist whose work centralizes in real-time digital audio-visual installations. The series of video, The Irreversible, is generated by a time-evolutionary algorithm. The process starts from randomizing the initial constants. As described by the artist, “everything within the video is just a result of meaningless calculation.” Math calculation is Hirakawa’s variables and parameters, and the final results are somehow confusing but appealing at the same time. The audience are astonished by the strong visual impact. The background sound fits into the visual rhyme well. Through two-dimensional media, such as lines and points, Hirakawa achieves a three-dimensional effect.

## Cathy Dong-06-Abstract-Clock

``````/* Cathy Dong
Section D
yinhuid@andrew.cmu.edu
Project: abstract clock
*/

//color scheme
var wall = '#D6C9C9';
var light = '#DDE1E4';
var dark = '#8C9A9B';
var sunset = '#D2AB99';
var coffee = '#60463E';
var table = '#2F2F2F';
var curtainC = '#CEB5A7';

//time variable
var s; //seconds
var m; //minutes
var h; //hours

//coffee cup
var cupGap = 10;
var cupWidth = 28;
var cupHeight = 60;
var coffeeHeight = 0;
var coffeeX = 10;

//curtain
var curtainHeight = 0;

//deco
var deco1X = 100;
var deco1Y = 100;
var deco1Size = 0;
var deco2X = 150;
var deco2Y = 80;
var deco2Size = 0;
var deco3X = 160;
var deco3Y = 160;
var deco3Size = 0;

function setup() {
createCanvas(470, 480);
background(0);

}

function draw() {
//set time variables
s = second();
m = minute();
h = hour();
coffeeHeight = s;

//wall & table setting
noStroke();
fill(wall);
rect(0, 0, width, height);
fill(table);
rect(0, height - height / 5, width, height / 5);

//call functions
coffeeLevel();

cup();
skyColor();
curtain();
deco();
}

//cup outline don't change
function cup() {
for (var i = 0; i < 12; i++) {
stroke(0);
strokeWeight(2);
noFill();
var cupX = cupGap * (i + 1) + cupWidth * i;
var cupY = height - height / 5 - cupHeight;
rect(cupX, cupY - 10, cupWidth, cupHeight + 10);
}
}

// coffee level changes every second
function coffeeLevel() {
noStroke();
fill(coffee);
//coffee level increase per second
for (var j = 0; j < 12; j++) {
var coffeeY = height - height / 5 - coffeeHeight;
var coffeeX = cupGap * (j + 1) + cupWidth * j;
rect(coffeeX, coffeeY, cupWidth, coffeeHeight);
}
}

// sky changes color based on hours
function skyColor() {
stroke(255);
strokeWeight(5);
if ((h > 6) & (h < 15)) {
fill(light); //morning
}
else if ((h > 14) & (h <17)) {
fill(sunset); //dawn
}
else {
fill(dark); //night
}
rect(width / 5 * 3, height / 4, width / 4, height / 3);
}

//curtain height changes based on hours
function curtain() {
stroke(0);
strokeWeight(1);
fill(curtainC);
var curtainX = width / 5 * 3;
var curtainY = height / 4;
var curtainWidth = width / 4;
var curtainHeight = h * 5;
rect(curtainX, curtainY, curtainWidth, curtainHeight);
}

//decoration size changes based on minutes
//color changed based on hours (matching sky color)
function deco() {
stroke(255);
strokeWeight(3);
//morning
if ((h > 6) & (h < 15)) {
fill(light);
}
//dawn
else if ((h > 14) & (h <17)) {
fill(sunset);
}
//night
else {
fill(dark);
}
deco1Size = m * 2;
deco2Size = m;
deco3Size = m * 3 / 2;
circle(deco1X, deco1Y, deco1Size);
circle(deco2X, deco2Y, deco2Size);
circle(deco3X, deco3Y, deco3Size);
}``````

The abstract clock is an animation changes based on time in the day. There will not be any repetitions anytime in the same day. The coffee levels in the cups change based on seconds. The hour decides color of the sky and decoration elements and height of the curtain, whereas decoration dimensions change based on the minute.

There are three color modes: day time as light blue, evening as dark blue, and sunset as pale orange. 7 AM to 2 PM are considered as day time, 3 PM to 4 PM are sunset, and 5 PM to 6 AM are evening.

## Cathy Dong-Looking Outwards-05

I am really interested in 3-D computer animation used in film making. “Despicable Me,” distributed by Universal Pictures, was animated by a French animation studio-Mac Guff. Characters in the movie has smooth motions and lively facial expressions. What I admire the most is that the producers give every minion its own personality and characteristics. Minions not only have various body feature, such as height, eyes, and hair, but also have different expressions. The process from the first sketch of the minions to story-boarding, layouts, animation, and final production is complex and appealing.

## Cathy Dong-Project-05-Wall Paper

``````/* Cathy Dong
Section D
yinhuid
Project 5-wallpaper
*/

var ox = 50;
var oy = 75;
var xSpace = 80;
var ySpace = 120;

function setup() {
createCanvas(420, 600);
background(244, 239, 223);
}

function draw() {
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var outX1 = ox + i * xSpace - 33;
var outY1 = oy + j * ySpace;
var outX4 = ox + i * xSpace - 25;
var outY4 = oy + j * ySpace - 30;
var outX2 = ox + i * xSpace - 8;
var outY2 = oy + j * ySpace - 60;
var outX3 = ox + i * xSpace;
var outY3 = oy + j * ySpace + 35;

stroke(29, 59, 16);
strokeWeight(2);
fill(203, 223, 180);
beginShape();
curveVertex(outX4, outY4);
curveVertex(outX2, outY2);
curveVertex(outX2 + 7, outY2 - 2); //center point
curveVertex(outX2 + 16, outY2);
curveVertex(outX4 + 50, outY4);
curveVertex(outX1 + 66, outY1);
curveVertex(outX3 + 20, outY3 - 10);
curveVertex(outX3, outY3);
curveVertex(outX3 - 20, outY3 - 10);
curveVertex(outX1, outY1);
endShape(CLOSE);

noStroke();
fill(235, 234, 188);
beginShape();
curveVertex(outX4 + 10, outY4 - 5);
curveVertex(outX2 + 10, outY2 + 10);
curveVertex(outX2 + 17, outY2 + 8); //top center point
curveVertex(outX2 + 20, outY2 + 10);
curveVertex(outX4 + 40, outY4 - 10);
curveVertex(outX1 + 60, outY1 - 10);
curveVertex(outX3 + 15, outY3 - 15);
curveVertex(outX3, outY3 - 5); //bottom center point
curveVertex(outX3 - 20, outY3 - 15);
curveVertex(outX1 + 10, outY1 - 10);
endShape(CLOSE);

if ((i % 2 == 0 & j % 2 == 1) || (i % 2 == 1 && j % 2 == 0)){
drawShell(i,j);
}
if ((i % 2 == 1 & j % 2 == 1) || (i % 2 == 0 && j % 2 == 0)){
drawNoShell(i,j);
}
}
}
noLoop();
}

function drawShell(i,j) {
stroke(131, 98, 66);
strokeWeight(2);
fill(198, 140, 102);
ellipse(ox + i * xSpace, oy + j * ySpace, 34, 36);

noStroke();
fill(215, 158, 124);
ellipse(ox + i * xSpace, oy + j * ySpace, 20, 23);

stroke(240, 217, 174);
strokeWeight(5);
noFill();
arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, QUARTER_PI);
}

function drawNoShell(i,j) {
stroke(248, 241, 224);
strokeWeight(1);
fill(227, 217, 114);
ellipse(ox + i * xSpace, oy + j * ySpace, 35, 38);

stroke(202, 198, 75);
strokeWeight(10);
noFill();
arc(ox + i * xSpace, oy + j * ySpace, 20, 20, 0, HALF_PI);

}``````

My project is about avocado patterns. To help coding, I first calculated important point x and y axis, using shell center as the origin.

## Cathy Dong-Looking Outwards-04

“Cycling Wheel” is created by Keith Lam, Seth Hon, and Alex Lai. They were inspired by Marcel Duchamp’s Bicycle Wheel, and further transformed mechanics into light and sound.

In the design processes, there were three variables: music, light beam, led strips. Each was generated and controlled by electronic devices.

The designers eventually transformed the computer-generated sounds into an exciting, appealing, and rather dramatic show.  They perform while generating music and light. Music and light together create a certain engaging rhyme that draws audience’s attention. Mechanics input is intricate and professional, whereas the final result is interactive. The complicated design logic is simplified into the motions of spinning and touching.

## Cathy Dong-Project-04-String Art

``````/* Cathy Dong
Section D
yinhuid
Project 4-String Art
*/

var sqColor;
var backColor;

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

}

function draw() {
background(0);
//change background color based on mouseY location
if (mouseY < height / 2) {
backColor = 'black';
}
else if (mouseY >= height / 2) {
backColor = 'gray';
}
//turn background to white when mouse is pressed
if (mouseIsPressed) {
backColor = 'white';
}
noStroke();
fill(backColor);
rectMode(CORNER);
rect(0, 0, width, height);

//create a grid of rectangles
//rectangle color changes based on mouseX
for (var s = 20; s <= width; s += 30) {
for (var t = 15; t <= height; t += 30) {
if (mouseX < width / 2) {
sqColor = 'gray';
}
else if (mouseX >= width / 2) {
sqColor = 'black';
}
noStroke();
fill(sqColor);
rectMode(CENTER);
rect(s, t, 20, 20);
}

}
//lines from mouse to top
for (var n = 0; n <= width; n += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, n, 0);
}

//lines from mouse to bottom
for (var p = 0; p <= width; p += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, p, height);
}

//lines from mouse to left
for (var q = 0; q <= height; q += 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, 0, q);
}

//lines from mouse to right
for (var r = 0; r <= height; r+= 10) {
stroke('lightBlue');
strokeWeight(1);
line(mouseX, mouseY, width, r);
}

//curve with lines from top to right (controled by mouseX)
for (var i = 0; i <= mouseX; i += 3) {
stroke(255);
strokeWeight(.5);
line(i, 0, width, i);
}
//curve with lines from right to bottom (controled by mouseY)
for (var j = 0; j <= mouseY; j += 3) {
stroke(255);
strokeWeight(.5);
line(width, j, width - j, height);
}
//curve with lines from bottom to left (controled by mouseX)
for (var k = 0; k <= mouseX; k += 3) {
stroke(255);
strokeWeight(.5);
line(width- k, height, 0, height - k)
}
//curve with lines from left to top (controled by mouseY)
for (var m = 0; m <= mouseY; m += 3) {
stroke(255);
strokeWeight(.5);
line(0, height - m, m, 0);
}

//draw foco point
stroke(255);
strokeWeight(2);
push();
line(mouseX / 8 * 7, mouseY, mouseX / 8 * 9, mouseY);
line(mouseX, mouseY / 8 * 7, mouseX, mouseY / 8 * 9);
pop();

}``````

In this project, I used loops to create curves with lines and rectangle grids. All lines changed based on mouse location. The background color also changed when mouse is clicked or moved.

## Cathy Dong-Looking Outwards-03

The BUGA Fibre Pavilion is designed by the Institute for Computational Design and Construction (ICD) and the Institute for Building Structures and Structural Design (ITKE) at University of Stuttgart. The pavilion design uses the most cutting-edge technologies. They use fibre composites and robotic technologies to build the load-bearing structure. Therefore, the project is extraordinary lightweight.

The pavilion mimics natural and biological structure. It is eventually made with 150,000 meters of spatially arranged glass- and carbon-fibers and the structure spans freely for more than 75 feet. With computational design and robots, fibrous filaments are freely placed between rotating winding scaffolds. Use of pioneered technologies broaden the possibility for form making.

## Cathy Dong-Project-03-Dynamic Drawing

``````/* Cathy Dong
Section D
yinhuid
Project 3-Dynamic Drawing
*/

var skyR = 139;
var skyG = 212;
var skyB = 229;
var moonCut = 0;
var sunDia = 100;
var starAngle = 0;
var starR = 249;
var starG = 215;
var starB = 81;
var starW = 10;
var starH = 12;

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

}

function draw() {
background(skyR, skyG, skyB);
var winR = 254;
var winG = 221;
var winB = 2;

//stars
noStroke();
fill(starR,starG,starB);
//star 1
push();
translate(640 - mouseX, 100);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 2
push();
translate(800 - mouseX, 150);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 3
push();
translate(760 - mouseX, 120);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 4
push();
translate(900 - mouseX, 20);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 5
push();
translate(500 -mouseX, 50);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 6
push();
translate(760 - mouseX, 80);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 7
push();
translate(1000 - mouseX, 60);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 8
push();
translate(1500 - mouseX, 50);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 9
push();
translate(1200 - mouseX, 30);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 10
push();
translate(320 - mouseX, 100);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//star 11
push();
translate(200 - mouseX, 130);
rectMode(CENTER);
rect(0, 0, starW, starH);
pop();

//trinkle stars
starAngle += mouseX;

//night
if (mouseX > width / 2) {
//star size
starW = 10;
starH = 12;
//show star
starR = 249;
starG = 215;
starB = 81;
//sky color
skyR = 61;
skyG = 80;
skyB = 92;
//moon
noStroke();
fill(255, 216, 0);
ellipse(mouseX, mouseX - 200, 200,200);
//moon change
noStroke();
fill(skyR, skyG, skyB);
moonCut = map(mouseX, 240, 640, 0, 400);
ellipse(mouseX - 75, mouseX - 200, moonCut, moonCut);
}

//morning
else if (mouseX <= width / 2) {
//hide star
starR = 255;
starG = 240;
starB = 154;
//star size
starW = 42 - mouseX / 10;
starH = 42 - mouseX / 10 + 2;
//sky color
skyR = 156;
skyG = 215;
skyB = 255;
//window color
winR = 255;
winG = 240;
winB = 154;
//sun
noStroke();
fill(255, 240, 154);
sunDia = map(mouseX, 0, 320, 30, 200);
ellipse(mouseX, height - mouseX - 40, sunDia, sunDia);

}

//haunted house black
noStroke();
fill(0);
beginShape();
vertex(270, 416);
vertex(253, 323);
vertex(242, 323);
vertex(269, 270);
vertex(245, 257);
vertex(235, 206);
vertex(251, 206);
vertex(254, 253);
vertex(273, 264);
vertex(284, 236);
vertex(325, 273);
vertex(324, 160);
vertex(315, 159);
vertex(333, 132);
vertex(350, 93);
vertex(354, 138);
vertex(367, 166);
vertex(358, 164);
vertex(370, 238);
vertex(375, 234);
vertex(384, 278);
vertex(353, 351);
vertex(324, 415);
endShape(CLOSE);

//haunted house color left chimney
noStroke();
fill(10, 24, 25);
beginShape();
vertex(251, 206);
vertex(254, 253);
vertex(273, 264);
vertex(275, 260);
vertex(262, 250);
vertex(266, 218);
endShape(CLOSE);

//haunted house color left roof side
noStroke();
fill(20, 53, 60);
beginShape();
vertex(335, 310);
vertex(398, 343);
vertex(389, 344);
vertex(320, 314);
endShape(CLOSE);

//haunted house color left wall
noStroke();
fill(39, 83, 94);
beginShape();
vertex(320, 314);
vertex(389, 344);
vertex(377, 420);
vertex(325, 415);
endShape(CLOSE);

//haunted house upper color roof
noStroke();
fill(10, 24, 25);
beginShape();
vertex(350, 93);
vertex(354, 138);
vertex(367, 166);
vertex(389, 176);
vertex(372, 129);
endShape(CLOSE);

//haunted house color upper roof side
noStroke();
fill(20, 53, 60);
beginShape();
vertex(367, 166);
vertex(389, 176);
vertex(379, 177);
vertex (357, 164);
endShape(CLOSE);

//haunted house color upper roof wall
noStroke();
fill(39, 83, 94);
beginShape();
vertex(370, 238);
vertex(353, 252);
vertex(358, 164);
vertex(378, 176);
endShape(CLOSE);

//haunted house color right roof
noStroke();
fill(10, 24, 25);
beginShape();
vertex(375, 234);
vertex(384, 278);
vertex(412, 306);
vertex(401, 273);
endShape(CLOSE);

//haunted house color right roof side
noStroke();
fill(20, 53, 60);
beginShape();
vertex(384, 278);
vertex(412, 306);
vertex(407, 308);
vertex(378, 278);
endShape(CLOSE);

//haunted house color right wall
noStroke();
fill(39, 83, 94);
beginShape();
vertex(407, 308);
vertex(378, 278);
vertex(366, 312);
vertex(390, 337);
endShape(CLOSE);

//haunted house color left roof
noStroke();
fill(10, 24, 25);
beginShape();
vertex(284, 236);
vertex(325, 273);
vertex(398, 343);
vertex(335, 310);
endShape(CLOSE);

//front ground
noStroke();
fill(0);
beginShape();
curveVertex(0, 640);
curveVertex(0, 360);
curveVertex(0, 360);
curveVertex(68, 400);
curveVertex(137, 412);
curveVertex(183, 423);
curveVertex(225, 413);
curveVertex(295, 410);
curveVertex(254, 413);
curveVertex(320, 410);
curveVertex(409, 423);
curveVertex(477, 403);
curveVertex(550, 400);
curveVertex(640, 425);
curveVertex(640, 480);
endShape(CLOSE);

//windows lights
noStroke();
fill(winR, winG, winB);
//left long
beginShape();
vertex(279, 329);
vertex(283, 364);
vertex(298, 362);
vertex(293, 331);
vertex(288, 324);
vertex(283, 324);
endShape(CLOSE);
//left ellipse
ellipse(289, 286, 18, 22);
//upper short
beginShape();
vertex(353, 272);
vertex(368, 277);
vertex(362, 293);
vertex(351, 286);
endShape(CLOSE);
//upper long
beginShape();
vertex(331, 205);
vertex(347, 207);
vertex(347, 172);
curveVertex(340, 166);
curveVertex(333, 171);
endShape(CLOSE);

//window frame
noFill();
stroke(0);
strokeWeight(1);
//upper long
line(333, 177, 348, 180);
line(331, 186, 348, 188);
line(332, 194, 349, 197);
line(339, 166, 339, 206);
//left long
line(279, 335, 294, 332);
line(281, 344, 296, 342);
line(280, 354, 296, 351);
line(284, 322, 292, 364);

//window no lights
noStroke();
fill(0);
//window 1
beginShape();
vertex(330, 323);
vertex(330, 340);
vertex(347, 348);
vertex(348, 334);
endShape(CLOSE);
//window 2
beginShape();
vertex(329, 362);
vertex(331, 376);
vertex(348, 382);
vertex(348, 368);
endShape(CLOSE);
//window 3
beginShape();
vertex(383, 293);
vertex(378, 305);
vertex(391, 317);
vertex(398, 308);
endShape(CLOSE);
//window 4
beginShape();
vertex(364, 172);
vertex(362, 205);
vertex(370, 207);
vertex(373, 182);
endShape(CLOSE);
//door outline
beginShape();
vertex(360, 370);
vertex(357, 450);
vertex(368, 450);
vertex(376, 377);
endShape(CLOSE);

//door window light
noStroke();
fill(winR, winG, winB);
beginShape();
vertex(363, 375);
vertex(363, 388);
vertex(371, 391);
vertex(371, 380);
endShape(CLOSE);

//upper chimney
noStroke();
fill(0);
beginShape();
vertex(356, 123);
vertex(365, 114);
vertex(368, 100);
vertex(365, 98);
vertex(376, 77);
vertex(380, 102);
vertex(376, 102);
vertex(373, 119);
vertex(363, 127);
endShape(CLOSE);
}``````

In this Dynamic Drawing project, I made a haunted house. I used color shades to add a 3D effect. By moving mouse left and right, the scene changes from night to morning. The moon and sun changes shape, location, and dimension, whereas the stars at night changes rotation speed and direction. The haunted house itself changes light color.