Month: September 2022

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);

}

Bhaboo’s Project 2

sketch
function setup() {
    createCanvas(480, 640);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

//humans in current form 

function draw() {
    background(99, 197, 218);
    strokeWeight(3)
    fill(78, 53, 36, [255])
    ellipse(360, 240, 60, 80) //ear right
    fill(78, 53, 36, [255])
    ellipse(100, 240, 60, 80) //ear left
    fill(121, 92, 52, [255])
    ellipse(230, 270, 280, 320) //head
    fill(255, 255, 255, [255])
    ellipse(180, 220, 80, 64) //eye left
    fill(255, 255, 255, [255])
    ellipse(280, 220, 80, 64) //eye right
    fill(78, 53, 36, [255])
    ellipse(180, 200, 20, 20) //pupil left
    fill(78, 53, 36, [255])
    ellipse(280, 200, 20, 20) //pupil right
    fill(131, 92, 52, [255])
    triangle(230, 250, 200, 320, 260, 320) //nose
    fill(184, 63, 63, [255])
    arc(220, 260, 400, 200, 1, 2, 2) //mouth
    fill(0, 0, 0, [255])
    triangle(230, 60, 127, 160, 333, 160) //mohawk
    fill(255, 255, 255, [255])
    ellipse(378, 259, 7, 7) //pupil right

//monkey (humans pre-evolutionary form)
if (mouseIsPressed) {
    earValue1 = random(40,90)
    earValue2 = random(50,100)
    eyeValue1 = random(20,100)
    eyeValue2 = random(40,80)
    pupilValue1= random(10,20)
    pupulValue2 = random(5,30)
    toungeValue = random(40,120)
    background(150, 255, 150);
    strokeWeight(0)
    fill(78, 53, 36, [255])
    ellipse(360, 260, earValue1, 80) //ear right
    fill(78, 53, 36, [255])
    ellipse(100, 200, 60, earValue2) //ear left
    fill(121, 92, 52, [255])
    ellipse(230, 270, 280, 320) //head
    fill(255, 255, 255, [255])
    ellipse(180, 200, 100, eyeValue1) //eye left
    fill(255, 255, 255, [255])
    ellipse(280, 200, eyeValue2, 38) //eye right
    fill(78, 53, 36, [255])
    ellipse(180, 200, pupilValue1, pupulValue2) //pupil left
    fill(78, 53, 36, [255])
    ellipse(280, 200, pupulValue2, pupilValue1) //pupil right
    fill(131, 92, 52, [255])
    triangle(240, 230, 200, 300, 260, 310) //nose
    fill(184, 63, 63, [255])
    ellipse(194, 402, 64, 100) // tounge
    fill(184, 63, 63, [255])
    arc(230, 320, 200, 100, 1, 3, 4) //mouth
    
}
}

Project 02-Variable-Face

sketchDownload
//Sofia Rolla
//Section D

var eyeSize = 20;
var pupilSize= 5;
var faceWidth = 150;
var faceHeight = 200;
var noseWidth = 20;
var noseHeight = 30;
var mouthSize = 40;

var faceR = 199
var faceG = 177
var faceB = 140

var pupilR = 112
var pupilG = 166
var pupilB = 233
  
var noseR = 200
var noseG = 190
var noseB = 170

var mouthR = 0
var mouthG = 0
var mouthB = 0





function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(170,10,90);
    //head
    fill(faceR, faceG, faceB)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    //eyes
    fill(255)
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //pupils
    fill(pupilR, pupilG, pupilB)
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    //nose
    var noseY = height / 2 + faceHeight* 0.15;
    fill(noseR, noseG, noseB)
    ellipse(width/2, noseY, noseWidth, noseHeight); 
    //mouth
    fill(mouthR, mouthG, mouthB)
    ellipse(width / 2, height / 2 + .4 * faceHeight, mouthSize, faceHeight/10)
    //hair
    arc(width / 2, height / 2-35, faceWidth+10,  faceHeight-10, PI,2*PI, PI);
   
 
}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(20, 40);
    pupilSize = random(5,15);
    noseWidth = random(5,20)
    noseHeight= random (10,30);
    mouthX = random (20, 50);
    faceR = random (170,230)
    faceG = random (50,200)
    faceB = random (50,200)
    mouthR = random (50,200)
    mouthB = random (50,200)
    mouthG = random (50,200)
    pupilR = random (50,200)
    pupilG = random (50,200)
    pupilB = random (50,200)
    noseR = random (50,200)
    noseG = random (50,200)
    noseB = random (50,200)
    
}

This was a difficult process for me. I struggled with finding the right variables and with setting proper variables for positions of certain facial features. I hope that this process will get easier as I keep learning.

Project 2

