## Robert Oh- Project07- Abstract Clock

``````//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

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

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

``````//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

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!

Sonic Playground – Playful acoustics by Yuri Suzuki Design

## Robert Oh-Project-04-String-Art

``````//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

``````//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);
ellipse(0, 0, a*30, a*20);
pop();
push();
translate(x + 20, y - 5);
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);
ellipse(0, 0, b*30, b*20);
pop();
push();
translate(x + 20, y + 5);
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);
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

``````//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!