## Katherine Hua and Min Lee – Final Project

``````/*
Katherine Hua, Min Lee
Section A
khua@andrew.cmu.edu, mslee@andrew.cmu.edu
Final Project
*/

var characters = []; // images of the characters are loaded into this array
var mushroom; // image of mushroom that represents # of lives left is loaded into this variable
var cloud; // image of cloud is loaded into this variable
var cloudsX = []; //cloud's randomized x positions will be loaded into this array
var cloudsY = []; //cloud's randomized y positions will be loaded into this array
var cloudsSpeed = []; // cloud's randomized speed will be loaded into this array

var gameMode = 0; // determines which screen you see; title screen = 0, game = 1, game over = 2, instructions = 3
var lives = 3; // you start out with 3 lives
var score = 0; // you begin with a score of 0

var characterIndex; //assigns a number value to a character
var pipeNumber; // //assigns each pipe a number value
var characterX; //keeps track of the character's X values
var characterY = 180; //keeps track of the character's Y values
var characterSpeed = -3; // //keeps track of the character's speed
var pipesOccupied; //the pipe number that's occupied by a character
var newIndex; //new number value assigned to character

var characterImages = [];
mushroom = loadImage("https://i.imgur.com/V1vjvug.png"); //mushroom that is meant to represent # of lives
cloud = loadImage("https://i.imgur.com/7PCTEzk.png"); //clouds that will be floating by in the background
characterImages[0] = "https://i.imgur.com/Bf9U7OE.png"; //mario
characterImages[1] = "https://i.imgur.com/s7o5h2m.png"; //peach
characterImages[3] = "https://i.imgur.com/0bcsmDZ.png"; //bowser
characterImages[4] = "https://i.imgur.com/Wv9Dkzj.png"; //wario
characterImages[5] = "https://i.imgur.com/AkWIiIw.png"; //boo

//initial cloud positions
for (var i = 0; i < 4; i++) {
//setting the clouds to random initial positions
cloudsX[i] = width + i * 50;
cloudsY[i] = random(0, 130);
cloudsSpeed[i] = random(0.25, 1); // moving the clouds at a randomized speed between 0.25 and 1
};

//load images of characters into characters array
//allows for object to change characters

}

function setup() {
createCanvas(600, 400);
//random positions of character
pipeNumber = round(random(0, 5)); //randomly chooses which pipe the character will appear at
pipesOccupied = pipeNumber; //corresponding pipe number
characterX = width / 7 * (pipeNumber + 1) + 60; //character's x position that will determine their corresponding pipe
characterIndex = round(random(0, 5)); //randomly chooses which character will appear
}

function draw() {
background(21, 30, 99); // setting background to the blue
//creating the clouds; just loading the image onto the canvas; they do not move here yet
for (var i = 0; i < 4; i++) {
image(cloud, cloudsX[i], cloudsY[i]);
};

displayHill(); // creating the hill landscape moving in the background

//part of the Title Screen
//images of characters spread out across title screen
if (gameMode === 0) {
for (var x = 0; x < 6; x++) {
image(characters[x], (width/7 * (x+1)) - (width / 7 / 2) + 10, 110);
}
}

gameScreen(); // this is the actual game
displayChutes(); // creates the green chutes/pipes
displayGround(); // creates the criss-crossed red brick ground
titleScreen(); // this is the starting, default screen
drawScoreTally(); // keeps track of the score in gameScreen and gameOverScreen
instructionsScreen(); // instructions screen
displayButtons(); // creates the buttons in the actual game part
gameOverScreen(); // the game over screen after you lose all your lices

//clouds are made to move here at randomized speeds
for (var i = 0; i < cloudsX.length; i++) {
cloudsX[i] -= cloudsSpeed[i];
if (cloudsX[i] < -60) {
cloudsX[i] = width;
};
};
}

function drawScoreTally() {
if (gameMode === 1) { // we only want this visual element to appear in the gameScreen
push();
//making the yellow rectangle where the score will be kept
fill(181, 141, 38);
strokeWeight(2);
stroke(255, 229, 163);
rectMode(CENTER);
rect(width / 2, 35, 70, 20, 3);
noStroke();
//adding the actual text on top of the rectangle
fill(255,229, 163);
textAlign(CENTER);
text("Score:" + " " + score, width / 2, 40)
//text saying that if user wishes to restart the game at any point, the user can just press the key 'x' to restart the game
text("Press 'x' to restart game", width/2, 60);
pop();
};
}

