Tag: Section B

Project 02 – Variable Faces

My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.

sketch
//Favour Adesina Section B

var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;


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

function draw() {
    noStroke()
    background(247, 195, 218);

    //SHOULDER
    fill(255, 67, 89);
    ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);

    //EARS
    fill(141, 75, 36);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4);  //left ear outer
    fill(34, 20, 13);
    ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //right ear inner
    ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8);    //left ear inner
    //FACE
    fill(141, 75, 36);
    ellipse(width/2, height/2, faceWidth, faceHeight);    // face

    //EARRINGS
    fill(255, 255, 0);
    triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
    triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);


    //EYES
    var LXeye = width/2 - faceWidth * 0.26;          
    var RXeye = width/2 + faceWidth * 0.26;
    fill(255, 255, 255);
    ellipse(LXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites 
    ellipse(RXeye, height/2, eyeWidth, eyeHeight);    //Eye Whites
    fill(104, 54, 37);
    ellipse(LXeye, height/2, pupSize, pupSize);    //Pupils 
    ellipse(RXeye, height/2, pupSize, pupSize);     //pupils 
    fill(0);
    ellipse(LXeye, height/2, 20, 20);                //inner pupils 
    ellipse(RXeye, height/2, 20, 20);                //inner pupils
       
    //NOSE
    stroke(35, 31, 32);
    strokeWeight(7);
    line(width/2, height/2, width/2, (height/2)+ eyeHeight/3);                         //Nose bridge
    ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose 
    ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25);            // nose

    //LIPS
    strokeWeight(2);
    var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
    fill(122, 22, 25);
    ellipse(width/2, BlipY, BlipWidth, lipHeight);
    noStroke();
    fill(173, 69, 87);                                   //light pink 
    ellipse(width/2, BlipY, lipWidth/2, lipHeight/2);  //inner mouth

    


    //HAIR
    fill(34, 20, 13);
    ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
    ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
    ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
 

        }

function mousePressed() {

    faceWidth = random(300, 500);
    faceHeight = random(260, 400);
    lipHeight = random(10, 50);
    pupSize = random(20, 70);
    lipWidth = random(10, 60);
    BlipWidth = random(30, 100);
    eyeWidth = random(20, 150);
    eyeHeight = random(80, 170);

}

Blog 02: “Distributed Consciousness”

By Ilia Urgen

“Distributed Consciousness” is a collection of 12 digital illustrations from 2021, created by Turkish-born visual artist Memo Akten. For reference, I have included 1 of his illustrations below.

Akten is an artist who’s constantly inspired by the natural environment around him and how human interactions connect with nature. The main subject of the 12 illustrations is an octopus, which Akten saw while snorkeling in the Mediterranean Sea.

I admire the depths of dimensions in his collection, along with the use of contrasting textures and vivid-bright colors, all while keeping an underwater theme. The soft, gentle eyes of the octopus makes the observer feel at ease, where they can picture themselves being underwater just like Akten was. I also admire the ombre-effect in the background, making the illustration even more welcoming.

This collection involved a combination of artist, artificial intelligence, and ecological awareness. Akten’s greater understanding of digital computation, the natural world, and environmental design is what draws any person to this work of art.

Project 02

Variable Face

sketchDownload
// Ilia Urgen
// Section B

//background color
var r = 128;
var g = 235;
var b = 255;

//shirt color
var r1 = 217;
var g1 = 0;
var b1 = 0;

var faceWidth = 480;
var faceHeight = 660;

var neckWidth = 250; 

var eyebrowHeight = 518;
var eyebrowThickness = 30;

var eyeDiameter = 60;

var eyeCenterX1 = 400;
var eyeCenterY1 = 575;
var eyeCenterX2 = 600;

//nose width coordinates
var noseX = 500;
var noseY = 540;

var mouth = 3;

function setup() {
    createCanvas (1000, 1000);
}                                   
                                    
