## Looking Outwards 06

After looking at a couple of articles on randomness in the computation of art, I came across the work of Rami Hammour. The project presented is called “A Text of Random Meanings”. The art piece was completed during Hammour through the usage of python script as well as the “registers and taps” method of random number generator. From afar, the project simply looks like lines of texts which are created with various types of strokes in each column. It’s very interesting to see that from a distance, it resembles lines of texts. This causes the viewer to be curious and want to take a closer look at the text. However, because it is “random text”, there is no actual definition or meaning to the text. It represents randomness. If it was a regular piece of text, the natural reaction that humans would have is to read it because it would have meaning. If all the letters of each word were to be shuffled, each word would lose its meaning. For that reason, the “text” would also lose meaning. To add on, it is also interesting to see how numbers can be represented in an artistic way. Through the mapping of a random number generator, Rami Hammour combines computation and art in a very simple way while creating an intriguing outcome.

## Project 06 – Abstract Clock

``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 06

function setup() {
createCanvas(400, 480);
frameRate(15);
}

function draw() {

//time variables
var h = hour();
var m = minute();
var s = second();

//mapping the seconds so it fits width of...
var mapS = map(s, 0, 59, 0, 108); //glass of pink lemonade
var mapM = map(m, 0, 59, 0, 129); //coaster

background(255, 181, 101);

//blue table
noStroke();
fill(63, 85, 157);
rect(1, 335, 320, 146);

//window frame
noStroke();
fill(215, 126, 31);
rect(31, 31, 305, 233);

//sky during certain hours
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);

for (var i=1; i<=h; i++) {
if (i>=8 & i<=12) {
noStroke();
fill(255, 196, 137);
rect(40, 38, 287, 219);
}
if (i>12 & i<=18) {
noStroke();
fill(193, 210, 246);
rect(40, 38, 287, 219);
}
if (i>18 & i<=24) {
noStroke();
fill(29, 42, 117);
rect(40, 38, 287, 219);
}
}

//sun & moon (changes during certain hours)
for (var i=1; i<=h; i++) {
if (i>=7 & i<=12) { //morning sun
noStroke();
fill(253, 241, 142); //color of layer1
ellipse(116, 112, 83, 83);
fill(251, 243, 175); //color of layer2
ellipse(116, 112, 69, 69);
fill(249, 245, 215); //color of layer3
ellipse(116, 112, 53, 53);
}
if (i>12 & i<=18) { //afternoon sun
noStroke();
fill(255, 152, 68);
ellipse(116, 112, 83, 83);
fill(255, 205, 68);
ellipse(116, 112, 69, 69);
fill(252, 228, 108);
ellipse(116, 112, 53, 53);
}
if (i>18 & i<=24) { //moon -- night time
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
if (i>=1 & i<8) { //night to dawn
noStroke();
fill(119, 119, 119); //color of layer 1
ellipse(116, 112, 83, 83);
fill(170, 170, 170); //color of layer 2
ellipse(116, 112, 69, 69);
fill(209, 209, 209); //color of layer 3
ellipse(116, 112, 53, 53);
}
}

//cloud 1
noStroke();
fill(255);
ellipse(230, 96, 36, 18);
ellipse(248, 87, 36, 18);
ellipse(279, 87, 36, 18);
ellipse(261, 99, 36, 18);

//cloud 2
noStroke();
fill(255);
ellipse(248, 186, 36, 18);
ellipse(230, 198, 36, 18);
ellipse(217, 186, 36, 18);
ellipse(199, 195, 36, 18);

//cloud 3
noStroke();
fill(255);
ellipse(117, 154, 36, 18);
ellipse(99, 166, 36, 18);
ellipse(86, 154, 36, 18);
ellipse(68, 163, 36, 18);

noStroke();
fill(249, 245, 215);
ellipse(370, 222, 160, 221);

//eyes
stroke(0);
strokeWeight(1);
fill(0);
beginShape();
curveVertex(301, 347);
curveVertex(309, 245);
curveVertex(316, 241);
endShape();

//shirtAndarms
noStroke();
fill(155, 178, 145);
ellipse(370, 448, 100, 240);

//hair
noStroke();
fill(88, 72, 72);
ellipse(376, 174, 171, 151);
ellipse(397, 305, 65, 255);

//coaster changes color by minutes(0, 15, 30, 45)
for (var i=0; i<=m; i++) {
if (i>=0 & i<15) { //blue coaster
noStroke();
fill(108, 121, 164);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=15 & i<30) { //pink coaster
noStroke();
fill(226, 61, 110);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=30 & i<45) { //green coaster
noStroke();
fill(63, 255, 86);
ellipse(145, 413, 120+mapM, 35+mapM);
}
if (i>=45 & i<=59) { //purple coaster
noStroke();
fill(201, 147, 255);
ellipse(145, 413, 120+mapM, 35+mapM);
}
}

//bottomAndmiddleOfcup
stroke(0);
strokeWeight(1);
fill(237, 244, 181);
rect(105, 284, 80, 131);
ellipse(145, 413, 80, 23);

//topOfcup
stroke(0);
strokeWeight(1);
fill(239, 244, 201);
ellipse(145, 285, 80, 23);

//drink
noStroke();
fill(255, 175, 175); //pink lemonade
ellipse(145, 413, 60, 13);
rect(115, 414, 60, -mapS); //fills up each second

}
``````

