Christine – Page 2 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Christine Chen-Looking Outwards-07

The above video shows the website “YEAR IN NIKEFUEL” built by Fathom for Nike+ FuelBand for users to view their personal physical activity patterns (couldn’t find exact year created) Link: https://vimeo.com/151097197

What I admire most about the various aspects of computation visualization information is how they bring so much convenience and assistance into our daily lives. The website that Fathom, a design agency, created in collaboration with Nike for Nike+ FuelBand users perfectly illustrates this. On this website, users are able to download and share posters with information of their daily movement for everyday of the year. Different colors are used to depict different levels of activities. Different concentrations of colors are also utilized to depict patterns and behaviors of activities. Unfortunately, I couldn’t find the algorithm and software that Fathom used to create the actual website, but the software that they used to create the model is Frame.

As someone who is having a hard time finding motivation to work out, I think this website is great for motivating those with low daily activities. Because of all the different usages (entertainment, easy access to various sources of information…etc.) that technology provides to us, most people today spend their time sitting in front of their TV or computer or scrolling away on their phone. Thus, they end up not “moving” around enough to build a healthy body. I really love how this app displays visually the differences of low and high areas of activities, reminding people of how their lifestyle is like as they can easily visualize it. The “sharing” aspect of the website also motivates people as others will be reminded or motivated to workout when they see their friends posting from YEAR IN NIKEFUEL.

The team’s choice of using the three primary colors (blue, red, and yellow) as the main theme colors for the website also helps to give the whole website a “simple” vibe that is user-friendly, which encourages people to try and experiment with the website. The various graphics that helps to organize information are also designed and considered so well that it minimizes distractions and helps users to understand the information right away. The graphics are designed so well that they seemed to be designed without effort. As a designer-in-training, I only realized how hard it is and how many things are needed to be considered when I entered the program of design at CMU. Thus, this is one of the many things that I am trying to learn from, which is why I admire this design from Fathom so much!

Link to YEAR IN NIKEFUEL website: https://yearinnikefuel.com

Poster showing the website’s various functions

Christine Chen-Project-07-Curves

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-07-Curves
*/

var nPoints = 100;
var eyeSize = 10;
var pupilSize = 5;

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

function draw(){
    background(189, 232, 252); //blue

    leaves();
    push();
    translate(width/2, height/2);
    drawHeart();
    pop();
    eye();
    blush();
    mouth();
}

function drawHeart(){
    //color
    noStroke();

    //peach turns "ripe" when its big
    if (mouseY > 130){ 
        fill(255, 178, 182); //light pink
    } else {
        fill(192, 222, 188); //light green
    }

    //heart
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = 16 * pow(sin(t), 3);
        y = 13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t)
             - cos(4 * t) * mouseX/90;

        mouseX = constrain(mouseX, 80, 70);
        mouseY = constrain(mouseY, 80, 200);

        x = map(x, -1, 15, -1, mouseY);
        y = map(y, -1, 15, -1, mouseY);

        vertex(x, y);
    }
    endShape(CLOSE);
}

function eye(){
    fill(0); //black
    var eyeLX = width/2 - 20 - mouseY/10;
    var eyeRX = width/2 + 20 + mouseY/10;
    ellipse(eyeLX, height/2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height/2, eyeSize, eyeSize); //right eye
}

function blush(){
    noStroke();
    fill(229, 51, 60); //red
    var blushLX = width/2 - 20 - mouseY/7;
    var blushRX = width/2 + 20 + mouseY/7;
    ellipse(blushLX, height/2 + 15, eyeSize + 20, eyeSize); //left 
    ellipse(blushRX, height/2 + 15, eyeSize + 20, eyeSize); //right 
}

function mouth(){
    fill(232, 91, 98); //dark pink
    ellipse(240, 260, mouseY/10, mouseY/10);
}

function leaves(){
    noStroke();
    fill(112, 230, 134);

    //bigger leaves
    var leafLX = width/2 - 70;
    var leafRX = width/2 + 70;
    ellipse(leafLX, height/2 + 100, 150, 100); //left 
    ellipse(leafRX, height/2 + 100, 150, 100); //right 

    //smaller shadows on top
    fill(107, 221, 129);
    ellipse(leafLX + 20, height/2 + 90, 110, 80); //left 
    ellipse(leafRX - 20, height/2 + 90, 110, 80); //right 
}

