## Joanne Lee – Looking Outward 06

James White created a program called Forge, which helps White to create art pieces where many elements are out of his control. I admired that not only did he want to create random art, but he also created a program / tool to help himself and other artists do the same. He stated that, “The program forces me to allow elements to react unto themselves.” I think as an artist, you usually want to be in control of every element and it is interesting that he wanted to help himself let go more.

Although I am not sure how the algorithm runs, I am assuming that he is able to input certain general shapes or patterns he likes and the program is able to iterate them in different sizes, colors, and positions randomly. The artist still has control in the sense that they are able to decide what sorts of shapes and patterns are in the artwork, however, must let go in order to get the full effect of randomness. By using a program to aid him, it is truly random since humans struggle to make random choices. The result is a beautiful piece of art and it seems like White has modified the image afterwards adding fade effects, etc. I admire that he created his own program to aid his work.

## Joanne Lee – Project 06

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-06

var skyR = 135;
var skyG = 206;
var skyB = 235;
var grassR = 206;
var grassG = 229;
var grassB = 178;

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

function draw() {

// hour hand -- represented by background colors // 12 hr clock
var h = hour() % 12;
noStroke();
background(skyR - 10 * h, skyG - 20 * h, skyB - 20 * h); // sky --> darkens every 12 hours
fill(grassR - 30 * h, grassG - 50 * h, grassB - 20 * h, 99); // darkens every 12 hours
triangle(0, height * 0.75, 0, height, 1500, height); // plain 1
triangle(width, height * 0.55, width, height, -1500, height); // plain 2

// minute hand -- represented by the sun position
var m = minute() / 60;

push();
noStroke();
if (m < 0.25 || m > 0.75) { // make opaque when not in sky
fill(255, 200, 100, 50);
}
else {
fill(255, 200, 100);
}
translate(width / 2, height / 2);
ellipse(0, 200, 60, 60);
pop();

// second hand -- represented by the clouds
var s = second() / 60;
var x1 = -80; // x-values to keep cloud off screen, keeping continuous movement
var x2 = -120;
var x3 = -40;
var shift = (width+160) * s; // move across screen proportionally

push();
noStroke();
fill(255);
ellipse(x1 + shift, 110, 120, 65);
ellipse(x2 + shift, 110, 90, 45);
ellipse(x3 + shift, 116, 100, 40);
pop();
}``````

Going into the project, I knew I wanted to make use of background color changes as well as real elements on the screen moving (i.e. cloud, sun).

The hour hand is denoted by the change in sky / grass color. Over the progression of 12 hours, the sky and grass becomes darker in color. I chose to do a 12 hour clock because I wanted the hour hand differences to be more apparent. The minute hand is denoted by the position of the sun. As you can see in my sketch below, I originally intended for the sun to go off screen, but I wanted it to be more clear what the current minutes were. Therefore, I decided to keep it on the screen and make it more opaque as to not draw too much attention through the grass. And finally, the seconds are denoted by the pace of the cloud moving across the screen in what appears to be a continuous loop. I personally found this project to be one of the most interesting projects to work on so far.

## Joanne Lee – Looking Outward 05

Andrew Williams, better known as Gohmn, creates surreal and detailed 3D worlds by using Cinema4D, Octane Render, and Photoshop. He gets his inspiration from daily art makers that he follows on platforms like Instagram, Tumblr, and Ello. His real life inspiration is the southwestern area of the US, particularly Arizona. The above photo is called “Inner Growth” and although it is a quite literal interpretation of it, I’m very intrigued by how realistic the image looks. There’s something very peaceful about the realistic greenery in the photo and the way he portrays inner growth. The photo below also caught my intention in his portfolio. You can see that it is clearly inspired by the southwestern states in the US with an isolated compartment with dirt and trees growing in the middle of the dry, rocky terrain. There is something futuristic about his works and seems like a world very similar to ours yet different — which is personally the most intriguing part to me. Gohmn has been recognized for his works and gone on to create live visuals and stage renders for many big name artists such as Katy Perry, San Holo, and G-Eazy. He has a Vimeo where he uploads “making” videos of some of his most popular art pieces.

## Joanne Lee – Project 05

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-05

function setup() {
createCanvas(500,600);
background (135,206,236);
noLoop();
}

