project 1: my self-portrait

efleisch project
/*Eliana Fleischer
    efleisch
    Section E
*/

function setup() {
    createCanvas(500, 500);
    background(240, 146, 243);
    //used a RGB color chart to find the color code for a purple bakcground
 
}

function draw() {
    //these lines were a way to add more elements to my assignemnt and also experiment using the "color" command in the code
    // i put all the starting points as the same so it would make a light refraction-esque shape
    strokeWeight(10)
    stroke("red")
    line(width/2,height/3,500,height/3)
    stroke("orange")
    line(width/2,height/3,500,height/3+10)
    stroke("yellow")
    line(width/2,height/3,500,height/3+20)
    stroke("green")
    line(width/2,height/3,500,height/3+30)
    stroke("blue")
    line(width/2,height/3,500,height/3+40)
    stroke("purple")
    line(width/2,height/3,500,height/3+50)
   

    strokeWeight(1)
    stroke(0)
    //this is the fill I am using for my skin tone. I used the same RGB generator for it as with the purple background
    fill(164,127,73)
    
    // i used the starting point of width/2 and height/3 and based all of my measurments off of that scale
    ellipse(width/3 -25, height/3, 20, 30) // these are the ellipses for my ears. i put it first so it would be drawn behind the head
    ellipse(width/3 + 75, height/3, 20, 30)
    ellipse(width/3 +25, height/3, 100, 125) // head
    circle(width/3 -25, height/2 +80, 25) // these are the hands 
    circle(width/3 +75, height/2 +80, 25)

    fill(255)// this is the white fill for my eyes

    ellipse(width/3, height/3, 24,32)
    ellipse(width/3 + 50, height/3, 24, 32)

    fill(62,32,9) // this is the brown for the center of my eyes 

    circle(width/3, height/3, 16) //center of eyes
    circle(width/3 + 50, height/3, 16)

    fill(0)

    triangle(width/3 + 25, height/3 + 25, width/3 +13, height/3 + 37, width/3 + 37, height/3 + 37) //mouth

    fill(255)
    triangle(width/3 + 25, height/3 + 25, width/3 + 20, height/3 + 32, width/3 + 30, height/3 + 32) //teeth

    strokeWeight(3) // i wanted my hair to be drawn bolder so i increased the stroke weight

    fill(0)
/* these points I used to plan out my quadrilaterals but I dont need them for the final product
    point(width/3 + 25, height/3 - 65)
    point(width/3 - 15, height/3 - 55)
    point(width/3 , height/3 - 50)
    point(width/3 - 25 , height/3 - 10)

*/ 

    quad(width/3 + 25, height/3 - 65, width/3 - 15, height/3 - 55, width/3 - 25 , height/3 , width/3 , height/3 - 50)// hair
    quad(width/3 + 25, height/3 - 65, width/3 + 40, height/3 - 55, width/3 + 75 , height/3 , width/3 +75 , height/3 - 50)


    strokeWeight(7) // i decided to use points instead of small circles to utilize a different element 
    point(width/3, height/3 ) // pupils 
    point(width/3 +50, height/3 )

    strokeWeight(1) // decreased stroke weight again for drawing the body
    rect(width/3 -25, height/2 -20, 100, 100) // body
    rect(width/3 -40, height/2 +5, 15, 75) // arms
    rect(width/3 +75, height/2 +5, 15, 75)
    fill(0, 102, 0) // green for pants
    rect(width/3 - 25, height/2 +80, 45, 100) //pants
    rect(width/3 +30, height/2 +80, 45, 100)


}

I think the most challenging part of my project was centering all of my objects relative to each other.

Project 1: My Self Portrait

sketch
//name: Hari Vardhan Sampath
//classSection: E

function setup() {
    createCanvas(500, 500);
    background(0);
}