I was initially just playing with the heart curve. Then when I made it pink, the idea of making it into a peach came to my mind. When the peach is small, it is unripe and so it is green. Once it gets big(once mouseY is larger than a particular point) it becomes ripe(pink). I initially wanted to play around with the curve even more, but I realized that doing so would make the shape not a heart, which wouldn’t work with the idea of a peach. Thus, I just play around with making the curves change “rationally”(so it keeps the shapes of a heart) according to the mouse positions.

Christine Chen-Looking Outwards-06

Above is the music piece Ryoanji(named the same as the artwork) composed by John Cage in 1985

John Cage was an American composer who is best known for his avant-garde music and his use of randomness in music composition. In addition to composing music, he also uses randomness to create graphic art. For his piece Ryoanji, he had his assistants read computer-generated random numbers off a list. This chooses which rows of rocks to be chosen, which painting brush to be used, and the position of the stone on the paper. The numbers are “truly” random numbers. After this, Cages paints around the stone to trace the outline. In other words, he used computer-generated coordinates which are randomly generated to determine the positions of the graphics in the picture. This piece was created in conjunction with one of his musical piece, which partially composed through randomness, that was named the same title. The is composed of 3375 rock tracings.

What I admire most about this piece is that at first glance, it just seems as if there is nothing special about it. However, after knowing the algorithm that was used to create it, the entire piece seems more interesting. All those lines seem to be random and not random at the same time! Random because the computer chose the numbers through random process and the numbers are entirely dependent on chance. However, at the same time, the piece also seems to be not so random as the values are defined entirely by a machine and drawn according to that. I also enjoy the fact of how it is created to be congruent with the music. Cage’s artistic sensibilities is shown through his choice of only graphite and paper as his medium. The monotone vibe expressed through the piece reflects the serious, heavy experience that the music expresses.

Christine Chen-Project-06-Abstract Clock

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-06-Abstract Clock
*/

function setup() {
    createCanvas(400, 400);
    angleMode(DEGREES);
}

function draw() {
    background(43, 43, 47); //darl gray background

    //background circle
    strokeWeight(0); //no stroke
    for (i = 560; i > 320; i = i - 60){
        fill(70); //light gray
        ellipse(200, 200, i, i);

        fill(55); //medium gray
        ellipse(200, 200, i - 20, i - 20);

        fill(43); //dark gray
        ellipse(200, 200, i - 40, i - 40); 
    }

    var angleH = 0; //angle for hour circle rotations
    var angleM = 0; //angle for minute circle rotations
    var angleS = 0; //angle for second circle rotations

    //y position for the circles of Hour, Minute, Second
    var yH = 0; 
    var yM = 20; 
    var yS = 40; 
    
    //Fetch current time
    var H = hour();
    var M = minute();
    var S = second();

    //ratio for controlling spiral circles within borders
    var ratio = 0.3 * width;

    strokeWeight(0.5);

    //Seconds Spiral
    for (var i = 0; i < S; i++){
        push();
        translate (200, 200);
        rotate(angleS);

        stroke(255); //white
        line(0, yS, 0, 0); //draw from canvas center to circle center

        noStroke();
        fill(255); //white
        ellipse(0, yS, 5, 5);
        pop();

        yS += ratio/60;
        angleS += 12;
    }

    //Hour Spiral
    for (var i = 0; i < 24; i++){
        push();
        translate (200, 200);
        rotate(angleH);
        
        if(i < H){
            fill(133, 185, 250); //light blue for current time
        } else {
            fill(100); //gray circles for the rest
        }
    
        ellipse(0, yH, 13, 13);
        pop();

        yH += ratio/24;
        angleH += 30;
    }


    //Minute Spiral
    for (var i = 0; i < 60; i++){
        push();
        translate (200, 200);
        rotate(angleM);

        if(i < M){
            fill(122, 150, 255); //dark blue for current time
        } else {
            fill(70); //gray circles for the rest
        }

        ellipse(0, yM, 10, 10);
        pop();

        yM += ratio/60;
        angleM += 12;
    }


}