function draw() {
var x = 0;
var y = 0;
var shiftX = width / 5;
var shiftY = height / 4;

// diamond repeating background (creating this using repeating X shapes)
for (var a = 0; a < 4; a++) { // rows
for (var b = 0; b < 5; b++) { // columns
stroke(243,250,253);
strokeWeight(3);
line(x, y, x + shiftX, y + shiftY);
line(x + shiftX, y, x, y + shiftY);
x += shiftX;
}
y += shiftY;
x = 0; // reset x
}

// variables for ryan's face
var face = 50;
var earSize = 15;
var eyeSize = 2;
var noseSize = 5;
var stacheSize = 10;
x = 0;
y = shiftY * 0.5;

// rybear in every other diamond, every other row
for (var c = 0; c < 4; c++) { // rows
for (var d = 0; d < 3; d++) { // columns
// ears
stroke(0);
strokeWeight(2.5);
fill(223,155,58);
ellipse(x - 16, y - 17, earSize, 0.85*earSize); // left
ellipse(x + 16, y - 17, earSize, 0.85*earSize); // right

// face
ellipse(x, y, face, 0.85*face);

// eyebrows
line(x + 6, y - 8, x + 14, y - 8); // left
line(x - 14, y - 8, x - 6, y - 8); // right

// eyes
fill(0);
ellipse(x - 9.1, y - 2, eyeSize, eyeSize); // left
ellipse(x + 9.9, y - 2, eyeSize, eyeSize); // right

// nose
ellipse(x, y + 4, noseSize, noseSize);

// mustache
strokeWeight(0);
fill(255);
ellipse(x - 4.5, y + 8, stacheSize, 0.75 * stacheSize); // left
ellipse(x + 4.5, y + 8, stacheSize, 0.75 * stacheSize); // right

x += 2 * shiftX; // in order to put in every other diamond
}

y += shiftY; // put ryan in every other row

// start ryan at different spots for different rows

if (c % 2 == 0) {
x = shiftX;
}

else if (c % 2 == 1) {
x = 0;
}
}
}``````

For this week’s project, I revisited my favorite cartoon character / emoji. I created a repeating diamond background pattern and placed ryan in every other column / row. While creating this wallpaper, I had phone wallpapers in mind and tried to create a simple look because it may look cluttered with phone apps on the screen as well.

## Joanne Lee – Looking Outward 04

At The Scottsdale Museum of Contemporary Art, an exhibit called “The Five Senses” was displayed from Feb 1- May 4, 2014. Naturally, one of the senses that was explored was sound. Janet Cardiff’s The Forty Part Motet was displayed in an empty room on 40 speakers. The congregational choir of the Gothic Salisbury Cathedral were asked to record a choral arrangement of Thomas Tallis’s Spem in alium (The Forty Part Motet). This is an a capella piece, meaning that there is no instrumental accompaniment.

Cardiff’s installation is not only a technically complex recording, but also has many details to give a unique sensory experience. The most important is that each of the 40 speakers are synchronized to play 1  track in the recording (each singer has their own individual channel). These speakers are placed at eye level in an oval, in groups of 5 (just like in the original chorus). I really admire this installation because I love choral music. There is something unique about the way all of the voices travel to the audience and mesh together to hit you at once, and that can only be experienced live. This installation seems to emulate that experience despite using speakers by giving each voice a different speaker channel. I wish I had gotten to experience this exhibit.

A video showing a glimpse of The Forty Part Motet with a voiceover by Janet Cardiff.

## Joanne Lee – Project 04

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-04

function setup() {
createCanvas(400,300);
background (255);
}

