August 2018 – Page 13 – [OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice

Nina Yoo Project-01-Face

function setup() {
    createCanvas(600, 600);
    background(182,186,181);
    
}

function draw() {

	//main hair
	noStroke()
	fill(0)
	ellipse(309,269,268,292)

	noStroke()
	fill(0)
	ellipse(349,274,253,267)


	//basic face
	noStroke()
	fill(241,233,186)
	ellipse(330,283,223,262)

	//ear
	noStroke()
	fill(241,233,186)
	ellipse(432,273,45,81)

	//neck
	noStroke()
	fill(241,233,186)
	rect(293,349,68,103)


	//body
	noStroke()
	fill(241,233,186)
	rect(232,449,197,150)

	noStroke()
	fill(241,233,186)
	ellipse(232,524,86,151)

	noStroke()
	fill(241,233,186)
	rect(189,524,49,75)

	noStroke()
	fill(241,233,186)
	ellipse(427,524,79,151)

	noStroke()
	fill(241,233,186)
	rect(421,524,45,75)

	//under clothes part
	noStroke()
	fill(0)
	rect(234,530,184,69)


	//front hair
	noStroke()
	fill(0,0,0)
	ellipse(296,179,160,86)



	//mouth shadows
	noStroke()
	fill(210,203,167)
	ellipse(320,384,22,13)
	noStroke()
	fill(210,203,167)
	ellipse(320,352,7,14)

	//nose shadow
	noStroke()
	fill(210,203,167)
	ellipse(320,327,22,13)
	noStroke()
	fill(210,203,167)
	ellipse(320,300,7,28)

	//eyes shadow
	noStroke()
	fill(210,203,167)
	ellipse(266,271,54,27)
	noStroke()
	fill(210,203,167)
	ellipse(375,271,54,27)

	//ear shadow
	noStroke()
	fill(210,203,167)
	ellipse(432,273,7,25)

	//arm shadow
	noStroke()
	fill(210,203,167)
	ellipse(419,569,11,61)

	noStroke()
	fill(210,203,167)
	ellipse(232,569,11,61)

	//chin shadow
	noStroke()
	fill(210,203,167)
	ellipse(327,412,68,13)




	//lips
	noStroke()
	fill(187,96,141)
	ellipse(320,375,29,11)
	noStroke()
	fill(188,126,151)
	ellipse(308,367,29,10)
	noStroke()
	fill(188,126,151)
	ellipse(335,368,29,10)
	noStroke()
	fill(241,233,186)
	ellipse(302,364,29,13)
	noStroke()
	fill(241,233,186)
	ellipse(340,364,29,13)

	//eyelashes
	noStroke()
	fill(0)
	ellipse(266,275,52,24)

	noStroke()
	fill(0)
	ellipse(376,275,52,24)

	//white part of eyes
	noStroke()
	fill(255)
	ellipse(376,279,52,19)

	noStroke()
	fill(255)
	ellipse(266,279,52,19)

	//eyebrows
	noStroke()
	fill(0)
	ellipse(266,243,52,22)

	noStroke()
	fill(0)
	ellipse(376,243,52,22)

	noStroke()
	fill(241,233,186)
	ellipse(266,248,52,19)

	noStroke()
	fill(241,233,186)
	ellipse(376,248,52,19)


	//eyeballs
	noStroke()
	fill(0)
	ellipse(266,272,15,15)

	noStroke()
	fill(0)
	ellipse(376,272,15,15)	

	//mole
	noStroke()
	fill(0)
	ellipse(305,398,5,5)

	//clothes
	noStroke()
	fill(0)
	ellipse(327,540,194,118)

	noStroke()
	fill(0)
	rect(258,449,12,60)

	noStroke()
	fill(0)
	rect(384,449,12,60)




}

I started off with making basic shapes and then played with coloring to demonstrate shadows.

Emily Zhou –– Self Portrait

I started with the key features of the head and body. Then I played with different colours and added a party hat.

emily-face

function setup() {
	// background
    createCanvas(600, 600);
    background(175, 220, 212);
}

function draw() {
	// hair
	fill(51, 29, 7);
	noStroke();
	rect(90, 118, 466, 740, 233, 233);
	// body
	fill(255);
	noStroke();
	ellipse(325, 645, 243, 374);
	// head
	fill(253, 198, 137);
	noStroke();
	ellipse(324, 356, 360, 360);
	// left ear
	fill(253, 198, 137);
	noStroke();
	ellipse(144, 387, 67, 67);
	// right ear
	fill(253, 198, 137);
	noStroke();
	ellipse(502, 355, 61, 61);
	// left eye
	fill(255);
	noStroke();
	ellipse(224, 349, 80, 80);
	// right eye
	fill(255);
	noStroke();
	ellipse(439, 332, 72, 72);
	// left pupil
	fill(0);
	noStroke();
	ellipse(224, 349, 59, 59);
	// right pupil
	fill(0);
	noStroke();
	ellipse(439, 332, 52, 52);
	// mouth
	fill(250, 139, 139);
	noStroke();
	arc(330, 420, 80, 80, 0, PI + QUARTER_PI, CHORD);
	// hat
	fill(240, 110, 170);
	noStroke();
	triangle(261, 149, 304, 26, 363, 142);
}

Catherine Coyle – Looking Outwards – 01

Considered a ‘gold standard’ for indie games and independent computing projects in general is Cave Story.

Above is a fan made trailer for the game.

This entire game from the graphics to the music was written by one person, Daisuke “Pixel” Amaya, during his free time over a five year period. It was released for free in 2004 and has been a cult classic ever since due to its nostalgic feeling and catchy soundtrack.

I find it highly inspiring because he started the project as a college student working on it for fun and was able to make something amazing! Inspired by classic 2D side scrolling games such as Super Metroid, Pixel wrote the game in C++.

It’s amazing to me that one person could create such a huge project all on their own. Rather than being a technological feat itself (especially as it’s been 14 years since its release), I find that the opportunities presented by this game lie in how it means literally anyone could create their own large-scale project like this and share it with the world. It seems daunting but is definitely possible, and I find that very inspiring!

Although an updated version titled Cave Story + is currently for sale on multiple platforms, the original remains free on its website! Find it here if you are looking to try it out yourself.

Lingfan Jiang – Project 01 – Face

sketch

//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-01


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

function draw() {
    scale(0.6);
    background(35);


    fill(255);
    beginShape();
    vertex(433,43.9);
    vertex(423,80.9);
    vertex(411,121);
    vertex(409,167);
    vertex(449,201);
    vertex(443,216);
    vertex(401,244);
    vertex(417,288);
    vertex(392,321);
    vertex(434,344);
    vertex(416,362);
    vertex(387,358);
    vertex(367,355);
    vertex(348,394);
    vertex(367,396);
    vertex(337,441);
    vertex(322,497);
    vertex(302,552);
    vertex(320,590);
    vertex(344,604);
    vertex(368,616);
    vertex(407,626);
    vertex(445,629);
    vertex(436,637);
    vertex(408,647);
    vertex(362,629);
    vertex(331,610);
    vertex(312,613);
    vertex(286,628);
    vertex(297,599);
    vertex(258,587);
    vertex(239,617);
    vertex(248,642);
    vertex(204,658);
    vertex(178,698);
    vertex(204,733);
    vertex(236,756);
    vertex(283,773);
    vertex(313,793);
    vertex(353,789);
    vertex(398,788);
    vertex(425,764);
    vertex(451,739);
    vertex(458,718);
    vertex(484,684);
    vertex(499,666);
    vertex(507,642);
    vertex(525,617);
    vertex(514,625);
    vertex(526,606);
    vertex(534,591);
    vertex(540,634);
    vertex(530,683);
    vertex(518,724);
    vertex(488,768);
    vertex(469,792);
    vertex(436,815);
    vertex(431,850);
    vertex(419,866);
    vertex(387,910);
    vertex(368,914);
    vertex(364,910);
    vertex(325,930);
    vertex(268,941);
    vertex(217,926);
    vertex(161,912);
    vertex(114,883);
    vertex(82.4,851);
    vertex(48,804);
    vertex(20.3,764);
    vertex(1.22,726);
    vertex(0.476,695);
    vertex(2.12,647);
    vertex(8.55,603);
    vertex(23.4,572);
    vertex(37,544);
    vertex(51.7,503);
    vertex(81.7,458);
    vertex(73.5,435);
    vertex(70.4,383);
    vertex(94.4,330);
    vertex(133,286);
    vertex(182,290);
    vertex(215,241);
    vertex(239,190);
    vertex(236,137);
    vertex(183,115);
    vertex(135,82.8);
    vertex(86.8,49.9);
    vertex(36.5,20.8);
    vertex(20.1,1.46);
    vertex(78.3,1.46);
    vertex(137,1.46);
    vertex(195,1.46);
    vertex(254,1.46);
    vertex(312,2.74);
    vertex(371,2.53);
    vertex(429,1.46);
    vertex(488,1.46);
    vertex(483,32.9);
    vertex(433,43.9);
    endShape(); //main head

    beginShape();
    vertex(441,567);
    vertex(459,572);
    vertex(442,584);
    vertex(421,588);
    vertex(402,590);
    vertex(394,603);
    vertex(383,587);
    vertex(369,571);
    vertex(349,565);
    vertex(351,546);
    vertex(362,561);
    vertex(362,548);
    vertex(364,530);
    vertex(382,521);
    vertex(391,523);
    vertex(411,529);
    vertex(399,541);
    vertex(417,551);
    vertex(420,558);
    vertex(426,577);
    vertex(441,567);
    endShape(); //left eye

    beginShape();
    vertex(667,1.46);
    vertex(713,1.46);
    vertex(747,14.6);
    vertex(753,57.8);
    vertex(758,97.7);
    vertex(762,112);
    vertex(774,109);
    vertex(773,71.6);
    vertex(780,31.5);
    vertex(778,4.74);
    vertex(809,2.63);
    vertex(856,2.43);
    vertex(901,9.2);
    vertex(915,5.3);
    vertex(948,9.72);
    vertex(923,30.5);
    vertex(915,35.8);
    vertex(889,55.6);
    vertex(930,33.1);
    vertex(958,6.15);
    vertex(987,2.46);
    vertex(966,21.8);
    vertex(924,43.7);
    vertex(882,64.7);
    vertex(839,84.2);
    vertex(798,106);
    vertex(758,130);
    vertex(750,129);
    vertex(748,86.5);
    vertex(735,66.2);
    vertex(741,87);
    vertex(747,112);
    vertex(731,148);
    vertex(717,148);
    vertex(686,169);
    vertex(640,177);
    vertex(681,157);
    vertex(714,125);
    vertex(704,81.6);
    vertex(691,36.4);
    vertex(667,1.46);
    endShape(); //clothing detail

    beginShape();
    vertex(566,469);
    vertex(574,469);
    vertex(582,481);
    vertex(593,491);
    vertex(591,507);
    vertex(581,519);
    vertex(566,522);
    vertex(558,514);
    vertex(566,500);
    vertex(570,485);
    vertex(566,469);
    endShape(); //ear detail

    beginShape();
    vertex(380,437);
    vertex(373,435);
    vertex(366,431);
    vertex(361,426);
    vertex(368,422);
    vertex(376,419);
    vertex(383,421);
    vertex(391,423);
    vertex(394,429);
    vertex(388,435);
    vertex(380,437);
    endShape(); //nose detail

    var c = color(99, 99, 99); 
    fill(c); 
    noStroke();
    beginShape();
    vertex(165,477);
    vertex(148,468);
    vertex(152,489);
    vertex(165,505);
    vertex(178,519);
    vertex(176,535);
    vertex(195,530);
    vertex(216,526);
    vertex(235,535);
    vertex(246,520);
    vertex(228,524);
    vertex(236,514);
    vertex(246,499);
    vertex(239,481);
    vertex(231,476);
    vertex(212,468);
    vertex(214,485);
    vertex(193,480);
    vertex(186,483);
    vertex(169,494);
    vertex(165,477);
    endShape(); // right eye

    //details
    var c = color(255, 204, 0); 
    fill(c); 
    noStroke();
    triangle(375,560,380,555,380,548);

    var c = color(255, 150, 0); 
    fill(c); 
    noStroke();
    triangle(385,560,380,555,380,548);

    noFill();
    stroke(255, 108, 0);
    arc(385, 557, 10, 10, 0, PI);

    fill(255, 255, 255);
    noStroke();
    quad(200,510,205,516,210,510,205,504);

    stroke(0,0,0);
    strokeWeight(2);
    line(875,35,800,75);

    point(825,42);

    fill(255, 255, 255);
    noStroke();
    ellipse(220,500,5,5);

    fill(0, 0, 0);
    noStroke();
    rect(810,25,3,3);

    noLoop();
    

}

In this project, I decided to incorporate my knowledge from some architecture software. It is quite satisfying to see it worked in the end. However, the only problem is that different from Mathematica axis, the Y axis goes in different directions in Java script. In the end, my face is upside-down, but I guess it makes it special too. Overall, it is very interesting to finish this project cross-discipline!

Jisoo Geum-Looking Outwards-01

Smart Highway – The Van Gough Path by Studio Rooseguaarde

https://www.studioroosegaarde.net/project/van-gogh-path

Studio Rooseguaarde is an urban design company founded by Daan Rooseguaarde that builds and installs interactive space to create a multipurpose environment. The Van Gough Path is a part of Smart Highways, which are made with light, energy, and information that communicates with the traffic system. Made out of small pieces of rocks embedded on roads, the path gathers light energy during the day and then glows at night. When I discovered this company a few years ago, I was fascinated by how versatile the Smart Highways can be. The Van Gough Path, in particular, not only changes the area into a landmark but also enhances public safety. Another aspect that inspired me was that the studio brought the pattern of famous Van Gough painting, Starry Night, in the museum to outdoors, and made it interactive and functional with the help of programming and urban design. Although the software used for this project is unidentified, it can be assumed that there were a lot of CNC machines used during the process.

Lingfan Jiang-LookingOutwards-1

“Rain Room”

This is an interactive artwork exhibited in the Museum of Modern Art called “Rain Room”. When visitors walk through the raining room, the rain would not fall on you. It even gives you the illusion that you are able to control the rain.

I find it admirable because the artwork does not have a certain cultural background to it. The installation could be exhibited anywhere around the world and since it is very cool, it attracts people going to the museum. Consequently, it is given great commercial values.

I believe the fundamentals behind the technology is not very complicated. The sensors just understand the locations of those who entered the room. It is a common technology with a lot of precedents. However, the best idea of the room is that it not only creates a unique experience by adding the rain element but also satisfies people’s desire to share their unusual experience.

If this project proceeds, I hope the visitor would be able to stop the rain using a hand gesture, just like what happens in “Now You See Me”.

Justin Yook – Project 01 – Face

jyook_SelfPortrait

//Justin Yook
//Section C
//jyook@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(112, 156, 205);
}