//creating the generative hill landscape in the background of the game
function displayHill() {
var hill = 0.006
var hillSec = 0.0007;
push();
stroke(25, 83, 19);
beginShape();
for (i = 0; i < width; i ++) {
var h = (millis() * hillSec) + (i * hill);
var y = map(noise(h), 0, 1, 200, 100);
line(i, y, i, height);
}
endShape();
pop();
}
// creating the brick ground
function displayGround() {
push();
strokeWeight(2);
stroke(211, 71, 71);
fill(181, 38, 38);
rectMode(CORNER);
rect(0, 260, 600, 400-260);
for (var k = 0; k < 60; k ++) {
line(k * 10, 260, k * 10, 400);
line(0, 260 + k * 10, 600, 260 + k * 10);
}
pop();
}
//creating the green chutes/pipes
function displayChutes() {
if (gameMode === 0 || gameMode === 1 || gameMode === 3) { //we want the chutes/pipes to appear in all screens except the game over screen
push();
//creating 6 chutes/pipes
for (var j = 1; j < 7; j++) {
rectMode(CENTER); //drawing rectangles from the center rather than the corner
fill(43, 130, 58);
strokeWeight(3);
stroke(81, 163, 95);
rect((width/7) * j, 220, 65, 80, 2); //body of the chute
rect((width/7) * j, 200, 75, 40, 2); //head of the chute
strokeWeight(7);
//giving the pipes the highlight on their left side
line(55 + (width/7 * (j-1)), 186, 55 + (width/7 * (j-1)), 215);
line(60 + (width/7 * (j-1)), 225, 60 + (width/7 * (j-1)), 255);

}
pop();
}
}

function titleScreen() {
push();
if (gameMode === 0 || gameMode === 3) { // we want the title screen to appear in title screen and instructions screen
//creating title of the game: "Pipe it Up"
stroke(155, 115, 0);
strokeWeight(8);
fill(255, 203, 57);
textAlign(CENTER);
textSize(70);
textFont('arial')
text("PIPE IT UP", width / 2, (height / 3 * 2) + 60);
push();
//creating the two yellow buttons on bottom of screen
fill(155, 115, 0);
strokeWeight(2);
stroke(255, 230, 57);
rect(150, 350, 125, 35, 4); //left button
rect(325, 350, 125, 35, 4); // right button
textSize(15);
//creating the text on top of buttons
textFont('Arial');
strokeWeight(1);
stroke(255, 203, 57);
fill(255, 203, 57);
text("START GAME", 213, 373);
text("INSTRUCTIONS", 388, 373);
pop();
}
pop();

//changes cursor to hand when hovering over start button and instructions button
if (mouseX > 150 & mouseX < 275 && mouseY < 385 && mouseY > 350) {
cursor(HAND);
if (mouseIsPressed) {
gameMode = 1;
};
} else if (mouseX > 325 & mouseX < 450 && mouseY > 350 && mouseY < 385) {
cursor(HAND);
if (mouseIsPressed) {
gameMode = 3;
};
} else {
cursor(ARROW);
}
}

function instructionsScreen() {
if (gameMode === 3) {  //we only want the instructions screen to occur during instructions Screen time
push();
//creating an lowered opacity blanket of black across the title screen
fill(0, 0, 0, 200);
rect(0,0,600,400);
//title of the instructions screen: "Instructions"
textSize(30);
strokeWeight(1);
stroke(255, 188, 0);
fill(255, 188, 0);
textAlign(CENTER);
text("INSTRUCTIONS", width/2, 80);
//purpose of the game
fill(255);
strokeWeight(1);
stroke(255);
textSize(18);
text("Keep the Mushroom Kingdom safe!", width/2, 125);
//instructions of the game
textSize(15);
noStroke();
textAlign(LEFT);
text("There are 6 pipes leading into the kingdom, each one assigned to a button \n on your keyboard : S, D, F, J, K, L. \n \n It is your job as royal guard to delegate who enters and who does not. \n Unfortunately, some baddies will try to infiltrate the kingdom \n and make you lose your job. But luckily, with the tap of a button, \n you can immediately prevent them from entering. \n But be careful! Reject a civilian and you'll get a demerit. \n Three demerits is a disadulation.", 50, 160);
textAlign(CENTER);
strokeWeight(1);
stroke(255);
pop();
}
}

