Author: Katherine

Katherine Hua – Project-07 – Curves

sketch

/* 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
    var radius;

// 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();
    radius = 200;
    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();
    radius = 30;
    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();
    radius = 30;
    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();
    radius = 10;
    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();
    radius = 10;
    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:

Spirited Away coal spirits

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.

Phantom Terrains: Data Visualization, Stefanie Posavec (2014)

Katherine Hua – Project-06 – Abstract Clock

sketch

/* 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.

Tools used for random composition in the Fontana mix

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.

“Time Machine” by Aleksandr Kuskov, 2012

Katherine Hua – Project-05 – Wallpaper

sketch

/* 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

sketch

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.

Sound modules with algorithms stored within them

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.

Using the joystick to navigate through the computational soundscapes

“Vektron Modular” by Niklas Roy, 2010

Katherine Hua – Project-03 – Dynamic Drawing

sketch

/* 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