Section E – Page 26 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Nina Yoo Project-05-Wallpaper Section E

/* Nina Yoo
Section E
nyoo@andrew.cmu.edu
Project- 05 Wallpaper*/
var head = 30
var eyes = 15
var eye =  30
var space = 50

function setup() {
    createCanvas(600, 400);
    background(216,117,28);
   

    for (var y = 25; y < height; y+=space) { //y position of wall paper
        for (var x = 25; x < width; x+=space) { //x position of wall paper

            //outercircle
            noStroke();
            fill(215,185,119);
            ellipse(x, y, head, head);

            //2nd circle
            noStroke();
            fill(0);
            ellipse(x,y,head*.5,head*.5);  //have to base i off of head variable

            //middle
            noStroke();
            fill(238,184,213);
            ellipse(x,y,head*.2,head*.2);
        }
    }
    for (var a = 40; a<width; a+=space){
        for (var b = 40; b<height;b +=space){ //offset spacing
                //tan overlayering
            stroke(200,200,124);
            noFill();
            ellipse(a,b, eye,eye); // create new variable eye to separate from the other loop
            
            //black center circle
            stroke(0);
            noFill();
            ellipse(a,b,eye*.5,eye*.5);

        }


    }

        }
        
    

        
        
           






function draw() {
    // draw is not called due to noLoop() in setup()
    noLoop()
}

I wanted to play with circles and the colors to mess with someones eyes on a lower scale and it was fun trying to trip myself up while also deciding where to have fill versus not. The spacing took some time to figure out where I wanted the nofill circles to be, but was worth.

Nina Yoo Looking Outwards -05 Section E

Mohammed Chahin-Road to Nowehere- August 20,2018

This project is really cute and something I would want to delve into because even though the subject looks as it if was more cartoony it actually has harsh edges and highlights to give it a more 3d generated or mechanical feel. The image generated provides a more realistic version of a 2d image causing the viewer to be tricked into thinking of the image more as an object or more able to be within their realm of “space”. The algorithm that is generated most likely entails that there are variables that need to be calculated for the highlights and shadows to work precisely where they are supposed to be because if not then the 3d image would look more 2d than 3d. The artist itself was able to incorporate their own style of art by adding these cute designs instead of aiming for hyperrealism, which is effective in 3d designs, but this artist proves there can also be 3d depth in more imaginary characters.

Jason Zhu Project 05

sketch

/* Jason Zhu
jlzhu@andrew.cmu.edu
Section E
Project 5
*/

// setup variables
function setup() {
    createCanvas(600, 400);
    background(10, 15, 35);
    var tw = 60/sqrt(3); //triangle width (adjusted)
    var th = 60; //triange height
    var oy = 50; //origin y of circles
    var ox = 50; //origin x of circles
    var r = 0;

    for (var y = 0; y < 6; y++) {
        //distinguishes even rows
        if (y % 2 == 0){
                //even rows: create 6 moon shapes
                for (var x = 0; x < 6; x++) {
                //position of moons x and y
                noStroke()
                fill(255);
                var py = oy + y * th;
                var px = ox + x * 103;
                ellipse(px, py, 50, 50);
                // create moon shadows and positions x and y
                push()
                fill(10, 15, 35)
                var py = oy + y * th;
                var px = ox + x * 93.5;
                ellipse(px+50, py, 50, 50);
                pop()
                }

             } else {
                //odd rows: create 5 main rectangle lines
                for (var x = 0; x < 5; x++) {
                var py = oy + y * th;
                push()
                //set random color and position variables
                var r = random(-50,50);
                var r2 = random(1, 5);
                var red = random(100, 255);
                var blue = random(100, 255);
                var green = random(100, 255);
                //offset origin x by an additional tw
                var px = ox + tw + x * 100;
                push()
                stroke(red, blue, green);
                // create 5 offset rectangle lines
                rect(px, py, 50, 1);
                rect(px +25, py +10, 45, 1)
                rect(px -25, py -10, 45, 1)
                pop()
                // create stars and set color
                fill(red, blue, green);
                ellipse(px+r, py+r, r2, r2);
                }
            }
        }
    noLoop();
}

function draw() {
    // draw is not called due to noLoop() in setup()
}

For this project I was inspired to create something that reminded me of stargazing as a child. When prompted to create something I would wear I interpreted that as to create something that I found meaningful to me and my own human experience. I wanted to create a wallpaper that conveyed a sense of time and wonder. Thus, I chose to demonstrate a very implied version of the moon cycle along with some colorful lines and stars that would tie the composition together. In terms of code, I tried to incorporate features from past classes–I added a basic random function to help create a slightly different experience upon each reload. Overall, I am fairly satisfied with the outcome and what I was able to learn from this project.

Jason Zhu Looking Outwards 05

https://www.theverge.com/2017/7/18/15988096/war-for-the-planet-of-the-apes-joe-letteri-visual-effects-interview

View post on imgur.com

Created by Visual FX team for the Planet of the Apes film series (2011-2017). When lookin at computational artwork, I thought about the trilogy for the movies series Planet of the Apes. I thought it was amazing how well a computer was able to create apelike faces from human expression. In order to create such realistic renderings, it seems that the actors are wearing specialized motion tracking devices to capture facial expressions and movements as well as a slew of cameras to capture motions from various angles. The computer is then able to stitch together this data into overlays that take into account muscle, size, and movement. I find it fascinating how computer generated graphics have evolved over the years in order to create such realism and intimacy and I think it is only a matter of time until the technique is completely perfected and indistinguishable from reality.

Carley Johnson Project 05

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project 05
*/

var d = 25;

function setup() {
    createCanvas(640, 480);
    background(255, 228, 233);
}