function gameScreen() {
if (gameMode === 1) {
//----------------------------- get random character to pop up at different location -------

//places character down
image(characters[characterIndex], characterX, characterY);
//if character reaches peak, move in opposite direction
if (characterY < 100) {
characterSpeed = characterSpeed * -1
//if character reaches bottom of the pipe, changes character randomly and goes to new pipe
} else if (characterY > 200) {
characterSpeed = characterSpeed * -1
characterIndex = round(random(0, 5))
pipesOccupied = round(random(0, 5))
characterX = width / 7 * (pipesOccupied) + 60
};
characterY += characterSpeed;

//draws lives as mushrooms
for (var i = 0; i < lives; i++) {
image(mushroom, 60 + (40 * i), 20)
};
//once lives reaches 0, game ends
if (lives === 0) {
gameMode = 2
};
}
}

function displayButtons() {
//draws each of the buttons
var txt = ["S", "D", "F", "J", "K", "L"];
if (gameMode === 1) {
push();
stroke(137, 144, 200);
strokeWeight(5);
//changing color of button if respective key is pressed
//if 's' key is pressed
if (keyIsPressed) {
if (key === 's') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width/7), height - height/7, 40, 40);
// if 'd' key is pressed
if (keyIsPressed) {
if (key === 'd') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 2, height - (height / 7), 40, 40);
// if 'f' key is pressed
if (keyIsPressed) {
if (key === 'f') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 3, height - (height / 7), 40, 40);
// if 'j' key is pressed
if (keyIsPressed) {
if (key === 'j') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 4, height - (height / 7), 40, 40);
// if 'k' key is pressed
if (keyIsPressed) {
if (key === 'k') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 5, height - (height / 7), 40, 40);
// if 'l' key is pressed
if (keyIsPressed) {
if (key === 'l') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 6, height - (height / 7), 40, 40);
// adding the text on top of the button
pop();
for (var j = 1; j < 7; j++) {
push();
fill(200, 184, 220);
noStroke();
textAlign(CENTER);
textSize(19);
text(txt[j - 1], (width / 7) * j , height - (height / 7) + 5);
pop();
}
}
}

function gameOverScreen() {
//press 'r' to restart
if (gameMode === 2) {
//title of the gameOverScreen: "game over"
push();
fill(11, 16, 90, 200);
rect(0, 0, 600, 400);
textSize(50);
fill(239, 0, 42);
strokeWeight(5);
stroke(145, 0, 26);
textAlign(CENTER);
text("GAME OVER", width/2, height/2 - 20);
textSize(30);
strokeWeight(2);
text("Score:" + " " + score, width/2, height/2 + 20);
//tells you how you can play again and restart the game
textSize(20);
strokeWeight(1);
fill(239, 0, 42);
text("Press 'r' to restart game", width/2, height/2 + 70);
pop();
};
}

function keyPressed() {
//if game hasn't started yet, press S to start
//if game started, press X to go to home screen
//if game over, press r to restart
if (gameMode === 1) {
if (key === 'x' || key === 'X') {
gameMode = 0;
level = 1;
score = 0;
// if character is bad guy, add point for pressing; else subtract life
//if character is good guy, subtract life for pressing and add point for not pressing
} else {
for (var i = 0; i < characters.length; i++) {
var keys = ["s", "d", "f", "j", "k", "l"]
if (pipesOccupied === i) {
//if good guy,
if (characterIndex === 0 || characterIndex === 1 || characterIndex === 2) {
if (key === keys[i]) {
lives -= 1
}
} else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 & key === keys[i]) {
score += 1
} else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 && key != keys[i]) {
lives -= 1
}
};
};
}
//GAMEOVER - press R to restart the game
} else if (gameMode === 2) {
if (key === 'r' || key === 'R') {
gameMode = 0;
level = 1;
score = 0;
lives = 3;
};
//INSTRUCTIONS - press X to go to title screen
} else if (gameMode === 3) {
if (key === 'x' || key === 'X') {
gameMode = 0;
};
};

}
``````

