Sarah Yae Looking Outwards 7 Section B

“How Different Groups Spend Their Day” by Amanda Cox displays how different types of people (unemployed, employed, etc) spend their time during the day. I was intrigued by this visual because it was amazing how one could use computation to display such practical data. One could also easily pick out the type of data they wish to extract. For example, we can see that the unemployed sleep an hour more than the employed; the unemployed also spend an extra hour for house chores. It is amazing how Amanda Cox was able to get such data and display it in a visually appealing way, using computation. This type of display was not only highly informative, but also very visually pleasing.

To see more of her artwork, please follow the link: http://amandacox.tumblr.com/post/2709495753/a-peek-into-netflix-queues 

How Different Groups Spend Their Day

Sarah Yae Project 7 Section B

sketch
//Sarah Yae
//smyae@andrew.cmu.edu
//Section B
//Project 7

var nPoints = 500; 
var sizeHeart = 150; 

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

function draw() {
      background(220);
      drawHeartCurve();
}

function drawHeartCurve() {
    var t; //Theta 
    var x; 
    var y;

// Conditional to determine color of curve 
    if (mouseX > width / 2) {
        fill ('Salmon');
    }
    else {
        fill (148,141,179);
    }

// Draw the curve 
// Heart formula used: 
// x = 16 * sin^3(t)
// y = 13 * cos(t) - 5 * cos(2 * t) - 2 * cos(3 * t) - cos(4 * t)

    beginShape();
    for (var i = 0; i < nPoints; i++) {
        // Conversion of "i" into radians 
        var t = map(i, 0, nPoints, 0, TWO_PI); 
        // Moving the mouse horizontally controls how many curves are drawn 
        var x = (width / 2) + sizeHeart * sin(t * mouseX / 20) * sin(t) * sin(t);
        // Moving the mouse vertically controls how squiggly the lines get 
        var y = (height / 2) + sizeHeart * (cos(t)) - (cos(2 * t)) - (cos(3 * t * mouseY / 10)) - (cos(4 * t));
        vertex (x,y);
        }
        endShape(CLOSE); 
}
I originally intended to create a heart, so I started by using a heart equation, which is commented in my code above. However, along the way, I figured out ways to make the curves more interactive, and more fun, than just a regular heart. I also wanted to play with different colors, so I used a conditional to call different colors depending on the condition of mouseX. It would have been great though, if the colors could have gradually changed from lavender to salmon, instead of having a sudden change. In addition, I had trouble fully understanding the math equation part, but I was still able to understand functions used to create the curve.
Curve without “mouseY”
Curve without “mouseX”, “mouseY” 

Sarah Yae Looking Outwards 6 Section B

‘Pier and Ocean’ by Kenneth Martin

‘Pier and Ocean’ by Kenneth Martin was created in 1980. I found this artwork interesting because the lines, although randomly placed, created an artwork with meaning.  Although the lines have a color sequence that is patterned and similar, the placements of the line are random — parallel and intersecting. The artist, Kenneth Martin, was inspired to produce this artwork by an era, called Constructivism. This era focused on abstract art and randomness; his focus in this period of time allowed to create this artwork ‘Pier and Ocean,’ which incorporates abstract placement of the lines and randomness.

More information on the artwork could be found on:

https://www.tate.org.uk/art/artworks/martin-pier-and-ocean-p07743

Sarah Yae Project 6 Section B

sketch

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

function draw() {
    
    var H = hour();
    var M = minute();
    var S = second();

//Sky gets lighter with an hourly increment 
    background (0, 10 * H, 255);

//Sun moves position with the minute
    fill (250,218,94); 
    noStroke();
    ellipse (M * 5, 50, 50, 50);

//Cloud floats with the second
    fill('White');
    noStroke();
    arc(20 + S * 4,100,30,30, PI/2, 3*PI/2);

    fill('White');
    noStroke();
    arc(30 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);

    fill('White');
    noStroke();
    arc(50 + S * 4,85,30,30, 3*PI/4, (3*PI/4) + 3*PI/2);

    fill('White');
    noStroke();
    arc(60 + S * 4,100,30,30, 3*PI/2, PI/2);

    fill ('White');
    noStroke();
    rect(20 + S * 4,85,40,30);

//Sand 
    fill (225,191,146);
    rect (0, 190, width, height);

//Sand particles
    for (var x = 0; x < width; x += 10) {
        for (var y = 210; y < height; y += 20) {
           textSize (25);
            fill(87,72,60);
            text ('.', x, y); 
        }   
    }
}

