Uncategorized – Page 13 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Srishty’s Looking Outwards 03 – Computational Fabrication

In 2015, a startup called “Eyebeam” showed many of its computational fashion pieces at New York fashion week. Computational fashion aims to touch upon many themes such as aesthetic, ergonomics, and intellectual property. What I admire about computational fabrication within fashion, is that it is extremely innovative and predictive of the future. Because traditional garments are made of fabric, they are fluid in nature. Today fluidity has become a popular style in design and architecture. Architects such as Zaha Hadid have been inspired by the fluidity of fashion pieces and reflected fluidity in their architecture.

However, the three main issues computation fashion desires to fix are flexibility, recharge-ability, and affordability. 3D printing has become increasingly popular for designers when modeling. But one of the biggest downsides of a 3D printed model is that it lacks malleability and flexibility. Designers at the company have found that by printing on different materials, they can manipulate it with interlocking springs to make naturally stiff material, loose like fabric or textile. Designer Bradley Rothenberg prints on nylon, polymers, and sometimes metals. He has used Python for the program Rhino in the past, but now uses C++ to allow himself to create more advanced structures. By increasing and decreasing his code and varying the geometric properties, he can control the material properties better.

Fashion technologies need to work throughout the day, and thus an important factor for computational fashion designers is recharge-ability. Eyebeam’s project director advised against having to plug a garment piece into your smartphone because it is inconvenient. Instead, professor Dan Steingard of Princeton University has been exploring energy options such as body heat, wind up solar, and bendable batteries. The third important factor is affordability. The minimum printing resolution for 3D printing is 500 microns. Because the resolution is not nice enough yet, there will have to be significant investments made in fashion technology.

Source:

https://www.vice.com/en/article/53wdx3/haute-and-heavy-exploring-the-possibilities-of-computational-fashion

Looking Outwards 03 Hannah Wyatt

CMU Architecture student Madeline Gannon’s project Reverberating Across the Divide unites techniques in computer vision, digital fabrication, and digital design in order to create exotic custom apparel. I admire the intricate geometric symmetry of the necklace, translated from real-time hand gestures through kinetic-based body scanning technology.

High fashion often encourages breaking stylistic barriers set by previous generations in order to create experimentalist clothing lines- which shares similarities in Gannon’s approach to the industry.

Model Wearing Digitally Fabricated Artifact

. I most admire the individuality of the piece, and the unique way the geometry conforms to the model’s body. The algorithm behind the work includes a chronomorphologic modeling technique, allowing for rapid prototypes and composite movement recording.

Video of Chronomorphologic Process Guided by Hand

Looking Outwards 03: Textile Interactions

A computational fabrication project I found interesting was the Computational Design and Fabrication Group at Massachusetts Institute of Technology’s Learning Human-Environment Interactions using Conformal Tactile Textiles. The project explores how the user has sensory interactions with a variety of various textiles. The textiles used are created via digital machine knitting of inexpensive piezoresistive fibers. They are then calibrated using machine learning techniques. The textiles are able to sense the various interactions that humans have with textiles, for example how they move, sit and adjust their clothing. The textiles then categorize the movement and store the data. I found this project particularly interesting because it is a small scale project that interacts quite intuitively with the user as opposed to the large scale intervention that we typically think of when we think of mapping human movement and interaction.

Looking Outwards 02

The piece of work I selected is Inhotim by the computational architect Michael Hansmeyer, https://www.michael-hansmeyer.com/inhotim. I selected this piece because I found the way the artist created a dialogue between the sculptures to be quite beautiful and compelling. I also have had some experience with computational design in architecture so I really enjoy getting to see its application in the world outside of class. From what I know it seems like the artist could have used Python in the Rhino plug-in Grasshopper to create the work since it seems like he manipulated the mesh surface in rhino to create the push pull illusion. It seems like the artist’s sensibility manifested in their algorithm in the way that grasshopper is really about manipulating the earth and a given terrain, and that’s what Inhotim does. It uses nature as a base, but its intervention could not exist without an algorithm.

Project 02 Self Portrait Hannah Wyatt

This is my project

sketch

LookingOutwards-02 (Section A)

https://www.mrkism.com/quantum.htm
Markos R. Kay (neé Christodoulou)
- Quantum Fluctuations (2016),

