Month: August 2018

Jessica Timczyk – Project 1 – Self Portrait

jessface

//Jessica Timczyk
//Section D
//jtimczyk@andrew.cmu.edu
//project-01

function setup() {
    createCanvas(900, 600);
    background(255);
}

function draw() {
    //eyeliner
    noStroke(); 
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(372, 170);
    curveVertex(372, 170);
    curveVertex(367, 154);
    curveVertex(397, 127);
    curveVertex(441, 122);
    curveVertex(414, 118);
    curveVertex(392, 122);
    curveVertex(372, 138);
    curveVertex(361, 150);
    curveVertex(361, 150);
    endShape();

    //eyelash 1 
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(441, 122);
    curveVertex(441, 122);
    curveVertex(460, 110);
    curveVertex(472, 96);
    curveVertex(453, 110);
    curveVertex(432, 120);
    curveVertex(432, 120);
    endShape();

    // eyelash 2
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(436, 120);
    curveVertex(436, 120);
    curveVertex(445, 104);
    curveVertex(444, 89);
    curveVertex(439, 103);
    curveVertex(426, 120);
    curveVertex(426, 120);
    endShape();

    //eyelash 3
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(427, 120);
    curveVertex(427, 120);
    curveVertex(433, 100);
    curveVertex(429, 88);
    curveVertex(427, 104);
    curveVertex(417, 119);
    curveVertex(417, 119);
    endShape();

    //eyelash 4
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(414, 118);
    curveVertex(414, 118);
    curveVertex(418, 105);
    curveVertex(414, 92);
    curveVertex(410, 110);
    curveVertex(400, 123);
    curveVertex(400, 123);
    endShape();

    //eyelash 5
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(396, 125);
    curveVertex(396, 125);
    curveVertex(398, 112);
    curveVertex(392, 103);
    curveVertex(391, 117);
    curveVertex(387, 127);
    curveVertex(387, 127);
    endShape();

    //eyelash 6
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(382, 131);
    curveVertex(382, 131);
    curveVertex(381, 122);
    curveVertex(371, 113);
    curveVertex(373, 130);
    curveVertex(372, 140);
    curveVertex(372, 140);
    endShape();

    //eyelash 7
    noStroke();
    fill(0);
    curveTightness(.5);
    beginShape();
    curveVertex(372, 142);
    curveVertex(372, 142);
    curveVertex(367, 134);
    curveVertex(361, 130);
    curveVertex(364, 141);
    curveVertex(363, 154);
    curveVertex(363, 154);
    endShape();

    // iris
    noFill();
    strokeWeight(3);
    stroke(0);
    curveTightness(.5);
    beginShape();
    curveVertex(383, 136);
    curveVertex(383, 136);
    curveVertex(393, 144);
    curveVertex(407, 143);
    curveVertex(413, 135);
    curveVertex(414, 127);
    curveVertex(410, 132);
    curveVertex(400, 134);
    curveVertex(393, 126);
    curveVertex(393, 126);
    endShape();

    // bottom eyelid
    curveTightness(.5);
    beginShape();
    curveVertex(440, 120);
    curveVertex(440, 120);
    curveVertex(435, 132);
    curveVertex(426, 142);
    curveVertex(415, 152);
    curveVertex(432, 142);
    curveVertex(441, 132);
    curveVertex(445, 120);
    endShape();

    // eyebrow
    fill(0);
    noStroke();
    curveTightness(.7);
    beginShape();
    curveVertex(327, 122);
    curveVertex(327, 122);
    curveVertex(356, 95);
    curveVertex(395, 72);
    curveVertex(423, 66);
    curveVertex(454, 68);
    curveVertex(424, 52);
    curveVertex(401, 49);
    curveVertex(378, 58);
    curveVertex(355, 74);
    curveVertex(334, 91);
    curveVertex(320, 105);
    curveVertex(320, 105);
    endShape();

    //eyebrow shadow
    fill(151, 149, 148);
    curveTightness(.25);
    beginShape();
    curveVertex(350, 119);
    curveVertex(350, 119);
    curveVertex(330, 137);
    curveVertex(325, 149);
    curveVertex(326, 162);
    curveVertex(333, 169);
    curveVertex(341, 175);
    curveVertex(359, 189);
    curveVertex(350, 170);
    curveVertex(343, 153);
    curveVertex(345, 136);
    curveVertex(345, 136);
    endShape();

    //under eye shadow 1
    fill(83, 82, 82);
    curveTightness(.25);
    beginShape();
    curveVertex(410, 189);
    curveVertex(410, 189);
    curveVertex(444, 165);
    curveVertex(470, 141);
    curveVertex(469, 182);
    curveVertex(463, 214);
    curveVertex(438, 200);
    curveVertex(438, 200);
    endShape();

    //cheak shadow
    fill(0);
    curveTightness(.25);
    beginShape();
    curveVertex(501, 74);
    curveVertex(501, 74);
    curveVertex(507, 75);
    curveVertex(511, 86);
    curveVertex(516, 100);
    curveVertex(524, 115);
    curveVertex(537, 130);
    curveVertex(548, 146);
    curveVertex(560, 168);
    curveVertex(564, 179);
    curveVertex(565, 192);
    curveVertex(567, 202);
    curveVertex(570, 212);
    curveVertex(578, 228);
    curveVertex(586, 242);
    curveVertex(588, 248);
    curveVertex(587, 254);
    curveVertex(581, 244);
    curveVertex(564, 232);
    curveVertex(547, 222);
    curveVertex(536, 219);
    curveVertex(527, 221);
    curveVertex(518, 223);
    curveVertex(508, 225);
    curveVertex(498, 225);
    curveVertex(490, 224);
    curveVertex(482, 222);
    curveVertex(477, 218);
    curveVertex(486, 209);
    curveVertex(498, 191);
    curveVertex(509, 172);
    curveVertex(513, 157);
    curveVertex(515, 143);
    curveVertex(513, 125);
    curveVertex(509, 108);
    curveVertex(502, 88);
    curveVertex(502, 88);
    endShape();

    //nose line
    curveTightness(1);
    beginShape();
    curveVertex(301, 152);
    curveVertex(301, 152);
    curveVertex(309, 169);
    curveVertex(325, 182);
    curveVertex(346, 199);
    curveVertex(360, 210);
    curveVertex(374, 211);
    curveVertex(374, 211);
    endShape();

    //right nostril
    curveTightness(.5);
    beginShape();
    curveVertex(387, 226);
    curveVertex(387, 226);
    curveVertex(397, 226);
    curveVertex(406, 228);
    curveVertex(418, 235);
    curveVertex(417, 245);
    curveVertex(415, 251);
    curveVertex(410, 256);
    curveVertex(403, 259);
    curveVertex(396, 258);
    curveVertex(395, 247);
    curveVertex(394, 235);
    curveVertex(394, 235);
    endShape();

    //nose button
    fill(151, 149, 148);
    beginShape();
    curveVertex(330, 213);
    curveVertex(330, 213);
    curveVertex(345, 231);
    curveVertex(356, 246);
    curveVertex(361, 263);
    curveVertex(368, 261);
    curveVertex(377, 258);
    curveVertex(383, 250);
    curveVertex(383, 242);
    curveVertex(379, 237);
    curveVertex(363, 230);
    curveVertex(360, 228);
    curveVertex(360, 228);
    endShape();

    //left nostril
    fill(0);
    beginShape();
    curveVertex(375, 279);
    curveVertex(375, 279);
    curveVertex(357, 281);
    curveVertex(356, 295);
    curveVertex(366, 297);
    curveVertex(376, 286);
    curveVertex(376, 286);
    endShape();

    //left nose shadow
    fill(0);
    beginShape();
    curveVertex(286, 203);
    curveVertex(286, 203);
    curveVertex(299, 204);
    curveVertex(314, 214);
    curveVertex(326, 227);
    curveVertex(342, 248);
    curveVertex(343, 272);
    curveVertex(341, 291);
    curveVertex(334, 284);
    curveVertex(324, 251);
    curveVertex(305, 224);
    curveVertex(305, 224);
    endShape();

    //lip shadow
    beginShape();
    curveVertex(402, 268);
    curveVertex(402, 268);
    curveVertex(415, 282);
    curveVertex(424, 285);
    curveVertex(444, 268);
    curveVertex(422, 269);
    curveVertex(422, 269);
    endShape();

    //lip
    curveTightness(0);
    beginShape();
    curveVertex(510, 274);
    curveVertex(510, 274);
    curveVertex(460, 277);
    curveVertex(429, 287);
    curveVertex(423, 299);
    curveVertex(411, 302);
    curveVertex(396, 328);
    curveVertex(387, 362);
    curveVertex(401, 372);
    curveVertex(430, 370);
    curveVertex(473, 357);
    curveVertex(500, 326);
    curveVertex(512, 297);
    curveVertex(512, 297);
    endShape();

    //chin shadow
    beginShape();
    curveVertex(578, 315);
    curveVertex(578, 315);
    curveVertex(550, 385);
    curveVertex(530, 411);
    curveVertex(462, 432);
    curveVertex(494, 438);
    curveVertex(554, 444);
    curveVertex(570, 428);
    curveVertex(583, 379);
    curveVertex(583, 379);
    endShape();

    //left cheek shadow
    beginShape();
    curveVertex(252, 324);
    curveVertex(252, 324);
    curveVertex(264, 345);
    curveVertex(273, 358);
    curveVertex(292, 368);
    curveVertex(310, 380);
    curveVertex(319, 393);
    curveVertex(330, 402);
    curveVertex(349, 412);
    curveVertex(372, 411);
    curveVertex(351, 399);
    curveVertex(337, 382);
    curveVertex(333, 365);
    curveVertex(322, 356);
    curveVertex(294, 344);
    curveVertex(270, 335);
    curveVertex(270, 335);
    endShape();

    //neck
    beginShape();
    curveVertex(479, 468);
    curveVertex(479, 468);
    curveVertex(521, 486);
    curveVertex(550, 504);
    curveVertex(559, 527);
    curveVertex(530, 569);
    curveVertex(498, 600);
    curveVertex(521, 548);
    curveVertex(527, 522);
    curveVertex(516, 506);
    curveVertex(516, 506);
    endShape();

    //hair
    fill(150);
    noStroke();
    beginShape();
    curveVertex(249, 70);
    curveVertex(249, 70);
    curveVertex(267, 115);
    curveVertex(284, 184);
    curveVertex(288, 256);
    curveVertex(254, 325);
    curveVertex(225, 368);
    curveVertex(227, 407);
    curveVertex(263, 433);
    curveVertex(288, 413);
    curveVertex(284, 401);
    curveVertex(296, 414);
    curveVertex(300, 438);
    curveVertex(293, 458);
    curveVertex(263, 474);
    curveVertex(222, 458);
    curveVertex(241, 499);
    curveVertex(287, 534);
    curveVertex(354, 556);
    curveVertex(382, 600);
    curveVertex(194, 600);
    curveVertex(190, 551);
    curveVertex(167, 518);
    curveVertex(134, 492);
    curveVertex(121, 424);
    curveVertex(130, 378);
    curveVertex(175, 325);
    curveVertex(187, 271);
    curveVertex(154, 200);
    curveVertex(125, 135);
    curveVertex(137, 73);
    curveVertex(189, 49);
    curveVertex(236, 55);
    curveVertex(236, 55);
    endShape();

    //right lip accent
    fill(0);
    beginShape();
    curveVertex(443, 308);
    curveVertex(443, 308);
    curveVertex(450, 310);
    curveVertex(459, 311);
    curveVertex(474, 293);
    curveVertex(487, 285);
    curveVertex(467, 285);
    curveVertex(454, 290);
    curveVertex(447, 291);
    curveVertex(444, 298);
    curveVertex(444, 298);
    endShape();

    //left lip accent
    beginShape();
    curveVertex(432, 317);
    curveVertex(432, 317);
    curveVertex(421, 313);
    curveVertex(415, 324);
    curveVertex(402, 347);
    curveVertex(417, 336);
    curveVertex(430, 328);
    curveVertex(430, 328);
    endShape();

    //bottom lip accent
    fill(122, 122, 122);
    beginShape();
    curveVertex(407, 361);
    curveVertex(407, 361);
    curveVertex(434, 360);
    curveVertex(466, 350);
    curveVertex(488, 329);
    curveVertex(497, 303);
    curveVertex(494, 297);
    curveVertex(487, 301);
    curveVertex(471, 319);
    curveVertex(463, 322);
    curveVertex(462, 328);
    curveVertex(453, 328);
    curveVertex(447, 336);
    curveVertex(441, 337);
    curveVertex(436, 337);
    curveVertex(425, 349);
    curveVertex(425, 349);
    endShape();

    //right hair
    fill(150);
    beginShape();
    curveVertex(222, 42);
    curveVertex(222, 42);
    curveVertex(249, 58);
    curveVertex(288, 64);
    curveVertex(335, 56);
    curveVertex(371, 36);
    curveVertex(423, 35);
    curveVertex(448, 47);
    curveVertex(476, 56);
    curveVertex(494, 61);
    curveVertex(539, 70);
    curveVertex(593, 98);
    curveVertex(600, 105);
    curveVertex(600, 84);
    curveVertex(572, 35);
    curveVertex(261, 34);
    curveVertex(261, 34);
    endShape();

    //tearduct
    fill(0);
    beginShape();
    curveVertex(288, 224);
    curveVertex(288, 224);
    curveVertex(294, 230);
    curveVertex(294, 231);
    curveVertex(300, 227);
    curveVertex(287, 225);
    curveVertex(287, 225);
    endShape();
}