Work to test out variable colour, ratio, shapes and size of facial features.

Project 2 image

var eyeSize = 20;
var faceWidth = 110;
var faceHeight = 150;
var mouthWidth = 30;
var mouthHeighth = 10;
var earSize =30;
var bodyWidth =200;
var bodyHeight = 300;
var shirtColour= 90;
var faceTone= 220;
var eyeTone=115;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(180);
    fill(208,223,250)
    strokeWeight(0);
    rect(0,0,640,200)
    stroke(139,163,187);
    strokeWeight(5);
    line(0,200,640,200)
//background 

    strokeWeight(2);
    stroke(22, 62, 104);
    fill(11,31,shirtColour)
    ellipse(width / 2, height / 1.10, bodyWidth,  bodyHeight);
//body 

    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    var earLX = width / 1 - faceWidth * 1.5;
    var earRX = width / 1 + faceWidth * 1.5;
    ellipse(width/2.4, height / 1.9, earSize, earSize);
    ellipse(width/1.7, height / 1.9, earSize, earSize);
//ear

    strokeWeight(2);
    stroke(11, 31, 52);
    fill(255,faceTone,faceTone)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    noFill();
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(eyeTone,80,30)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
//face and eye

    fill(255,140,85)
    square(width / 2.09, height / 1.9, mouthWidth);
    var mouth = width / 1.1 - faceWidth * 0.5;
//mouth
}
 
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(100, 145);
    faceHeight = random(120, 200);
    eyeSize = random(10, 28);
    mouthWidth = random(20,30);
    mouthHeighth = random(5,15);
    earSize= random(25,40);
    bodyWidth= random(200,300);
    bodyHeight= random(300,370);
    shirtColour= random (20,350);
    faceTone= random (190,225);
    eyeTone= random (70,150);
}

LO2 Generative Puzzles

The piece of work that I find super interesting is a series of generative jigsaw puzzles from the site called “Nervous System” 

https://n-e-r-v-o-u-s.com/shop/line.php?code=12/

This project was created by two MIT designers who wanted to put a spin on traditional puzzles. These puzzles are created uniquely with custom software which makes the design of the puzzle super intricate, as well as the actual jig-saw pieces themselves. THe pieces are shaped but using natural patterns which are generatively produced, ultimately making these puzzles a bit more challenging than a typical jig-saw puzzle. Although puzzles may be boring for some, I enjoy solving puzzles and these generative puzzles would be even more stimulating. The software that creates the interlocking pieces is based off of a crystal growth process called “dendritic solidification”. This process in an art form becomes quite complex, because in nature, a crystal would grow in one direction; however, for the puzzle, the software must make one puzzle piece that “grows”, and another symmetric piece that matches each extension piece. Additionally, the software has different designs for different states of matter, creating different sort of crystal formations for different puzzles. Based on this, I would assume that the creates are interested in nature, science, and geology as well as programming. Overall, I am very fascinated and impressed with the complexity of this software, and it also has a fun benefit!

Here is an example of one of the puzzles

Generative Art

One of the artworks that I admire is “Waves: The Abiotechnogenesis Collection”. The artist, Memo Akten finds his inspiration in nature and for this piece, his inspiration was the ocean. The ocean has existed since the beginning of time. Water is important for survival and life, people used the ocean to travel to new places, and it is where life started. I appreciated that Akten uses nature as his inspiration for computational art because it shows that nature has certain patterns and rules to it and that it follows its own function, even if that pattern can’t be immediately recognizable. When people think of nature, most people think of randomness, organic shapes that don’t follow patterns, and overall chaos, especially when it comes to the ocean. However, in reality, that might not be the case. Akten’s work reflects how nature isn’t just chaos. The artist used machine learning artificial intelligence algorithms to help create this piece. It is where AI predicts the output by given inputs. In this case, the input might have been data about wave patterns and the output would have been the waves in the artwork and the variations.

Memo Akten, Waves: The Abiotechnogenesis Collection (2021)

https://www.memo.tv/works/waves-the-abiotechnogenesis-collection/