blog-02 Download

Project 2: Variable Faces

For this self Portrait, I tried to learn more about static tools like the arc and Curve Vertex, as well as varying tools that change color, shape, positioning depending on a number of conditions. Over the process of creating the piece, I began to like the limits created with horizontal/vertical movement of the mouse.

sketch

//Graham Murtha Section A
// MAKE SURE TO MOVE THE MOUSE DOWN TO THE BOTTOM :)
var eyeSize = 40;
var earSize = 50

var skinR = 160
var skinG = 20
var skinB = 160

var shirtR = 150
var shirtG = 150
var shirtB = 0


function setup() {
    createCanvas(350, 500);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

    if (mouseX < width/2) {
        if (mouseY < height/2) {
            background(140,20,140); //purple 1
        } else {
            background(100,10,150); // purple 2
        }
    } else {
        if (mouseY < height/2) {
            background(170,50,170); // purple 3
        } else {
            background (200,20,140); //purple 4
        }
    }                                   // BACKGROUND
    
    fill(skinR,skinG,skinB);
    strokeWeight(2);
    stroke(1);
    ellipse(250, 216, earSize, earSize*1.66) //ear left
    ellipse(97,216,earSize,earSize*1.66)   //ear Right

    fill(shirtR,shirtG,shirtB)
    triangle(175,400,350,500,0,500) // SHIRT


    fill(skinR,skinG,skinB);
    beginShape();
    curveVertex(175, 175);
    curveVertex(175, 75);
    curveVertex(300, 375);
    curveVertex(175,470);
    curveVertex(50, 375);
    curveVertex(175, 75);
    curveVertex(175, 175);
    endShape();       // HEAD SHAPE

    fill(255,141,176)
    rect(110.17,60.72,129,133.3);
    strokeWeight(4)
    arc(175,191,160,30,0,3.14159265); // hat

    
    fill(255,255,240);
    noStroke()
    ellipse(125,270,eyeSize,eyeSize*.75); // eye 1
    ellipse(230,270,eyeSize,eyeSize*.75); // eye 2

    fill(255,0,255);
    noStroke()
    if(mouseX < width/3){
    ellipse(125,270,10,10); // pupil 1a
    ellipse(230,270,10,10); // pupil 1b
    }
    if(mouseX >= width/3 & mouseX < (2*width)/3){
        rect(120,265,10,10); //pupil 2a
        rect(225,265,10,10); //pupil 2b
    }
    if(mouseX >= (2*width)/3){
        triangle(120,265,130,265,125,275); //pupil 3a
        triangle(225,265,235,265,230,275); //pupil 3b
    }


    if (mouseY < height/1.2) {
            fill(0,0,0);
            ellipse(175,400,(mouseX/6),(mouseY/9)); // open, moving mouth
            } else {
                stroke(1)
                strokeWeight(4);
            line(125,400,225,400); // closed mouth
        }
    
    if (mouseY < height/1.2) {
            arc(125,210,30,10,3.14159265,0) //normal brow 1
            arc(230,210,30,10,3.14159265,0) //normal brow 2
            } else {
                fill(skinR,skinG,skinB)
            arc(125,265,50,30,3.14159265,0) // angry brow 1
            arc(230,265,50,30,3.14159265,0) // angry brow 2
        }

    if (mouseY > height/1.2) {
            arc(125,278,50,30,0,3.14159265) // eyebag 1
            arc(230,278,50,30,0,3.14159265) //eyebag 2
            }

    
 
}

function mousePressed() {
    eyeSize = random(20, 60);
    earSize = random(40,80);
    skinR = random(150,240);
    skinG = random(10,60);
    skinB = random(150,240);
    shirtR = random(140,255);
    shirtG = random(140,255);
    shirtB = random(0,10);

}

LookingOutwards-02

Section E, Clare Katyal