function draw() {
    
    fill(212, 38, 40);
    ellipse(250, 150, 160, 200);
    fill(150, 38, 40);
    ellipse(250, 160, 300, 100); //hat

    fill(251, 209, 1);
    ellipse(250, 250, 150, 200); //faceOutline

    strokeWeight(7);
    ellipse(220, 225, 50, 50);
    ellipse(280, 225, 50, 50);
    line(260, 220, 240, 220); //glasses
    
    strokeWeight(10);
    point(220, 220);
    strokeWeight(10);
    point(280, 220); //eyes
    
    strokeWeight(5);
    fill(255, 255, 255);
    arc(250, 300, 75, 30, 220, 330, CHORD)  //mouth

    strokeWeight(5);
    arc(250, 260, 5, 15, 200, 330) //nose

    noLoop();
}

project 1: self-portrait

m’s project 1
/*m. tayao
    atayao
    lab section E
*/

function setup() {
    createCanvas(500, 500);
    background(0);
}

function draw() {
// BACKGROUND CHANGE
if (mouseX > width/2) {
    background(145, 176, 255);    // light blue bg
    fill(208, 230, 112);    // "O"
    rect(width/2 - 50, height/2 - 200, 35, 55);
    rect(width/2 - 40, height/2 - 190, 25, 45);
    fill(145, 176, 255);
    rect(width/2 - 40, height/2 - 190, 15, 35);
    fill(208, 230, 112);    // "H"
    rect(width/2 - 5, height/2 - 200, 10, 55);
    rect(width/2 + 25, height/2 - 200, 10, 55);
    rect(width/2, height/2 - 175, 30, 10);
    rect(width/2 + 45, height/2 - 200, 10, 40);    // "!"
    rect(width/2 + 45, height/2 - 155, 10, 10);
} else {
    background(208, 230, 112);
    }
// SELF-PORTRAIT
noStroke();
fill(64, 48, 27);    // hair
ellipse(width/2 - 55, height/2 - 60, 75);
ellipse(width/2 + 25, height/2 - 50, 135);
rect(width/2 - 92.5, height/2 - 60, 184.75, 200);
fill(214, 161, 96);    // head
ellipse(width/2, height/2 + 15, 150, 165);
fill(89, 55, 12);    // eyebrows
ellipse(width/2 - 25, height/2 + 7, 25, 10);
ellipse(width/2 + 25, height/2 + 7, 25, 10);
fill(242, 236, 228);    // whites of eyes
ellipse(width/2 - 30, height/2 + 35, 45, 30);
ellipse(width/2 + 30, height/2 + 35, 45, 30);
fill(125, 81, 0);    // irises
ellipse(width/2 - 30, height/2 + 35, 20);
ellipse(width/2 + 30, height/2 + 35, 20);
fill(64, 44, 15);    // pupils
circle(width/2 - 30, height/2 + 35, 10);
circle(width/2 + 30, height/2 + 35, 10);
fill(181, 129, 65);    // nose
ellipse(width/2 - 5, height/2 + 70, 7);
ellipse(width/2 + 5, height/2 + 70, 7);
fill(237, 115, 90);    // cheeks
ellipse(width/2 - 45, height/2 + 65, 40, 20);
ellipse(width/2 + 45, height/2 + 65, 40, 20);
fill(191, 69, 131);    // mouth
ellipse(width/2, height/2 + 85, 20, 10);
fill(242, 236, 228);    // teef
ellipse(width/2, height/2 + 82, 13, 5);
}

Project 1: My Self Portrait

sketch
// Ana Furtado 
// Section E

function setup() {
    createCanvas(400, 400);
    background(54, 51, 158);     // blue
}