While creating this piece I gained proficiency in implementing basic objects within p5.js. Entering immense amounts of coordinates for the complex facial shapes was tedious and by the end of the process I learned to create the shapes as efficiently as possible.

Yingying Yan LookingOutwards-01

The Moment We Meet is a piece of kinetic installation art by Taiwanese artist Hsin-Chien Huang. It is installed in a subway station in Taipei. This project is a panel system of 10×10 matrix of faces, controlled by PLC. The faces are printed on PVC panels. Each panel can be controlled by the computer to create different combinations of faces. In term of the main idea, this project aimed to express that when we meet, our emotions will spread out to others. This project took about two years to complete.

Examples of faces by the panels.

I visited Taip a few summers ago, and as soon as I walked out of the subway station, this piece caught my attention — I was astonished. I stood there for few minutes staring at the installation. I felt like I was making eye contact with different people as the panels flipped through. It was just so fascinating. The fact that they made so many variations using just 10 panels is magical. The panels also flipped in various ways! As I was a tourist, this piece made me feel like everyone in Taipei was greeting me. This project can also be used for advertisements since it captures people’s attention.

Each panel flips differently to form one picture.

Sean McGadden Project 1

Sean McGadden

Project 1 Self Portrait

smcgadde

Section C

smcgadde-p1-sketch.js
data-width=’470′ data-height=’600′
class=”p5-embed”

