Author: rhoh@andrew.cmu.edu

Robert Oh- Project07- Abstract Clock

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-06-Abstract_Clock

//assigning variables
var i = 0;
var rainArrayX = [];
var rainArrayY = [];
var currSec = 0;

//making the rain cloud
function cloud(x, y) {
    noStroke();
    fill(255);
    ellipse(x - 40, y, 60, 50);
    ellipse(x - 20, y, 50, 55);
    ellipse(x, y, 50, 55);
    ellipse(x + 25, y, 60, 50);
}

//x and y are the bottom left part of the cup, y2 is the water level
function cup(x, y, y2) {
    //the actual cup
    fill(198, 201, 255);
    quad(x, y, x - 5, y - 40, x + 25, y - 40, x + 20, y);

    //the water level
    fill(155, 255, 238);
    quad(x, y, x - ((y - y2) / 40 * 5), y2, x + 20 + ((y - y2) / 40 * 5), y2, x + 20, y);
}

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

function draw() {
    background(116, 121, 232);
    var H = hour() % 12;
    var M = minute();
    var S = second();

    //this nested for loop draws all the cups and correct water levels
    for (i = 0; i < 2; i++){
        for (j = 0; j < 6; j ++){
            if (i * 6 + j < H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - 40);
            }
            else if (i * 6 + j == H){
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80 - (40 * M / 60));
            }
            else {
                cup(j * 65 + 20, 300 + i * 80, 300 + i * 80);
            }
        }
    }

    //drawing the cloud
    cloud(H % 6 * 65 + 40, 50);

    //checking which cup row to go to
    if (H % 12 < 6){
        var k = 0;
    }
    else {
        var k = 1;
    }

    //adding a rain drop every second by using an array
    if (currSec != S){
        rainArrayX.push(H % 6 * 65 + 30);
        rainArrayY.push(80);
        currSec = S;
    }
    
    for (m = 0; m < rainArrayX.length; m ++){
        if (rainArrayY[m] >= (300 + k * 80 - 8)){
            rainArrayX.shift();
            rainArrayY.shift();
            m --;
        }
        else {
            fill(155, 255, 238)
            rect(rainArrayX[m], rainArrayY[m], 2, 8);
            rainArrayY[m] += 1;
        }
    }
}

I remember when I started brainstorming for this project, I looked outside my window and noticed that it was raining. And so, I thought to myself, “how can I add rain to this project?” After a lot more thinking, I was able to come up this project. I really enjoyed incorporating time into this project. Each cup represents the hour (in a 12-hour cycle), each minute increases the water level, and each second adds another rain drop.

Robert Oh- Looking Outwards- 06

Chance, Order, Change 6 (Black) 1978-9 Kenneth Martin

This painting is one of many paintings in Kenneth Martin’s “Chance and Order” series. As the name suggests, Martin was able to create this piece using pure chance events. Out of all the other paintings in the series, I liked this one the best because the black and white contrasts really well in terms of straight lines. I really appreciate this drawing, not only because it looks mysterious and complicated, but also because of the procedure Martin went through to make it.

The article states that to create the network of lines, Martin initially marked a blank drawing with points, moving clockwise around a rectangle. Lines were then generated by taking numbers, two at a time, at random out of a bag. Martin chose eight pairs of numbers for this work. He then turned the drawing by 90 degrees and repeated the process. After being repeated twice more, the drawing was then transferred to canvas.

Martin’s artistic and “random” side truly comes into play when you look at this painting. I am very excited and curious to see how other artists can incorporate randomness in their future art pieces.

https://www.tate.org.uk/art/artworks/martin-chance-order-change-6-black-t03190

 

Robert Oh-LookingOutwards-05

“The Forest” by Joannie Leblanc

This luscious realistic forest graphic was created by Joannie Leblanc. I really admire Leblanc’s work because she is a lighting artist, creating realistic scenes for video games. You can see her specialty in lighting absolutely perfecting this art. This specific graphic was not part of a video game, but served as an experiment as to how important light can serve to create a 3-D environment. It really opened my eyes to how such small details (like lighting) can affect how I am able to view different pieces of art.

Leblanc was able to create this graphic using Unreal Game Engine 4. She states that she was able to create all this lighting details using their new lighting features.

I personally have never worked with the Unreal Game Engine, but I can guess that this graphic was made by meticulously placing different lighting angles all over the environment (in order to give you that depth and immersion).