My idea was a lot harder to create than I thought it would be. I created a spiral form of an abstract clock. The largest circles represent the hour, the medium sized ones represent minutes, and the smallest ones represent seconds. All 24 circles representing hours and all 60 circles representing minutes are drawn out. They get lighted up to represent the current time. The smallest circles representing seconds are drawn in real time which shows how time is moving forward.

I added in the background layers of ellipses and to make the clock more visually interesting. I also experimented with lines and added the lines to connects the canvas center to the second circles to make the movement of the clock more dynamic. I also ended up with having the circles of the more center parts of the spiral overlapping each other because I just like how it gives it a more dynamic “spiral” look rather than having equal distances between all of the circles.

Christine Chen-Looking Outwards-05

Above is Filip Hodas’s piece Post-apocalyptic Hello Kitty created in 2017
Source: https://scene360.com/wp-content/uploads/2017/07/filip-hodas-02.jpg

Filip Hodas, a computer graphic artist from Prague, used computer softwares to create a series of 3D rendering artworks portraying pop culture dystopia. He used Maxon Cinema 4D, Octane Render, Substance Painter and Photoshop to create these stunning renderings. What I admire most about his pieces is how incredibly detailed they are. He used the softwares for illustration, computer animation and visual effects to create pieces that are so detailed that they are almost like photos. I just can’t believe that all the intricate scratches, shadows of depth, and textures are created with computer programs which again make me realize the impressive capacities that computer programs help us achieve.

His sense of style and futuristic ideas behind this series is also very unique and interesting- to think of objects, items and icons of current pop culture, such as Hello Kitty, Mario, Mickey Mouse, Sponge Bob……etc., as things to be turned into defunct, ominous forms when all living on Earth have disappeared millions and millions of years from now. It is also quite shocking for me to see these characters, which seems to be related to innocence because of how popular they are among children, be portrayed in such a negative way. I almost didn’t recognize the items portrayed within the pieces because of how different they are.

Christine Chen-Project-05-Wallpaper

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-05-Wallpaper
*/

var x;
var y;
var offset = 10; //offset for left/right leaf positions

function setup() {
    createCanvas(600, 400);
    noStroke();
}
 
function draw() {
    background(255, 184, 214); //pink background
    polkaDots(); //dots for background
    fruit();
    noLoop(); 
}


function polkaDots(){ //background dots
    for (var y = 30; y < height; y += 120) {
        for (var x = 0; x < width + 100; x += 100) {
            fill(191, 212, 252); //light blue
            ellipse(x, y, 100, 100);
        }
    }
}

function fruit() {
    //odd row (bright pink peach)
    for (var y = 30; y < height; y += 120) { 
        for (var x = 50; x < width; x += 100) {
            //peach
            fill(255, 104, 168); //bright pink
            ellipse(x , y, 50, 50);

            //leaf
            fill(2, 133, 0); //dark green
            ellipse(x - offset - 4, y - 25, 30, 15); //left leaf
            ellipse(x + offset , y - 25, 20, 10); //right leaf
        }
    }

    //even row (dark pink peach)
    for (var y = 90; y < height; y += 120) { 
        for (var x = 100; x < width; x += 100) {
            //peach
            fill(220, 72, 134); //dark pink
            ellipse(x, y, 50, 50);

            //leaf
            fill(0, 217, 20); //bright green
            ellipse(x - offset - 4, y - 25, 30, 15); //left leaf
            ellipse(x + offset , y - 25, 20, 10); //right leaf
        }
    }
}

I had a lot of fun writing the codes for this project! Initially, I just wanted a simple wallpaper with repeating peaches. After I wrote the codes for that, I realized that it would be fun to have big repeating dots at the background that contrasts with the pink background. I also experimented with having gradients on the peaches using what I learned in recitation this week, but the results don’t look good, so I didn’t use that for the final.

Experiment with using gradient for pattern

Christine Chen-Looking Outwards-04

Above is Jimmy Lakatoes, Murcof, Alexandre Burton and Julien Roy’s piece Three Pieces with Titles created in 2017
Source: https://vimeo.com/239921625