With this sketch I have tried to explain myself in a confident way. Triangles are visually the strongest shape and I wanted to create my face and neck using this structurally strong 2D Primitive. I believe I am a strong willed and perhaps stubborn person. Similarly the triangles, in the creation of this project, were sometimes difficult to work with  when coloring them to give some of the tones and shadows. I gave myself red hair for fun.

Robert Oh-LookingOutwards-1

This is the new Nunu rework in League of Legends.

League of Legends is an incredibly popular multiplayer online battle arena video game developed and published by Riot Games. I’ve been playing League for about 4 years, and I’ve always been excited to see new updates for the game, as new elements make the game more interesting. For their most recent patch, Riot Games had updated Nunu, one of their oldest characters in the game (had first been released on February 21, 2009)! In a rework, the character gets a new visual model, as well as new abilities in the game.

There are a ton of teams that work on new characters (the design team, the gameplay team, the software team, etc), so I’d say its safe to assume that there were hundreds of people working on this project (and usually takes a few months to complete).  (I also have no idea what software they use).

I’d definitely say this project was inspired by their previous character updates. Every couple months, Riot chooses to update old characters to make them feel new and fresh. Just like the previous character reworks they’ve done, I feel as though Riot is aiming towards making their boring characters more interesting by adding new skills that make them feel more fun to play. Nunu is an excellent example of this, as they’ve incorporated his background into his abilities (one of his new abilities allows him to roll a snowball into enemies).

