Month: September 2017

LookingOutwards-01 Jperez

Miyazaki’s Spirited Away

I must admit… I have not been exposed to much interactive or computational art. As I browse some of the amazing inspirational art my peers are referencing in their looking outwards posts, I realize the extent of how little I know.

Regardless, in some shape or form, digital art has been a part of my life since I was a child. In fact, perhaps my biggest artistic influence could be considered digital art: Miyazaki’s animated films.

Miyazaki’s films draw deeply on the water color painting tradition in Japan, going back hundreds and thousands of years. Every cel was painted by hand, and painstakingly put together to create a flawless animation; individual pieces of art in their own right, joined together to make something new.

What I find interesting about these animated films now, as an artist, is the number of people who helped to create them. In this sense, it diverges from the traditional singular author approach to art. These animated films joined the talents of composers, painters, computer scientists, and film directors to create something none of them could have done on their own. I admire the humility that takes (to not need all the glory for oneself), and I admire the communal strength that displays.

These films demonstrate great opportunity for collaboration among artists and different fields. They show that science and art are not disparate, but rather when they come together, they create something entirely new.

If these films set any sort of precedent for the future, I hope to see animation taken more seriously as an art form (high-brow or commercial). It seems to me that the general public attitude towards animation is that of childish entertainment, but anybody with critical faculties that watches a Miyazaki film will be forced to rethink that opinion.

Project-01-face

sketch

function setup() 
{

    ellipseMode(CORNER);
    createCanvas(300,300);
    background(220);
    
    fill(240,227,221);
    ellipse(50,25,200,250);

    fill(236,223,223);
    stroke(71,46,44);    
    strokeWeight(5);
    ellipse(135,10,25,25);
    strokeWeight(10);
    ellipse(75,40,35,35);
    ellipse(215,40,35,35);
    ellipse(55,75,35,35);
    ellipse(235,75,35,35);
    ellipse(105,20,35,35);
    ellipse(145,25,35,35);
    ellipse(185,20,35,35);
    ellipse(115,45,35,35);
    ellipse(90,50,35,35);
    strokeWeight(7);
    ellipse(165,10,25,25);

    fill(255);
    strokeWeight(1);
    stroke(0);
    ellipse(90,115,40,20);
    ellipse(170,115,40,20);
    fill(14,75,49);
    ellipse(105,120,10,10);
    ellipse(185,120,10,10);

    fill(251,223,210);
    noStroke();
    triangle(150,125,138,190,153,190);
    fill(234,205,192);
    triangle(150,125,153,190,168,190);

    fill(165,60,60);
    ellipse(125,215,50,8);
}

hschung-Project 01

sketch

//Heidi Chung
//Section A
//hschung@andrew.cmu.edu


function setup() {
	 createCanvas(600,600);
	 background(145, 193, 191);

	 noStroke();

	 fill(31, 34, 13); //hair
	 quad(200, 195,  400, 185,  425, 375,  180, 375);



	 fill(234, 178, 117); //neck
	 rect(263, 380, 78, 78);


	 fill(235, 207, 155); //face
	 ellipse(300, 260, 210, 260);


	 fill(234, 175, 152); //left blush
	 ellipse(235, 265, 60, 60,);

	 fill(234, 175, 152); //right blush
	 ellipse(365, 265, 60, 60);


	 fill(61, 44, 23); //left eye
	 ellipse(250, 240, 24, 22);

	 fill(61, 44, 23); //right eye
	 ellipse(350, 240, 24, 22);


	 fill(255); //mouth
	 ellipse(width/2, height/2 +10, 60, 60);


	 fill(235, 207, 155);//eclipse over mouth
	 rect(width/2 -30, height/2 -15, 60, 30);


	 fill(234, 178, 117); //nose
	 triangle(300, 267, 320, 290, 280, 290);

	 fill(76, 54, 36); //more hair
	 quad(222, 159,  345, 129,  420, 220,  391, 230);

	 fill(76, 54, 36); //more hair
	 quad(371, 398,  391, 228,  421, 219,  433, 340);

	 fill(76, 54, 36); //more hair
	 quad(215, 156,  183, 234,  206, 245,  247, 163);

	 fill(76, 54, 36); //more hair
	 quad(183, 234,  174, 345,  237, 400,  207, 244);

	 fill(76, 54, 36); // top part of hair
	 quad(216, 157,  275, 123,  377, 132,  420, 219);

	 fill(76, 54, 36);
	 triangle(183, 235,  207, 149,  275, 122);







}