function draw() {

	noStroke();
	//General face shape and color
	fill(254, 256, 225);
	ellipse(250, 250, 260, 280);

	//Hat
	fill(0);
	arc(250, 180, 240, 220, PI, TWO_PI, OPEN);
	fill(0);
	ellipse(250, 170, 232, 200);

	//used to make the curve of the hat's bill
	fill(254, 256, 225);
	ellipse(250, 245, 190, 70);

	//helps differentiate parts of the hat
	fill(52, 61, 70);
	ellipse(250, 180, 225, 40);

	//covers up the unnecessary grey area to leave only curve line
	fill(0);
	ellipse(250, 185, 220, 40);

	//Eyes
	fill(255);
	arc(190, 240, 70, 60, 0, PI);

	fill(255);
	arc(310, 240, 70, 60, 0, PI);

	fill(0);
	ellipse(190, 250, 10, 10);

	fill(0);
	ellipse(310, 250, 10, 10);

	//Eyebrows
	fill(0);
	rect(270, 235, 80, 5);

	fill(0);
	rect(150, 235, 80, 5);

	//Mouth
	fill(0);
	rect(205, 330, 90, 5);
 
}

While I was doing this project, I tried to come up with a style that can be both simple and meaningful. I randomly chose the South Park character style because their characters are simple primitives, but they each possess distinguishable features. For me, that’s my black hat, and my unamused eyes.