As a huge gamer (and a game design minor), I feel inspired by this new character design. This rework proves that you can turn any boring, dull character and make it feel new and fun again!

For those curious, this is what he used to look like:

Old Nunu SplashArt

 

Noni Shelton Project-01-Face

sketch

/*
Noni Shelton
Section B 10:30am
nshelton@andrew.cmu.edu
Face 01
*/

function setup() {
    createCanvas(600, 600);
    background(200);
    //skin tone
	fill(51)
    rect(100,100,100,420,300);
    fill(1);
    rect(53,53,500,550, 210);
    fill(90,35,5);
    ellipse(300,300,330,430);
    //eyes
    fill(12);
    ellipse(357,250,30,30);
    ellipse(237,250,30,30);
    //right side of glasses
    stroke(181,0,255);
    strokeWeight(10);
    noLoop();
    noFill();
    rect(196,220,70,70,10);
    //left side of glasses
    rect(326,220,70,70,10);
    //bridge to glasses
    fill(255,255,33);
    line(270,250,326,250);
   	//shirt
    noStroke();
    rect(211,520,180,170,50);
    fill(73,255,33); 
    point(300,300);
    //mouth
    noStroke();
    fill('red');
	arc(330,410,110,80,0,PI);
	fill(255);
	rect(284,410,94,12);
	//nose
	noStroke();
	fill(130,35,5);
	rect(280,295,40,85,79);
	//bangs
	fill(1);
	ellipse(350,127,200,145);
	//ear
	fill(90,35,5);
	ellipse(150,345,70,50);
	ellipse(450,345,70,50);
	//earrings
	fill(255);
	arc(130,360,20,20,0,PI);
	arc(470,360,20,20,0,PI);
}