Before I started coding, I made a sketch in Illustrator, so I could keep it simple and cute. Sketching it first helped me ground myself so I wouldn’t be lost immediately trying to code shapes without an image in mind first. It took a lot of time plotting points and getting used to the fashion of “drawing shapes” in this way. My friend helped me save some time; we took a screenshot of some of my existing work and dropped it into a 600×600 Illustrator doc, so I could find the points easily and insert them into my code.

I regret not starting earlier and rushing myself, because I think I would have had more fun if I utilized my time better so I could experiment more. Next time, I’ll manage myself better instead of being afraid to dive in.

Also, I thought I drew my portrait centered but I guess not?? Oops.

Project-1-Face-Sontag

sketch

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

function draw() {
    background(210);

    strokeWeight(0);
    fill(213, 180, 118);
    rect(160, 200, 120, 170);

    strokeWeight(0);
    fill(222, 184, 135);
    rect(110, 35, 60, 300);

    strokeWeight(0);
    fill(139, 69, 19);
    rect(50, 50, 250, 90);
    
    strokeWeight(0);
    fill(210, 180, 140);
    rect(width / 6, height / 6, 200, 200);

    strokeWeight(0);
    fill(205, 133, 63);
    rect(200, 60, 40, 90);

    strokeWeight(0);
    fill(139, 69, 19);
    rect(160, 200, 100, 10);

    strokeWeight(0);
    fill(255, 222, 173);
    rect(57, 150, 30, 60);

    strokeWeight(0);
    fill(255, 222, 173);
    rect(290, 57, 30, 60);

    strokeWeight(0);
    fill(0);
    ellipse(160, 55, 50, 80);

    strokeWeight(0);
    fill(0);
    ellipse(260, 90, 30, 24);

    strokeWeight(0);
    fill(218, 165, 32);
    rect(40, 100, 60, 10);

    strokeWeight(0);
    fill(222, 184, 135);
    rect(190, 130, 15, 15);

}

When tasked with drawing a self portrait of myself i decided to use a cubistic aproach. Although i could use other geometries to make a representation of my face, i don’t believe my skills would be able to create a realistic representation of me. Therefore i chose an abstract way of representation.

ziningy1 – Project 01 – Face

ziningy1_protrait





//Ethan Ye 
//ziningy1@andrew.cmu.edu 
//Project Self-Protrait 

function setup() {
    createCanvas(500,530);
    background(185,195,200);
    


    
} 