Instructions:

Keep the Mushroom Kingdom safe! There are 6 pipes leading into the Mushroom Kingdom and each one is assigned to a respective button on your keyboard : S, D, F, J, K, L. It is your job as a royal guard of the kingdom to delegate who is able to enter and who is not. Unfortunately, some villains will try to infiltrate the kingdom and make you lose your job. Luckily, with the tap of a button, you can immediately prevent them from entering. But be careful! Reject a civilian and you’ll lose a demerit (life). “Three demerits is a disadulation” – Jim  Halpert from The Office. haha

Statements:

What we have produced for our final project is a completely different direction than what we had proposed to do in our Proposal. After lots of thought, we decided to change the topic of our final project because we believed this was something that could best reflect our creativity and have a more set goal (and also in celebration of Nintendo’s release of Super Smash Bros Ultimate today).

In regards to the distribution of work, Min and I worked in person together throughout the whole process. In the beginning, we would just sit next to each other, create a visual element, and then come together to merge whatever the two of us came up with. After the visual aspects were basically all done and we had to get to the interactive component of the game, that is when things started to get a little more difficult. We had to communicate a lot and constantly merge our codes to make sure that we are using the same variables, going towards the same direction, and following the same general train of thought. In the end, I focused more on the game design and structure while Min focused more on gameplay and functionality.

In the beginning, we had wanted characters to be coming out of all six chutes randomly, but at all times. But, we couldn’t figure out how to prevent characters from appearing in pipes that another character already occupies. So, we shifted our goals to stick to one pipe. We also could not figure out how to debug our code so that if no key is pressed to capture a “bad” character, a life is lost, or vice versa, if no key is pressed to let a “good character remain free, points are added to the score. However other than those two problems, the rest of the game came out quite successfully.

## Katherine Hua – Project-12 – Proposal

With my proposed collaborator, Min Lee (mslee) from Section A, we are going to make an interactive visual representation of a song (yet to be decided). We want a song that gives off a peaceful and dreary vibe. The visual part will be of a visual sound spectrum based off the wavelengths of the sound that is set in the middle of the canvas. The spectrum will be made up of small circles of varying colors that are constantly drowned out by the background (to give it a look of lagging behind to further reinforce the dreary and peaceful vibe intended). For the interactive component, we wanted to create layers of sound. We will find the individual instruments that come together to make up the song (flute, percussion, voice, etc.). This representation will start off with just one layer (one instrument). With each click of the mouse, a layer of sound will be added. With each layer of sound, a layer of color will be added to the visual representation as well. So we were thinking of having the circles having lower opacities so that different colored circles could come together to form new colors. Of course this means we need to choose appropriate colors that will make actually pretty colors. Below is a quick sketch of what we expect our project to look like.

## Katherine Hua – Looking Outwards – 12

“Funky Forest” by Theo Watson and Emily Gobeille (2007)

The first project that I admire is called Funky Forest, created by Emily Gobeille and Theo Watson, creators of high-end interactive installations for children. Funky Forest is an art installation in the Singapore Art Museum acting as an interactive ecosystem in which children can bring trees to life through their bodies and use physical logs to control the flow of water from the waterfall to the trees. The children use this water to water the trees and keep them alive. The health of the forest and everything that resides within it relies on the basic health of the trees. Funky Forest is an interactive and collaborative experience for children to create their own stories and go on their own fantastical adventures. I enjoy this project because it places an emphasis on meaningful interaction and systems build to support open play and discovery while creating a sense of wonder and delight at the same time.
The second project that I admire is the projects of Lorna Barnshaw, a virtual/glitch sculptor. She uses 3D technology to print three very different sculptors, using herself as her model. In her series called Replicants, Barnshaw fuses self portraiture with 3D technology to create sculptures that give off an eerily, sub-human feel to them as Barnshaw uses computer glitches to that are unable to accurately 3D print the scan; thus resulting in a sculpture with humanistic qualities that are distorted at the same time. I admire this project because it finds a platform for fine arts in an area where 3D technology is revolutionizing science, medical, and design worlds.