function draw() {
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(30);
    line(135, 40, 80, 399);      // back hair left
    line(135, 40, 115, 399);
    line(265, 40, 325, 399);     // back hair right
    line(265, 40, 275, 399);
    stroke(0, 0, 0);     // black
    strokeWeight(1);
    fill(0, 206, 209);     // light blue
    ellipse(100, 210, 30, 30);     // earrings
    ellipse(300, 210, 30, 30);
    fill(255, 228, 196);     // skin
    ellipse(200, 400, 100, 400);     // neck
    fill(255, 228, 196);     // skin
    ellipse(200, 200, 200, 400);     // face
    fill(255, 255, 255);     // white
    ellipse(150, 150, 50, 100);     // left eye
    ellipse(250, 150, 50, 100);     // right eye
    fill(139, 69, 19);     // brown
    ellipse(150, 150, 25, 50);     // left pupil
    ellipse(250, 150, 25, 50);     // right pupil
    fill(255, 228, 196);     // skin
    circle(200, 200, 20, 20);     // nose
    line(190, 200, 190, 125);
    line(210, 200, 210, 125);
    fill(220, 20, 60);     // red
    ellipse(200, 300, 110, 50)     // mouth
    line(150, 300, 250, 300);
    stroke(84, 18, 18);      // reddish brown
    strokeWeight(1);
    fill(84, 18, 18);     // reddish brown
    ellipse(200, 40, 150, 80);     // hair top
    strokeWeight(10);
    line(120, 40, 50, 399);      // hair left
    line(120, 40, 75, 399);
    line(270, 40, 375, 399);     // hair right
    line(270, 40, 350, 399);
    noLoop();
}

I found the placement of the face and the uploading of this assignment the most challenging parts of the assignment.

Project 1: My Self Portrait


sketch

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

function draw() {
    background(200, 64, 52);
    strokeWeight(5);
    stroke(223, 160, 125);
    fill(230, 177, 138);
    rect(227, 150, 50, 150);
    fill(0);
    ellipse(250, 120, 160, 150);
    fill(230, 177, 138);
    ellipse(width/2, height/2, 120, 160);
    line(225, 180, 300, 220);
    fill(200, 160, 130);
    quad(200, 100, 210, 200, 240, 120);
    fill(190, 150, 105);
    quad(250, 100, 300, 200, 290, 110);
    stroke(0);
    ellipse(225, 125, 1, 1);
    ellipse(270, 125, 1, 1);
}
 
For me, the most difficult part of the project was figuring out the coordinates for the quadrilaterals.

Me in Space

sketch
function setup() {
    createCanvas(800, 640);
    background(0);
    angleMode(DEGREES);
}

function draw() {

    //draw stars
    strokeWeight(0);
    for (let i = 0; i < 100; i++) {
        fill(255, random(180, 200), 130, random(100,255))
        circle(random(0,800), random(0,640), random(5, 10)); 
        }
    
    //draw body
    strokeWeight(1);
    fill(230);
    beginShape();
        vertex(120, 640);
        bezierVertex(150, 550, 700, 500, 800, 560);
        vertex(800, 640);
        vertex(120, 640);
    endShape();
    
    //draw glass
    translate(450, 300);
    rotate(3);
    fill(62, 73, 76);
    ellipse(0, 0, 500-35, 550-35);
    
    //draw neck
    strokeWeight(0);
    fill(133, 130, 119);
    rotate(-3);
    rect(-80, 200, 150, 60);
    
    //draw ears
    rotate(-3);
    ellipse(-180, 25, 50, 90);
    rotate(9);
    ellipse(180, 25, 50, 90);
    
    //draw face
    fill(171, 164, 149);
    rotate(-3);
    ellipse(0, -30, 380, 500);

    //draw hair
    fill(0);
    arc(0, -30, 380, 500, 175, 365, CHORD);
    stroke(0);
    strokeWeight(0);
    fill(171, 164, 149);
    beginShape();
        curveVertex(-190, -10);
        curveVertex(-190, -10);
        curveVertex(-170, -50);
        curveVertex(-120, -100);
        curveVertex(-110, -150);
        curveVertex(-90, -150);
        curveVertex(90, -150);
        curveVertex(125, -140);
        curveVertex(140, -90);
        curveVertex(190, -10);
        curveVertex(190, -10);
    endShape();

    //draw eyebrow
    strokeWeight(5);
    bezier(-120, -40, -40, -40, -40, -30, -50, -80);
    line(30, -45, 110, -55);
    
    //draw eyes
    strokeWeight(0);
    fill(0);
    rect(-80, -40, 20, 20);
    ellipse(-70, -20, 20, 40);
    rect(50, -50, 20, 20);
    ellipse(60, -30, 20, 40);
    
    //draw nose
    strokeWeight(3);
    line(-20, 0, -30, 70);
    line(-30, 70, 10, 68);
    line(10, 68, 0, 0);
    
    //draw mouse
    noFill();
    bezier(-35, 110, -10, 170, 0, 190, 25, 110);

    //draw eyeglasses
    rotate(-3);
    strokeWeight(3);
    stroke(48, 62, 61);
    line(-30, -30, 20, -30);
    line(-130, -30, -190, -15);
    line(120, -30, 190, 0);
    fill(130, 149, 161, 135);
    strokeWeight(0);
    rect(-130, -55, 100, 70, 10);
    rect(20, -55, 100, 70, 10);
    rotate(-2);
    
    //draw detail
    strokeWeight(50);
    stroke(150);
    line(210, 260, 200, 350);
    line(-190, 280, -180, 350);
    
    //draw connection
    strokeWeight(30);
    stroke(62, 73, 76);
    bezier(-160, 260, -80, 340, 100, 340, 180, 240);
    
    //draw highlight
    stroke(255, 255, 255, 130);
    bezier(120, 10, 125, 10, 115, -60, 110, -60);

    //draw suit
    rotate(5);
    noFill();
    stroke(230);
    strokeWeight(70);
    ellipse(0, 0, 500, 550);

    noLoop();
}
    