For this project, I wanted to show the different times during the day through the setting of my working area and my favorite beverage to drink. During the day, the window would show the sun and blue sky. During the evening, the window would show the moon and dark sky. Therefore, it changes depending on the hour. As for minutes, I decided to change the size and color of the coaster whenever the time hits 00, 15, 30, or 45. Lastly, the seconds are shown through the increasing amount of pink lemonade within the glass. Below is a drawing I made in photoshop to help me create this project.

## Looking Outwards – 05: Computer Graphics

Jakub Javora is an artist who practices concept design, concept art, and illustration. One of the many projects that the artist completed was the concept art of an upcoming feature film called Restore Point. With the use of the location the story is based on, Javora was able to transform the real location into a futuristic and dark scene. It’s intriguing to see how one is able to create an alternate world through the use of 3D computer graphics. The artist used the newest version of the software Ebsynth, which he was able to paint the characters on. Ebsynth is a tool that converts real-life video footage into stylized hand-painted animation. This allowed him to achieve the “futuristic” look with both the characters and the environment.

## Project – 05: Wallpaper

For this project, I wanted to create a simple wallpaper of clouds that had a cute smile with rosy red cheeks. In order to do so, I first sketched out one friendly cloud on the illustrator and began coding from there.

sketch – Copy
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project 05

function setup() {
createCanvas(450, 500);
noLoop();
}

function draw() {
background(213, 232, 241);

for (var x = 90; x <= 700; x += 170) {
for (var y = 90; y <= 700; y += 80) {
push();
translate(x, y);
cloud();
pop();
}
}
}

//cloud background
function cloud() {

//white clouds
noStroke();
fill(255);
ellipse(-10, -122, 51, 35);
ellipse(-37, -107, 51, 35);
ellipse(-49, -134, 51, 35);
ellipse(-68, -110, 51, 35);
ellipse(-89, -128, 51, 35);

//cloud eyes
noStroke();
fill(0);
ellipse(-20, -200, 4, 4);
ellipse(-50, -200, 4, 4);

//cloud smile mouth
stroke(0);
strokeWeight(1);
noFill();
arc(-203, -193, 15, 10, TWO_PI, PI, OPEN);

//cute cheeks
noStroke();
fill(255, 0, 0, 100);
ellipse(-216, -115, 9, 3);
ellipse(-190, -115, 9, 3);
}
``````

## Project 04 – String Art

crisscrossfile
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-04

// x & y coordinates for lines
var x = 0;
var y = 0;

function setup() {

//assigned canvas size
createCanvas(600,600);
}

function draw() {

//dark blue background color
background(3, 43, 67);

//criss-crossed lines
for (var i = 0; i <= 50; i += 1) {

//blueA lines
stroke(155, 189, 249);
strokeWeight(mouseX/300); //changes line thickness
line(x, height - i*10, width - i*8, height + i);

//blueB lines
stroke(196, 224, 249);
strokeWeight(mouseY/300); //changes line thickness
line(height + i*0.5, width + i*40, x + i*10, y - i*30);

//green lines
stroke(178, 255, 168);
strokeWeight(mouseX/300); //changes line thickness
line(height - i*15, y + i/0.08, x, height - i/0.03);

//yellow lines
stroke(255, 249, 165);
strokeWeight(mouseY/300); //changes line thickness
line(width + i/0.05, y + i*50, x, height - i/0.07);

//pink lines
stroke(252, 109, 171);
strokeWeight(mouseX/300); //changes line thickness
line(x + i*20, height - i/20, width - i/2, height - i*20);

}

}