All in all, I am incredibly impressed by the realistic attributes of this piece, and if all video games paid this much attention to detail, as a huger gamer, I would be very pleased 🙂 .

Robert Oh Project-05-Wallpaper

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-05-Wallpaper

//assigning variables
var x = 0;
var y = 0;

function tile(x, y) {
    //creating the top border of each tile
    strokeWeight(5);
    stroke(6, 54, 132);
    fill(0);
    rect(x*250, y*100 + 2, 250, 10);

    stroke(0);
    //this x + y % 2 alternates every tile 
    if ((x + y) % 2 == 0){
        //creates gap
        rect(x*250, y*100, 70, 20);
        
        //making pacman
        fill(235, 255, 58);
        arc(x*250 + 45, y*100 + 53, 50, 50, PI/4, -(PI/4));

        //making the smaller dots
        fill(255);
        ellipse(x*250 + 85, y*100 + 53, 12, 12);
        ellipse(x*250 + 125, y*100 + 53, 12, 12);
        ellipse(x*250 + 165, y*100 + 53, 12, 12);

        //making the larger "power-up" dot
        ellipse(x*250 + 205, y*100 + 53, 20, 20);
    }
    else {
        //creating the gap
        rect(x*250 + 175, y*100, 70, 20);

        //pacman
        fill(235, 255, 58);
        arc(x*250 + 205, y*100 + 53, 50, 50, PI+PI/4, PI-(PI/4));

        //creating the smaller dots
        fill(255);
        ellipse(x*250 + 85, y*100 + 53, 12, 12);
        ellipse(x*250 + 125, y*100 + 53, 12, 12);
        ellipse(x*250 + 165, y*100 + 53, 12, 12);

        //creating the power-up dot
        ellipse(x*250 + 45, y*100 + 53, 20, 20);
    }
}

function setup() {
    createCanvas(500, 500);
    background(0);
    //nested for loop to fill up my wallpaper with my pacman tiles
    for (y = 0; y < 5; y ++){
        for (x = 0; x < 2; x++){
            tile(x, y);
        }
    }

    //creating borders and middle line
    fill(0);
    strokeWeight(5);
    stroke(6, 54, 132);
    rect(245, 0, 10, 500);
    rect(0, 487, 500, 10);
    rect(0, 0, 10, 500);
    rect(488, 0, 10, 500);

    //creating a gap on the bottom
    stroke(0);
    rect(245, 417, 20, 65);

    noLoop();
}

function draw() {
    //nothing here because noLoop is called
}