I find uploading this most difficult.

Project 1: My Self Portrait


ty.sketch

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

function draw() {
    fill(255,255,255)
    circle(width/2,height/2,150);
    circle(120,250,40)
    circle(180,250,40)
    fill(238,202,179)
    circle(150,260,10)
    fill(0)
    ellipse(123,250,8,8)
    ellipse(177,250,8,8)
    line(140,250,160,250)
    line(100,250,75,240)
    line(200,250,225,240)
    fill(255,192,203)
    ellipse(95,275,25,15)
    ellipse(205,275,25,15)
    noFill()
    bezier(150,190,110,180,145,260,75,240);
    bezier(150,190,190,180,155,260,225,240)
    ellipse(67,250,16,26)   //ear
    curve(58,235,68,245,68,255,58,265)
    curve(242,235,232,245,232,255,242,265)
    ellipse(233,250,16,26)
    bezier(67,237,85,130,215,130,233,237)
    bezier(140,280,145,288,155,288,160,280)
    bezier(67,263,60,288,56,290,40,320)
    line(40,320,143,337)
    bezier(233,263,240,288,244,290,260,320)
    line(260,320,157,337)
    line(143,325,143,337)
    line(157,325,157,337)
    fill(162,228,184)
    quad(143,337,120,355,180,355,157,337)
    fill(255)
    triangle(143,337,150,350,157,337)
    fill(185,38,54)
    square(146,171,8)
    quad(146,171,130,166,130,184,146,179)
    quad(154,171,170,166,170,184,154,179)
}

Project 1- My Self Portrait