function draw() {                   
    background (r, g, b);

    //neck outline
    noStroke();
    fill (243, 207, 187);
    rect (375, 500, neckWidth, 800);        
    
    //face outline                      
    ellipse (500, 600, faceWidth, faceHeight);  

    //left ear
    arc (500-(faceWidth/2)-15,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (500+(faceWidth/2)+15,620,80,160,PI + HALF_PI,PI + HALF_PI);  

    //left eye
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 50, eyeDiameter);  
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter + 30, eyeDiameter); 
    fill (102,51,0); //brown
    ellipse (eyeCenterX1, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX1, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX1, eyeCenterY1,5,5);

    //right eye
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 50, eyeDiameter);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter + 30, eyeDiameter);
    fill (102,51,0); //brown
    ellipse (eyeCenterX2, eyeCenterY1, eyeDiameter, eyeDiameter);
    fill (0,0,0); //black
    ellipse (eyeCenterX2, eyeCenterY1,12,12);
    fill (255,255,255); //white
    ellipse (eyeCenterX2, eyeCenterY1,5,5);

    //nose
    fill (240,190,180);
    triangle (noseX - 50,700,500,noseY,noseX + 50,700);
    
    //t-shirt                                                              
    fill (r1,g1,b1);                                              
    quad (500-(neckWidth/2),920,200,1000,800,1000,500+(neckWidth/2),920);

    //left eyebrow
    noFill();
    strokeWeight (eyebrowThickness);
    stroke (55,39,45);
    arc (400,eyebrowHeight,120,30,PI,0);

    //right eyebrow
    arc (600,eyebrowHeight,120,30,PI,0);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    
    //sad face
    if (mouth == 1) { 
        arc (500,785,180,40,PI,0);
    }

    //happy face
    else if (mouth == 2) {
        arc (500,775,180,40,0, PI);
    }

    //shocked face
    else if (mouth == 3) {
        fill (255);
        stroke (255);
        ellipse (500,790,115,10);

        noFill();
        strokeWeight (35);
        stroke (193,104,115);
        arc (500,770,180,40,PI,0);
        arc (500,780,180,40,0, PI);
    }

    //ear lines
    noFill();
    stroke (55,39,45);
    strokeWeight (2);

    arc (500-(faceWidth/2)-20,625,30,100,HALF_PI, PI + HALF_PI);
    arc (500+(faceWidth/2)+20,625,30,100,PI + HALF_PI, HALF_PI);

    //hair
    strokeWeight (eyebrowThickness);

    line (300,660-(faceHeight/2.5),100,(faceHeight/2)-20);
    line (310,660-(faceHeight/2.5),120,(faceHeight/2)-25);
    line (320,660-(faceHeight/2.5),140,(faceHeight/2)-30);

    line (330,660-(faceHeight/2.5),160,(faceHeight/2)-35);
    line (340,660-(faceHeight/2.5),180,(faceHeight/2)-40);
    line (350,660-(faceHeight/2.5),200,(faceHeight/2)-45);

    line (360,660-(faceHeight/2.5),220,(faceHeight/2)-50);
    line (370,660-(faceHeight/2.5),240,(faceHeight/2)-55);
    line (380,660-(faceHeight/2.5),260,(faceHeight/2)-60);

    line (390,660-(faceHeight/2.5),280,(faceHeight/2)-65);
    line (400,660-(faceHeight/2.5),300,(faceHeight/2)-70);
    line (410,660-(faceHeight/2.5),320,(faceHeight/2)-75);

    line (420,660-(faceHeight/2.5),340,(faceHeight/2)-80);
    line (430,660-(faceHeight/2.5),360,(faceHeight/2)-85);
    line (440,660-(faceHeight/2.5),380,(faceHeight/2)-90);

    line (450,660-(faceHeight/2.5),400,(faceHeight/2)-95);
    line (460,660-(faceHeight/2.5),420,(faceHeight/2)-100);
    line (470,660-(faceHeight/2.5),440,(faceHeight/2)-105);

    line (480,660-(faceHeight/2.5),460,(faceHeight/2)-110);
    line (490,660-(faceHeight/2.5),480,(faceHeight/2)-115);
    
    line (500,660-(faceHeight/2.5),500,(faceHeight/2)-120);
    
    line (510,660-(faceHeight/2.5),520,(faceHeight/2)-115);
    line (520,660-(faceHeight/2.5),540,(faceHeight/2)-110);

    line (530,660-(faceHeight/2.5),560,(faceHeight/2)-105);
    line (540,660-(faceHeight/2.5),580,(faceHeight/2)-100);
    line (550,660-(faceHeight/2.5),600,(faceHeight/2)-95);

    line (560,660-(faceHeight/2.5),620,(faceHeight/2)-90);
    line (570,660-(faceHeight/2.5),640,(faceHeight/2)-85);
    line (580,660-(faceHeight/2.5),660,(faceHeight/2)-80);

    line (590,660-(faceHeight/2.5),680,(faceHeight/2)-75);
    line (600,660-(faceHeight/2.5),700,(faceHeight/2)-70);
    line (610,660-(faceHeight/2.5),720,(faceHeight/2)-65);

    line (620,660-(faceHeight/2.5),740,(faceHeight/2)-60);
    line (630,660-(faceHeight/2.5),760,(faceHeight/2)-55);
    line (640,660-(faceHeight/2.5),780,(faceHeight/2)-50);

    line (650,660-(faceHeight/2.5),800,(faceHeight/2)-45);
    line (660,660-(faceHeight/2.5),820,(faceHeight/2)-40);
    line (670,660-(faceHeight/2.5),840,(faceHeight/2)-35);

    line (680,660-(faceHeight/2.5),860,(faceHeight/2)-30);
    line (690,660-(faceHeight/2.5),880,(faceHeight/2)-25);
    line (700,660-(faceHeight/2.5),900,(faceHeight/2)-20);

}