When I started this project, I was brainstorming for ideas to create my tiles with. I am a huge video gamer, and so I thought a cute little Pacman “maze” would be cute to code. I designed the background and details to match those of the actual original game (with the blue walls, black background, white pellets and bigger “power-up pellets”. All in all, I love how it ended up looking!

Robert Oh- Looking Outward-04

Sonic Playground, created by Yuri Suzuki Design

For this week’s Looking Outward, I chose to read up on the Sonic Playground, created by Yuri Suzuki Design. In a nutshell, the playground is a collection of 6 different interactive sound sculptures that carry sound waves to nearby sculptures.

I really admire this project, because one of its main goals is to introduce art to regular people walking outside. I love the fact that this playground is geared towards children, so that they are able to experience how sound waves travel and to enjoy playing outside. Personally, I have experienced a similar contraption at a science museum once that allowed people on opposite sides of a wide room to hear each other using similar sculptures. And so, I really do love the fact that a person has carried on that idea to make it accessible to the public.

The software used to develop and optimize the pieces in the sculptures was designed by Luca Dellatorre using Grasshopper which is a parametric design plug-in in Rhinoceros. The article states that Luca  simulated sound wave behavior using ray tracing techniques.

Clearly, we are able to see the fun-loving, colorful side of the creator’s artistic sensibilities that show in the Sonic Playground. I am very excited for future playgrounds and public attractions like these that bring people together through science and fun!

link to the article:

Sonic Playground – Playful acoustics by Yuri Suzuki Design

Robert Oh-Project-04-String-Art

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-04-String-Art

//assigning variables


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


function draw() {
    background(0);
    strokeWeight(1)
    stroke(255, 120, 79)

    //creating the top and bottom parts
    for (var i = 1; i < 401; i+=10){
        line(200, 26, i, 300);
        line(200, 274, i, 0);
    }

    stroke(255, 142, 142)
    //creating the left and right parts
    for (var i = 1; i < 301; i+=10){
        line(33, 150, 400, i);
        line(367, 150, 0, i);
    }

    stroke(255);
    //creating the top left and bottom right parts
    for (var i = 1; i < 401; i+=12){
        line(0, height-(i*3/4), i, 0)
        line(i, 300, 400, height - i*3/4);

    }
    
    //creating the bottom left and top right parts
    //I changed the increment here to be lower to show more depth
    for (var i = 1; i < 401; i+=5){
        line(0, i*3/4, i, 300);
        line(i, 0, 400, i*3/4);
    }
}

For this project, I originally started off just experimenting around. When I finally was able to create the “star” figure in the middle, I knew I wanted to add some more flair, and so I included the curves covering the edges of the screen.

Robert Oh-LookingOutwards-03

Caption: “Awesome 3D Printed Flexible Shoes” – RCLifeOn

I believe that one of the coolest and most interesting machines that utilizes computational digital fabrication is the 3D-printer. I personally have a 3D printer in my house, and playing around with it is incredible fun. My dad and I were able to create numerous little trinkets, ranging from door handles to fidget spinners.

And so, what intrigued me most about this project is how practical 3D printing has become. In this project, YouTuber RCLifeOn has 3D printer his own pair of colorful shoes! I admire the fact that 3D printing may be able to replace ever having to buy certain products again!

As for the algorithm, I know that there is a certain software that 3D printers use in order to print these objects out (you have to model the object in the software). In the video, the YouTuber claims to have used 3 different types of materials for the shoes: TPU, FilaFlex and NinjaFlex. I believe the creator’s colorful and creative imagination was able to bring this cool concept into life (who would’ve thought of 3D printing shoes?).

This only leads me to wonder, what other useful daily life items will we be able to 3D print in the near future?

Robert Oh Project-03-Dynamic-Drawing

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//Project-03-Dynamic-Drawing

//assigning variables
var i = 0;
var eyes_dir = 0;
var a = 0;
var b = 0;
var col = 0;

//function to make the panda figures
function panda(x, y, eyes, a) {

    //ears
    fill(0);
    ellipse(x - a*25, y - a*30, a*40, a*30);
    ellipse(x + a*25, y - a*30, a*40, a*30);

    //body
    fill(0);
    ellipse(x, y + a*60, a*100, a*100);
    fill(255);
    ellipse(x, y, a*90, a*80);
    ellipse(x, y + a*60, a*80, a*80);
    fill(0);
    strokeWeight(5);
    quad(x - a*5, y + a*55, x - a*3, y + a*55, x + a*5, y + a*65, x + a*3, y + a*65);
    quad(x + a*5, y + a*55, x + a*3, y + a*55, x - a*5, y + a*65, x - a*3, y + a*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y - 5);
    rotate(radians(-60))
    ellipse(0, 0, a*30, a*20);
    pop();
    push();
    translate(x + 20, y - 5);
    rotate(radians(60))
    ellipse(0, 0, a*30, a*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y - 10, a*5, a*5);
    ellipse(x + 15 + eyes, y - 10, a*5, a*5);

    //nose + mouth
    fill(0);
    ellipse(x, y + 7, a*5, a*5);

    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= a*40){
        fill(255, 147, 147);
        arc(x, y+15, a*20, a*20, 0, PI);
        fill(255, 53, 53);
        ellipse(x - 30, y + 15, a*15, a*15);
        ellipse(x + 30, y + 15, a*15, a*15);
    }
    else{
    quad(x - a*1, y + a*7, x + a*1, y + a*7, x + a*1, y + a*15, x - a*1, y + a*15);
    quad(x - a*1, y + a*15, x , y + a*16, x - a*7, y + a*20, x - a*8, y + a*20)
    quad(x + a*1, y + a*15, x , y + a*16, x + a*7, y + a*20, x + a*8, y + a*20)
    }
}

