Category: SectionC

Looking Outwards 03

MINIMA | MAXIMA photo by NAARO

https://www.archdaily.com/879626/minima-maxima-marc-fornes-theverymany

Marc Fornes’ parametric pavilion, entitled “MINIMA|MAXIMA” is a 2017 project created by the research collective THEVERYMANY for the 2017 World Expo in Astana, Kazakhstan. This 43’ tall pavilion is designed using parametric architecture techniques including Rhinoscripting. Not only does Grasshopper (the generative modeling tool in the software Rhino) allow one to easily manipulate dimensions and shapes as well as the size of the individual panels, it can be used in conjunction with Python to create more complex geometries. Although the sculptural piece consists of only curves, the individual pieces of ultra-thin material are all created as flat surfaces, and only when interconnected do they take on their curved form. Although the construction of the pavilion is similar to the construction process of carbon fiber assembly, the structure is made of 6mm thick sheets of aluminum, stacked together to make a sandwich of white, pink, and white. Fornes and his collaborators continue to develop their research regarding the material and assembly tchniques used in their pavilions and treat each structure as a research opportunity. The cutting-edge assembly techniques used by THEVERYMANY, as well as the uniquely thin yet self-supporting construction material, are two incredibly admirable aspects of the pavilion.

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

}

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/

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

Project-02

This is my variable face

sketch
// Michael
// Section C

