Katherine Hua – Project-07 – Curves

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-07-Curves */

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

function draw() {

var r1 = map(mouseX, 0, width, 230, 250); // making variables to make the background dependent on mouseX or mouseY
var g1 = map(mouseY, 0, height, 220, 230);
var b1 = map(mouseX, 0, width, 225, 250);
background(r1, g1, b1); // setting background color
var nPoints = 200; // setting number of points on shape

// legs
strokeWeight(5);
bezier(random(195, 205), 320, 150, 320, 240, 400, random(165, 175), 400); // left leg
bezier(random(275, 285), 320, 320, 320, 240, 400, random(300, 310), 400); // right lelg

// body
strokeWeight(5);
fill(50, 50, 50);
push();
translate(width/2, height/2);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var a = map(mouseX, 0, 480, 90, 110); //body will change sizes based on position of mouseX
var n = map(mouseX, 0, 480, 40, 90);
var px = (a/n)*(((n-1)*cos(theta))-(cos((n-1)*theta)));
var py = (a/n)*(((n-1)*sin(theta))-(sin((n-1)*theta)));
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();

// eyes
strokeWeight(1);
fill(255);
nPoints = 10;
// whites of left eye
push();
translate(width/2 - 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// whites of right eye
push();
translate(width/2 + 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// pupil of left eye
fill(0);
nPoints = 4;
push();
translate(width/2 - 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();
// pupil of right eye
push();
translate(width/2 + 40, height/2 + 10);
beginShape();
for (var i = 0; i < nPoints; i++) {
var theta = map(i, 0, nPoints, 0, TWO_PI);
var px = radius * cos(theta);
var py = radius * sin(theta);
vertex(px + random(-5, 5), py + random(-5, 5));
} endShape(CLOSE);
pop();

//arms
noFill();
strokeWeight(5);
//making arms grabbing hand curve different depending if arms are reaching below or above the midpoint
if (mouseY > width/2) {
bezier(random(145, 155), 240, random(115, 125), 240, mouseX - 80, mouseY + 40, mouseX-50, mouseY-50); //left arm
bezier(random(325, 335), 240, 360, random(235, 245), mouseX + 80, mouseY - 40, mouseX+50, mouseY-50); //right arm
} else if (mouseY < width/2) {
bezier(150, 240, 120, 240, mouseX - 80, mouseY + 40, mouseX-50, mouseY+50); //left arm
bezier(330, 240, 360, 240, mouseX + 80, mouseY - 40, mouseX+50, mouseY+50);	//right arm
}

//star
rectMode(CENTER);
push();
translate(mouseX, mouseY); //star will follow position of the mouse
var r2 = map(mouseY, 0, height, 200, 230);
var g2 = map(mouseY, 0, height, 150, 180);
var b2 = map(mouseX, 0, width, 125, 175);
fill(r2, g2, b2);
stroke(r2, g2, b2);
rect(0, 0, 20, 20);
push();
rotate(PI/4);
rect(0,0, 20, 20);
pop();
pop();
}
``````

My design is based off of one of my favorite childhood movies, “Spirited Away.” The character I created is supposed to be one of the coal spirit (or soot ball). Below is an image of how they look like:

These sootballs are constantly moving and really like to eat these star candies so made a star candy follor the mouse and the sootball’s arms try to reach for the candy.

Katherine Hua – Looking Outwards-07 – Information Visualization

Stefanie Posavec is an information designer and data visualization designer based in London and focuses on data-related works. Her works of art depict non-traditional representations of data. In her Phantom Terrains project, she worked with Frank Swain and Daniel Jones to create a system that creates visualizations for wireless signals. Through specialized hearing aids, she was able to also convert wireless signals that surround us into sounds. The purpose of the project was to present a visual representation of the mass amount of streaming of wireless data surges that occurs in our everyday lives through internet exchanges and cellphone relays. I admire this information visualization project because amount of data that flows through has become a pervasive, yet invisible presence, and Posavec was able to develop a platform that makes us more aware of these data.

Katherine Hua – Project-06 – Abstract Clock

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-06-Abstract-Clock */

var prevSec;
var millisRolloverTime;

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

function draw() {
background(0); //setting background to black

var h = hour();
var m = minute();
var s = second();
var ms = millis();

if (prevSec != s) {
millisRolloverTime = millis();
}
prevSec = s;
var mils = floor(millis() - millisRolloverTime);

//creating lines marking the center of the circle
stroke(75);
strokeWeight(1);
line(240, 120, 240, 360);
line(120, 240, 360, 240);

//text
fill(255);
textAlign(CENTER); //centering text
text(nf(h, 2, 0) + ' : ' + nf(m, 2, 0) + ' : ' + nf(s, 2, 0), 240, 400); //using nf function to make numbers have two digits at all times

//creating the grey outlines of circles based on their width
for (var x = 0; x < 15; x++) {
noFill();
stroke(50);
strokeWeight(1);
ellipse(240, 240, x * 16, 240)
}

//creating the grey outline of circles based on their height
for (var y = 0; y < 15; y++) {
noFill();
stroke(50);
strokeWeight(1);
ellipse(240, 240, 240, y * 16);
}

//milliseconds - orange circle: height of circle changes with millisecond; hits full circle every second
var msHeight = map(mils, 0, 1000, -240, 240);
push();
stroke(238, 99, 43, 255);
strokeWeight(2);
noFill();
ellipse(240, 240, 240, msHeight);
pop();

//seconds - yellow circle: width of circle changes with second; hits full circle every minute
var sFrac = s + (mils / 1000.0);
var sWidth = map(sFrac, 0, 60, -240, 240);
push();
stroke(243, 205, 70, 255);
strokeWeight(2);
noFill();
ellipse(240, 240, sWidth, 240);
pop();

//minutes - pink circle: width of circle changes with minute; hits full circle every hour
var mFrac = m + (s / 60.0);
var mWidth = map(mFrac, 0, 60, -240, 240);
push();
stroke(224, 83, 152, 255);
strokeWeight(4);
noFill();
ellipse(240, 240, mWidth, 240);
pop();

//hours - purple circle: height of circle changes with every hour; hits full circle every 24 hours
var hFrac = h + (m / 60.0);
var hHeight = map(hFrac, 0, 24, -240, 240);
push();
stroke(112, 45, 156, 255);
strokeWeight(5);
noFill();
ellipse(240, 240, 240, hHeight);
pop();

}
``````

I wanted to create a clock that gives a more spacey-vibe to reflect time’s relationship with the movement of solar systems. I did this by creating the circular grid which can appear like longitude and latitude lines. Each moving element corresponds to its respective time (hour, minute, second, or millisecond). I was inspired by Min Lee’s design with how he used a circle of changing width so my design is based off of what I learned from him. I had a difficult time at first getting the movement of the circle right; it was not moving smoothly or would not complete a full turn. This project helped me familiarize myself more with how time can be utilized in coding.

Katherine Hua – Looking Outwards – 06

John Cage was an American music composer that paved the way for randomness in music. Many of his musical compositions explored theories of chance through methods such as implementing deliberate randomness processes in their productions. He wanted to challenge the nature of what sounds we expect to hear by expanding his compositions to comprise of unforeseen/unintended elements of sound.

In the score of his “Fontana Mix,” we will find 10 pages of paper and 12 transparencies of graphic notation of music with text made up of various languages and individual letters, 12 different lines of different colors, and 16 black squares representing different vocal sounds of different singing styles. Cage uses wavy/curvy lines with varying texture and thickness to indicate the different sounds within the mix. I admire John Cage’s work because he created a chance system to render unfixed compositional techniques (like an algorithm for indeterminacy) to utilize chance into his musical compositions.

“Fontana Mix” by John Cage (1958)

Katherine Hua – Looking Outwards – 05

The 3D computer graphics I chose is called “Time Machine” created by Aleksandr Kuskov. Alexander Kuskov is a digital artist and graphic designer from Ukraine. He specializes commercial production working as a freelance artist and CGI illustrator. I admire his work because he does not let reality hold him back and is able to create very realistic digital artworks that fits where his imagination brings him. Although not as visible in the graphic I chose here, much of what makes up his portfolio is filled with complicated, yet beautiful 3D graphics including fantasy lands, beasts, cars, etc. As can be seen from his “Time Machine” graphic, Kuskov pays a strong attention to detail. Most of his artwork has a focus on a futuristic, digitalized world.

Katherine Hua – Project-05 – Wallpaper

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

function setup() {
createCanvas(600, 600);
background(213, 233, 233);
noLoop();
}

function draw() {
var potatoOX = 70; // original x point of potato
var potatoOY = 80; // original y point of potato
var potatoW = 80; // width of potato
var potatoH = 100; // height of potato
var tw = 90;
var th = 110;

for (var y = 0; y < 5; y++) {
for (var x = 0; x < 6; x++) {
//POTATO
var potatoX = potatoOX + x * tw; // x position of following potatoes
var potatoY = potatoOY + y * th; // y position of following potatoes

//body
strokeWeight(1);
stroke(109, 90, 61);
fill(231, 193, 144);
ellipse(potatoX, potatoY, potatoW, potatoH);

//eyes
strokeWeight(4);
point(potatoX - 25, potatoY - 7);
point(potatoX + 2, potatoY - 7);

//right arm
strokeWeight(1);
beginShape();
curveVertex(potatoX + 2, potatoY + 10);
curveVertex(potatoX + 2, potatoY + 10);
curveVertex(potatoX - 5, potatoY + 11);
curveVertex(potatoX - 10, potatoY + 15);
curveVertex(potatoX - 7, potatoY + 20);
curveVertex(potatoX + 5, potatoY + 20);
curveVertex(potatoX + 5, potatoY + 20);
endShape();

//left arm
beginShape();
curveVertex(potatoX - 5, potatoY + 10);
curveVertex(potatoX - 25, potatoY + 10);
curveVertex(potatoX - 18, potatoY + 11);
curveVertex(potatoX - 13, potatoY + 15);
curveVertex(potatoX - 16, potatoY + 20);
curveVertex(potatoX - 24, potatoY + 20);
curveVertex(potatoX - 24, potatoY + 20);
endShape();

//left foot
beginShape();
curveVertex(potatoX - 20, potatoY + 30);
curveVertex(potatoX - 20, potatoY + 30);
curveVertex(potatoX - 27, potatoY + 31);
curveVertex(potatoX - 32, potatoY + 35);
curveVertex(potatoX - 29, potatoY + 40);
curveVertex(potatoX - 17, potatoY + 40);
curveVertex(potatoX - 17, potatoY + 40);
endShape();

//right foot
beginShape();
curveVertex(potatoX + 10, potatoY + 30);
curveVertex(potatoX + 10, potatoY + 30);
curveVertex(potatoX + 3, potatoY + 31);
curveVertex(potatoX - 2, potatoY + 35);
curveVertex(potatoX + 1, potatoY + 40);
curveVertex(potatoX + 13, potatoY + 40);
curveVertex(potatoX + 13, potatoY + 40);
endShape();

//mouth
fill(246, 232, 226);
ellipse(potatoX - 12, potatoY - 3, 12, 6);

}
}
}

``````

I wanted to recreate one of my stuffed animals. It is so cute. I wish I could have given him a friend in my design, but I ran out of time. Through this project, I familiarized myself more with how to use curveVertex functions to create shapes such as the arms and the legs. Although they are small parts of the character I created, it took a while to get the curves and coordinates right. I can see this design being on phone cases, pencil pouches, stickers, digital backgrounds, etc. Below is a sketch of what I based my wallpaper’s character off of.

Katherine Hua – Project 04 – String Art

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

}

function draw() {
background(0);

//creating variables for starting point of lines (indicated by 1) and the ending points of the line (indicated by 2)
var x1;
var y1;
var x2;
var y2;

//creating the two circles in the center
noStroke();
fill(232, 140, 114);
ellipse(175, 125, 90, 90) //orange circle

//creating the black lines going through the orange circle
x1 = 70
y1 = 85;
x2 = 200;
y2 = 85

strokeWeight(6);
stroke(0);
for (i = 1; i < 10; i++) {
line(x1, y1, x2, y2);
y1 += 10 //the height of starting point is moving down
y2 += 10 //height of the ending point is moving down as well
x2 -= 10 // line is getting shorter with each iteration
}

noStroke();
fill(200, 42, 35);
ellipse(200, 150, 75, 75); // red circle

// creating the white lines crossing through the center
strokeWeight(1);
stroke(255, 255, 255);
x1 = 0;
y1 = 0;
x2 = 400;
y2 = 300;
for (i = 0; i < 41; i ++) {
line(x1, y1, x2, y2);
x1 += 10;
x2 -= 10;
}

//pink
stroke(246, 159, 255);
x1 = 400
y1 = 0
x2 = 0
y2 = 0
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
x1 -= 5;
y2 += 5;
}
//green
stroke(27,178, 141);
x1 = 400;
y1 = 0;
x2 = 400;
y2 = 300;
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 += 5;
x2 -= 5;
}
//yellow
stroke(232, 214, 114);
x1 = 0;
y1 = 0;
x2 = 0;
y2 = 300;
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 += 5;
x2 += 5;
}
//blue
stroke(150, 173, 255);
x1 = 400
y1 = 300
x2 = 400
y2 = 0
for (i = 0; i < 81; i ++) {
line(x1, y1, x2, y2);
y1 -= 5;
x2 -= 5;
}

}
``````