//function to make the panda figures upside down
function panda_down(x, y, eyes, b) {

    //ears
    fill(0);
    ellipse(x - b*25, y + b*30, b*40, b*30);
    ellipse(x + b*25, y + b*30, b*40, b*30);

    //body
    fill(0);
    ellipse(x, y - b*60, b*100, b*100);
    fill(255);
    ellipse(x, y, b*90, b*80);
    ellipse(x, y - b*60, b*80, b*80);
    fill(0);
    strokeWeight(5);
    quad(x - b*5, y - b*55, x - b*3, y - b*55, x + b*5, y - b*65, x + b*3, y - b*65);
    quad(x + b*5, y - b*55, x + b*3, y - b*55, x - b*5, y - b*65, x - b*3, y - b*65);

    //eyes
    noStroke();
    push();
    translate(x - 20, y + 5);
    rotate(radians(60))
    ellipse(0, 0, b*30, b*20);
    pop();
    push();
    translate(x + 20, y + 5);
    rotate(radians(-60))
    ellipse(0, 0, b*30, b*20);
    pop();
    fill(255);
    ellipse(x - 15 + eyes, y + 10, b*5, b*5);
    ellipse(x + 15 + eyes, y + 10, b*5, b*5);

    //nose + mouth
    fill(0);
    ellipse(x, y - 7, b*5, b*5);
    
    //what happens when the mouse hovers over a panda face
    if (dist(mouseX, mouseY, x, y) <= b*40){
        fill(255, 147, 147);
        arc(x, y - 15, b*20, b*20, PI, 0)
        fill(255, 53, 53);
        ellipse(x - 30, y - 15, b*15, b*15);
        ellipse(x + 30, y - 15, b*15, b*15);
    }
    else{
    quad(x - b*1, y - b*7, x + b*1, y - b*7, x + b*1, y - b*15, x - b*1, y - b*15);
    quad(x - b*1, y - b*15, x , y - b*16, x - b*7, y - b*20, x - b*8, y - b*20)
    quad(x + b*1, y - b*15, x , y - b*16, x + b*7, y - b*20, x + b*8, y - b*20)
    }
}

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


function draw() {
    background(146, col, 171);
    noStroke();
    //drawing all the pandas
    for (i = 0; i < 4; i++) {
        //how to make eyse look at the bamboo!
        eyes_dir = (mouseX - (175*i + 60))/100;
        
        //these are the factors I'm multiplying all my values by
        a = mouseY / 300;
        b = (480 - mouseY) / 300;

        if (mouseY >= 300){
            b = 0;
        }
        if (mouseY <= 180){
            a = 0;
        }
        
        panda(175*i + 60, 400, eyes_dir, a);
        panda_down(175*i + 60, 80, eyes_dir, b);
    }

    //drawing the bamboo
    fill(48, 153, 84);
    rect(mouseX - 6, mouseY - 30, 12, 19);
    rect(mouseX - 6, mouseY - 10, 12, 19);
    rect(mouseX - 6, mouseY + 10, 12, 19);
    push();
    fill(97, 255, 76);
    translate(mouseX + 18, mouseY - 25);
    rotate(radians(-30));
    ellipse(0, 0, 20, 8);
    pop();

    //changing the color of the background
    col = mouseY / 2;
}

When I read the prompt for this project, I knew right away that I wanted to do something with eyes. I felt that having a group of eyes staring at your mouse would add some excitement and personality to my project. After figuring that out, I figured I would just add some lovely pandas, and based the rest of the project off of that!

Robert Oh-LookingOutwards-02

One of my favorite videos on Rube Goldberg machines.

By definition, Rube Goldberg machines are machines intentionally designed to perform a simple task in an indirect and over-complicated way. These machines usually produce a domino effect, in which each device triggers the next one, and eventually reaches some end goal.

I found these machines very amusing and entertaining to watch. I love the effort the creator of this video put in to make this machine function just to turn a newspaper page at the end of the contraption. I also love the ingenuity of these machines, and how some completely normal action is humorously able to start the next action.

The creator of these machines, Rube Goldberg, was originally a cartoonist who designed his first machine in a comic strip. After much popularity, many TV shows and movies used these ideas, thus giving birth to the “Rube Goldberg machines”.  And so, Goldberg’s artistic sensibilities came to life in the form of these machines!

These machines give me inspiration to think outside the box and to come up with creative ideas!

Category Project-02-Variable-Face

version2

//Robert Oh
//Section C
//rhoh@andrew.cmu.edu
//project-02-Variable-Face