function draw() {
    for(var y = 0; y < 20; y += 2) {
        for(var x = 0; x < 20; x += 3) {

            // Bird body
            fill(0, 223, 252);
            stroke(0);
            rect((x*d * 1.5 - 185) + y * 25, 
                    25 + y*d * 2, d + 9, d + 2, 
                    0, 20, 20, 20);
            
            //Bird beak
            fill(255, 178, 76);
            stroke(0);
            triangle((x*d * 1.5 - 152) + y * 25, 35 + y*d * 2, 
                   (x*d * 1.5 - 152) + y * 25, 40 + y*d * 2, 
                    (x*d * 1.5 - 140) + y * 25, 35 + y*d * 2)

            //Bird eye
            fill(0);
            stroke(0);
            ellipse((x*d * 1.5 - 160) + y * 25, 33 + y*d * 2, 
                    3, 3)

            //Bird wing
            fill(154, 242, 253);
            stroke(142, 216, 252);
            bezier((x*d * 1.5 - 184) + y * 25, 38 + y*d * 2,
                    (x*d * 1.5 - 175) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 170) + y * 25, 55 + y*d * 2,
                    (x*d * 1.5 - 160) + y * 25, 38 + y*d * 2)

            //Bird food
            fill(255, 178, 76);
            stroke(0);
            ellipse((x*d * 1.5 - 110) + y * 25, 33 + y*d * 2, 
                    5, 5)
            }

      }
      
    }

I knew I wanted to do birds, because I think birds are an adorable and eccentric pattern. (I have a rain jacket with a repeating bird silhouette pattern on it that I love, pictured above) so I chose that. For a while I was trying to create five thousand variables for each individual shape, but that was making different patterns with each shape, not following where the body was. Then I realized that I could simplify the process by using the same variables (which also unified where the objects appeared) and had to live with the retrospective embarrassment of taking so long to figure it out. But I think this is adorable, so, worth it!

Miranda Luong-LookingOutwards-05

A new experience designed by Local Projects in partnership with Diller Scofidio + Renfro, The Pen at the Cooper Hewitt offers visitors a chance to experiment with creating their own designs. Visitors employ a Pen on interactive tables to explore the museum’s archive of objects, manipulate them and design their own. To do so, visitors draw on a gridded screen and watch as their objects are rendered live as 3D Computer Graphics on another screen adjacent to the first. While I don’t know of the specific algorithm utilized to program the Pen, Cooper Hewitt explains that the Pen’s interface with the interactive tables employs conductive materials common to touchscreen styli. I find this project truly inspiring as it provides a very new and much more immersive way for visitors to engage with works on view in the museum. Reading the project brief and having used the Pen myself, I can tell that its creators wanted to make something very unique, that spoke to the specificities of a design museum. The Pen goes beyond what is offered by an app as it invites visitors to learn about design by designing themselves.

Eunice Choe – Project-05 – Wallpaper

sketch

/* Eunice Choe
Section E
ejchoe@andrew.cmu.edu
Project-05
*/

function setup() {
    createCanvas(480, 480);
    background(116, 124, 181);
    var ws = 80; // width spacing
    var hs = 50; // height spacing

    for (var y = 0; y < 11; y++) {
        for (var x = 0; x < 7; x++) {
            if (y % 2 == 1){ // even rows with coffee beans
                var py = y * hs;
                var px = (ws / 2) + x * ws; // offset shift to the right by half of width spacing
                stroke(76, 44, 15);
                ellipse(px, py, 10, 5);
                ellipse(px + 10, py + 5, 5, 10)
                ellipse(px, py + 10, 5, 10);

            }
            else { // odd rows with coffee mugs
                var py = y * hs;
                var px = x * ws;
                // cream colored mug shape
                noStroke();
                fill(255, 242, 196);
                arc(px, py, 60, 80, 0, PI, CHORD);
                arc(px + 20, py + 15, 30, 20, 10, HALF_PI);
                // brown mug outline
                stroke(178, 154, 119);
                strokeWeight(4);
                noFill();
                arc(px - 8, py, 60, 80, 0, PI, CHORD);
                // zig zag steam lines
                stroke(255);
                strokeWeight(3);
                line(px - 20, py - 10, px + 15, py - 12);
                line(px + 15, py - 12, px - 15, py - 16);
                line(px - 15, py - 16, px + 10, py - 20);
                line(px + 10, py - 20, px - 5, py - 30);
            }
        }
    }
    noLoop();
}

For my wallpaper project, I decided to created a pattern that alternated coffee mugs and coffee beans. I was inspired to create the mug pattern after seeing a wallpaper online. With the repeating pattern, I was interested in seeing how the mugs and coffee beans turned somewhat abstract over time. I originally did not intend to abstract the mugs, but I actually like how they look in the final result! I like the idea of someone looking twice at the wallpaper before realizing what the pattern is. Overall, this project was good practice for using nested for loops.

Eunice Choe – Looking Outwards-05

These are three icebergs from the series.

Chaotic Atmospheres, a Switzerland based 3D artist created beautiful renditions of icebergs in his series titled, Caustic Icebergs (2013). I admire this series because the icebergs are very aesthetically pleasing and the artist does a great job of displaying an environment with grace and drama. While all the icebergs appear to be similar, the subtle differences between them allow the viewer to see new compositions that can stand alone. Chaotic Atmospheres used Acropora, which is a voxel modeler by Voxelogic, to create the icebergs. The icebergs all started off from a base, but the artist changed the parameters to make each iceberg unique. The artist also utilized the rendering software, Vue for the glowing water and sky. Chaotic Atmospheres incorporates his artistic sensibilities in the series through his attention to detail and ability to capture a scene in nature in a very realistic and captivating way. The artist’s use of color and various textures can undoubtedly catch someone’s attention.

The artist incorporates a glowing effect to the icebergs and sky.

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.