I wanted to create an abstract version of the sunsets I often see back home in LA. Because of the pollution that surrounds the city, the sunsets that overlooks the city is very colorful.

Katherine Hua – Looking Outwards-04

Niklas Roy created a generative sound synthesizer in 2010 that he named “Vektron Modular” that acts as a pocket sound performer.  It is a playback machine in which compositions are stored on microcontroller modules. The compositions can then be played. The modules in this are programmed so that the device is able to produce sound through algorithms stored within the modules. This sound synthesizer device interface was inspired by the PlayStation controllers.

Through this algorithmic synthesizer, Niklas Roy is able to explore the binary structures within music and compare different rhythmic patterns and number systems for counting the beat. The user of the synthesizer can alter the parameters of the algorithm producing the sound by moving the joystick around. I think this project of his really peaked my interest because of how there is a visual experience that reflect the movements of the sound through computational algorithms.

“Vektron Modular” by Niklas Roy, 2010

Katherine Hua – Project-03 – Dynamic Drawing

``````/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-03-Drawing Variables*/

var x = 0;
var y = 0;

var width1 = 50;
var height1 = 50;
var width2 = 150;
var height2 = 150;
var width3 = 400;
var height3 = 400;

var xRGB = 255/600
var yRGB = 255/600

function setup() {
createCanvas(600, 600);
background(0);
}

