Author: Joanne

Joanne Lee – Looking Outward 06

James White’s early forge output using flower dingbats and the color palette from a scene in ‘300’ (2007).

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

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);
  rotate(radians(m * 360));
  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.

Original sketch for abstract clock

Joanne Lee – Looking Outward 05

“Inner Growth” created using Cinema 4D, Photoshop and Octane Render (2016).

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.

“Arium” created using Photoshop and Cinema 4D.

Joanne Lee – Project 05

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

Janet Cardiff’s The Forty Part Motet, 2001 plays a 40-track 14-minute recording on 40 speakers.

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 – 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

The Spire Dress, part of the LYIS Collection, is completely 3-D printed with 400+ individual tiled pieces.

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!

The repeated spiral shapes were inspired by cathedral spires.

Joanne Lee – Project 03

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();
      rotate(radians(angle));
      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.

3-D layering technique used in Snow White themed holiday windows display, collaboration between Saks Fifth Avenue x Disney

 

Joanne Lee – Project 02

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.