function draw() {

var leftX1 = 0;
var leftX2 = 0;
var leftY = height/40
var rightX1 = 400;
var rightX2 = 400;
var rightY = height/40;

// step sizes
var vertStep = height / 40;
var horizStep1 = width / 15;
var horizStep2 = height / 150;
var i = 0;

strokeWeight(0.1);

//bottom left curve loop
for (i = 0; i < 40; i ++) {
stroke(0,80,115,10);
line(leftX1, 300, leftX2, leftY);
// x-values move in opposite directions
leftX1 += horizStep1;
leftX2 -= horizStep2;
leftY += vertStep; // increase y2 value
}

// bottom right curve loop
for (i = 0; i < 40; i ++) {
stroke(38,128,167,15);
line(rightX1, 300, rightX2, rightY);
// x-values move in opposite directions
rightX1 -= horizStep1;
rightX2 += horizStep2;
rightY += vertStep; // increase y2 value
}

// code reset
leftX1 = 0;
leftX2 = 0;
leftY = 300 - vertStep;

// top left curve loop
for (i = 0; i < 40; i ++) {
stroke(38,128,167,15);
line(leftX1, 0, leftX2, leftY);
// x-values move in opposite directions
leftX1 += horizStep1;
leftX2 -= horizStep2;
leftY -= vertStep; // decrease y2 value
}

// code reset
rightX1 = 400;
rightX2 = 400;
rightY = 300 - vertStep;

// top right curve loop
for (i = 0; i < 40; i ++) {
stroke(130,175,195,40);
line(rightX1, 0, rightX2, rightY); // decrease rightY value
// x-values move in opposite directions
rightX1 -= horizStep1;
rightX2 += horizStep2;
rightY -= vertStep; // decrease y2 value
}
}``````

The most difficult part of this project was determine what kind of shape I wanted to make. However, ultimately I decided that I wanted to create something that has a bit of depth as well as looks like something that is opening up. I am happy with the results and hope to be able to create more complex results in the future.

## Joanne Lee – Looking Outwards 03

3-D printing has been making its way into fashion for the past several years. Designer Alexis Walsh unveiled The Spire Dress at New York Fashion Week in 2016. I think that 3-D printing brings an entirely new dimension to fashion design and the result is beautiful and intricately detailed collections. The Spire Dress is a result of more than 400 tiles printed on nylon plastic and were individually assembled by hand using metal ring connections. The dress took 6 months to design and put together, and it was inspired by cathedral spires.

Although the dress repeats the same spiral shape in various renditions, the result is something unique from the tiles that make it up. Walsh prototyped the dress on MakertBot 3-D bot printers before sending the final design to be laser cut. Personally, I believe that there is something very captivating about this dress. Perhaps it can be accredited to each tile of the dress being cut very precisely, creating a very clean and geometrical feel to the dress. As someone who attends CMU’s Lunar Gala every year, I hope to see some 3-D printed lines this year!

## Joanne Lee – Project 03

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-03
var rainSpeed = 0

function setup() {
createCanvas(480,640);
textFont("Calibri");
textAlign(CENTER,CENTER);
textSize(40);
}

