Author: Jessica

Jessica Timczyk – Project 02

pigface

// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face

var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 300;
var faceColorR = 241;
var faceColorG = 146;
var faceColorB = 188;
var eyeColorR = 126;
var eyeColorG = 242;
var eyeColorB = 230;
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
var mouthHeight = 480 / 2 + 40
var noseHeight = 25

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(226, 179, 239);

    // face color
    stroke(0);
    strokeWeight(2);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);

    //eye variables
    var eyeLX = 640 / 2 - faceWidth * 0.25;
    var eyeRX = 640 / 2 + faceWidth * 0.25;

    // eyeball shapes
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize * 3/4);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize * 3/4);

    // irises shape
    strokeWeight(.75);
    // the iris color will change but the variables are rearranged so that 
    // they are not the same color as the face
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(eyeLX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
    ellipse(eyeRX, height / 2, eyeSize * 2/3, eyeSize * 2/3);

    // Pupil
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
    ellipse(eyeRX, height / 2, eyeSize * 1/3, eyeSize * 1/3);


    //eyebrow variables
    var eyebrowLX = eyeLX - 30;
    var eyebrowRX = eyeRX - 30;

    // left eyebrow shape
    noStroke();
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX, height / 2 - 20);
    curveVertex(eyebrowLX + 30, height / 2 - 40);
    curveVertex(eyebrowLX + 50, height / 2 - 35);
    curveVertex(eyebrowLX + 50, height / 2 - 30);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    curveVertex(eyebrowLX + 30, height / 2 - 33);
    endShape();

    // right eyebrow shape
    fill(123, 72, 72);
    beginShape();
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 60, height / 2 - 20);
    curveVertex(eyebrowRX + 30, height / 2 - 40);
    curveVertex(eyebrowRX + 10, height / 2 - 35);
    curveVertex(eyebrowRX + 10, height / 2 - 30);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    curveVertex(eyebrowRX + 30, height / 2 - 33);
    endShape();

    // mouth shape
    fill(0);
    stroke(235, 65, 97);
    strokeWeight(4);
    arc(width / 2, faceHeight, 80, 80, 0, PI, CHORD);

    // restraining mouth height to stay below 2/3 of the way down 
    // the page as to not overlap with the eyes as they move
    if (faceHeight <= height * 2/3) {
        faceHeight = mouthHeight;
    }

    // Pig nose
    stroke(0);
    fill(227, 138, 190);
    ellipse(width / 2, faceHeight - noseHeight, 70, 60);

    // nostrils
    fill(0);
    ellipse(width / 2 - 10, faceHeight - noseHeight, 8, 15);
    ellipse(width / 2 + 10, faceHeight - noseHeight, 8, 15);

    // ears
    strokeWeight(3);
    fill(faceColorR, faceColorG, faceColorB);
    ellipse(eyeLX, faceHeight * 1/3, 90, 85);
    ellipse(eyeRX, faceHeight * 1/3, 90, 85);

    // cheaks
    // use eyeRX as x value so that the cheeks move with the eyes
    arc(eyeRX + 35, faceHeight + 10, 80, 80, PI, PI + HALF_PI, OPEN);
    arc(eyeLX - 35, faceHeight + 10, 80, 80, PI + HALF_PI, TWO_PI, OPEN);


}
 

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(150, 500);
    faceHeight = random(100, 400);
    eyeSize = random(30, 85);
    faceColorR = random(235, 244);
    faceColorG = random(54, 194);
    faceColorB = random(161, 224);
    eyebrowLX = random(eyeLX - 50, eyeLX - 10);
    eyebrowRX = random(eyeRX - 50, eyeLX - 10);
    mouthHeight = random(270, 330);
    noseHeight = random(40, 15);
    eyeColorR = random(126, 242);
    eyeColorG = random(126, 242);
    eyecolorB= random(126, 242);
}

It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.

Jessica Timczyk – Looking Outwards 02

Nervous System, a design studio focused on designing and producing products inspired by natural phenomena, utilizes computer programming to craft their creations. Rather than designing each piece of work individually, the group ingeniously creates computer programs to construct  many new designs, each one being unique. Specifically, the group’s kinematic dress project provides an interesting combination of art and computer programming. A code was seemingly written to design thousands of unique interlocking shapes to make up the dress, resulting in an extremely interesting pattern created by the coder within the “fabric” of the dress which was then 3D printed. It is made up of thousands of triangular panels and hinges, giving the design its motion and mobility. The dress was created and designed by the Nervous System team, including: Jessica Rosenkrantz, Jesse Louis- Rosenberg, Margaret Swanson, and Peter Sanroma in 2014.

The video above describes in more detail the process the team went through to produce the Kinematics Dress.

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.

Jessica Timczyk – Looking Outwards 01

The still visual of the 155th Anniversary of the Pony Express Google Doodle

Google Doodles embody one of my personal favorite user interactive, computing based art projects. Each design simultaneously reminds users of important dates, is visually stimulating, and all the while still allowing Google users to interact with the piece. Specifically one of my favorites, Google’s 155th Anniversary of the Pony Express Doodle, débuted on April 14th, 2015 allowed searchers to play a game on the Doodle captured in colorful, western themed graphics. The most admirable aspect of the project though, comes in how the surprisingly complex game incorporates cartoonish graphics, while still maintaining Google’s branding. Maintaining all of those characteristics, making it new and fun for the user while still being complementary to Google’s logo would pose a difficult challenge for any creative team.

The video explains the inspiration behind the interactive animation and steps to its creation.

Seven different people were a part of the team that created this doodle:three engineering wizards: Mark Ivey, Kris Hom, Brian Murray, thebackground design: Kevin Laughlin, a project manager: Greg Capuano, a sound designer: Manuel Clémentand the art direction & character design/animation by Matt Cruickshank. This list included including three artists, where a normal Google Doodle would only require one. While this Google Doodle is incredibly unique, some inspiration was drawn from previous Google Doodles to keep the animation snappy, interesting and interactive. While not explicitly stated, the software/script of the animation appears to be novel and unique to this Google Doodle. Though this Doodle will not be reused, the level of intricacy and interactive-ness will and have inspired other important Google Doodle’s designs.