/*
//blueC
stroke(79, 100, 158);
strokeWeight(1);
line(height + i*10, y + i/0.05, x, width - i/0.03);
*/``````

I wanted to explore the different patterns that the lines are able to create by using a crisscross technique. I also wanted to play around with the weight of the stroke of those lines as the user moves around the canvas.

## Looking Outwards 04 – Sound Art

‘Expressions’ is a series of artworks that were created through a collaboration with Kynd and Yu Miyashita (sound). This project explored the physical aspects of thick and bold paint that appear from digital space. This exploration allowed the artist to play with the shapes, light, and shadows that were made from the paint.

Through construction, Kynd combined 2D and 3D graphics that enabled him to create real-time graphics and renderings that had depth along with the interplay of light and shadow. With this method, there were many advantages. It was easier to create intricate shapes and details without the need to manage geometries. Kynd was able to use many 2D image processing techniques that included deformation, blurring, and so much more. It was also very “fast and lightweight” on the CPU. This project consisted of 2 graphical elements: autonomous elements and reactive elements. The tools that were used for ‘Expressions’ included TouchDesigner, openFrameworks, and WebGL. The music that was used for the video created different scenes that almost told a unique story due to its sequence.

The correlation between the 2D/3D graphics and the music were able to express the mood/emotion of the scene. With that said, Kynd has always been inspired by digital paint. As an art student with an interest in Expressionism and Neo-Expressionism, Kynd played around with many oils and other substances that we’re able to achieve unique characteristics and expressions. Even today, it constantly amazes me how intertwined technology and art have become over time.

## Looking Outwards 03 – Computational Fabrication

The Heydar Aliyev Center is a cultural center that is located in Baku, Azerbaijan, and was designed by architect Zaha Hadid. When taking one look at this building, it is a breath-taking design. One can say that this project is an incredible achievement. The most difficult and critical part of this project was probably the architectural development of the skin/shell. However, with the use of advanced computations, it allowed the project to achieve its fluid characteristics. The geometry, structure, and materiality of this building create a harmony that allows us to see the transformation that architecture has gone through as well as being able to see the advancement of technology. Through computing, sketching, and physical modeling, Zaha Hadid and her team were able to create something that was unique and was able to look at the future. Through the interior and exterior of the building, Zaha Hadid wanted to create this blur between urban and architecture.

## Project 03 – Dynamic Drawing

Through the multiple squares on the canvas, I wanted to explore how different the overall image would look by manipulating the weight of the stroke. Moving your mouse in a circular motion would allow you to see the change in weight of the stroke for each color set of squares I used on the canvas.

abstraction
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-03

var angle = 0.0;

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

function draw() {
background(155, 178, 145);
push();

//set pink squares
noFill();
strokeWeight(mouseX/5);
stroke(232, 225, 239);
rect(215, 72, 240, 401);
rect(106, 131, 442, 142);
rect(57, 17, 493, 550);
rect(114, 338, 236, 95);

//set green(a) squares
noFill();
strokeWeight(mouseX/10);
stroke(196, 244,199);
rect(38, 65, 168, 262);
rect(138, 141, 430, 394);
rect(62, 248, 311, 196);
rect(297, 61, 287, 519);

//set green(b) squares
noFill();
strokeWeight(mouseY/15);
stroke(199, 255, 218);
rect(13, 24, 514, 199);
rect(270, 281, 205, 281);
rect(49, 96, 141, 485);
rect(106, 360, 421, 134);

//set green(c) squares
noFill();
strokeWeight(mouseY/20);
stroke(217, 255, 248);
rect(20, 300, 390, 216);
rect(241, 96, 309, 312);
rect(75, 41, 287, 141);
rect(422, 117, 81, 204);

}

``````

## Looking Outwards 02 – Generative Art

Behind the childhood animation, ‘Curious George’, there is an untold love story of the authors Hans and Margret Rey. In celebration of the 75th anniversary of ‘Curious George’, filmmaker Ema Ryan Yamazaki decided to put together a mixed-media documentary that tells the love story of the authors. When I was a little girl, I absolutely enjoyed reading the series and watching the TV show. Before reading this artile, I did not know that the animation was created by two German immigrants who were also a married couple as well. Children would think nothing more of the series of ‘Curious George’. However, as adults, I think it becomes very important to learn where the inspiration of the animation comes from.