function draw() {
}

Romi Jin – Looking Outwards – 01

Japan’s first digital art museum, MORI Building Digital Art Museum by teamLab Borderless in Tokyo, combines human interaction with psychedelic wonder to fabricate an expansive, experiential exhibit. teamLab is a group of ultratechnologists who combine art, science, technology, design and the natural world through a team of designers, programmers, engineers, CG animators, mathematicians and architects from all around the world. This team produced this museum of digital artworks, which are powered by approximately 520 computers and 470 projectors that completely immerse the viewer into the surrounding physical space. There are five different spaces and fifty interactive displays, including “Borderless World,” “En Tea House,” “Athletics Forest,” and “Forest of Resonating Lamps,” pictured below.

Forest of Resonating Lamps

Technological art like this has inspired me to step into the world of technology and coding, working through a hybrid of mediums that interest me and that are changing the world at an exponential rate. To contribute to this progress would be life-changing, and I hope to do so one day!

Project 01-Face

sketch

function setup() {
    createCanvas(600, 600);
    background(114,160,193);
}

function draw() {
	//arm1
	noStroke();
	fill(255,165,0);
	rect(width/2+5,height/2+75,70,100,25,40,5,5);
	fill(247,204,160);
	rect(width/2+35,height/2+175,30,200);
	//body
	noStroke();
	fill(255,165,0);
	ellipse(width/2-30,height,195,550);
	rect(width/2,height/2,60,500);
	//head
	noStroke();
	fill(247,204,160);
	arc(width/2,height/2,215,225,0,PI);
	//filler
	fill(114,160,193);
	noStroke();
	rect(width*5/8-5,height/2,75,90);
	//face filler
	fill(247,204,160);
	arc(width/2+5,height/2+12,200,200,0,270);
	//hair
	fill(150,86,3);
	noStroke();
	arc(width/4+65,height/2-20,50,200,0,PI,CHORD);
	//ear
	fill(247,204,160);
	ellipse(width/4+70,height/2+20,30,40);
	//hair
	fill(150,86,3);
	arc(width/4+85,height/2-20,30,140,0,PI,CHORD);
	arc(width/4+105,height/2-20,20,100,0,PI,CHORD);
	//eyes
	fill(255,255,255);
	stroke(0,0,0);
	strokeWeight(1);
	ellipse(width/2,height/2+25,8,8);
	ellipse(width/2+45,height/2+25,8,8);
	//arm2
	noStroke();
	fill(255,165,0);
	rect(width/4+50,height/2+80,65,110,70,70,5,5);
	fill(247,204,160);
	rect(width/4+70,height/2+190,35,200);
	//mouth
	noFill();
	stroke(0,0,0);
	strokeWeight(2);
	curve(width/2+5,height/2+60,width/2+10,height/2+40,width/2+40,height/2+40,width/2+50,height/2+50)
	//eyebrows
	noFill();
	stroke(0,0,0);
	strokeWeight(4);
	line(width/2+41,height/2+8,width/2+51,height/2+8);
	line(width/2-5,height/2+8,width/2+5,height/2+8);
	//#nocap
	noStroke();
	fill(43,43,43);
	arc(width/2-5,height/2-20,220,200,PI,TWO_PI);
	fill(35,35,35);
	rect(width/2-120,height/2-40,230,30,5,5,5,5);

}