function draw() {  
     

    //shouder 
    noStroke();
    fill(110,130,150);
    ellipse(400,600,360,380);

    //neck 
    fill(230,210,177);
    rect(350,340,111,100);

    fill(110,130,150);
    triangle(460,430,330,470,460,480);
    
    fill(230)
    
    fill(90,112,130);
    ellipse(405.5,443,112,62);

    fill(230,210,177);
    ellipse(405.5,433,112,62);
    
    fill(220,200,167);
    ellipse(405.5,375,112,62);

    ellipse(390,380,112,62);

   




    //face 
    noStroke();
    fill(234,218,194);
    arc(353,267,330,270,PI+2*QUARTER_PI,HALF_PI+0.1,CHORD);
    fill(234,220,196);
    ellipse(340,280,140,245);

  
   


    //ellipse(500,270,270,300);


    //Hair
    noStroke();
    fill(50);
    triangle(220,230,300,130,360,170);
    fill(60);
    triangle(250,130,490,90,360,170);
    fill(30);
    triangle(340,80,500,110,400,135);
    fill(70);
    triangle(360,140,500,110,500,200);

    //eyebrow 
    fill(50);
    quad(313,227,360,210,370,220,313,237);
    triangle(360,210,390,215,370,220);

    //eye 
    fill(200,170,150);
    ellipse(345,258,49,28);
    
    fill(240);
    ellipse(342,255,50,27);
    fill(0);
    ellipse(329,257,13,20);
    fill(230);
    ellipse(326,252,4,3);

    //nose
    smooth();
    fill(234,220,196);
    triangle(272,256,240,310,280,310);

    //mouth 
    //fill(200,70,90);
    //arc(283,350,70,20,0,HALF_PI-0.2,PIE)

    fill(243,143,101);
    ellipse(300,355,40,25)

    fill(170,60,80);
    ellipse(291,350,50,25);

    fill(185,195,200);
    ellipse(275,350,50,25);

    //ear 

    fill(230,205,175);
    arc(440,270,100,70,5.4,1.4,CHORD);

    fill(234,218,194);
    arc(410,270,100,70,5.4,1.4,CHORD);

    //intials 
    scale(0.72);
    
    stroke(90,112,130);
    strokeWeight(3);
    line(90+60,220+110,90+60,260+110);
    line(90+60,220+110,115+60,220+110);
    line(90+60,240+110,110+60,240+110); 
    line(90+60,260+110,115+60,260+110);

    rect(130+60,260+110,2,2);
    line(145+60,220+110,160+60,240+110);
    line(160+60,240+110,175+60,220+110);
    line(160+60,240+110,160+60,260+110);


















   



   
















}

For this project, I intended to create a interesting facial expression with a simplistic style, which i decided to work with profile. I first worked on actual paper to sketch out some basic compositions, then moved to code， starting with the major geometric parts to detail adjustments. For colors, I also started with the gray scale, which is faster to begin with and provide a clear sense of hierarchy. And it works well for me to adjust all the colors together once the basic composition is laid out.

ljkim Face Portrait

sketch

function setup() {
  createCanvas(600,600);
  background("#FFFFFF");
	fill("#39B778"); /*green*/
	noStroke();
	ellipse(300,300,470,470); /*circle*/
}

function draw() {
	
  fill("#EECE7A");
	noStroke();
	ellipse(300,260,270,270); /*face*/
	
	fill("#EECE7A"); 
	noStroke();
	ellipse(300,300,260,350); /*lower half of face*/
	
	fill("#E5B558");
	rect(300,300,10, 50); /*bridge of nose*/
	
	fill("#1E1E1E");
	rect(210,235,50,5); /*right eyebrow*/
	rect(345,235,50,5); /*left eyebrow*/
	
	fill("#FFFFF");
	ellipse(230,280,10,10); /*right eye*/
	ellipse(370,280,10,10); /*left eye*/
	
	fill("#1E1E1E");
	rect(150,200,50,240); /*right hair*/
	fill("#1E1E1E");
	rect(420,200,50,240); /*left hair*/
	
	fill("#1E1E1E");
	arc(310,220,320,200, HALF_PI*6, PI); /*bangs*/
  
}

So coding is new to me. Obviously. From a design stand point – I knew what I wanted but it was frustrating for me to not translate it to code. I hope for the end of the semester I can re-do this assignment and accomplish what I want. Here is what I ideally wanted it to look like: (2 iterations)

LookingOutwards01-jooheek

‘A Night of Spiritual Jazz’ Installation – The Mill X Red Bull Music Academy

Article: http://www.themill.com/millchannel/731/red-bull-music-academy-%E2%80%98a-night-of-spiritual-jazz%E2%80%99-installation

Visuals from the Cosmograph and Bloom were projected on a display of strings.

Music is a magnificent part of all of our lives. Wherever you go, you can hear music. But what if you could see the music, instead of listening? The Mill created an experimental installation that combined a live liquid paint show with generative art software, called Cosmograph and Bloom, led by multiple jazz band’s audio. As jazz bands played, a live painter was behind the scenes creating a color palette for the software by using different kinds of liquid media. The software would then capture this visual and generate it into visuals alongside the audio inputs from the jazz bands.