Original Sketch

I originally wanted to create a project that would continuously draw stars (constellation) as the seconds go by, but as I worked on the project, realized that I wanted to move an object across- thus, I used a cloud. I had a difficult time creating a shape of the cloud, so I decided to hardcode each piece of the cloud (4 arcs + 1 rectangle). I even had a difficult time getting ideas about how I would want my abstract clock to reflect… However, I am satisfied with my final outcome and how it turned out; I especially like the smooth transition of the background, which reflects the hour. A great addition would have been if the sky reflected the actual sky color at specific hours, instead of just going from dark blue to light blue.

Sarah Yae Project 05 Section B

sketch

//Sarah Yae
//Section B
//smyae@andrew.cmu.edu
//Project-05

//variables for arc 
var uparc_x;
var uparc_y;
var arc_w = 100;
var arc_h = 50;

//variables for dots 
var px;
var py;
var yx;
var yy; 


function setup() {
    createCanvas(500, 500);
    background(213,196,161);
}

function draw() {

//upper green arc
for (var uparc_y = 50; uparc_y < 500; uparc_y += 100) {
    for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
            noFill ();
           stroke (177,194,122);
            strokeWeight (3);
            arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
        }
    }

//upper blue arc
for (var uparc_y = 100; uparc_y < 600; uparc_y += 100) {
    for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
            noFill ();
            stroke (180,216,231);
            strokeWeight (3);
            arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
        }
    }

//pink dots
for (var py = 25; py < 500; py += 50) {
    for (var px = 50; px < 500; px += 200) {
            fill(255,195,194);
            noStroke();
            ellipse(px,py,10,10);
        }
    }

//yellow dots
for (var yy = 25; yy < 500; yy += 50) {
    for (var yx = 150; yx < 500; yx += 200) {
            fill(253,253,150);
            noStroke();
            ellipse(yx,yy,10,10);
        }
    }

noLoop();

}

I was originally planning on doing a wallpaper that resembles string lights:

Sketch: green strings and yellow lights on a beige background

However, I realized that as I was creating the wallpaper, it was more aesthetically pleasing to do different patterns and colors, rather than just string lights. I used a lot of pastel colors, to evoke a soft feeling.

Sarah Yae Looking Outwards 5 Section B

 

I admire this project, ‘Morning Fog’ because the artist was able to render a realistic, yet 3D cartoon characters in a picturesque setting. It almost feels as if the characters could move in any moment. The shadowing used in this 3D generated work makes the artwork more realistic.  The realistic background and the decorations used make the background more alive. However, the cartoon aspect of this work is shown from the physical appearance of human characters. In order to create this artwork, I suppose she used applications like Photoshop, Maya or ZBrush to create this artwork.

Morning Fog  was created by Leticia Gillet in 2015. Link to the work is: https://leticiarg.artstation.com/projects/Bv5or

Morning Fog by Gillet

 

Sarah Yae Looking Outwards 4

LINES is an interactive sound art exhibition, created by  Anders Lin in 2016. The sensors detect which sound to play when one’s hands are moving between the lines, by detecting the hands’ distance from the sensors. The final form manifests the artist’s artistic abilities as he creatively incorporates the exhibition’s sound system with the concept of lines. It has a practical, as well as an artistic side.

I found this artwork very intriguing because anyone can make music, even without any musical background. It was interesting in the fact that an individual is using his entire body to make certain sound.

The link to see the whole exhibition is: https://www.youtube.com/watch?v=hP36xoPXDnM

LINES – an interactive sound art exhibition

Sarah Yae Project 4 Section B


Project 4

//Sarah Yae
//Section B
//smyae@andrew.cmu.edu
//Project-04

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