## Katherine Hua – Project 11 – Composition

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-11-Composition */

//global variables
var ttl1;
var ttl2;
var ttl3;
var ttl4;
var ttl5;

function setup() {
createCanvas(480, 480);
background(35);
//starting positions of turtle
ttl1 = makeTurtle(267, 302);
ttl2 = makeTurtle(260, 280);
ttl3 = makeTurtle(280, 407);
ttl4 = makeTurtle(267, 277);
ttl5 = makeTurtle(278, 360);
strokeCap(PROJECT);
strokeJoin(MITER);
frameRate(1);
}

function draw() {
//turtle 5
ttl5.setColor('skyblue');
ttl5.setWeight(1);
for (var n = 0; n < 10; n ++) {
ttl5.forward(30);
ttl5.left(55);
ttl5.forward(50);
ttl5.right(15);
if (n % 9 === 0) {
ttl5.forward(3);
}
}
//turtle 1
ttl1.setColor('pink');
ttl1.setWeight(1);
for (var i = 0; i < 20; i ++) {
ttl1.forward(70);
ttl1.left(120);
ttl1.forward(100);
ttl1.right(10);
}
//turtle 3
ttl3.setColor('yellow');
ttl3.setWeight(1);
for (var k = 0; k < 10; k ++) {
ttl3.forward(50);
ttl3.left(55);
ttl3.forward(60);
ttl3.right(15);
if (k % 9 === 0) {
ttl3.forward(5);
}
}
// turtle 4
ttl4.setColor('orange', 20);
ttl4.setWeight(1);
for (var m = 0; m < 10; m ++) {
ttl4.forward(20);
ttl4.left(110);
ttl4.forward(50);
ttl4.right(15);
}
//turtle 2
ttl2.setColor('skyblue');
ttl2.setWeight(1);
for (var j = 0; j < 10; j ++) {
ttl2.forward(1);
ttl2.left(55);
ttl2.forward(10);
ttl2.right(15);
if (j % 9 === 0) {
ttl2.forward(5);
}
}

}

function turtleLeft(d){this.angle-=d;}function turtleRight(d){this.angle+=d;}
this.forward(-p);}function turtlePenDown(){this.penIsDown=true;}
function turtlePenUp(){this.penIsDown = false;}function turtleGoTo(x,y){
if(this.penIsDown){stroke(this.color);strokeWeight(this.weight);
line(this.x,this.y,x,y);}this.x = x;this.y = y;}function turtleDistTo(x,y){
return sqrt(sq(this.x-x)+sq(this.y-y));}function turtleAngleTo(x,y){
var absAngle=degrees(atan2(y-this.y,x-this.x));
var angle=((absAngle-this.angle)+360)%360.0;return angle;}
function turtleTurnToward(x,y,d){var angle = this.angleTo(x,y);if(angle< 180){
this.angle+=d;}else{this.angle-=d;}}function turtleSetColor(c){this.color=c;}
function turtleSetWeight(w){this.weight=w;}function turtleFace(angle){
this.angle = angle;}function makeTurtle(tx,ty){var turtle={x:tx,y:ty,
angle:0.0,penIsDown:true,color:color(128),weight:1,left:turtleLeft,
right:turtleRight,forward:turtleForward, back:turtleBack,penDown:turtlePenDown,
penUp:turtlePenUp,goto:turtleGoTo, angleto:turtleAngleTo,
turnToward:turtleTurnToward,distanceTo:turtleDistTo, angleTo:turtleAngleTo,
setColor:turtleSetColor, setWeight:turtleSetWeight,face:turtleFace};
return turtle;}``````

At first I wanted to create a sunflower through this, but in the end I got carried away and began adding more and more layers to the design.

## Katherine Hua – Looking Outwards – 11

“NightFall” by Mileece (2003)