As the filmmaker explained how ‘Curious George’ was a reflection of their life experiences and personalities, I was very fascinated by the connection. It is amazing how one can bring a story to life through a creative animation. However, the process of creating this animation as well as incorporating the same style of ‘Curious George’ is a load of work. Since the project itself consists of 15,000 hand-drawn drawings, Yamazaki had been trying to raise the funds so that more people can help. To this very day, it still amazes me how a set of drawings can be transformed into a motion picture. As a filmmaker, Yamazaki’s artistic sensibilities was able to develop the idea of presenting the story of Hans and Margret Rey through their own style. Choosing the same style that was used for ‘Curious George’ creates such a strong connection because it gives everyone a reminder of the animation.

## Project 02 – Variable Faces

For this project, I used Photoshop to draw out the animation character as well as getting the correct parameters for each shape. I was inspired by the physical features and stylistics of the Animal Crossing villagers. Therefore, I wanted to try creating my own character.

blue puffy
``````//Rachel Kim
//15-104(Section C)
//rachelki@andrew.cmu.edu
//Project-02

function setup() {
createCanvas(640, 480);
background(251, 252, 212);
}

var eyeWidth = 50;
var eyeHeight = 67;
var pupilWidth = 27;
var pupilHeight = 27;
var pupilX = 342
var pupilY = 234
var faceWidth = 324;
var faceHeight = 230;
var cheekWidth = 44;
var cheekHeight = 21;
var noseWidth = 60;
var noseHeight = 34;
var mouthWidth = 18;
var mouthHeight = 13;
var hairWidth = 107;
var hairHeight = 88;

function draw() {

//face
noStroke();
fill(203, 227, 217);
ellipse(323, 281, faceWidth, faceHeight);

//left cheek
noStroke();
fill(237, 205, 201);
ellipse(207, 323, cheekWidth, cheekHeight);

//right cheek
noStroke();
fill(237, 205, 201);
ellipse(439, 323, cheekWidth, cheekHeight);

//mouth
noStroke();
fill(1, 56, 72);
ellipse(344, 364, mouthWidth, mouthHeight);

//nose
noStroke();
fill(1, 56, 72);
rect(294, 300, noseWidth, noseHeight);

//left eye
noStroke();
fill(255);
ellipse(243, 279, eyeWidth, eyeHeight);

//right eye
noStroke();
fill(255);
ellipse(403, 279, eyeWidth, eyeHeight);

//yc = pupils (up & down)
let topEye = 257;
let bottomEye = 279;
let mouse = mouseY;
let yc = constrain(mouseY, bottomEye, topEye);

//left pupil
noStroke();
fill(89, 57, 39);
ellipse(243, yc, pupilWidth, pupilHeight);

//right pupil
noStroke();
fill(89, 57, 39);
ellipse(403, yc, pupilWidth, pupilHeight);

//hairA
noStroke();
fill(32, 69, 255);
ellipse(154, 243, hairWidth, hairHeight);

//hairB
noStroke();
fill(32, 69, 255);
ellipse(216, 189, hairWidth, hairHeight);

//hairC
noStroke();
fill(32, 69, 255);
ellipse(311, 173, hairWidth, hairHeight);

//hairD
noStroke();
fill(32, 69, 255);
ellipse(403, 189, hairWidth, hairHeight);

//hairE
noStroke();
fill(32, 69, 255);
ellipse(486, 235, hairWidth, hairHeight);

//hairF
noStroke();
fill(32, 69, 255);
ellipse(154, 166, hairWidth, hairHeight);

//hairG
noStroke();
fill(32, 69, 255);
ellipse(247, 121, hairWidth, hairHeight);

//hairH
noStroke();
fill(32, 69, 255);
ellipse(311, 92, hairWidth, hairHeight);

//hairI
noStroke();
fill(32, 69, 255);
ellipse(444, 121, hairWidth, hairHeight);

//hairJ
noStroke();
fill(32, 69, 255);
ellipse(185, 111, hairWidth, hairHeight);

//hairK
noStroke();
fill(32, 69, 255);
ellipse(365, 121, hairWidth, hairHeight);

//hairL
noStroke();
fill(32, 69, 255);
ellipse(483, 166, hairWidth, hairHeight);
}

function mousePressed() {
faceWidth = random(200, 400);
faceHeight = random(100, 300);
cheekWidth = random(44, 54);
cheekHeight = random(54, 64);
noseWidth = random(45, 85);
noseHeight = random(24, 44);
mouthWidth = random(8, 28);
mouthHeight = random(3, 23);
pupilWidth = random(17, 47);
pupilHeight = random(47, 57);
hairHeight = random(90, 200);
}

``````