I researched the Nonsense Laboratory created by Allison Parrish in 2021. This project uses a program created by Parrish called Pincelate. This program breaks down English words into their phonetics. The idea of the program is to play with the way words are spelled the same way you play with clay or with notes on an instrument. The program inputs words, translates them into how they sound in the mouth, and then ejects a word for the program’s user to try to say. I admire how versatile the program is because it is able to work with any word, and even words that aren’t really words, like made up sounds or jumbles of letters. The front-end implementation was created by Allison Parrish, while the visuals of the program and instructions were created by Jenny Goldstick and Tim Szetela. Allison Parrish creates many different programs playing on scrambled words, which is interesting because it makes one think about how every word we know is just random letters put together. It is cool to think about how people create the words that have so much meaning to people.
https://www.youtube.com/watch?v=cPAbx5kgCJo
Created by Allison Parrish
https://artsexperiments.withgoogle.com/nonsense-laboratory/

Project-02-Variable-face

Section E

I tried to play with adding makeup to the face when it was clicked, in order to add more color on the face. I also tried to play with beauty standards, and had the lips and eyebrows get fuller, as this is what many celebrities look like nowadays.

var boxWidth = 6
function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
background(247,233,106,[255]);
 fill(75,36,36,[255]); //hair
 if (mouseY < width/2) { //hair grows
     ellipse(width/2,height/2+50,230,400);
 } else {
     ellipse(width/2,height/2+170,260,700);
 }

   
 fill(212,179,135,[255]);
    ellipse(width/2,height/2,180,250); //face
if (mouseIsPressed) //lipstick
    fill(219,58,107,[100]); 
if (mouseIsPressed) {
       ellipse((width/2),(height/2+50),70,30); //lips
} else {
        ellipse((width/2),(height/2+50),40,15);
}
if (mouseIsPressed) //blush
fill(255,204,204,[255]);
    circle((width/2+40),(height/2),30);
    circle((width/2-40),(height/2),30);
fill(0)
strokeWeight(3);
    line((width/2-40),(height/2+50),(width/2+40),(height/2+50)); //mouth
fill(255); //eye whites
    ellipse((width/2-30),(height/2-40),30,15);
    ellipse((width/2+30),(height/2-40),30,15);
fill(75,32,32,[255]);
    if (mouseX > width/2) { //pupils dilate
        boxWidth=12;
    } else {
        boxWidth=6;
    }
    ellipse((width/2-30),(height/2-40),boxWidth,boxWidth); //eye right
    ellipse((width/2+30),(height/2-40),boxWidth, boxWidth); //eye left
    arc((width/2-30),(height/2-60),30,mouseY,PI,radians(360)); //eyebrow right arches
    arc((width/2+30),(height/2-60),30,mouseY,PI,radians(360)); //eyebrow left arches
fill(164,135,106,[255]); //nose
strokeWeight(1);
    triangle((width/2-15),(height/2+10),(width/2+15),(height/2+10),(width/2),(height/2-30));
fill(223,193,163,[255]);
strokeWeight(1);
    rect((width/2-9),(height/2-30),18,35);
fill(0); 
    ellipse((width/2-5),(height/2+5),8,5); //nostrails
    ellipse((width/2+5),(height/2+5),8,5); //nostrails

}

Project – 02

I started by trying to make the original face a more cartoonish version of my self-portrait from the first week. After that, I started to play around with different variables and changes that I could make with the drawing. My favorite part of the project is being able to color in the background when the user presses a key.

sketch

//Nakshatra Menon 
//Section C 

var centerOfFaceX = 278;
var centerOfFaceY = 377;
var faceHeight = 470
var faceWidth = 374
var centerOfEyeLX  = 220; 
var centerOfEyeY = 347;
var centerOfEyeRX = 408;
var eyeWidth = 92;
var eyeHeight = 62; 
var hair = 1;
var mouth = 1;
var value1 = 130;
var value2 = 15;
function setup() {
    createCanvas(480, 640);
    background(0);
}