function draw() {
background(0);
rectMode(CENTER); //making it so that the x,y indicates the center of the rectangle instead of the top left corner
angleMode(DEGREES); //changing mode from radians to angles
translate(300, 300); // the elements will rotate with this point acting as the center

var squarerotatemap = map(mouseX, 0, width, 0, 360); //mouseX will control the movement of the spinning elements

//inner
noFill();
strokeWeight(1);

stroke(abs(mouseX-mouseY) * yRGB, mouseY * yRGB, mouseX * xRGB); //color will change based on mouse position on canvas

// the following are drawing squares rotates at different angles that are spinning depending on the mouse position
push();
rotate(0 + squarerotatemap);
rect(x, y, mouseX/12, mouseY/12); //mouseX controls the size of the square

push();
rotate(30);
rect(x, y, mouseX/12, mouseY/12);
pop();

push();
rotate(60);
rect(x, y, mouseX/12, mouseY/12);
pop();

push();
rotate(90);
rect(x, y, mouseX/12, mouseY/12);
pop();

push();
rotate(120);
rect(x, y, mouseX/12, mouseY/12);
pop();

push();
rotate(150);
rect(x, y, mouseX/12, mouseY/12);
pop();

//middle1
stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

rotate(0+ squarerotatemap);
rect(x, y, mouseX/4, mouseY/4);

push();
rotate(15);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(30);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(45);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(60);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(75);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(90);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(105);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(120);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(135);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(150);
rect(x, y, mouseX/4, mouseY/4);
pop();

push();
rotate(165);
rect(x, y, mouseX/4, mouseY/4);
pop();

//outer
stroke(mouseX * yRGB, mouseY * xRGB, abs(mouseX-mouseY)* xRGB);

rotate(0 + squarerotatemap);
rect(x, y, mouseX/2, mouseY/2);

push();
rotate(15);
rect(x, y, mouseX/2, mouseY/2);
pop();

push();
rotate(30);
rect(x, y, mouseX/2, mouseY/2);
pop();

push();
rotate(45);
rect(x, y, mouseX/2, mouseY/2);
pop();

push();
rotate(60);
rect(x, y, mouseX/2, mouseY/2);
pop();

push();
rotate(75);
rect(x, y, mouseX/2, mouseY/2);
pop();

//outerouter

stroke(abs(mouseX-mouseY) * yRGB, mouseX * yRGB, mouseX * xRGB);

rotate(0 + squarerotatemap);
rect(x, y, mouseX, mouseY);

push();
rotate(105);
rect(x, y, mouseX, mouseY);
pop();

push();
rotate(120);
rect(x, y, mouseX, mouseY);
pop();

push();
rotate(135);
rect(x, y, mouseX, mouseY);
pop();

push();
rotate(150);
rect(x, y, mouseX, mouseY);
pop();

push();
rotate(165);
rect(x, y, mouseX, mouseY);
pop();

//inner
noFill();
strokeWeight(1);
stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

push();
rotate(0 + squarerotatemap);
rect(x, y, 300-mouseX/10, 300-mouseY/10);

push();
rotate(30);
rect(x, y, 300-mouseX/10, 300-mouseY/10);
pop();

push();
rotate(60);
rect(x, y, 300-mouseX/10, 300-mouseY/10);
pop();

push();
rotate(90);
rect(x, y, 300-mouseX/10, 300-mouseY/10);
pop();

push();
rotate(120);
rect(x, y, 300-mouseX/10, 300-mouseY/10);
pop();

push();
rotate(150);
rect(x, y, 300-mouseX/10, 300-mouseY/10);
pop();

//middle
stroke(mouseX * xRGB, abs(mouseX-mouseY)* xRGB, mouseY * yRGB);

rotate(0+ squarerotatemap);
rect(x, y, mouseX/3, mouseY/3);

push();
rotate(15);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(30);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(45);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(60);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(75);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(90);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(105);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(120);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(135);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(150);
rect(x, y, mouseX/3, mouseY/3);
pop();

push();
rotate(165);
rect(x, y, mouseX/3, mouseY/3);
pop();
}
``````

My design is meant to look like as if you’re looking into a kaleidoscope. This project really helped me get more familiar with understanding how variables work and how the mouse position can work in relation to other elements of the design.

Katherine Hua – Looking Outwards – 03

Singapore’s Jewel Changi Airport features an art installation called “Kinetic Rain” created by German design house ART+COM. The installation is meant to offer a calming effect in the busy Singapore airport terminal. This visual experience of fluidity, distinctive shapes, elegant and refined movements was brought to life through parametric computational algorithms and digital fabrication. Kinetic Rain is made of up more than a thousand bronze droplets attached to the ceiling through steel wires. The steel wires are connected to a computer program that can control how the bronze droplets rise and fall. The computer designed movement creates slow, fluid to create refined yet simple shapes, from abstract to three-dimensional forms. I admire how this art installation was able to use parametric digital design and parametric fabrication methods to explore the how the computer can be used to be more than just a tool. The creator’s of artistic sensibilities are reflected in Kinetic Rain as they use computers as an artistic medium that explores the technological and scientific aspects.

Kinetic Rain by ART+COM, 2012