Example of a visual created by Cosmograph.

I especially admired this installation because of how it combines different types of art with technical software to produce a more unique and possibly beautiful visual. Both music and fine art can be intertwined thanks to the technical software. It also made me think about how possibly deaf people who have never heard music or any kind of sound can be given the chance to experience the beauty of music through visuals. Just like the creator, Rama Allen, states, the visuals represent the “puffy eruptions of the caterpillar from Alice in Wonderland”, which he claims was part of his inspiration.

Behind the scenes of the visual creations.

 

heeseoc – Looking Outwards 01

http://frankensim.animade.tv/

FrankenSim is a web-toy produced by a team of animators and developers called Animade. I chose this project because it is, first of all, fun. The color is fun, the graphic elements are visually engaging, and many unexpected interactions such as sound and motion could be found while clicking around. Also, the fact that this web piece is in a shape of old Windows interface makes it more interesting. It draws an initial nostalgic feeling when the viewer first encounters this piece, and surprises them with  There are numerous little details that would make the user feel awe of their creativity and wit.

The producers were inspired by how Frankenstein might have experimented with modern web tools. Even though it does not hold a necessarily practical purpose other than providing entertainment, modern remakes of famous classics as such give the audience an opportunity to think about the signification of the originals and get inspired. Also, the fact that people still visit this website even though it doesn’t really “do” anything, proves that the interactions that are embedded in this piece are truly innovative and creative, in itself accentuating how smart interactions and delicately crafted details are crucial in engaging people even without tangible contents.

Nayeon_project01_portrait

nayeon_portrait

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-01_Portrait


//Canvas
function setup() {
    createCanvas(600, 800);

  }

//background
function draw() {
    angleMode(DEGREES);
    background(20, 120,150); //light blue
    if (mouseX < (width / 2)){
          background(10, 50, 200); //blue
    }

//hair
    fill(0);
    ellipse((width / 2) + 80, (height / 2) - 50, 300, 300);
    push();
    rotate(30);
    ellipse((width / 2) + 50, 200, 200, 300);
    pop();
    ellipse(550, 400, 100, 100);

//face
    fill(220,180,150);
    noStroke();
    ellipse(width / 2, height / 2, 300, 400);
    ellipse((width / 2) - 20, (height / 2) + 78, 350, 250);

//ears
    ellipse(width / 2 + 170, (height / 2) + 50, 150, 150);

//hands
    push();
    rotate(-3);
    ellipse(100, 700, 150, 180);
    ellipse(180, 680, 50, 70);

    ellipse(400, 700, 150, 180);
    ellipse(320, 680, 50, 70);
    pop();

//eyes
    fill(40, 30, 20);
    noStroke();
    ellipse((width / 2) + 50, (height / 2), 30, 50);
    ellipse((width / 2) - 100, (height / 2), 30, 50);

//mouth
    fill(210, 115, 90);
    arc((width / 2) - 20, (height / 2) + 80, 150, 200, 0, 180, CHORD);

//teeth
    fill(265);
    arc((width / 2) - 20, (height / 2) + 80, 150, 50, 0, 180, CHORD);

//blush
    fill(225, 125, 100);
    ellipse((width / 2) + 100, (height / 2 + 50), 50, 50);
    ellipse((width / 2) - 150, (height / 2 + 50), 50, 50);
//front_hair
    push();
    rotate(-20);
    fill(0);
    ellipse((width / 2), (height / 2) + 20, 150, 200);
    pop();

//crown
    push();
    rotate(-5);
    fill(250, 180, 0);
    triangle(120, 130, 150, 280, 300, 280);
    triangle(220, 100, 200, 280, 350, 280);
    triangle(350, 100, 250, 280, 400, 280);
    triangle(450, 130, 300, 280, 450, 280);
    ellipse(300, 280, 300, 50);
    pop();

    fill(40, 180, 250);
    ellipse(125, 120, 50, 50);
    ellipse(230, 70, 50, 50);
    ellipse(360, 60, 50, 50);
    ellipse(460, 90, 50, 50);

//diamond
    fill(265)
    quad(mouseX, mouseY, mouseX +30, mouseY +50, mouseX, mouseY + 100 , mouseX -30, mouseY +50);



}