function draw() {
var leftX = 150 - (mouseY * 0.5); // shifts left when mouse moves
var rightX = 320 + (mouseY * 0.5); // shifts right when mouse moves

// cloud colors, changes from gray to light blue with mouse
var BGR = 104 + mouseY * 0.15;
var BGG = 129 + mouseY * 0.15;
var BGB = 141 + mouseY * 0.3;

background(BGR,BGG,BGB);

// sunshine, gets bigger with mouse
var size = mouseY * 0.15;
var sunG = 140 + mouseY * 0.15; // changes color from orange to yellow with mouse
fill(255,sunG,0);
ellipse(300,200,size,size);

// sun rays, get bigger with mouse
var ray = 0;
var rayX1 = 30 + mouseY * 0.04;
var rayY1 = 10 + mouseY * 0.04;
var rayX2 = 30 + mouseY * 0.07;
var rayY2 = 20 + mouseY * 0.07;
var rayX3 = 40 + mouseY * 0.07;
var rayY3 = 15 + mouseY * 0.07;
var angle = 0;

push();
stroke(255,sunG,0);
strokeWeight(3);
translate(300,200);
for (ray = 0; ray < 10; ray++, angle += 36) { // rotates to draw each ray
push();
triangle(rayX1, rayY1, rayX2, rayY2, rayX3, rayY3);
pop();
}
pop();

// encouraging text, moves into place with mouse
var textX1 = 850 - mouseY;
var textY1 = 1150 - mouseY;
var textX2 = 850 - mouseY;;
var textY2 = 1190 - mouseY

text("Have the day",textX1,textY1);
text("you deserve!", textX2, textY2);

// clouds
strokeWeight(0);
fill(201,221,243);
ellipse(leftX,150,155,125); // left clouds
ellipse(leftX+65,150,120,95);
ellipse(leftX-65,150,120,95);
ellipse(rightX,210,155,125); // right clouds
ellipse(rightX+65,210,120,95);
ellipse(rightX-65,210,120,95);

// raindrops
var i = 0;
var a = 50 - (mouseY); // shift left with mouse
var b = 100 - (mouseY); // shift left with mouse
var c = 250 + (mouseY * 0.7); // shift right with mouse
var d = 300 + (mouseY * 0.7); // shift right with mouse

stroke(201,221,243);
strokeWeight(0.75);

for (i = 0; i < 2; a += 100, b += 100, i++) { // left raindrops
line(a, 150 + rainSpeed, a, 170 + rainSpeed);
line(b, 250 + rainSpeed, b, 270 + rainSpeed);
line(a, 350 + rainSpeed, a, 370 + rainSpeed);
line(b, 450 + rainSpeed, b, 470 + rainSpeed);
line(a, 550 + rainSpeed, a, 570 + rainSpeed);
if (rainSpeed > 100) {
line(b, 50 + rainSpeed, b, 70 + rainSpeed);
}
}

for (c = 250 + (mouseY * 0.7); d < 500; c += 100, d += 100) { // right raindrops
line(c, 150 + rainSpeed, c, 170 + rainSpeed);
line(d, 250 + rainSpeed, d, 270 + rainSpeed);
line(c, 350 + rainSpeed, c, 370 + rainSpeed);
line(d, 450 + rainSpeed, d, 470 + rainSpeed);
line(c, 550 + rainSpeed, c, 570 + rainSpeed);
if (rainSpeed > 100) {
line(d, 50 + rainSpeed, d, 70 + rainSpeed);
}
}

// rain loop
if (rainSpeed == 200) {
rainSpeed = 0;
}
rainSpeed += 5;
}``````

Pittsburgh has been having rainy days, so I wanted to create a project where I could make the rain go away whenever I wanted. I especially had fun making the raindrops loop and making the background color and sun color fade in / out from its initial color.

## Joanne Lee – Looking Outward 02

One of the biggest attractions of New York City during the holiday season is the Saks Fifth Avenue Holiday Light Show and holiday windows. As someone who grew up in northern New Jersey, I often went to the city to see this particular light show and it indicated the true start of the holidays. Although I was unable to find the name of the entire design team behind this brilliant light display, Fred Schwam is the CEO of the team. Schwam and his team have been installing this ten story tall light show since 2004 and change the light show every year.

In 2017, Saks Fifth Avenue and Disney collaborated for the 80th anniversary of Snow White and the Seven Dwarves. This theme was mainly reflected in the shopping windows where they implemented 3d layering techniques to incorporate original art from the actual film. Schwam and his design team takes great care to put together this holiday display, taking nearly a year to plan and execute. The design team was very sensible in designing the Snow White characters in modern day fashion while also 3-D projecting original scenes from the movie. This combines a timeless classic with a modern day take.

## Joanne Lee – Project 02

``````// Joanne Lee
// Section C
// joannele@andrew.cmu.edu
// Project-02
var eyeType = 1;
var face = 250;
var eyeY = (320+(320-0.15*face))/2;
var brow = 1;
var browY1 = eyeY-0.10*face;
var browY2 = eyeY-0.10*face;
var browStroke = 8;
var stacheR = 255;
var stacheG = 255;
var stacheB = 255;

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