Project 02: Faces and Variables

Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible.

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var x = 1;
var y = 255;
var z = 2;
var mouth = 1
var hair = 1



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    strokeWeight(3);
    stroke(y,x,z);
    fill(x,y,z);
    background(y - 100, x + 30, z + 5);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(x - 80, y - 80, z - 80);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth == 1) {
        //happy mouth
        arc(width / 2, (height / 2) + 25, faceWidth - 40, faceHeight / 2, 0, radians(180));
    }
    if (mouth == 2) {
        //sad face
        noFill();
        arc(width / 2, (height / 2) + 50, faceWidth - 40, faceHeight / 2, radians(180), 0);
    }
   if (mouth == 3) {
        //shocked mouth
        fill(255,102,102);
        ellipse(width / 2, (height / 2) + 50, faceHeight / 2, faceWidth / 2);
    }
    if (hair == 1) {
        //party hat
        fill(z,x,y);
        triangle((width / 2) - (faceWidth / 2), (height / 2) - (faceHeight / 2), width / 2, (height / 4) - 70, (width / 2) + (faceWidth / 2), (height / 2) - (faceHeight / 2));
    }
    if (hair == 2) {
        //beret
        fill(0);
        ellipse(width / 2, (height / 2) - 70, faceWidth + 20, faceHeight / 2);
    }
   if (hair == 3) {
        //bowl cut
        fill(z,y,x + 10);
        arc(width / 2, (height / 2) - (faceHeight / 2) + 30, faceHeight - 15,(faceWidth / 2) + 30, radians(180), 0);
        rect((width / 2) - (faceWidth / 1.5), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
        rect((width / 2) + (faceWidth / 3), (height / 2) - (faceHeight / 2) + 30, faceWidth / 3, faceHeight / 2);
    }

}
 
function mousePressed() {
    if (mouseIsPressed == true) {
        x = random(0,255);
        y = random(0,255);
        z = random(0,255);
        fill(x,y,z);
        }
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    faceColor = random(0,255);
    hair += 1;
    if (hair > 3) {
        hair = 1;
    }
    mouth += 1;
    if (mouth > 3) {
        mouth = 1;
    }
}

Looking Outwards 02: Generative Art

Leander Herzog’s project “Radar” really captivated me in terms of color and movement. I admire the split screen of blue and pink, along with the asymmetry of the spiraling design. Another component I admire is how the new “spiral” is formed by the vertical edge of the pink spiral. I admire the split screen of color and asymmetrical design because it is mesmerizing visually, but it’s not too simple. I admire the creation of the new spiral from the vertical edge because the split screen tricks the eye into thinking that the spirals are created as a circle, but when you take a moment to look closer, the spirals are not full circles, but rather start as a semicircle and gradually pan out until they disappear off the page.

The only thing that I can identify in this project is the use of a loop, because the design is continuous and keeps generating new spirals that float off of the page.

The creator’s artistic sensibilities manifest in terms of color and shape. Herzog uses very contrasting colors, creating a pop in the eye and easy distinction between the two spiral sections. The shape is continuous, in terms of connecting between the two sections.

Leander Herzog

“Radar”, 2020

“Radar”, 2020
Another look at “Radar”

https://leanderherzog.ch/2020/radar/

LookingOutwards-02

Climate change is a topic that is seriously important, yet often overlooked despite its devastating impact on every single aspect of living, especially for lower income communities who often contribute the least to the destruction of the planet. My Climate 2050, created by Mitchell Whitelaw in 2018 demonstrates the drastic impact of climate change in a way that is both personal and easy to understand. Dr. Whitelaw utilized a unique program that took in all the data about predicted temperature trends in the near future and used color coordination to match a temperature to a color, creating a glance at a year in Brisbane impacted by climate change. Dr. Whitelaw’s understanding of simplicity and color theory allowed him to create a diagram that was very easy to understand, as he used reds to signify hotter temperatures and greens to signify cooler temperatures. He also utilized the impact of the red circle to represent the cycle by which it will only get worse. This allows the viewer to truly understand just how horrendous the impacts of climate change will be.

Dr. Whitelaw’s work

^^My Climate 2050, Mitchell Whitelaw (2018)

Blog-02 Generative Art

The piece I’ve examined in the noise series by Holger Lippmann. The first part
of the series, Holger uses landscape photos in his vicinity to generate digital
paintings composed of elongated shapes. What I admire about the piece is
the strategic generative composition that has allowed the rectangular shapes to
mimic textures that of a brushstroke, which gives the painting a vintage feeling
and a sense of movement throughout the canvas. Further, the layering of the
different colors of the geometry and the control of the density of the geometry
creates an illusion of color blending, which I believe has made the painting much
more interesting than if it was just one layer.

What I suppose the algorithm would be the program repeatedly draws the same
elongated rectangle and each geometry would have a small variation in the
start and end coordinates than the previous points to create a continuous
curvature through the straight geometric shapes. The color of the shapes would
be detected from the image itself with minor variations in the RGB value by
around 10-15 to create a variation that would further help simulate the brush
stroke texture.

The artist has taken inspiration from 20th-century impressionist painters such
as Monet and Van Gogh, where from close, the viewer can observe the stacks of
geometry like in paintings one would see the brush stroke but backed up, a
the scenic landscape is formed

Noise Series: http://www.lumicon.de/wp/?p=3623