sketch
function setup() {
    createCanvas(600, 600);
    background(120);
    //text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(120);
    strokeCap(ROUND);
    scale(0.93);

    //DYNAMIC BACKGROUND
    noFill();
    noStroke();
    var c = width/2;
    var alt = true;

    if (mouseX >= c){
        alt = true;
        fill(244, 162, 97);             // orange
        triangle(0,0, c, c, 100, -50); 

        fill(38, 70, 83);               // dark blue
        triangle(400, -50, c,c, 600, -50);
        
        fill(42, 157, 143);             //teal
        triangle(-200, 300, c, c, -300, 400);
        triangle(650, 20, c,c, 650, 50);

        fill(233, 196, 106);            // yellow
        triangle(-400, 400, c, c, -600, 650);
        triangle(650, 200, c, c, 650, 340);

        fill(231, 111, 81);             // red
        triangle(100, 650, c, c, 350, 650);
        triangle(300, -50, c, c, 380, -50);

        fill(96, 108, 56);              // green
        triangle(650, 400, c, c, 650, 500);

    } else {
        alt = false;
        fill(40, 54, 24);             // dark green
        triangle(0,30, c, c, 0, 250); 

        fill(254, 250, 224);             // cream
        triangle(400, -50, c,c, 600, -50);
        
        fill(221, 161, 94);             //tan
        triangle(-200, 300, c, c, -300, 400);
        triangle(600, 0, c,c, 650, 0);

        fill(43, 45, 66);            // dark purple
        triangle(-400, 500, c, c, 0, 580);
        triangle(650, 200, c, c, 650, 340);

        fill(131, 197, 190);             // light blue
        triangle(0, 650, c, c, 80, 650);
        triangle(100, 0, c, c, 210, 0);

        fill(255, 221, 210);              // salmon
        triangle(650, 500, c, c, 650, 650);
    }

    //FACE 
    noStroke();
    fill(255, 255, 255);

    beginShape();
    vertex(147, 240);
    vertex(147, 290);
    vertex(153, 295);

    vertex(300, 300);
    vertex(195, 434);
    vertex(203, 460);
    vertex(208, 490);
    vertex(209, 510);
    vertex(208, 530);
    vertex(201, 570);
    vertex(181, 645);
    vertex(518, 645);
    vertex(645, 645);
    vertex(645, 540);
    vertex(550, 538);
    vertex(550, 497);
    vertex(500, 250);
    endShape();

    stroke(10);
    
    bezier(280, 519, 210, 500, 90, 310, 228, 163);
    bezier(228, 163, 287, 95, 390, 117, 422, 147);
    bezier(422, 147, 600, 320, 370, 540, 280, 519);
    noStroke();
    triangle(280, 519, 228, 163, 422, 147);

    //NOSE
    stroke(7);
    noFill();
    bezier(261, 339, 236, 321, 260, 315, 269, 295);
    bezier(269, 295, 275, 254, 278, 228, 267, 212);
    bezier(321, 338, 334, 320, 309, 310, 297, 282);
    bezier(324, 324, 312, 305, 289, 304, 297, 282);

    //MOUTH
    bezier(238, 396, 253, 369, 309, 374, 351, 400);
    bezier(238, 396, 260, 474, 331, 433, 351, 400);

    //HAIR
    stroke(10);
    fill(255);
    curve(-500, 1000, 291, 83, 550, 538, -200, 1003);
    curve(600, 600, 291, 83, 147, 290, 620, 250);
    //curve(1000,-700, 550, 497, 490, 645, 0, 0);
    bezier(291, 123, 460, 90, 380, 320, 500, 350);
    noFill();
    bezier(195, 434, 220, 500, 210, 550, 180, 645);
    curve(305, 105, 291, 123, 165, 297, 800, 193);
    
    noStroke();

    fill(255, 255, 255);
    triangle(291, 83, 220, 180, 291, 123);
    triangle(291, 83, 350, 115, 291, 122);

    //NECK
    stroke(7);
    bezier(255, 507, 290, 550, 260, 620, 247, 645);
    noFill();
    bezier(425, 442, 460, 530, 460, 540, 645, 540);
    
    //EYES
    fill(237, 189, 64, 200);
    noStroke();
    ellipseMode(CENTER);
    circle(353, 246, 23);
    ellipse(222, 251, 18, 20);

    stroke(8);
    noFill();
    bezier(331, 257, 347, 220, 391, 230, 409,  249);
    bezier(257, 256, 231, 228, 210, 241, 206, 261);


    //TEXT
    var s = 'Ceci n\'est pas un autoportrait.';
    var f = 'Is this a self portrait?'
    fill(0);
    if (alt){
        textSize(30);
        text(s, 150, 50);
    } else {
        textSize(20);
        fill(255);
        noStroke();
        text(f, 50, 50, 70);
    }

}