var body_width = 240;
var body_height = 250;
var face_width = 190;
var face_height = 200;
var eye_w = 35;
var eye_h = 0;
var beak_w = 20;
var beak_h = 20;
var beak_dir = 2;
var brow_outer_h = 110;
var brow_inner_h = 100;
var brow_width = 5;
var flipper_right_angle = 0;
var flipper_left_angle = (10/9);
var button_unit = 20;

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

function draw() {
  background(61, 247, 247);
  noStroke();

  //black parts of body
  fill(0, 0, 0);
  ellipse(320, 270, body_width, body_height);
  ellipse(320, 150, face_width, face_height);

  //flippers
  fill(0, 0, 0);
  if(flipper_right_angle < 0){
    flipper_right_angle = (2+flipper_right_angle);
  }
  arc(350, 270, 350, 350, flipper_right_angle*PI, (flipper_right_angle*PI)+(PI/16));
  arc(290, 270, 350, 350, flipper_left_angle*PI, (flipper_left_angle*PI)+(PI/16));


  //white parts of body
  fill(255, 255, 255);
  ellipse(320, 270, body_width-60, body_height-50);
  ellipse(320-(face_width/6), 150, face_width/3, face_height*3/5);
  ellipse(320+(face_width/6), 150, face_width/3, face_height*3/5);
  rect(300, 150, 60, 40);

  //feet
  fill(255, 181, 102);
  ellipse(320-(body_width/5), 270+body_height/2, 60, 30);
  ellipse(320+(body_width/5), 270+body_height/2, 60, 30);

  //eyes
  fill(0, 0, 0);
  ellipse(320-(face_width/6), 140, 30, 30);
  ellipse(320+(face_width/6), 140, 30, 30);
  fill(255, 255, 255);
  ellipse(320-(face_width/6), 150, 40, 20)
  ellipse(320-(face_width/6), 140, eye_w, eye_h)
  ellipse(320+(face_width/6), 150, 40, 20)
  ellipse(320+(face_width/6), 140, eye_w, eye_h)

  //blush
  fill(255, 170, 170);
  ellipse(320-(face_width/6), 150, 20, 15);
  ellipse(320+(face_width/6), 150, 20, 15); 

  //beak
  fill(255, 181, 102);
  if(beak_dir <= 1){
    beak_dir = 2;
    beak_w = -beak_w;
  }
  triangle(320, 150, 320, 150+beak_h, 320+beak_w, 150+(beak_h/2))

  //eyebrows 
  fill(0, 0, 0);
  quad(320-(face_width/6)-15, brow_outer_h, 320-(face_width/6)+15, brow_inner_h, 320-(face_width/6)+15, brow_inner_h+brow_width,
       320-(face_width/6)-15, brow_outer_h+brow_width);
  quad(320+(face_width/6)-15, brow_inner_h, 320+(face_width/6)+15, brow_outer_h, 320+(face_width/6)+15, brow_outer_h+brow_width,
       320+(face_width/6)-15, brow_inner_h+brow_width);
  
  //buttons
  fill(0, 0, 0);
  ellipse(320, 230, button_unit, button_unit);
  ellipse(320, 270, button_unit, button_unit);
  ellipse(320, 310, button_unit, button_unit);

  //whites inside the buttons
  fill(255, 255, 255);
  ellipse(320-(button_unit/8), 230-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 230+(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320-(button_unit/8), 270-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 270+(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320-(button_unit/8), 310-(button_unit/8), button_unit/4, button_unit/4);
  ellipse(320+(button_unit/8), 310+(button_unit/8), button_unit/4, button_unit/4);
}

function mousePressed() {
  //changes emotions every time mouse is clicked
  body_width = random(220, 260); 
  body_height = random(230, 270); 
  face_width = random(170, 210); 
  face_height = random(180, 220); 
  eye_w = random(30, 40); 
  eye_h = random(12, 25); 
  beak_w = random(5, 20); 
  beak_h = random(10, 20); 
  beak_dir = random(0, 2); 
  brow_outer_h = random(100, 120); 
  brow_inner_h = random(100, 120); 
  brow_width = random(2,7); 
  flipper_right_angle = random(-(1/4), 0);
  flipper_left_angle = random(1, 5/4);
  button_unit = random(15, 30); 
}

I had a lot of fun making this project. Penguins are definitely my favorite kind of animal, so I thought I would make faces for these adorable, flightless birds. Because I couldn’t add mouths to penguins (which play a huge part for  expressions), I had to make up for it by changing their eyebrows and eyes. Enjoy!