I struggled a lot to create drawing with code in the beginning since I’m too used to draw with my hand. When I tried to create shapes with code, my brain just couldn’t process in ‘programming’ way.
I even struggled to figure out x, y in script because it is apposite way to I’m used to think.
But after few hours with struggling, I started to enjoy this new way to draw something. It was actually very amusing struggle.

jooheek_Portrait-01-face

jooheek_portrait

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-01

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

function draw() {

	background(49, 45, 142);

	strokeWeight(0);

	//HAIR
	fill(202, 165, 145);
	ellipse(280, 250, 350, 300);

	fill(202, 165, 145);
	arc(150, 325, 115, 320, 900, 100);

	fill(202, 165, 145);
	quad(93, 290, 130, 325, 200, 475, 60, 475);

	fill(49, 45, 142);
	arc(24, 275, 140, 450, 10, 90);

	fill(202, 165, 145);
	arc(160, 473, 200, 100, 0, 130);

	fill(202, 165, 145);
	ellipse(440, 250, 50, 100);

	fill(202, 165, 145);
	quad(400, 250, 465, 245, 505, 475, 380, 475);

	fill(49, 45, 142);
	arc(515, 250, 100, 450, 70, 80);

	fill(202, 165, 145);
	arc(405, 473, 200, 100, 350, 130);

	//EARS
	fill(250, 220, 200);
	ellipse(145, 340, 20, 50);

	fill(250, 220, 200);
	ellipse(455, 340, 20, 50);

	fill(239, 207, 186);
	ellipse(145, 340, 10, 30);

	fill(239, 207, 186);
	ellipse(455, 340, 10, 30);

	//FACE
	strokeWeight(0);
	fill(250, 220, 200);
	ellipse(300, 300, 310, 330);

	fill(250, 220, 200);
	rect(145, 300, 310, 40);

	fill(250, 220, 200);
	ellipse(300, 370, 320, 280);

	fill(244, 212, 191);
	ellipse(200, 400, 100, 100);

	fill(244, 212, 191);
	ellipse(395, 400, 100, 100);

	fill(249, 235, 228);
	ellipse(200, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(395, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(370, 200, 50, 40);

	//EYEBROWS
	fill(144, 119, 105)
	rect(200, 280, 70, 20);

	fill(144 ,119, 105);
	triangle(200, 280, 220, 300, 170, 300);

	fill(144, 119, 105);
	rect(325, 280, 70, 20);

	fill(144, 119, 105);
	triangle(395, 280, 420, 300, 385, 300);

	//NOSE
	fill(249, 235, 228);
	rect(270, 280, 55, 20);

	fill(249, 235, 228);
	triangle(270, 300, 325, 300, 300, 330);

	fill(239, 207, 186);
	rect(280, 380, 40, 30);

	fill(249, 235, 228);
	rect(288, 320, 20, 70);

	fill(249, 235, 228);
	rect(280, 370, 40, 20);

	fill(250, 220, 200);
	ellipse(272, 350, 40, 100);

	fill(250, 220, 200);
	ellipse(325, 350, 40, 100);



	//LIPS
	fill(255, 100, 100);
	ellipse(300, 430, 60, 40);

	fill(250, 220, 200);
	rect(270, 400, 60, 30);

	fill(220, 100, 100);
	triangle(290, 415, 310, 430, 270, 430);

	fill(220, 100, 100);
	triangle(310, 415, 330, 430, 290, 430);


	//EYES
	fill(50, 50, 50);
	ellipse(225, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(225, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(225, 330, 10, 10);

	fill(50, 50, 50);
	ellipse(370, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(370, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(370, 330, 10, 10);






	






}

While I wanted to make my portrait simple, I wanted to give emphasis to the features that are the most unique and prominent on my face. I sketched the way that I wanted to make if first then made my code as similar to it as possible.