function draw() {
        if(// when the mouse is pressed --> realistic face 
        mouseIsPressed==true){
        background(0)
        noStroke();
        fill(60, 20, 54);                //purple1 
        beginShape();
            vertex(207, 139);
            vertex(323, 130);
            vertex(344, 450);
            vertex(323, 523);
            vertex(280, 605);
            vertex(186, 576);
            vertex(126, 521);
            vertex(104, 469);
            vertex(89, 367);
        endShape(CLOSE);
        fill(76, 28, 90);                //purple2
        beginShape();
            vertex(323, 130);
            vertex(312, 370);
            vertex(287, 329);
            vertex(281, 336);
            vertex(292, 356);
            vertex(298, 348);
            vertex(346, 461);
            vertex(323, 531);
            vertex(280, 605);
            vertex(133, 504);
            vertex(104, 310);
            vertex(126, 377);
            vertex(133, 356);
            vertex(152, 351);
            vertex(205, 365);
            vertex(188, 328);
            vertex(189, 309);
            vertex(165, 292);
            vertex(172, 255);
            vertex(204, 212);
            vertex(204, 183);
            vertex(226, 146);
            vertex(276, 146);
        endShape(CLOSE);
        fill(126, 53, 79);                 //purple3
        beginShape();
            vertex(325, 131);
            vertex(226, 162);
            vertex(187, 280);
            vertex(207, 287);
            vertex(202, 326);
            vertex(226, 375);
            vertex(159, 366);
            vertex(131, 414);
            vertex(195, 482);
            vertex(197, 493);
            vertex(178, 506);
            vertex(207, 533);
            vertex(226, 529);
            vertex(212, 483);
            vertex(234, 484);
            vertex(255, 471);
            vertex(276, 477);
            vertex(269, 444);
            vertex(288, 415);
            vertex(305, 407);
            vertex(305, 429);
            vertex(283, 424);
            vertex(279, 445);
            vertex(302, 449);
            vertex(315, 441);
            vertex(336, 459);
            vertex(325, 471);
            vertex(288, 476);
            vertex(297, 490);
            vertex(284, 496);
            vertex(306, 547);
            vertex(254, 559);
            vertex(266, 591);
            vertex(299, 620);
            vertex(356, 611);
            vertex(425, 458);
            vertex(304, 318);
            vertex(309, 369);
            vertex(291, 379);
            vertex(278, 319);
            vertex(303, 319);
        endShape(CLOSE);

        fill(78, 34, 6);                     //brown1
        beginShape();
            vertex(150, 315);
            vertex(147, 296);
            vertex(203, 285);
            vertex(278, 303);
            vertex(274, 312);
            vertex(194, 309);
            vertex(165, 319);
            vertex(150, 315);
        endShape(CLOSE);
        beginShape();
            vertex(358, 349);
            vertex(374, 302);
            vertex(444, 274);
            vertex(444, 331);
            vertex(440, 342);
            vertex(450, 366);
            vertex(448, 444);
            vertex(427, 476);
            vertex(417, 525);
            vertex(380, 573);
            vertex(221, 490); 
            vertex(253, 498);
            vertex(389, 489); 
        endShape(CLOSE);
        beginShape();
            vertex(138, 538);
            vertex(181, 573);
            vertex(284, 606); 
            vertex(296, 618);
            vertex(312, 618);
            vertex(343, 742); 
            vertex(115, 742); 
        endShape(CLOSE); 
        fill(130, 69, 20);                        //brown2
        beginShape();
            vertex(207, 285);
            vertex(222, 285);
            vertex(292, 303);
            vertex(303, 315);
            vertex(257, 315); 
            vertex(255, 323);
            vertex(280, 337);
            vertex(276, 343);
            vertex(249, 323);
            vertex(227, 323);
            vertex(222, 306);
            vertex(276, 312);
            vertex(278, 303);
        endShape(CLOSE)
        beginShape();
            vertex(245, 326);
            vertex(284, 351);
            vertex(284, 358);
            vertex(262, 341);
            vertex(240, 330);
        endShape(CLOSE);
        beginShape();
            vertex(236, 337);
            vertex(248, 337);
            vertex(264, 349);
            vertex(262, 352);
            vertex(235, 352);
            vertex(239, 346);
        endShape(CLOSE);
        beginShape();
            vertex(222, 360);
            vertex(264, 355);
            vertex(284, 360);
            vertex(278, 369);
            vertex(249, 377);
            vertex(242, 364);
        endShape(CLOSE);
        beginShape();
            vertex(373-30, 365-50);
            vertex(415-30, 319-50);
            vertex(473-30, 332-50);
            vertex(470-30, 337-50);
            vertex(438-30, 339-50);
            vertex(408-30, 353-50);
            vertex(460-30, 345-50);
            vertex(474-30, 356-50);
            vertex(461-30, 374-50);
        endShape(CLOSE);
        triangle(386-30, 374-50, 388-30, 400-50, 411-30, 372-50);
        beginShape();
            vertex(421-30, 373-50);
            vertex(440-30, 373-50);
            vertex(447-30, 379-50);
            vertex(421-30, 378-50);
        endShape(CLOSE);
        beginShape();
            vertex(422-30, 384-50);
            vertex(421-30, 392-50);
            vertex(424-30, 400-50);
            vertex(412-30, 406-50);
            vertex(413-30, 414-50);
            vertex(404-30, 416-50);
            vertex(399-30, 408-50);
            vertex(392-30, 406-50);
            vertex(404-30, 541-50);
            vertex(420-30, 539-50);
            vertex(403-30, 562-50);
            vertex(392-30, 548-50);
            vertex(356-30, 552-50);
            vertex(361-30, 559-50);
            vertex(351-30, 561-50);
            vertex(344-30, 568-50);
            vertex(312-30, 565-50);
            vertex(312-30, 573-50);
            vertex(324-30, 576-50);
            vertex(342-30, 596-50);
            vertex(355-30, 600-50);
            vertex(356-30, 660-50);
            vertex(321-30, 666-50);
            vertex(327-30, 670-50);
            vertex(384-30, 664-50);
            vertex(402-30, 643-50);
            vertex(421-30, 578-50);
            vertex(440-30, 558-50);
            vertex(452-30, 526-50);
            vertex(473-30, 489-50);
            vertex(478-30, 416-50);
            vertex(442-30, 400-50);
            vertex(447-30, 390-50);
            vertex(439-30, 384-50); 
        endShape(CLOSE);

        fill(183, 95, 53);        //orange1 
        beginShape();
            vertex(237-30, 324-50);
            vertex(259-30, 225-50);
            vertex(352-30, 189-50);
            vertex(461-30, 259-50);
            vertex(473-30, 289-50);
            vertex(473-30, 327-50);
            vertex(404-30, 349-50);
            vertex(392-30, 359-50);
            vertex(422-30, 359-50);
            vertex(460-30, 349-50);
            vertex(460-30, 369-50);
            vertex(386-30, 380-50);
            vertex(401-30, 422-50);
            vertex(429-30, 417-50);
            vertex(420-30, 410-50);
            vertex(440-30, 406-50);
            vertex(444-30, 415-50);
            vertex(461-30, 413-50);
            vertex(470-30, 424-50);
            vertex(470-30, 485-50);
            vertex(452-30, 513-50);
            vertex(430-30, 506-50);
            vertex(427-30, 523-50);
            vertex(404-30, 547-50);
            vertex(351-30, 552-50);
            vertex(337-30, 544-50);
            vertex(345-30, 529-50);
            vertex(362-30, 526-50);
            vertex(375-30, 513-50);
            vertex(351-30, 493-50);
            vertex(348-30, 469-50);
            vertex(354-30, 456-50);
            vertex(356-30, 435-50);
            vertex(347-30, 414-50);
            vertex(322-30, 353-50);
        endShape(CLOSE);
        beginShape();
            vertex(339-30, 572-50);
            vertex(389-30, 563-50);
            vertex(391-30, 570-50);
            vertex(376-30, 591-50);
            vertex(359-30, 595-50);
            vertex(341-30, 583-50);
        endShape(CLOSE);
        beginShape(); 
            vertex(299-30, 625-50);
            vertex(351-30, 613-50);
            vertex(377-30, 595-50);
            vertex(408-30, 556-50);
            vertex(416-30, 551-50);
            vertex(408-30, 617-50);
            vertex(399-30, 645-50);
            vertex(351-30, 661-50);
            vertex(306-30, 643-50);
        endShape(CLOSE);
        beginShape();
            vertex(197-30, 425-50);
            vertex(299-30, 425-50);
            vertex(314-30, 437-50);
            vertex(288-30, 504-50);
            vertex(254-30, 521-50);
            vertex(215-30, 502-50);
            vertex(200-30, 469-50);
        endShape(CLOSE);
        quad(259-30, 362-50, 275-30, 366-50, 275-30, 369-50, 259-30, 369-50);
        fill(227, 122, 43);
        beginShape();
            vertex(284-30, 218-50);
            vertex(328-30, 205-50);
            vertex(361-30, 201-50);
            vertex(462-30, 265-50);
            vertex(470-30, 326-50);
            vertex(392-30, 350-50);
            vertex(374-30, 396-50);
            vertex(392-30, 505-50);
            vertex(374-30, 509-50);
            vertex(358-30, 496-50); 
            vertex(351-30, 480-50);
            vertex(361-30, 468-50);
            vertex(361-30, 436-50);
            vertex(352-30, 418-50);
            vertex(335-30, 354-50);
            vertex(252-30, 319-50);
            vertex(264-30, 258-50);
        endShape(CLOSE);
        beginShape();
            vertex(375-30, 399-50);
            vertex(384-30, 399-50);
            vertex(394-30, 418-50);
            vertex(411-30, 426-50);
            vertex(456-30, 419-50);
            vertex(465-30, 431-50);
            vertex(463-30, 486-50);
            vertex(442-30, 503-50);
            vertex(416-30, 496-50);
            vertex(419-30, 517-50);
            vertex(406-30, 544-50);
            vertex(355-30, 551-50);
            vertex(342-30, 540-50);
            vertex(355-30, 532-50);
            vertex(361-30, 546-50);
            vertex(369-30, 523-50);
            vertex(407-30, 504-50);
            vertex(372-30, 409-50);
        endShape(CLOSE);
        circle(252-30, 472-50, 81);
        beginShape()
            vertex(401-30, 565-50);
            vertex(411-30, 565-50);
            vertex(404-30, 583-50);
            vertex(406-30, 623-50);
            vertex(390-30, 649-50);
            vertex(335-30,649-50);
            vertex(321-30, 628-50);
            vertex(370-30, 617-50);
            vertex(385-30, 602-50);
            vertex(384-30, 592-50);
        endShape(CLOSE);
        beginShape()
            vertex(422-30, 364-50);
            vertex(435-30, 358-50);
            vertex(437-30, 349-50);
            vertex(455-30, 349-50);
            vertex(461-30, 359-50);
            vertex(446-30, 369-50);
        endShape(CLOSE); 
        triangle(351-30, 581-50, 374-30, 565-50, 384-30, 576-50);
        fill(251, 151, 55);                   //Orange2
        beginShape();
            vertex(306-30, 220-50);
            vertex(364-30, 215-50);
            vertex(443-30, 253-50);
            vertex(463-30, 284-50);
            vertex(466-30, 322-50);
            vertex(406-30, 342-50);
            vertex(377-30, 359-50);
            vertex(374-30, 388-50);
            vertex(373-30, 417-50);
            vertex(399-30, 483-50);
            vertex(392-30, 500-50);
            vertex(382-30, 507-50);
            vertex(361-30, 488-50);
            vertex(369-30, 467-50);
            vertex(364-30, 427-50);
            vertex(351-30, 396-50);
            vertex(346-30, 354-50);
            vertex(290-30, 319-50);
            vertex(306-30, 297-50);
            vertex(295-30, 264-50);
        endShape(CLOSE);
        beginShape();
            vertex(379-30, 415-50);
            vertex(410-30, 430-50);
            vertex(425-30, 430-50);
            vertex(443-30, 419-50);
            vertex(460-30, 426-50);
            vertex(460-30, 475-50);
            vertex(454-30, 492-50);
            vertex(435-30, 494-50);
            vertex(411-30, 476-50);
            vertex(411-30, 516-50);
            vertex(402-30, 532-50);
            vertex(370-30, 545-50);
            vertex(370-30, 527-50);
            vertex(393-30, 509-50);
            vertex(403-30, 487-50);
        endShape(CLOSE);
        beginShape();
            vertex(331-30, 632-50);
            vertex(382-30, 620-50);
            vertex(392-30, 628-50);
            vertex(386-30, 643-50);
            vertex(356-30, 643-50);
        endShape(CLOSE);
        circle(256-30, 469-50, 60);

        fill(254, 187, 79);            //yellow 
        beginShape();
            vertex(356-30, 373-50);
            vertex(373-30, 379-50);
            vertex(373-30, 414-50);
            vertex(364-30, 414-50);
            vertex(356-30, 396-50);
        endShape(CLOSE);
        beginShape();
            vertex(374-30, 420-50);
            vertex(425-30, 438-50);
            vertex(450-30, 430-50);
            vertex(457-30, 448-50);
            vertex(453-30, 478-50);
            vertex(443-30, 482-50);
            vertex(411-30, 467-50);
            vertex(392-30, 472-50);
        endShape(CLOSE)
        beginShape();
            vertex(373-30, 433-50);
            vertex(399-30, 491-50);
            vertex(392-30, 500-50);
            vertex(375-30, 487-50);
            vertex(377-30, 476-50);
        endShape(CLOSE);
        beginShape(); 
            vertex(272-30, 391-50);
            vertex(287-30, 393-50);
            vertex(287-30, 400-50);
            vertex(270-30, 401-50);
        endShape(CLOSE);
        quad(424-30, 387-50, 440-30, 387-50, 440-30, 398-50, 424-30, 398-50);
        ellipse(392-30, 284-50, 95, 105);

        fill(21, 6, 1);                  //black hair 
        beginShape();
            vertex(70, 144);
            vertex(154, 95);
            vertex(270, 54);
            vertex(370, 100);
            vertex(477, 204);
            vertex(498, 742);
            vertex(291, 742);
            vertex(313, 618);
            vertex(364, 614);
            vertex(372, 593);
            vertex(379, 573);
            vertex(417, 525);
            vertex(427, 476);
            vertex(448, 444);
            vertex(450, 366);
            vertex(440, 342);
            vertex(444, 331);
            vertex(443, 239);
            vertex(437, 212);
            vertex(322, 139);
            vertex(210, 165);
            vertex(193, 200);
            vertex(139, 269);
            vertex(131, 296);
            vertex(151, 338);
            vertex(121, 302);
            vertex(119, 375);
            vertex(108, 331);
            vertex(93, 360);
            vertex(111, 485);
            vertex(126, 521);
            vertex(181, 570);
            vertex(218, 742);
            vertex(0, 742);
            vertex(0, 405);
        endShape(CLOSE);
        fill(40, 20, 16);                    //brown1
        beginShape();
            vertex(251-30, 115-50);
            vertex(314-30, 101-50);
            vertex(361-30, 172-50);
            vertex(355-30, 182-50);
            vertex(327-30, 190-50);
            vertex(290-30, 189-50);
            vertex(310-30, 167-50);
            vertex(252-30, 155-50);
            vertex(285-30, 136-50);
        endShape(CLOSE);
        fill(56, 17, 4);                    //brown2
        beginShape();
            vertex(327-30, 180-50);
            vertex(356-30, 171-50);
            vertex(322-30, 114-50);
            vertex(317-30, 137-50);
            vertex(337-30, 159-50);
            vertex(327-30, 180-50);
        endShape(CLOSE);
    } else { // cartoon face
        if (//press on a key to color in the background
            keyIsPressed == true){
            stroke(mouseY, mouseX, value1);
            strokeWeight(40);
            point(mouseX, mouseY)
        }
        strokeWeight(1);
        // hair
            fill(44, 23, value2);
            noStroke();
            ellipse(244, 680, 630, 1290);
        //face and neck 
            strokeWeight(1);
            fill(235, 171, 127);
            beginShape();
                vertex(135, 511);
                vertex(304, 605);
                vertex(270, 742);
                vertex(179, 742);
            endShape(CLOSE);
            stroke(174, 115, 75);
            strokeWeight(3);
            ellipse(centerOfFaceX, centerOfFaceY, faceWidth, faceHeight); //face 

        //left eye     
            stroke(44, 23, 17);
            strokeWeight(10);
            line(143, 311, 174, 295);
            line(174, 295, 270, 295);
            strokeWeight(2);
            stroke(0);
            fill("black");      // eyeliner 
            triangle(centerOfEyeLX, centerOfEyeY-25, 143, 329, centerOfEyeLX, centerOfEyeY+25);
            fill("white");      //eye
            ellipse(centerOfEyeLX, centerOfEyeY, eyeWidth, eyeHeight);
            fill("black");      // left pupil 
            ellipse(constrain(mouseX, centerOfEyeLX-15, centerOfEyeLX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);   
        // right eye 
            stroke(44, 23, 17);
            strokeWeight(10);
            line(365, 295, 441, 295);
            line(441, 295, 450, 303);
            strokeWeight(2);  
            stroke(0);
            fill("black");            // eyeliner 
            triangle(centerOfEyeRX, centerOfEyeY-25, 463, 321, centerOfEyeRX, centerOfEyeY+25); 
            fill("white");            // eye 
            ellipse(centerOfEyeRX, centerOfEyeY, eyeWidth, eyeHeight);    
            fill("black");            //right pupil
            ellipse(constrain(mouseX, centerOfEyeRX-15, centerOfEyeRX+15), constrain(mouseY, centerOfEyeY-8, centerOfEyeY+8), eyeWidth/4);   
        //Hair - bangs 
            if(hair <= 1){
            fill(44, 23, value2);
            stroke(44, 23, value2);
            beginShape();
                curveVertex(327, 124);
                curveVertex(268, 145);
                curveVertex(215,158);
                curveVertex(191, 224);
                curveVertex(127, 292);
                curveVertex(137, 331);
                curveVertex(78, 426);
                curveVertex(99, 191);
            endShape(CLOSE);
            }
            if(hair <=2 & hair>1){
            fill(44, 23, value2);
            stroke(74, 46, value2);
            beginShape();
                vertex(278, 136);
                vertex(390, 155);
                vertex(463, 282);
                vertex(71, 292);
                vertex(175, 150);
            endShape(CLOSE);
            }
            if(hair <=3 & hair>2){
            fill(44, 23, value2);
            stroke(44, 23, value2);
            beginShape();
                curveVertex(327, 124);
                curveVertex(268, 145);
                curveVertex(215,158);
                curveVertex(191, 224);
                curveVertex(127, 292);
                curveVertex(137, 331);
                curveVertex(78, 426);
                curveVertex(99, 191);
            endShape(CLOSE);
            beginShape();
                curveVertex(298, 121);
                curveVertex(298, 121);
                curveVertex(340, 190);
                curveVertex(412, 255);
                curveVertex(455, 308);
                curveVertex(458, 410);
                curveVertex(466, 536);
                curveVertex(486, 325);
                curveVertex(399, 138);
            endShape(CLOSE);
            }
        // mouth  
            if(mouth <=1){
                fill(196, 99, 99); 
                stroke(137, 41, 41);
                strokeWeight(10);
                ellipse(centerOfFaceX+36, centerOfFaceY+133, mouseX/7, mouseY/7);
            }
            if(mouth <=2 & mouth>1){
                if(mouseX2){
                fill(196, 99, 99);
                stroke(137, 41, 41);
                strokeWeight(10);
                triangle(centerOfFaceX+96, centerOfFaceY+123, centerOfFaceX+26, centerOfFaceY+123, centerOfFaceX+61, centerOfFaceY+123+mouseY/9)
            }
        // nose 
            strokeWeight(7);
            stroke(189, 137, 102);
            noFill();
            beginShape();
                vertex(348, 311);
                vertex(337, 352);
                vertex(337, 373);
                vertex(365, 444);
                vertex(342, 467);
                vertex(319, 446);
            endShape();
            if(hair <= 1){//nose ring changes w/ hair (gold)
            strokeWeight(4);
            stroke(255, 215, 0); 
            noFill() 
            beginShape();
                vertex(330, 443);
                vertex(320, 462); 
                vertex(331, 472);
                vertex(334, 460);
            endShape();
            }
            if(hair <=2 & hair>1){// nose ring changes w/ hair (silver)  
            strokeWeight(4);
            stroke(192, 192, 192); 
            noFill(); 
            beginShape();
                vertex(330, 443);
                vertex(320, 462); 
                vertex(331, 472);
                vertex(334, 460);
            endShape();
            }
            if(hair <=3 & hair>2){// nose ring changes w/ hair (stud)
            strokeWeight(7)
            stroke(255, 215, 0)
            point(330, 443)
            }
        }
} 
function mousePressed(){
    //when you click on the mouse the eye size, hair, haircolor, mouth, and background color changes 
    eyeWidth = random(60, 150);
    eyeHeight = random(50, 100);
    hair = random(0, 3);
    mouth = random(0,3); 
    value1 = random(0, 255);
    value2 = random(0, 100);

}