//Variables
//face
var faceWidth = 100;
var faceHeight = 100;
var faceround = 10
var randomSkin = 0
//background
var r = 140
var g = 200
var b = 230
//eye
var eyeBrow = 1
var browHeight = 10
var eyeSize = 20;
var pupilPos = 0
//moith
var mouthType = 1
var mouthLevel = 50
var noseType = 1
//hair
hairType = 1
stubble = 2
hairColor = 0

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    print (pupilPos.toString())
    //background color
    background(r, g, b);

    //Eye Variables
    //use facewidth to determine the eye positions
    var eyeLX = width / 2 - faceWidth * 0.2; 
    var eyeRX = width / 2 + faceWidth * 0.2;

    //hair color
    //Randomize hair color with different shades of grey
    fill(hairColor)

    //hair back
    //Two different thicknesses of hair
    //Use FaceWidth and faceHeight to determine the hair thickness
    if(hairType == 1){  //Thick Hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.2,  faceHeight*1.2);
        fill (r, g, b);
        rect(0, height/(faceHeight/60), width, height)
    } else if (hairType == 2) //Thin hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.1,  faceHeight*1.1);
        fill (r, g, b);
        rect(0, height/(faceHeight/53), width, height)

    //skincolor
    //4 different skin types
    //predetermined skin colors
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }   
    
    //ears

    ellipse(width/2 - faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    ellipse(width/2 + faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    fill(95, 44, 5)
    ellipse(width/2 - faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
    ellipse(width/2 + faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
  
    //Skin Color 
    //Randomize skin color 
    //Fill the skin colors again due to the fill command in the ears
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }  

    //neck
    //use facewidth to determin neck width
    rect(eyeLX - faceWidth/18, height/2, faceWidth/2, 70)

    //Face
    //Use to ellipses to draw the face
    strokeWeight(0)
    ellipse(width / 2, 1.15*height / 3, faceWidth,  faceHeight);
    ellipse(width / 2, 1.45*height / 3, faceWidth/1.25, faceHeight/1.25)
    fill(hairColor+30)

    //eyes
    //Use the eye positions variable to draw the eyes and the pupils
    fill(255)
    ellipse(eyeLX, 1.25*height / 3, eyeSize*1.3, eyeSize*1.3);
    ellipse(eyeRX, 1.25* height / 3, eyeSize*1.3, eyeSize*1.3);
    fill(0);
    //Use pupilPos to randomize the pupil position whenever mouse clicks
    ellipse(eyeLX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    ellipse(eyeRX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    

    //eyebrows
    //two different eyebrows, straight and curve
    if (eyeBrow == 1){ //Curve
        strokeWeight(5) //use eyesize to determin eyebrow position
        curve (eyeLX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeLX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, //browHeight to randomize brow when click
               eyeLX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeLX + eyeSize/3, height/2 - eyeSize/1.5)
        curve (eyeRX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeRX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, 
               eyeRX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeRX + eyeSize/3, height/2 - eyeSize/1.5)
        strokeWeight(0);
    } if  (eyeBrow == 2){ //straight
        rect (eyeLX-eyeSize/1.5 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
        rect (eyeRX-eyeSize/1.8 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
    }

    //mouth
    //5 different types of mouths
    //use faceHeight and width to determine mouth position
    if (mouthType <= 2){ // Open Mouth
        fill(255, 166, 193)
        ellipse(width/2, height/2 + faceHeight/mouthLevel, faceWidth/3, faceHeight/10)
        fill(255)
        ellipse(width/2, height/2.06 + faceHeight/mouthLevel, faceWidth/6, faceHeight/20)
    } else if (mouthType == 3){ //Meh face No. 1
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height*2.75/5)
        strokeWeight(0)
    } else if (mouthType == 4){// Straight Face
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if (mouthType == 5){//Meh face No.2
        strokeWeight(5);
         line(eyeLX, height*2.75/5, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if(mouthType == 6) {//Smile
        strokeWeight(4)
        noFill()
        curve (eyeLX - eyeSize/10, height/2.7 - faceHeight/20,
               eyeLX - eyeSize/10, 1.5*height/3 - faceHeight/50, 
               eyeRX + eyeSize/10, 1.5*height/3 - faceHeight/50,
               eyeRX + eyeSize/10, height/2.7 - faceHeight/20)
        strokeWeight(0)
    }
   
    //nose
    //two different types of noses
    //use faceheight and width to determine mouth position
    if(noseType == 1) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/5, faceWidth*0.05, faceHeight/5)
    } else if (noseType == 2) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/10, faceWidth*0.1, faceWidth*0.1)
    }

}


function mousePressed() {
    // Randomize the variables when the use clicks their mouse
    //Background color, high rgb for faded colors
    r = random (200, 250)
    g = random (200, 250)
    b = random (200, 250)
    //face
    //Max width less than max height
    faceWidth = random(100, 120);
    faceHeight = random(100, 150);
    //skin color
    randomSkin = int(random (0, 4)) 
    //eyes
    eyeSize = random(20, 28);
    browHeight = random(0, 10)
    eyeBrow = int(random(1, 3))
    pupilPos = random (0, 0.5)
    //mouth
    mouthType = int(random(1, 7))
    mouthLevel = random (6, 50)
    //hair
    hairColor = random (0, 100)
    stubble = int(random(0, 3))
    hairType = int(random(1, 3))
    //nose
    noseType = int(random(1, 3))
}

Project 02

sketch
sketch
// for my design, i tried to move the eye within the face and all the other sense organs go along with it.
// also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.
// in addition, the mouth also change the radian by itself.
// by having these, it can create a series of variation for the face.
var eyeSize = 30;
var faceWidth = 300;
var faceHeight = 200;
//variables for eyes
var eyeWidthVariation = 20;
var eyeHeightVariation = 10;
//variables for mouth
var mouthWidthShift = 10;
var mouthHeightShift = 15;
//color
var r = 243;
var g = 197;
var b = 194;
//eyeball movement
var movementX = 10;
var movementY = 10;
//eyebrow movement
var eyebrowChangeL = 5
var eyebrowChangeR = 5

function setup() {
    createCanvas(640, 480);
}

function draw(){
    background(249, 233, 211);
    //face
    noStroke();
    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    
    //hair
    fill(r-20,g-20,b+30);
    rect(width/2- faceWidth/3, height/2-faceHeight/2-10,faceWidth/1.5,faceHeight/6)
    
    //noise
    noStroke();
    fill(r-50, g-50, b-50);
    ellipse(width / 2-eyeWidthVariation, height/2+2*eyeHeightVariation, 20, 30);
    
    //eyes socket
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25 - eyeWidthVariation;
    var eyeRX = width / 2 + faceWidth * 0.25 - eyeWidthVariation;
    
    //blush left
    fill(255,171,171);
    ellipse(eyeLX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    //blush right
    ellipse(eyeRX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    fill(r+50, g+50, b+50);
    ellipse(eyeLX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    
    //eyeball
    fill(0);
    ellipse(eyeLX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    
    //eyebrow left
    fill(0)
    rect(eyeLX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation/2);
    //eyebrow right
    rect(eyeRX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation/2);
    
    //mouth
    noFill();
    stroke(r-35, g-35, b-35);
    strokeWeight(6);
    beginShape();
    curveVertex(width/2 - mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    curveVertex(width/2 - mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2-eyeWidthVariation, height / 2 + faceHeight * 0.40);
    curveVertex(width/2 + mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2 + mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    endShape();
}

function mousePressed() {
    //face random
    faceWidth = random(200, 600);
    faceHeight = random(200, 460);
    //eye random
    eyeSize = random(30, 80);
    eyeWidthVariation = random(-50, 50);
    eyeHeightVariation = random(3, 25);
    //mouth random
    mouthWidthShift = random(-20, 20);
    mouthHeightShift = random(-20, 20);
    //color random
    r = random(51, 204);
    g = random(51, 204);
    b = random(51, 204);
    //eyeball random
    movementX = random(-eyeSize/4,eyeSize/4);
    movementY = random(-eyeSize/4,eyeSize/4);
    //eyebrown random
    eyebrowChangeL = random(0,30);
    eyebrowChangeR = random(0,30)
}

Looking Outwards 02

Looking Outwards 02
What this project impressed me with is how this algorithm abstracts the real pictures into a more artistic form. Also, with different fitness percentages, users can choose how abstract they want for the output. I think the algorithm of this project is to use different sizes and colors of the polygon to mimic the form of real pictures. Furthermore, since the polygons are overlaying with each other, I think that the transparency of the polygon can also be changed so that it can create a sense of layering effect which is very artistic. The most interesting concept about this project is that the users can choose not only the percentage of fitness they want but also see the gradual change of this process. The artistic essence of this project is using the polygon as a single unit to create the abstract version of the picture since it contains different types of angles, including acute angle, obtuse angle, and right angle. It can create different shapes because of this natural characteristic.

https://alteredqualia.com/visualization/evolve/

Project – 02

//Katie Makarska
//Section C

var eyeWidth = 20;
var eyeHeight = 20
var faceWidth = 100;
var faceHeight = 150;
var smileWidth = 80;
var smileHeight = 40;

function setup() {
createCanvas(300, 300);
bgColor = color( random(255), random(255), random(255));
}

function draw() {
background(bgColor);
//eyes
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 – faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
ellipse(eyeLX, height / 2, eyeWidth, eyeHeight);
ellipse(eyeRX, height / 2, eyeWidth, eyeHeight);
//smile
var smile1 = width/2 – faceWidth *0.01;
var smile2 = width/2 + faceHeight *0.25;
arc(smile1, smile2, smileWidth, smileHeight, 0, PI);

//random colors
r = random(50, 255);
g = random(100,200);
b = random(100, 200);

}

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(90, 150);
faceHeight = random(100, 200);
eyeWidth = random(10, 30);
eyeHeight = random(10, 30);
smileWidth = random(50, 80);
smileHeight = random(20, 40);
//random face color
fill(r, g, b);
//random background color
bgColor = color( random(255), random(255), random(255));

}

Blog – 02

I am most inspired by Frieder Nake’s generative artwork. I admire the sharpness of his work the most because it makes for a very neat finished product that one could admire for hours. Although he mostly uses straight lines and geometric shapes, he also uses layering often to create more dimension in his artwork. Additionally, I enjoy his use of varying colors and stroke weights because when different colors and stroke weights are layered together it introduces a completely new color to the artwork depending on the values of each. Nake uses an algorithmic approach to his computer art, with perhaps some randomness weaved in as well. He identifies as a mathematician, which most likely translates to his work in the form of arithmetic algorithms which he could have imbedded into if-statements, or written by themselves. I suppose Nake used if-statements to determine where to draw the next shape, or where to switch the colors, which might have depended on the position of the shape/color on the page.

By: Katie Makarska

no title 1967 Frieder Nake born 1938 Presented by Tate Members 2013 http://www.tate.org.uk/art/work/P80817

Project-03-Dynamic-Drawing

I began this project by writing down my main actions for the animation and what conditions caused them to change. After I got one part working, I slowly added more conditions and commands, ensuring they worked before continuing.

The animation starts with a simple circle of lines. The user can click on the screen to make the second row of lines appear. If the user clicks on the left half then the direction that the lines are drawn changes. Depending on the quadrant the user clicks in the number of rows and color will change.

sketch
// Emily Franco
// efranco
// Section C

//line distance from center
var fromCenter = 5;

//x and y positions of pts for lines
var ptX = 0;
var ptY = 0;

//default line length
var length = 5;

//current rotation degree
var deg = 0;
var rot = 5;
var dir = 1;
var degTwo = 0;

//tracks how many times mouse is clicked
var clicked = 0;
//tracks number of circle sets
var cirSet = 0;

//stores mouseX and mouseY when clicked 
var mX =0;
var mY = 0;

//store previous tranlation to subtract from when new center is clicked
var transX;
var transY;

//num of rows around circle
var rows = 6; 

//colors
var r = 255;
var g = 255;
var b = 0;


//color increment
var colorInt = 20;

function setup() {
    createCanvas(600, 450);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    frameRate (70);
    background ("black");

}

function draw() {
	//change origin to center of canvas
	transX = width/2;
	transY = height/2;
	translate (transX,transY);
	
	//if mouse is clicke five times now center is 
	//at mouse position
	if (cirSet==1){
		translate (mX-transX,mY-transY);
		transX = mX-transX;
		transY = mY-transY;
	}

	//only reset at start of each set
	if(clicked == rows){
		//reset values
		fromCenter = 5;
		length = 5;
		clicked = 0;
	}

	if (deg <= 360){
		//rotate lines
		rotate (radians(deg));
		deg += rot*dir;

		//if mouse is in left half turn clockwise 
		//if mouse is in right hald turn counterclockwise
		//draw lines towards center of canvas
		stroke (g,r,b);
		line (ptX+fromCenter,ptY,ptX+fromCenter+length,ptY);
	}

	//line "chases white lines" and draws over them
	push();
	stroke (b,g,r);
	rotate (radians(degTwo));
	degTwo += rot*dir;
	line (ptX+fromCenter,ptY,ptX+fromCenter+length,ptY);
	//rect (ptX-1,ptY-length-fromCenter-1,2,length+2); 
	pop();
}

function mousePressed (){
	//increase distance of lines from center
	fromCenter += length + 10; 
	//increase length of lines
	length+=10;

	//if mouse clicked left of center draw counter clockwise
	if (mouseX<=width/2){
		dir = -1;
	}else if (mouseX>=width/2){
		dir = 1;
	}

	//if circle is complete set degree back to zero
	//this will let next row start where previous row ended for only white lines
	if (Math.abs(deg)>=360){
		deg = 0;  
	}


	//add one to clicked each time mouse pressed
	clicked += 1;
	
	//store x and y position for new center
	if (clicked==rows){
		cirSet = 1;
		mX = mouseX;
		mY = mouseY; 
	}

	//number of rows per circle changed on first click of each set
	if (clicked==1){
		//number of rows per circle set changes in depending
		//on the quadrant clicked in
		if (mouseX<=width/2 & mouseY<=height/2){
				rows = 3;
				//blue
				r = 255;
				g = 0;
				b = 0;
		}if (mouseX>=width/2 & mouseY<=height/2){
				rows = 4;
				//yellow
				r = 255;
				g = 255;
				b = 0;
		}if (mouseX>=width/2 & mouseY>=height/2){
				rows = 2;
				//green
				r = 128;
				g = 255;
				b = 0;
		}if (mouseX<=width/2 & mouseY>=height/2){
				rows = 6;
				//orange
				r = 255;
				g = 128;
				b = 0;
				
		}
	}

}