// Ilia Urgen
// Section B
var numLines = 60;
function setup() {
createCanvas (400,300);
color_1 = color (135,206,245);
color_2 = color (253,217,181);
// ombre
for (var y = 0; y < height; y++ ) {
n = map (y,0, height, 0, 1);
var color_3 = lerpColor (color_1, color_2, n);
stroke (color_3);
line (0, y, width, y);
}
stroke (0);
// canvas border lines
line (1,1,1,299);
line (1,1,399,1);
line (1,299,399,299);
line (399,1,399,299);
}
function draw() {
for (var i = 0; i <= numLines; i += 1) {
var x1 = 0;
var y1 = i * width / numLines;
var x2 = i * height / numLines;
var y2 = 300;
// lower eye curve
strokeWeight(0.5);
line (x1, y1, x2, y2);
// upper eye curve and pyramid side
line (x2, 0, 400, y1);
// lower eye lines
line (y1, x2 * 1.05, x1, y1 - 20);
// pyramid face
line (y2, x2, x1 - 2.1, y2 + 200);
// eye line
strokeWeight(2);
line (0,0,382,303);
}
//illuminati eye
push();
translate (185, 152);
rotate(radians(38));
fill (0);
ellipse (0,0,180,80);
fill (255);
ellipse (0,0,80);
fill (0);
ellipse (0,0,20);
pop();
noLoop();
}
Author: Ilia
Project 03
// Ilia Urgen
// Section B
var angle = 0;
var color_1;
var color_2;
var background_lines = 0;
var triangle_1 = 1;
var triangle_2 = 2;
var triangle_3 = 3;
var triangle_4 = 4;
var triangle_5 = 5;
var triangle_6 = 6;
function setup() {
stroke (2);
createCanvas (800, 800);
color_1 = color (255,140,0);
color_2 = color (63,191,191);
for (var y = 0; y < height; y++ ) {
n = map (y,0, height, 0, 1);
var color_3 = lerpColor (color_1, color_2, n);
stroke (color_3);
line (0, y, width, y);
}
}
function draw() {
delta_x = mouseX/6;
delta_y = mouseY/6;
frameRate(30);
stroke (2);
push();
translate(400, 400);
rotate(radians(angle));
if (background_lines == 0) {
line (0,0, width, height);
line (width, 0, 0, height);
angle += 25;
}
if (triangle_1 == 1) {
// changes 1st darkest color gradient
fill (132-mouseX/4, 0, 132-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x + 100), delta_y + 150, (delta_x + 100), delta_y + 150);
angle += 5;
}
if (triangle_2 == 2) {
// changes 2nd darkest color gradient
fill (152-mouseX/4, 0, 152-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x + 80), delta_y + 120, (delta_x + 80), delta_y + 120);
angle -= 15;
}
if (triangle_3 == 3) {
// changes 3rd darkest color gradient
fill (176-mouseX/4,0,176-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x + 60), delta_y + 90, (delta_x + 60), delta_y + 90);
angle += 200;
}
if (triangle_4 == 4) {
// changes 4th darkest color gradient
fill (204-mouseX/4, 0, 204-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x + 40), delta_y + 60, (delta_x + 40), delta_y + 60);
angle -= 150;
}
if (triangle_5 == 5) {
// changes 5th darkest color gradient
fill (232-mouseX/4,0,232-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x + 20), delta_y + 30, (delta_x + 20), delta_y + 30);
angle += 100;
}
if (triangle_6 == 6) {
// changes 6th darkest color gradient
fill (255-mouseX/4,0,255-mouseY/4);
// changes thickness and width of triangle
triangle (0,0, -(delta_x), delta_y, (delta_x), delta_y);
angle -= 55;
}
pop();
}
Blog 03: “Twisted Belly Vase”
By Ilia Urgen
Section B
Twisted Belly Vase is a 3D printed object created on April 25th, 2022 by Instagram artist namu3d. The original size of the figure was 80mm by 60mm, but the model was printed 60% larger. Altogether, the print took around one-and-a-half, which is the average print time for a model of this size.
There are many features that make the Twisted Belly vase stick out, and my favorite design feature is the flow of the rather-vertical lines around the vase’s upper and lower diameters. The thinning neck around the center of the vase gives off the hourglass aesthetic, with the “belly” of the vase greatly expanding in proportion and then once again, returning to its original diameter size.
The software used to 3D print this vase was MakerBot, a highly ubiquitous design program. It allows the creator to explore various vector scales, rotations, and linear parallel lines, which are just three of many possible functions and variables when it comes to computational fabrication.
The creators of Twisted Belly Vase, namu3d, has made other aesthetically-pleasing vases, bowls, and cylindrical elements. His design style involves simple, yet complex-looking geometric shapes and unusual rotations. I have a deep appreciation of namu3d’s design style because I too, find beauty in the simplest geometric shapes found in the world around us.
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
// 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));
}
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
// 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();
}