While scrolling through all the numerous works of sound and computation, my attention was captured by the piece Three Pieces with Titles created by Jimmy Lakatoes, electronic musician Murcof, Alexandre Burton and Julien Roy. The piece is consisted of three pieces of musical audio that is created and controlled through manipulation of movement of physical forms under the camera. The creators used openFrameworks for processing the visual inputs and driving videos. The visuals were then synchronized to trigger phrases and even in Csound orchestra. All of visual details, such as colors, that were recorded influenced the audio output. The creators’ artistic sensibilities were manifested in the final form through rearranging the rhythm of the audio output and editing out some minor background sounds to make the final sound output more pleasing, organized, and clean.

The creator’s use of computation to turn visual forms into audio forms changed my views on audio. Before reading about this piece, I have always thought of visual forms and audio as two distinct entities that are not really relate to each other although both are extremely important. How one can be used to generate the other is just fascinating to me and makes me start to think whether the other ones of the human’s 5 senses can be used to generate each other through computation.

Christine Chen-Project-04-String Art

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Assignment-04-B 
*/

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

function draw() {
    background(136, 164, 255); //background blue

    var increment = 7.5;
    //the smaller the increment it, the denser the lines

    //Blue pyramid-like lines in the center
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.9);
        stroke(0, 80, 105); 
        line (a, height, width - a, 0);
    }

    //LEFT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(90); 
    translate(-width/2, -height/2); 
        
    
    //Left side upper corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
    
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
    
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
    
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
    
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
    
    //Left side lower corner 
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
    }
    
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
    
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
    
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
    
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 


    //RIGHT LINES
    //rotate
    push(); 
    translate(width/2, height/2); 
    angleMode(DEGREES);
    rotate(270); 
    translate(-width/2, -height/2); 
         
     
    //Right side lower corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105);
        line (0, a, a, 400);
    }
     
    //2nd 
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (0, a, a, 300);
    }
     
    //3rd 
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (0, a, a, 250);
    }
     
    //4th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (0, a, a, 220);
    }
     
    //5th
    for (var a = 0; a < width + 100; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); 
        line (0, a, a, 200);
    }
     
    //Right side upper corner
    //counting from outer blue lines to inner red lines
    //1st
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(0, 80, 105); 
        line (width, a, width - a, 400);
         }
     
    //2nd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(50, 80, 105); 
        line (width, a, width - a, 300);
    }
     
    //3rd
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(100, 80, 105); 
        line (width, a, width - a, 250);
    }
     
    //4th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(150, 80, 105); 
        line (width, a, width - a, 220);
    }
     
    //5th
    for (var a = 0; a < width; a = a + increment) {
        strokeWeight(0.4);
        stroke(255, 80, 105); //red line color
        line (width, a, width - a, 200);
    }

    pop(); 
}

I think this project is particularly hard because it is so difficult to visualize what your codes are going to draw. However, once I got a part of my lines to work, it was easier to plan out what I want to create with the part I had. After playing around with my strings for a while, I finally settled with this piece where the left and right strings wraps around the middle to emphasize the forms of the pyramid-like strings in the center. Having the wrapping strings at the top and bottom isn’t as visually interesting and having the wrapping strings on four sides is just too much.

Christine Chen-LookingOutwards-03

Above is Iris Van Herpen’s piece Decrypt Kymono, which is part of her Data Dust series, created in 2018
Source: https://futur404.com/wp-content/uploads/2018/01/iris-van-herpen-ss18-futur404-decrypt-kimono-gown.jpg

Iris Van Herpen is famous designer for 3D fashion. One of my favorite pieces from her is the Decrypt Kymonoshown above. Herpen utilized an inverted parametrically-drawn pattern as the algorithm to generate the design for the dress. The pattern of the dress was created with microscopic pieces that is foamed-lifted, laser-cut, and then heated-bonded onto the half-transparent, lightweight silk. The end result of the design is a stunning delicate piece that flows and synthesizes along with the body’s movement, reflecting the aesthetic beauty of the human body form. Herpen manifested her organic style of artistic sensibilities in the piece through personifying the aspects of nature with the piece’s movements and patterns, which are all designed through careful calculations and considerations.