Project 1: My self-portrait

sketch
function setup(){
    createCanvas(500,300);
    background(221,236,240);
}

function draw(){
    noStroke();
    fill(125,158,166);
    ellipse(40,60,180,90);
    ellipse(450,200,180,90);
    stroke(23,20,49);
    strokeWeight(20);
    line(0,200,500,100);
    line(0,150,500,200);
    noStroke();
    fill(208,187,164);
    rect(230,180,40,40);//rectangle of the neck
    fill(131,142,189);
    triangle(100,240,230,200,270,240);
    triangle(400,240,270,200,230,240);
    rect(100,240,300,60);
    fill(235,210,173);
    ellipse(250,110,120,160);//head ellipse
    fill(210,152,138);
    beginShape();
    vertex(235,168);
    vertex(245,162);
    vertex(250,165);
    vertex(255,162);
    vertex(265,168);
    vertex(255,175);
    vertex(245,175);
    endShape();
    fill(113,96,79);
    beginShape();
    vertex(185,80);
    vertex(180,120);
    vertex(200,100);
    vertex(210,110);
    vertex(220,95);
    vertex(240,110);
    vertex(260,100);
    vertex(280,125);
    vertex(290,100);
    vertex(295,115);
    vertex(305,100);
    vertex(320,120);
    vertex(310,80);
    endShape();//hair
    fill(50);
    ellipse(250,70,200,40);
    fill(20);
    ellipse(250,60,120,20);
    rect(190,10,120,50);
    ellipse(250,10,120,20);
    fill(190);
    rect(180,110,140,35);
    fill(147,141,140);
    beginShape();
    vertex(300,110);
    vertex(305,110);
    vertex(298,145);
    vertex(290,145);
    endShape();
    beginShape();
    vertex(310,110);
    vertex(312,110);
    vertex(310,145);
    vertex(305,145);
    endShape();
    fill(255);
    beginShape();
    vertex(316,110);
    vertex(318,110);
    vertex(315,145);
    vertex(312,145);
    endShape();
    beginShape();
    vertex(185,110);
    vertex(190,110);
    vertex(187,145);
    vertex(183,145);
    endShape();
    stroke(0);
    strokeWeight(4);
    line(230,120,230,135); 
    line(270,120,270,135);
    noStroke();
    fill(235,210,173);
    triangle(250,140,240,145,260,145);   
    fill(220,227,146);
    ellipse(140,270,30);
    ellipse(290,260,20);
    fill(190,145,192);
    ellipse(220,250,20);
    fill(225,168,39);
    ellipse(350,280,30);
    fill(148,209,205);
    ellipse(300,220,15);



}
   

I found that creating an irregular shape is very challenging, and also I need to calculate a lot of the positions and locations.

LO 01: Living Architecture: Casa Batlló

Refik Anadol’s ‘Living Architecture: Casa Batlló’
For a long time, works of Refik Anadol has inspired me and makes one think beyond the world of reality. The specific project developed by him named – Living Architecture: Casa Batlló, uses data collected from the environment around Casa Batlló, an architectural masterpiece designed by Antonio Gaudi in Barcelona, Spain. Usually, immersive art is projected to the walls within a building, but in this case the artwork I projected on the exterior, bringing life to the built environment. The artwork itself uses machine learning and Artificial intelligence to replicate the city’s mood by real-time data gathering such as climate or local festival.

In one of Refik’s projects named – Machine Hallucinations: Moma, he uses StyleGAN2 ADA to capture the machine’s hallucinations of modern art in multidimensional space. Looking forward towards the future, such techniques and technologies can provide advanced design synthesis in the field of architecture.

Links:
https://www.designboom.com/art/dynamic-nft-gaudi-casa-batllo-refik-anadol-christies-05-12-2022/
https://www.moma.org/magazine/articles/658
https://github.com/NVlabs/stylegan2-ada