Category: SectionE

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();
}
Me in Space

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

LO: My Inspiration

I am highly inspired by the 3D rendered designs made by @cyborgypo (on instagram). This artist brings collages to a whole new level and dimension, and I love the whimsical and cyber contrasting notes they include in their pieces.  Although I am not entirely sure what specific softwares and platforms they used,  I can assume they used something like Adobe Illustrator to create svgs (scalable vector graphics) and imported them into an 3D rendering platform like Blender. This artist may have been inspired by the melting/blob chrome effects that are taking over recent design trends, and also the cyber/ digital archive aesthetic. Their projects point to editorial graphics, or even fashion or magazine design and marketing. Unfortunately, the artist does not provide their name, nor do they officially title their pieces, but their profile and works can be found via the links provided.
one of @cybergypo ‘s works; an amalgamation of textures, shapes, and multi-dimensional layers.

Eugene Kim
15-104

LO: My Inspiration

The interactive piece that I picked is “untitled” by Felix Gonzalez-Torres. The basis of the art piece is that it is a spilled pile of candy that weighs about 175 pounds. The weight of the colorful candy represents the artist’s partner that died of AIDS. The concept of the project is that when people view the installation, they are able to take a piece of candy with them and it is supposed to be reminiscent of the way that his partner slowly diminished before he died. The project was an interactive piece in the media of candy so it did not use any software or scripts to create. This interactive piece was one of the first of quite a few that were also interactive pieces surrounding the love and loss themes that surrounded the AIDS epidemic and how it ravaged the LGBTQ community specifically gay men. In my opinion, it points toward other interactive pieces that allow for the viewers to step into a new perspective whether it is the perpetrator, like in the case of the piece by Gonzalez-Torres, or into the shoes of those affected by it.

This is a link to some descriptions of his pieces that were installed in museums around the country.

l.o.: my inspiration

‘landscapes of love’ is a webzine culmination of the work of participants in [digital love languages], a class about building software upon the assumption of shared love and communality in online spaces. this project rests under the umbrella of the school for poetic computation (sfpc), a new york-based experimental school of interdisciplinary study in art, code, hardware, and critical theory.

as a humanities student at one of the most prominent preprofessional and technical schools in the country, I really admire the marriage of humanistic and innovative research and teaching that this project represents. no idea how long it took them to make, but the class took place over the course of summer 2020, so I can’t imagine any single contribution to the zine required more than 3 or 4 months of work.

creating this project likely required some combination of custom and existent software. ‘landscapes of love’ and the sfpc in general may have been inspired by or working in close conjunction with thinkers and makers in design justice, radical information architecture, generative / game artists like everest pipkin, etc.