Mileece Petre is an English sound artist and environmental designer who makes generative and interactive through plants. Believing that plants are sentient beings, she is able to have plants create music by attaching electrodes to them. The data collected from an electromagnetic currents are sent to amplifiers and the amplifiers sends this data which is translated into codes, and the codes are then input into software that creates musical notes out of them.

I admire this project because even though a single plant creates minimal sound, if she attaches electrodes to all plants in a garden, it sounds like an orchestra’s symphony. Also, the type of music the plants come together to make sound very soft and peaceful, reflecting the organic and subtleness of plants. Furthermore, she is able to create a platform in which people can be more connected to nature, helping her passion for the environment.

## Katherine Hua – Project-10 – Landscape

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-10-Landscape */

var chutes = [];

}

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

// create an initial collection of chutes
for (var i = 0; i < 10; i++){
var cx = random(width);
chutes[i] = makeChute(cx);
}
frameRate(10);
}

function draw() {
background(108, 130, 238);
displayHill();
displayGround();

updateAndDisplayChutes();
removeChutes();

imageMode(CENTER);
image(mario, 50, 330 + random(0, 30));
}

function updateAndDisplayChutes(){
// Update the chute's positions, and display them.
for (var i = 0; i < chutes.length; i++){
chutes[i].move();
chutes[i].display();
}
}

function removeChutes(){
var chutesToKeep = [];
for (var i = 0; i < chutes.length; i++){
if (chutes[i].x + chutes[i].breadth > 0) {
chutesToKeep.push(chutes[i]);
}
}
chutes = chutesToKeep; // remember the surviving chutes
}

// add a new chute to the end based on the probability
var newChuteLikelihood = 0.03;
if (random(0,1) < newChuteLikelihood) {
chutes.push(makeChute(width));
}
}

// method to update position of building every frame
function chuteMove() {
this.x += this.speed;
}

// draw the building and some windows
function chuteDisplay() {
var floorHeight = 45;
var bHeight = floorHeight;
//making the chutes
push();
translate(this.x, height - 40);
strokeWeight(2);
fill(147, 198, 63);
stroke(46, 104,28);
rect(0, -bHeight - 61, 40, bHeight); // chute body
rect(-5, -bHeight - 81, 50, 20); // chute head
//clouds
fill(255, 70);
noStroke();
ellipse(0, -bHeight - 300, 100, 50);
ellipse(10, -bHeight - 290, 90, 60);
ellipse(20, -bHeight - 320, 110, 70);
//mystery boxes
fill(233, 159, 87);
strokeWeight(2);
stroke(148, 85, 47);
textSize(16);
rect(50, -bHeight - 150, 30, 30);
text('?', 60, -bHeight - 130);

pop();
}

function makeChute(birthLocationX) {
var cht = {x: birthLocationX,
speed: -6.0,
nFloors: round(random(3,6)),
move: chuteMove,
display: chuteDisplay}
return cht;
}
//making the green hill in the background
function displayHill() {
var hill = 0.006
var hillSec = 0.0007;
stroke(71, 153, 44);
beginShape();
for (i = 0; i < width; i ++) {
var h = (millis() * hillSec) + (i * hill);
var y = map(noise(h), 0, 1, 300, 200);
line(i, y, i, height);
}
endShape();
}
//making the brick ground
function displayGround(){
strokeWeight(2);
stroke(136, 49, 27);
fill(196, 83, 53);
rect(0, 380, 480, 100);
for (var j = 0; j < 50; j ++) {
line(j * 10, 380, j * 10, 480);
line(0, 380 + j * 10, 480, 380 + j * 10);
}
}``````

I decided to my project based off of Super Mario Bros video game. I had trouble with figuring out how to make the chutes create new ones when the new screen comes by. Eventually I figured out if I increased the probability that a new chute is drawn, more will be drawn in the next screen. I also struggled with controlling the number of the chutes and couldn’t figure out how to make them not overlap each other.

## Katherine Hua – Looking Outwards – 10

Sophia Kahn is an Australian new media artist currently living in Brooklyn, New York. She earned her BA in Fine Arts and History Goldsmith College, University of London; a Graduate Certificate in Spatial Information Architecture from RMIT University, Melbourne; and an MFA in Art and Technology Studies at the School of the Art Institute of Chicago.