For my first project, I wanted to create as accurate of a drawing of myself, at least with what I knew about javascript. I often find myself not having a very bright expression, but I’ve come to accept that this is who I am. I am this.

Yingying Yan Project-01-Face

Yingying Yan Project-01-Face

/*
    Yingying Yan
    Waitlist
    yingyiny@andrew.cmu.edu
    Project 01 Face
*/

function setup() {
    createCanvas(500, 500);
    background(198,204,201);
}

function draw() {
	//hair or hair tie
	fill(63,60,60);
	rotate(radians(75));
	rect(width/2-128,length/2.5-270,260,51);
	rotate(radians(-75));
	fill(135,163,165);
	ellipse(width/2,height/2.5-123,47,32);
	fill(63,60,60);
	ellipse(width/2,height/2.5-33,185,189);
	

    //ears
    fill(240,208,197);
	ellipse(width/2-90,height/2.5-5,16,25);
	ellipse(width/2+90,height/2.5-5,16,25);

	//body parts
	fill(240,208,197);
	rect(width/2-13,height/2+40,26,18);
	line(237,308,250,330);
	line(237+26,308,250,330);
	line(237,308,250-50,450);
	line(237+26,308,250+50,450)
	
	
	//face
	fill(240,208,197);
	ellipse(width/2,height/2.5,184,187);

	//eyebrows
	arc(width/2-45,height/2.5-25,40,20,PI,0);
	arc(width/2+45,height/2.5-25,40,20,PI,0);


	//mouth
	fill(212,118,118);
	ellipse(width/2,height/2.5+50,40,40);

	//nose
	fill(240,208,197);
	ellipse(width/2,height/2.5+10,11,11);

	//dot
	fill(0);
	ellipse(width/2+70,height/2.5+2,4.5,4.5);

	//eyes
	fill(146,129,115);
	ellipse(width/2-45,height/2.5-8,26,26);
	ellipse(width/2+45,height/2.5-8,26,26);



}

This is my first time coding, so I used as many circles as possible. But it works out because my face always looks surprised. I think I should make another portrait after I finish this class (if I get off the waitlist). It will be fun to compare the before and after.

Rjpark – Looking Outwards 01

Introduction Video of the Cooper Hewitt Pen