function mousePressed() {
    
    //background color
    r = random (0,255);
    g = random (0,255);
    b = random (0,255);

    //shirt color
    r1 = random (0,255);
    g1 = random (0,255);
    b1 = random (0,255);

    faceWidth = random (400, 900);
    faceHeight = random (400, 800);

    eyebrowThickness = random (10,50);
    eyebrowHeight = random (500, 545);

    eyeDiameter = random (20,80);
    eyeCenterY1 = random (570,600);

    //nose width coordinates
    noseX = random (480,520);
    noseY = random (500,590);

    //mouth option 1,2, or 3
    mouth = int(random (1,4));
}

Favour -Looking Outwards 02

This project by Michael Hansmeyer is called The White Tower, and is a 29-meter tall tower which is entirely 3D printed. Things I admire about the project apart from its monumentality, is how the patterns were coded to create a spatial atmosphere. I enjoy that the shape was generated by code, because you can see how perfect each pattern is, how incredibly symmetrical each pair of pillars are, as they wrap perfectly around the structure, forming different kaleidoscope-like patterns. The White Tower will be 3D printed using a concrete extrusion process. In this new-age fabrication process, a robot applies 5mm thin layers of soft concrete through a nozzle. For the design process, digital technologies are used. It is not mentioned what the specific software is called but it is a generative modeling software which likely runs with Python as language. Without custom software, precise geometrical definition would not be possible. Michael’s artistic abilities manifest through the types of patterns used and how many are used at a certain time. The scale of these patterns also impact the design, as well as how the architect planned the pillar placements, bevels and embellishments to create different types of pillars on one project.

The White Tower- render

Blog 01: Rebuild the Original 1910 Penn Station!

By Ilia Urgen

Since the last decade, a national movement to rebuild the long lost McKim, Meade & White Pennsylvania Station has made me come to admire New York’s old 20th Century architecture.

This movement was founded by Richard Cameron and James Grimes back in the 2010’s. Their vision of improving New York’s current, run-down Penn Station was to rebuild the original station, which had opened in 1910 was demolished in 1963 to make way for Madison Square Garden.

Cameron and Grimes’s extensive blueprints are pretty much the same as the original ones from the 1900s, but they are still bringing a touch of the 21st Century into their designs. These modern enhancements include sustainable energy, solar panels, LED Lighting, and even a rooftop garden!

Their work was fully enhanced through the use of standard CAD software, which allowed them to visualize the original designs with their modern design features.

Cameron and Grimes are trying to grab the public’s support for this massive $2.5 billion dollar project. I definitely support this movement, as it focuses on preserving the cultural importance of 20th Century architecture, while enhancing “the works” with 21st century technology.

Project 01

Self-Portrait

sketchDownload
// Ilia Urgen
// Section B

function setup() {
    createCanvas (1000, 1000);     //width is 1000, height is 1000
    background (164,244,255);       //Dark Tan canvas background          
}                                   
                                    