function draw() {
    background(29,41,81);

 //variables
	var a = 0;
	var b = 0;
	var c = 0;
	var d = 0;
	var e = 0;
	var f = 0;
	var g = 0;
	var h = 0;
	var s = 10;
	var t = 10;
	var u = 10;
	var v = 10;
	var w = 10;
	var s1 = 10;
	var s2 = 10;
	var s3 = 10;
	var s4 = 10;
	var s5 = 10;
	var s6 = 10;
	var s7 = 10;
	var s8 = 10;
	var s9 = 10;
	var s10 = 10;


//Star 
	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s, 10, 5, 5);
		s += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (t, 30, 5, 5);
		t += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (u, 50, 5, 5);
		u += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (v, 70, 5, 5);
		v += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (w, 90, 5, 5);
		w += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s1, 110, 5, 5);
		s1 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s2, 130, 5, 5);
		s2 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s3, 150, 5, 5);
		s3 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s4, 170, 5, 5);
		s4 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s5, 190, 5, 5);
		s5 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s6, 210, 5, 5);
		s6 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s7, 230, 5, 5);
		s7 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s8, 250, 5, 5);
		s8 += 10;
	}

	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ()
		ellipse (s9, 270, 5, 5);
		s9 += 10;
	}
	
	for (i = 0; i <= 38; i++) {
		fill ('Yellow');
		noStroke ();
		ellipse (s10, 290, 5, 5);
		s10 += 10;
	}

//Salmon String Line 
	for (i = 0; i <= 100; i++) {
		stroke ('Salmon');
		strokeWeight (0.5);
		line (a, 0, 0, height-b);
		a += 10;
		b += 10;
	}

//Lavendar String Line
	for (i = 0; i <= 100; i++) {
		stroke (187,180,214);
		strokeWeight (0.5);
		line (width-c, 0, width, height-d);
		c += 10;
		d += 10;
	}

//Light Green String Line
	for (i = 0; i <= 100; i++) {
		stroke (191,228,118);
		strokeWeight (0.5);
		line (e, height, width, width-f);
		e += 10;
		f += 10;
	}

//Blue String Line 
	for (i = 0; i <= 100; i++) {
		stroke (148,168,208);
		strokeWeight (0.5);
		line (height-g, height, 0, height-h);
		g += 10;
		h += 10;
	}
}

This project reflects a concept of the outer space; the circles represent stars, and the strings are almost like the different dimensions of the space. I had fun making art out of the loop function!

Sarah Yae – Project 3

sketch

var angle = 0;
var dia = 40; 
var r = 0;
var g = 0;
var b = 0;

function setup() {
    createCanvas(480, 640);
    background(220);

}

function draw() {

//base face of person   
    noStroke();
    fill(255,229,200);
    ellipse (240,560,150,150);

//mouth of person
    noStroke();
    fill('red');
    triangle(210,580,270,580,240,610);

//draws rotating yellow rectangles, 
//as it interacts with the mouse
	fill (250,318,94);
	noStroke();
	push();
	translate(mouseX, mouseY);
	rotate(radians(angle));
	rect(0,0,20,20);
	pop();
	angle = angle + 2

//hair (right)
    fill (87,45,9);
    noStroke();
    ellipse(300,500,dia,dia);
//hair (middle)
    fill(87,45,9);
    noStroke();
    ellipse(240,480,dia,dia);
//hair (left)
    fill(87,45,9);
    noStroke();
    ellipse(180,500,dia,dia);
//hair grows as the mouse moves to the left side of canvas
if (mouseX <= 230) {dia = dia + 0.03}
//hair stops growing as the mouse moves to the right side of canvas
if (mouseX > 230) {dia = dia}

//eyes (right) 
    fill(r,g,b);
    noStroke();
    ellipse(270,550,20,20);
//eyes (left)
    fill(r,g,b);
    noStroke();
    ellipse(210,550,20,20);
//eyes change color as the mouse to the left side of canvas
if (mouseX <= 230) {r = r + 0.1}
if (mouseX <= 230) {g = g + 0.07}
if (mouseX <= 230) {b = b + 0.2}

}


As you move your mouse towards the left of the canvas, you can see hair growth, and eye color change; however, if your mouse is on the right side of the canvas, all changes to facial features stop. Your mouse’s location is tracked down by a yellow rectangle that spins around; you can even attempt to color the background yellow!

Sarah Yae Looking Outwards 3

The Bubble Palace designed by architect Antti Lovag and commissioned by industrialist Pierre Bernard,  is located on the French Rivera. This was completed in 1989. If one were to step inside this home, he would find tubular halls and round windows. I admire this project in that it broke free from the concept that structures have to be made out of hard lines and rectangles. By incorporating round shapes and circles, this house no longer feels like an average home, but a house one would see in a cartoon. A globular structure allows this home to feel a bit more enticing, as well as evocative.

A back view of the the Bubble Palace– it has a magical feel!

For more information about the Bubble Palace, please check: https://www.architecturaldigest.com/gallery/most-beautiful-buildings-inspired-by-bubbles