Jenni Lee – Project 01 – Face

jenni-face

/* Jenni Lee
Section E
jennife5@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 600);
    background(237, 247, 249);
    noStroke();
}

function draw() {

	//back hair
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(300, 200, 300, 300);
	rect(150, 190, 300, 170);
	ellipseMode(CENTER);
	ellipse(300, 350, 300, 300);

	//face
	fill(249, 235, 225);
	ellipseMode(CENTER);
	ellipse(300, 250, 273, 273);

	//bangs
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(353, 162, 167, 167);

	//neck
	fill(249, 235, 225);
	rect(267, 372, 61, 57);

	//shirt
	fill(252, 180, 180);
	rect(213, 422, 171, 106, 10, 10, 10, 10);

	//ears
	fill(249, 235, 225)
	ellipseMode(CENTER);
	ellipse(157, 268, 50, 50);

	ellipseMode(CENTER);
	ellipse(439, 268, 50, 50)

	//eyes
	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(365, 276, 28, 28);

	fill(63, 63, 63);
	ellipseMode(CENTER);
	ellipse(232, 276, 28, 28);

	//heart
	fill(252, 180, 180);
	ellipseMode(CENTER);
	ellipse(494, 217, 21, 21);
	ellipse(510, 217, 21, 21);
	triangle(485.5, 223, 518.5, 223, 501.5, 240);

	//hoops
	noFill();
	stroke(224, 187, 83);
	strokeWeight(4);
	ellipse(430, 320, 67, 67);
	ellipse(162, 320, 67, 67);

 		noLoop();

}

This project was really enjoyable for me because the limited shape and color options forced me to think creatively in order to make recognizable facial features. Creating this face was very rewarding, as it felt like it was truly made from sratch. Further, I enjoyed organizing the code style, as it was similar to working with type hierarchy!

Alice Fang- Self Portrait

alice-portrait

/* Alice Fang
Section E
acfang@andrew.cmu.edu
Project-01
*/