function draw() {
background (254, 203, 212);
var rightEyeX = (240+(240+0.3*face))/2;
var leftEyeX = (240+(240-0.3*face))/2;
var eyeColor = "rgb(0,0,0)";
var curveAnchorY = (eyeY+0.05*face)+50;

// ears
var rightEarX = 240-0.33*face;
var leftEarX = 240+0.33*face;
var earY = 320-0.32*face;
var earSize = 70;

strokeWeight(5);
stroke(0);
fill(223,155,58);
//right brow
ellipse(rightEarX,earY,earSize,earSize);
//left brow
ellipse(leftEarX,earY,earSize,earSize);

// face
ellipse(240,320,face,0.85*face);

// eyebrows
var leftBrowX1 = leftEyeX-0.09*face;
var leftBrowX2 = leftEyeX+0.07*face;
var rightBrowX1 = rightEyeX-0.07*face;
var rightBrowX2 = rightEyeX+0.09*face;

strokeWeight(browStroke);
//left brow
line(leftBrowX1,browY1,leftBrowX2,browY2);
//right brow
line(rightBrowX1,browY2,rightBrowX2,browY1);

// eyes
strokeWeight(0);
fill(eyeColor);
if (eyeType == 1) { // circle eyes
var eye1Size = 0.06*face;

// right eye
ellipse(rightEyeX,eyeY,eye1Size,eye1Size);
// left eye
ellipse(leftEyeX,eyeY,eye1Size,eye1Size);
}
else if (eyeType == 2) { // oval eyes
var eye2SizeW = 0.06*face;
var eye2SizeH = 0.12*face;

// right eye
ellipse(rightEyeX,eyeY,eye2SizeW,eye2SizeH);
// left eye
ellipse(leftEyeX,eyeY,eye2SizeW,eye2SizeH);
}
else if (eyeType == 3) { // laughing eyes
var leftEyeX1 = leftEyeX-0.04*face;
var leftEyeX2 = leftEyeX+0.04*face;
var leftEyeY1 = eyeY-0.03*face;
var leftEyeY2 = eyeY+0.03*face;
var rightEyeX1 = rightEyeX+0.04*face;
var rightEyeX2 = rightEyeX-0.04*face;
var rightEyeY1 = eyeY-0.03*face;
var rightEyeY2 = eyeY+0.03*face;

stroke(eyeColor);
strokeWeight(8);

// left eye
line(leftEyeX1,leftEyeY1,leftEyeX2,eyeY);
line(leftEyeX2,eyeY,leftEyeX1,leftEyeY2);
// right eye
line(rightEyeX1,rightEyeY1,rightEyeX2,eyeY);
line(rightEyeX2,eyeY,rightEyeX1,rightEyeY2);
}
else if (eyeType == 4) { // dead eyes
var leftEyeX1 = leftEyeX-0.05*face;
var leftEyeX2 = leftEyeX+0.05*face;
var leftEyeY1 = eyeY-0.04*face;
var leftEyeY2 = eyeY+0.04*face;
var rightEyeX1 = rightEyeX-0.05*face;
var rightEyeX2 = rightEyeX+0.05*face;
var rightEyeY1 = eyeY-0.04*face;
var rightEyeY2 = eyeY+0.04*face;

stroke(eyeColor);
strokeWeight(8);

// left eye
line(leftEyeX1,leftEyeY1,leftEyeX2,leftEyeY2);
line(leftEyeX2,leftEyeY1,leftEyeX1,leftEyeY2);
// right eye
line(rightEyeX1,rightEyeY1,rightEyeX2,rightEyeY2);
line(rightEyeX2,rightEyeY1,rightEyeX1,rightEyeY2);

}

// nose
var noseX = 240;
var noseY = 320+0.05*face;
var noseSize = 0.1*face;
ellipse(noseX,noseY,noseSize,noseSize);

// mustache
var leftStacheX = noseX-0.07*face;
var rightStacheX = noseX+0.07*face;
var stacheY = noseY+0.06*face;
var stacheSizeW = 1.7*noseSize;
var stacheSizeH = 1.4*noseSize;

strokeWeight(0);
fill(stacheR,stacheG,stacheB);
//left stache
ellipse(leftStacheX,stacheY,stacheSizeW,stacheSizeH);
//right stache
ellipse(rightStacheX,stacheY,stacheSizeW,stacheSizeH);
}

function mousePressed() {
face = random(250,400)
eyeType = int(random(1,5));
browStroke = random(4,10);
brow = int(random(1,3));
if (brow == 1) { // concerned brows
browY1 = eyeY-0.10*face;
browY2 = random(250,260);
}
else { // angry brows
browY2 = eyeY-0.10*face;
browY1 = random(250,260);
}
stacheR = random(200,255);
stacheG = random(100,255);
stacheB = random(150,255);
}``````

At first, I planned to do variable faces regarding iPhone emojis. However, I decided to hone in more on my favorite emoji — KakaoTalk’s character, Ryan. My variable starts off as the traditional character’s face and then varies. I was curious if the character would still be noticeable with different features and emotions.