What I admire most about Herpen is how she can create such natural, organic patterns with such an artificial method. Her designs represent the fusion of the artificial and natural. One quote from her that left a deep impression on me is “Don’t forget how engineered nature is, itself. I think we as humans don’t even come close to the intelligence within nature.” It is interesting how a lot of times people tend to think that the artificial world is complex and that nature represents simplicity. However, if we think about it, it is really the opposite. The nature world is so complex and uncontrollable that we humans have long sought to discover ways to manage parts and bits of it, only to realize that nature is still far more powerful than us.

Christine Chen-Project-03-Dynamic Drawing

/*
Christine Chen
Section E
cyc1@andrew.cmu.edu
Project-03-Dynamic Drawing
*/

var angle = 0; //angle for square rotation

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

function draw() {
    scale(0.95); //scaling it down so graphics won't be cut by WordPress
    //left side is for sadness
    //right side is for happiness

    //LEFT OF CANVAS IS BLUE
    if (mouseX < 320){
        background(129, 164, 235);
    }

    //RIGHT OF CANVAS IS ORANGE
    if (mouseX > 320){
        background(257, 141, 47);
    }

    //LINE OF SCALE
    fill(255);
    rect(100, 240, 440, 5); //long horizontal line for scale
    rect(320, 233, 5, 20); //line for midpoint

    //ROTATING SQUARE
    var x = mouseX
    push();
    if (x < 320){ //square turns red when on left
        fill(255, 0, 0);
    } else {
        fill(0, 255, 36);//square turns green when on right
    }

    if (x <= 100){ //restricts movement of x to be on the line of scale
        x = 100;
    } else if (x >= 540) { 
        x = 540;
    }

    translate(x, 240); //square would move horizontally according to x
    rotate(radians(angle));
    rectMode(CENTER); 
    rect(0, 0, 15, 15);
    pop();


    var squareSpeed = 0; 
    if (x < 320){ //square speeds up towards left
        squareSpeed = (320 - x + 320)/90;
    } else if (x > 320) { //square speeds up towards right
        squareSpeed = x/90;
    }

    angle = angle + squareSpeed;

    //----------EMOJI CODES----------
    var blue = color(180, 244, 255);
    var yellow = color(255, 228, 0);
    var size = 100;

    //FACE
    if (x < 320){ //emoji turns sad and increases size towards left
        noStroke();
        fill(blue); 
        var control = (320 - x + 320)/500; 
    } else { //emoji turns happy and increases size towards right
        noStroke();
        fill(yellow); 
        var control = x/500; 
    }

    ellipse(x, 170, size * control, size * control);

    //EYES
    fill(0);
    ellipse(x + 10, 155, 5, 5); //right eye
    ellipse(x - 10, 155, 5, 5); //left eye

    //MOUTH
    if (x > 320){ //happy mouth
        fill(228, 103, 126); //pink
        arc(x, 165, 35, 35, 0, PI); //arc with top opening
    } else { //sad mouth
        fill(79, 111, 203); //blue
        arc(x, 185, -35, -35, PI, TWO_PI); //arc with bottom opening
    }

    //NEGATIVE SIGN 
    let negativeColor = color(208); //resting color is gray
    if (x < 320){ //negative sign turns red 
        negativeColor = color(255, 0, 0);
    }
    fill(negativeColor);
    rect(40, 240, 20, 5);


    //POSITIVE SIGN
    let positiveColor = color(208); //resting color is gray
    if (x > 320){ //positive sign turns green
        positiveColor = color(0, 255, 36);
    }
    fill(positiveColor);
    rect(580, 240, 20, 5); //horizontal line
    rect(587.5, 233, 5, 20); //vertical line

}

I found this project quite challenging to start with as there are so many ways to address this project. In the end, I decided to create my own version of the emoji slider. I have always thought that the emoji slider on Instagram is not dramatic enough, so I took this project as a chance to create my own ideal version of the emoji slider with exaggerated features. Instead of having only one type of emotion, I used one end of the scale for sadness and the other one for happiness. I spent a lot of time figuring out how to make the face increase in size and the rotation square increase in speed on they approach the two ends of the scale. I finally figured out the equations after quite a while and it was definitely a fruitful gain for me! 🙂