function setup() {
    createCanvas(600, 600);
    background(87, 160, 170);

    //neck
    noStroke();
    fill(244, 207, 162);
    quad(289, 444, 412, 428, 480, 600, 300, 600);

    //hair
    fill(76, 35, 5);
    ellipse(337, 199, 385, 350);
    quad(176, 252, 314, 303, 218, 562, 80, 511);
    ellipse(199, 542, 244, 357);

    //ear
    fill(244, 171, 122);
    ellipse(183, 307, 75, 103);

    //earring
    strokeWeight(5);
    stroke(225, 245, 235);
    noFill();
    rect(161, 350, 45, 125, 17);

    //shirt
    noStroke();
    fill(204, 104, 70);
    quad(273, 527, 433, 471, 480, 600, 300, 600);

    //face
    fill(244, 207, 162);
    ellipse(338, 271, 350, 408);

    //nose
    fill(244, 171, 122);
    quad(284, 290, 317, 323, 300, 351, 267, 336);

    //eye line
    fill(76, 35, 5);
    ellipse(357, 279, 47, 32);
    ellipse(244, 283, 47, 32);

    //white of eye
    fill(255, 245, 235);
    ellipse(243, 287, 44, 29);
    ellipse(358, 283.2, 44, 29);

    //pupil
    fill(76, 35, 5);
    ellipse(256, 285, 21, 27);
    ellipse(370, 282, 21, 27);

    //eyebrow
    stroke(76, 35, 5);
    strokeWeight(10);
    line(214, 252, 268, 252);
    line(334, 238, 389, 253);

    //top of mouth, nose shadow
    noStroke();
    fill(219, 122, 83);
    ellipse(305, 388, 57, 22);
    quad(267, 336, 296, 339, 317, 322, 300, 351);

    //bottom of mouth
    fill(204, 104, 70);
    ellipse(306, 395, 50, 11);

    //bangs
    fill(76, 35, 5);
    ellipse(485, 390, 147, 564);
    rect(250, 54, 151, 192, 25);
    quad(120, 205, 211, 68, 296, 125, 205, 261);
    quad(346, 93, 432, 50, 521, 231, 424, 273);

}