The Cooper Hewitt Pen is a pen designed to allow the visitor to save his or her experience at the museum by scanning a sign at each display and accessing those same displays on the web at home. In addition, it allows visitors to draw on interactive tables set up throughout the museum. The goal of the pen is to teach people about design, and what better way to learn about design than by designing yourself? That’s why Cooper Hewitt proposed this idea of visitor technology: for people to engage in the works of a museum rather than just observing them.

In order to create this visitor technology, a lot of design teams, manufacturing companies, engineers, and management teams were involved. The concept of the Cooper Hewitt Pen itself was created by two design teams, Local Projects and Diller Scofidio + Renfro. Then, prototypes of the pen were made through the teamwork of 5 companies/teams: Undercurrent (a management consulting firm), Sistelnetworks (a wireless product company), General Electric, Makesimply (a manufacturing company), and Tellart (Cooper Hewitt’s own digital team). When creating the prototypes, Cooper Hewitt and Undercurrent were inspired by Sistelnetworks’ vWand, an inventory control device that had most of the technical requirements of the interactive pen they were trying to make.  As a result, this project used the current software Sistelnetworks used with a few changes made to the internal circuits and electronics in order to fit the function of their pen. Afterwards, the final prototype of the pen was manufactured by Sistelnetworks and Makesimply. Lastly, the pen was available for use at the Cooper Hewitt Museum.

What’s so amazing about this pen is that it allows for the continuation of an experience, whenever and wherever. I can take out my phone and look at the same displays I looked at in the museums without having to go back to the museum itself. Having this kind of interactive technology everywhere will allow people to personalize and amplify the quality of each experience forever. In addition, it will allow people to think or see things differently. The interaction between the user and product allows the user to learn about how the product reacts to his or her specific actions. It forces the user to make connections between action and result as well as to think about what to do next and to question what else could happen if a different action were to be taken. It makes the user think more in depth about a certain experience and to view it differently, which inevitably makes the user mentally and creatively grow.

Using the Pen

Designing the Pen

Jennifer DeLuna- Project 01- Self Portrait

DeLuna-Portrait

//Jennifer DeLuna
//Section B
//jdeluna@andrew.cmu.edu
//Assignment 01
function setup() {
    createCanvas(600, 600);
    background(220);

}

function draw() {
  background(150, 218, 247)
  //hair
  fill(132, 45, 10);
  rect(187,190,221,275,100,50,20,20)

  //Shirt
  fill(73, 136, 237)
  rect(185,407,224,100,40)

  //neck
  strokeWeight(0)
  fill(225, 171, 137)
  ellipse(300,400,40,60);
  fill(182,93,47)
  ellipse(300,400,40,15)

  //ear
  fill(225, 171, 137)
  ellipse(250,250,20,20);

  //Face
  fill(225, 171, 137)
  strokeWeight(0);
  ellipse(width/2,height/2,200,200);

  //Hair in front of face
  fill(132, 45, 10);
  ellipseMode(40)
  ellipse(350,233,100,75);
  fill(132,45,10)
  rect(260,200,120,50,10,30,300);
  rect(220,210,50,30,100,10,100,10);
  ellipse(260,210,10,10);

  //Outer ear
  fill(225, 171, 137)
  ellipse(197,300,20,40)

  //Inner Ear
  fill(226, 144, 100)
  ellipse(197,300,12,30)

  //Earring
  fill(200)
  ellipse(195,317,10,10)

  //Eyes
  fill(226, 144, 100)
  ellipse(250,303,20,20);
  ellipse(350,303,20,20)
  fill(0)
  ellipse(250,300,20,20)
  ellipse(350,300,20,20);
  strokeWeight(2)
  fill(0)
  line(242,295,240,290)
  fill(0)
  line(358,295,360,290)

  //nose
  strokeWeight(0)
  fill(226, 144, 100)
  triangle(287,325,313,325,300,295);
  fill(182,93,47)
  triangle(300,325,313, 325, 300, 295)

  //mouth
  fill(175, 59, 43)
  ellipse(317,355,20,20)
















}

 

This was a fun project to get a better grasp on using these different shapes and bettering my understanding of this program. I enjoyed trying to simplify my facial features to shapes to create this little portrait.