function draw() {                   
    

    //text
    stroke (0);
    strokeWeight (10);

    line (100,40,40,40);
    line (40,40,40,70);
    line (100,70,40,70);
    line (100,100,100,70);
    line (100,100,40,100);

    line (140,40,200,40);
    line (140,40,140,100);
    line (140,100,200,100);
    line (140,70,200,70);

    line (240,40,240,100);
    line (240,100,300,100);

    line (340,40,340,100);
    line (340,40,400,40);
    line (340,70,400,70);

    line (440,70,500,70);

    line (140,140,200,140);
    line (140,140,140,200);
    line (140,170,200,170);
    line (200,140,200,170);

    line (240,140,300,140);
    line (240,140,240,200);
    line (300,140,300,200);
    line (300,200,240,200);

    line (340,140,340,200);
    line (340,140,400,140);
    line (340,170,400,170);
    line (400,140,400,170);
    line (400,200,340,170);

    line (440,140,500,140);
    line (470,140,470,200);

    line (540,140,600,140);
    line (540,140,540,200);
    line (540,170,600,170);
    line (600,170,600,140);
    line (600,200,540,170);

    line (640,140,700,140);
    line (640,140,640,200);
    line (700,140,700,200);
    line (640,170,700,170);

    line (740,140,800,140);
    line (770,140,770,200);
    line (740,200,800,200);

    line (840,140,900,140);
    line (870,140,870,200);

    line (940,140,940,180);
    point (940,200);


    line (780,870,840,870);
    line (810,810,810,870);
    line (780,810,840,810);

    line (880,870,940,870);
    line (940,870,940,810);
    line (880,870,880,810);


    //neck outline
    noStroke();
    fill (243,207,187);
    rect (375,850,250,150);        
    
    //face outline
    noStroke();                               
    fill (243,207,187);                        
    ellipse (500,600,480,660);     

    //left ear
    arc (245,620,80,160,PI + HALF_PI,PI + HALF_PI);  
    
    //right ear
    arc (755,620,80,160,PI + HALF_PI,PI + HALF_PI);  


    //left eye
    fill (0,0,0);
    ellipse (400,575,110,60);  
    fill (255,255,255);
    ellipse (400,575,90,60); 
    fill (102,51,0);
    ellipse (400,575,60,60);
    fill (0,0,0);
    ellipse (410,575,12,12);
    fill (255,255,255);
    ellipse (413,575,5,5);

    //right eye
    fill (0,0,0);
    ellipse (600,575,110,60);
    fill (255,255,255);
    ellipse (600,575,90,60);
    fill (102,51,0);
    ellipse (600,575,60,60);
    fill (0,0,0);
    ellipse (610,575,12,12);
    fill (255,255,255);
    ellipse (613,575,5,5);

    //nose
    fill (240,190,180);
    triangle (450,700,500,540,550,700);
    
    //t-shirt                                                              
    fill (187,0,0);                                              
    quad (375,920,200,1000,800,1000,625,920);

    //t-shirt letters
    stroke (255);
    strokeWeight (6);

    //C
    line (395,940,445,940);
    line (395,940,395,980);
    line (395,980,445,980);

    //M
    line (475,940,475,980);
    line (475,940,500,980);
    line (500,980,525,940);
    line (525,940,525,980);

    //U
    line (555,940,555,980);
    line (555,980,605,980);
    line (605,980,605,940);

    //left eyebrow
    strokeWeight (30);
    stroke (55,39,45);
    arc (400,518,120,30,PI,0);

    //right eyebrow
    strokeWeight (30);
    stroke (55,39,45);
    arc (600,518,120,30,PI,0);

    //glasses
    noFill();
    strokeWeight (8);
    stroke (212,175,55);
    noFill ();
    ellipse (400,575,150,130);
    ellipse (600,575,150,130);
    arc (500,570,52,50,PI,0);
    line (400,510,600,510);
    line (244,535,340,535);
    line (660,535,754,535);

    //teeth
    fill (255);
    stroke (255);
    ellipse (500,790,105,40);

    //mouth
    noFill();
    strokeWeight (35);
    stroke (193,104,115);
    arc (500,800,140,30,0, PI);
    arc (500,780,140,30,PI,0);

    //facial hair
    stroke (55,39,45);
    strokeWeight (2);
    
    line (434,718,412,753);
    line (437,718,416,752);
    line (440,718,420,751);

    line (443,716,424,750);
    line (446,716,428,749);
    line (449,716,432,748);

    line (452,714,436,747);
    line (455,714,440,746);
    line (458,714,444,745);

    line (461,712,448,744);
    line (464,712,452,743);
    line (467,712,456,742);

    line (470,710,460,741);
    line (473,710,464,740);
    line (476,710,468,740);

    line (479,710,472,740);
    line (482,710,476,740);
    line (485,710,480,740);

    line (488,710,484,740);
    line (491,710,488,740);
    line (494,710,492,740);

    line (497,710,496,740);
    line (500,710,500,740);
    line (503,710,504,740);

    line (506,710,508,740);
    line (509,710,512,740);
    line (512,710,516,740);

    line (515,710,520,740);
    line (518,710,524,740);
    line (521,710,528,740);

    line (524,710,532,740);
    line (527,710,536,740);
    line (530,710,540,741);

    line (533,712,544,742);
    line (536,712,548,743);
    line (539,712,552,744);

    line (542,714,556,745);
    line (545,714,560,746);
    line (548,714,564,747);

    line (551,716,568,748);
    line (554,716,572,749);
    line (557,716,576,750);

    line (560,718,580,751);
    line (563,718,584,752);
    line (566,718,588,753);

    //face lines
    arc (240,625,30,100,HALF_PI, PI + HALF_PI);
    arc (760,625,30,100,PI + HALF_PI, HALF_PI);
    arc (500,875,100,30,PI,0);

    //hair

    strokeWeight (20);

    curve(300, 20, 290, 510, 500, 270, 970, 630);
    curve(270, 630, 500, 270, 700, 510, 540, 270);

    curve(300, 70, 290, 510, 500, 276, 970, 600);
    curve(270, 600, 500, 276, 700, 510, 300, 70);

    curve(300, 70, 290, 510, 500, 270, 970, 600);
    curve(270, 600, 500, 270, 700, 510, 300, 70);

    curve(300, 470, 290, 510, 500, 282, 970, 570);
    curve(270, 570, 500, 282, 710, 510, 300, 470);

    curve(100, 470, 290, 510, 500, 270, 970, 570);
    curve(270, 570, 500, 270, 710, 510, 370, 470);

    curve(300, 870, 280, 510, 500, 288, 970, 540);
    curve(270, 540, 500, 288, 720, 510, 300, 870);

    curve(300, 870, 280, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 510, 300, 870);

    curve(300, 1070, 290, 510, 500, 294, 970, 540);
    curve(270, 540, 500, 294, 710, 510, 330, 1070);

    curve(300, 1070, 300, 510, 500, 294, 970, 540);
    curve(270, 540, 500, 294, 710, 510, 320, 1070);

    curve(300, 1070, 290, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 510, 300, 1070);

    curve(300, 1370, 290, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 510, 200, 1370);

    curve(500, 1070, 280, 510, 500, 300, 970, 540);
    curve(270, 540, 500, 300, 720, 510, 300, 1070);

    curve(500, 1070, 280, 510, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 510, 250, 1070);

    curve(700, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 500, 200, 1270);

    curve(700, 1070, 280, 500, 500, 312, 970, 540);
    curve(270, 540, 500, 312, 710, 500, 300, 1270);

    curve(700, 1070, 280, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 710, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 318, 970, 540);
    curve(270, 540, 500, 318, 720, 500, 300, 1270);

    curve(700, 1070, 290, 500, 500, 270, 970, 540);
    curve(270, 540, 500, 270, 720, 500, 300, 1270);

    curve(200, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 500, 1270);

    curve(100, 1070, 290, 500, 500, 326, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 600, 1270);

    curve(500, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 700, 1270);

    curve(50, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 800, 1270);

    curve(0, 1070, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 1270);

    curve(0, 470, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 470);
    
    curve(0, 470, 290, 500, 500, 306, 970, 540);
    curve(270, 540, 500, 306, 710, 500, 900, 570);

    curve(0, 270, 290, 500, 500, 326, 970, 540);
    curve(270, 540, 500, 326, 710, 500, 900, 670);

    noLoop();
}