Author: Oscar

Project 2: Variable Face

sketch
sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var R = 0;
var G = 0;
var B = 0;
var FR = 252;
var FG = 224;
var FB = 203;
var nose = 10
var HR = 100;
var HG = 100;
var HB = 100;
var CR = 140;
var CG = 140;
var CB = 140;



 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(R,G,B);
    noStroke();
    //back hair
    fill(HR,HG,HB);
    ellipse(width / 2, height / 2, faceWidth+10,  faceHeight+10);
    strokeWeight(2);
    stroke(0);
    rect(width / 2 - faceWidth/2-5, height / 2 -20, faceWidth + 10, faceHeight/2+25);
    noStroke();
    //clothes
    if(mouseX < width/2){
        fill(CR,CG,CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);
    }else{
        fill(255-CR,255-CG,255-CB);
        ellipse(width/2,height,faceWidth+50,height/2 +faceHeight/2-10);
        fill(CR+40,CG+40,CB+40);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+20, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+30, 10);
        ellipse(width/2,height/2 + faceHeight/2 +faceWidth/4+10, 10);

    }
    //neck
    fill(FR-20,FG-20,FB-20);
    rect(width/2- faceWidth/8, height/2 + faceHeight/2 -10, faceWidth/4,20);
    ellipse(width/2, height/2 + faceHeight/2 +10, faceWidth/4,faceWidth/4);
    //face outline
    fill(FR,FG,FB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    //eye
    fill(255);
    strokeWeight(1);
    stroke(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    noStroke();
    fill(0);
    ellipse(eyeLX,height / 2,eyeSize / 2);
    ellipse(eyeRX, height / 2, eyeSize / 2);
    fill(255);
    ellipse(eyeLX + 2,height / 2 -2,eyeSize / 6);
    ellipse(eyeRX + 2,height / 2 -2,eyeSize / 6);

    //mouth
    fill(240,90,85);
    arc(150,180,20,20,0,PI, open);
    //teeth
    fill(255);
    rect(145,180,10,2);
    //nose
    strokeWeight(2);
    stroke(0);
    line(150,150,150,150 + nose);
    //front hair
    fill(HR,HG,HB);
    arc(width / 2, height / 2-15, faceWidth+10,  faceHeight-10, PI,2*PI, PI);
}
 
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.
    R = random(50,250);
    G = random(0,256);
    B = random(0,256);
    FR = R + 50;
    FG = FR - 25;
    FB = FG - 25;
    HR = 255-R;
    HG = 255-G;
    HB = 255-B
    faceWidth = random(75, 150);
    faceHeight = random(100, 150);
    eyeSize = random(20, 30);
    nose = random(10,20);
    CR = random(100,200);
    CG =random(100,200);
    CB =random(100,200);
}

LO 2: Generative Art

I found that the work Into the Trees by Robert Hodgin is very interesting and inspiring. This work depicts a walk into the forest with colorful small path that change colors and glowing light all the time. The feeling it brings to me as the scene goes into the forest is very refreshing. The change of day and night also makes the project more interesting, making me feel like I’m exploring the forest for a very long time.

I think the changing colors of the path is really the greatest part of the project. This rainbow glowing path catches my eyes from the start, and as it extends into the forest, I can’t help myself imagining this as a game scene and I’m following this path to a place where there’s a very beautiful creature.

From the technics used, I think the artist generates a 3-D world that’s generating new scenes. With a background showing changing day and night, the artist then randomly generates the path and trees alongside.

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 1: My Inspiration

1: The project that I admire a lot is an architecture project called The Morpheus Hotel. Its logic of generating the building and using computer science to help create the building shape is very interesting.
2: Zaha Hadid Architects and Front Architecture created this project. The project started in 2017 and finished designing in 2018.
3: I’m not very sure about the software they are using, but BIM technology is the main technology they used to generate the building shape.
4: Zaha Hadid is an architect that’s famous for creating nature-inspired and organic buildings. The Morpheus Hotel has corridors connecting the middle part of the building, which looks very organic and imaginative, so I think Zaha might get the inspiration from trees in nature, water, and stuff like that.
5: This project points out a way for Architecture to collaborate with computer science, and it creates a lot of possibilities for architecture to be more organic, has more dramatic shapes, and look more unique.
6: link to text here.