She creates illustrations and videos but the main focus of her work is creating sculptures through 3D printing.She uses a precisely engineered 3D last scanner to design the body of her sculpture. When scanning, the human body is constantly moving, so the scanner receives conflicting spatial coordinates, thereby creating a glitch. This glitch is what gives her sculptures the fragmented, deconstructed appearance. She takes this scan of damaged data and re-envisions it onto a different a canvas: prints, video, hand-painted, or 3D printed sculptures.

I admire her work because her 3D printed sculptures reflects ideas of deconstruction as she blurs the lines between old and new media, digital and physical realms, and interior and exterior spaces. Her work seems to dive into the haunting challenges of time, history, and identity. They seem to resonate the idea that death is inevitable as her pieces are fragmented, giving reminders of decay and aging.

## Katherine Hua – Looking Outwards-09

I really liked Min Lee’s looking outwards blog post on this project called Skyline. Skyline is a code-based generative music video that uses Voronoi tessellation. Skyline’s systems have seeds that are categorized into different types of agents that represent a certain behavior or trigger transformations in appearance. The song’s audio spectrum or the animation sequence of the artist acts as the driver of these motions, creating beautiful patterns that come together to make a complex visual conclusion. I agree with how Min that this project is amazing in the way that the artist was able to create a visual representation of musical behavior through patterns of geometric shapes and inkblot-like figures. I’d like to add that I think it’s very interesting that throughout this music video, the shapes come together to form a figure of the vocalist or the face of the vocalist while the visual elements are moving with the sound of the instrumentals.

## Katherine Hua – Project-09 – Portraits

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-09-Portrait */

var klaire;
var x;
var y;
var dx;
var dy;
var color;

}

function setup() {
createCanvas(500, 500);
background(42, 57, 70);
frameRate(500); //making it draw faster
x = random(width); //randomizing x between constraints of width
y = random(height); //randomizing y between constraints of height
dx = random(-1,1); //randomizing direction
dy = random(-1,1); //randomizing direction
}

function draw() {
var ix = constrain(floor(x), 0, width-1);
var iy = constrain(floor(y), 0, height-1);
color = klaire.get(ix, iy); //getting pixel color according pixel position in comparison to pixel in image
fill(color); //making color at this pixel position the same color as in the image's pixel position
textSize(10);

x += dx * 5 ;
y += dy * 5  ;
//when the word "loading" hits the edge of the canvas, direction is changed randomly
if (x > width || x < 0) {
dx = -dx;
dy = random(-1, 1);
}
if (y > height || y < 10) {
dy = -dy;
dx = random(-1, 1);
}

}``````

For this project, I chose my portrait to be of my twin sister, Klaire (because I miss her). She goes to school on the west coast in California, so the only times we can see each other now are breaks. I chose to use text to create compute the portrait of her. I like how when all the text builds up, it begins to look like strokes of paint instead of text.

This is what is looks like at the very beginning. The text “loading” is drawn randomly across the canvas. Each time it hits a wall, it will change direction at a random angle and speed.

As more and more build on top of each other, the image starts coming together to create this.

This is the original portrait of Klaire. <3

## Katherine Hua – Looking Outwards – 08

Manuel Lima is a Portuguese-born designer with a leading voice on network visualization, studying how information can be organized and creates beautiful and complex diagrams. Lima has been recognized as a Fellow of the Royal Society of Arts and is named to be one of the “most creative and influential minds of 2009” by Creativity magazine. He is also the founder of VisualComplexity.com which is a visual exploration on mapping complex networks, a showcase for the intersection of art, design, and science. I admire Lima’s work because his work is explores new ways to visualize information as the world moves on from relying on hierarchical trees into and moves into networks as a platform to illustrate and map the complexities of the world.

My favorite project of his is VisualComplexity  because it is a unified resource space that aims to leverage a critical understanding of different data visualization methods. When presenting his work, he begins with giving background and an understanding of his motivation behind his project before diving into the projects he has accomplished. By doing so, he shows what makes his work important and why his audience should pay attention to it. Manuel  Lima’s website can be found here.