I found this project to be fairly straightforward, though it was tricky making sure I had the elements in the correct order (especially my hair, in order to get bangs in front of my face…), and making sure the code was organized and readable. Super satisfied with learning how to do this!

cmhoward-01

project-01-face-final2

function setup() {
    createCanvas(600, 550);
    background('lightblue');
}

function draw() {
	//face
	fill('tan');
	noStroke();
	ellipse(275,300,375,375);
	rect(200,300,150,500);
	
	//hair left
	fill(255,255,180);
	noStroke();
	ellipse(100,200,100,100);
	ellipse(100,300,100,100);
	ellipse(100,400,100,100);
	ellipse(100,500,100,100);
	ellipse(135,150,100,100);
	ellipse(135,250,100,100);
	ellipse(135,350,100,100);
	ellipse(135,450,100,100);
	ellipse(135,550,100,100);

	//hair top
	ellipse(200,150,100,100);
	ellipse(275,150,100,100);
	ellipse(350,150,100,100);
	ellipse(350,150,100,100);
	ellipse(425,150,100,100);

	//hair right
	ellipse(475,200,100,100);
	ellipse(440,250,100,100);
	ellipse(475,300,100,100);
	ellipse(440,350,100,100);
	ellipse(475,400,100,100);
	ellipse(440,450,100,100);
	ellipse(475,500,100,100);
	ellipse(440,550,100,100);
	
	//space buns
	ellipse(175,100,150,150);
	ellipse(375,100,150,150);

	//hairbows
	fill('pink');
	ellipse(175,100,25,25);
	ellipse(375,100,25,25);
	triangle(175,100,150,75,150,125);
	triangle(175,100,200,75,200,125);
	triangle(375,100,350,75,350,125);
	triangle(375,100,400,75,400,125);


	//eyes
	fill('white)');
	noStroke();
	rect(200,250,55,25,25,25);
	rect(300,250,55,25,25,25);
	fill('black');
	ellipse(225,262.5,25,25);
	ellipse(325,262.5,25,25);
	stroke('black');
	strokeWeight(5);
	line(205,250,245,250);
	line(305,250,345,250);

	//nose
	arc(275,350,25,25,TWO_PI,PI,OPEN);

	//eyebrows
	quad(195,235,205,230,250,230,205,230);
	quad(355,235,345,230,300,230,345,230);

	//mouth
	ellipse(275,400,75,75);
	fill('white');
	ellipse(275,400,65,65);
	fill('tan');
	noStroke();
	rect(225,350,100,50);
}

this exercise turned out to be more creative problem solving than i initially thought! i can’t wait to learn ways to create 25 ellipses without hard coding each of them.