Ilia – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

“How Artists Can Bridge the Digital Divide and Reimagine Humanity”

By Ilia Urgen
Section B

Over the last couple of decades, the STEAM (Science, Technology, Engineering, Art, and Mathematics) movement has brought a plethora of new changes in the world’s education system. The goal of this movement is not only to improve the lives of people physically, but to also bring people closer together by changing the way we see diversity and the digital inclusion of others.

According to author Agnes Chavez, a revolution in STEAM is how we see the development of humanistic skills and creating a sustainable future. This process is even more vital in isolated, remote areas such as rural and minority communities, where the necessity to tie the gender and culture gap is even greater.

One of many possible solutions was generated through the creation of the STEMarts Lab. Students from all backgrounds get to work directly with artists whose work imagines what can be achieved with digital technology. This new form of collaboration between generations is what will lead the future in a digitally-sustainable direction.

Furthermore, the STEMarts model is revolutionizing the way the younger generation is thinking through the following pillars:

21st-century skills and technology
Cutting-edge science knowledge
Real-world application and collaboration
New media arts and social practice

The STEMarts model is able to give people a better idea of how the world works better together with the combination of science, art, and technology. These ideas are more important now than ever before. The goal of our generation is to increase individual literacy of these fields as much as possible. The more great minds we have who are able to think critically and out of the box, the less problems our society will have. Even though this solution seems too good to be true, we’ll never know unless we try to unite these pillars by increasing STEAM literacy in our generation.

Link to Article:

https://www.arts.gov/impact/media-arts/arts-technology-scan/essays/how-artists-can-bridge-digital-divide-and-reimagine-humanity

Blog 09: Space Video (2012)

By Ilia Urgen
Section B

Kate Armstrong is a Vancouver-based writer, exhibitionist, and artist. She has over 15 years of experience with focusing on the broader intersection of technology and art. Throughout her life, she has produced numerous exhibitions in Canada and internationally, created many works of art, and even wrote a few books on how technology and art intersect.

Today, we’ll take a look at one of Armstrong’s lesser-known works: Space Video.

Released back in 2012, Space Video is a 3-minute generative system that addresses ideas of exploration in relation to inner and outer space. It has a computer-generated algorithm that combines different snapshots of YouTube videos with various electronic sounds and synths. The video is meant to portray non-visual spaces in outer space. It is a mixture of space exploration, hypnosis, guided meditation, and science fiction, which is very trippy to the human eye.

LINK TO VIDEO: https://vimeo.com/136921326

Blog 08: Manuel Lima

By Ilia Urgen
Section B

Manuel Lima is a Portuguese-American designer and author who is known for transforming informational data into various elegant and beautiful forms of art. He received his Bachelor of Fine Arts Degree in Industrial Design at the Technical University of Lisbon and received his Master of Fine Arts Degree in Design and Technology from the Parsons School of Design in New York City.

Lima’s website, Visual Complexity, illustrates his vast portfolio of detailed and intricate artwork, which I find very appealing to the eye. His work often uses a lot of curves and lines, which is made up of many different colors. Yet, each piece of art represents some different form of data. For example, his piece “Marvel Uberframework” (see below) represents the correlation of different Marvel characters, such as Spiderman and Captain America.

However, his most well-known and complex artwork can be found in his literary work, “The Book of Circles: Visualizing Spheres of Knowledge”. As mentioned in his 2017 lecture, Lima shows various artwork pieces represented in many circular forms that comes from any form of data, ranging from ancient to contemporary times. I love how in his lecture, Lima mentions the bridge of knowledge from thousands of years ago to the present, which keeps our well-established society going. He also emphasizes the importance of creating new artwork using data, that can be passed down to future generations.

Link to Lima’s website:
http://www.visualcomplexity.com/vc/

Image 2: Contemporary Circular art using data from the size of various companies

Project 07: Hallucinogenic Roses!

sketch Download

// Ilia Urgen
// Section B
// iurgen@andrew.cmu.edu
// Project-07

function setup() {
  createCanvas(480, 480);
}
 
function draw() {

    color_1 = color (189,17,89);
    color_2 = color (253,163,26);

    // 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);
    }

    noFill();
    stroke (0);
    strokeWeight (0.25);

    // canvas border lines
    line (1,1,1,width - 1);
    line (1,1,width - 1,1);
    line (1,width - 1,width - 1,width - 1);
    line (width - 1,1,width - 1,width - 1);
  
    // smallest possible x-value of drawing
    var x = min (mouseX, width);
  
    // link the curve scale to mouseX
    var a0 = map (x, 0, width, 0, 50);
    var b0 = map (mouseX, 0, width, 0, 100);

    var a1 = map (x, 0, width, 0, 200);
    var b1 = map (mouseX, 0, width, 0, 300);

    var a2 = map (x, 0, width, 0, 400);
    var b2 = map (mouseX, 0, width, 0, 800);

    var a3 = map (x, 0, width, 0, 900);
    var b3 = map (mouseX, 0, width, 0, 1800);

    var a4 = map (x, 0, width, 0, 1900);
    var b4 = map (mouseX, 0, width, 0, 3800);

    var a5 = map (x, 0, width, 0, 3900);
    var b5 = map (mouseX, 0, width, 0, 7800);

    var a6 = map (x, 0, width, 0, 7900);
    var b6 = map (mouseX, 0, width, 0, 15800);

    var a7 = map (x, 0, width, 0, 15900);
    var b7 = map (mouseX, 0, width, 0, 31800);
  
    // link the curve rotation to mouseY
    var degree = map (mouseY, 0, height, 0, 360);
  
    push();
    translate (width/2, height/2);
  
    for (var j = 0; j < degree; j += 3600 / degree) {
        
        rotate (720 / degree);
        beginShape();
        curveVertex (0, 0);
        
        // draw the complete curves 
        for (var i = -10; i < 10; i += 0.3) {
            var x0 = a0 * cos (i);
            var y0 = b0 * sin (i);
            curveVertex (x0, y0);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x1 = a1 * cos (i);
            var y1 = b1 * sin (i);
            curveVertex (x1, y1);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x2 = a2 * cos (i);
            var y2 = b2 * sin (i);
            curveVertex (x2, y2);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x3 = a3 * cos (i);
            var y3 = b3 * sin (i);
            curveVertex (x3, y3);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x4 = a4 * cos (i);
            var y4 = b4 * sin (i);
            curveVertex (x4, y4);
        } 

        for (var i = -10; i < 10; i += 0.3) {
            var x5 = a5 * cos (i);
            var y5 = b5 * sin (i);
            curveVertex (x5, y5);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x6 = a6 * cos (i);
            var y6 = b6 * sin (i);
            curveVertex (x6, y6);
        }

        for (var i = -10; i < 10; i += 0.3) {
            var x7 = a7 * cos (i);
            var y7 = b7 * sin (i);
            curveVertex (x7, y7);
        }
        
        curveVertex (0, 0);
        endShape();

    }

    pop();
    
    // consistent background lines
    line (0, 0, width, height);
    line (0, width, height, 0);

    line (width/2, 0, width/2, height);
    line (0, height/2, width, height/2)

}

Blog 07: “BikeCycle”

By Ilia Urgen
Section B

This week, I came across a cool app called BikeCycle. It was developed by Nicholas Felton back in 2014, which is a visual display of everything an avid biker needs. However, this app will only work in New York City, as the coordinates were pinpointed on a map of Manhattan and Queens.

When you launch the app, you can see various interactive REAL-TIME visual maps, which are not limited to bike-sharing locations, different bike routes, cyclist demographics, and density of bikers in a certain area.

I find Felton’s app BikeCycle intriguing because I, myself, am an avid biker! Although I’m from Long Island, NY, and not the city, it’s very interesting to see real-time stats for different biking variables. If I were to go to the city for a ride, the app would help me optimize my bike route, see which areas to avoid, and find popular scenic routes in Manhattan!

6 different maps showing 6 different real-time biking variables!

Project 06

sketch Download

// Ilia Urgen
// Section B
// iurgen@andrew.cmu.edu
// Project-06

function setup() {
    createCanvas (450,450); 
}

function draw() { 
    // 0:00 to 8:00
    if (hour() >= 0 & hour() <= 8) {
        sleep(); 
    }

    // 8:00 to 20:00
    else if (hour() >= 8 & hour() <= 20) {
        daytime();
    }

    // 20:00 to 24:00
    else if (hour() >= 20 & hour() <= 24) {
        sleep();
    }

}

// 0:00 to 8:00 and 20:00 to 24:00
function sleep() {
    
    var s = map (minute(), 0, 60, 0, 3600) + second();
    var c = map (hour(), 0, 20, 0, 70);
    var h = map (s, 0, 3600, 0, 90);

    
    color_1 = color (120,29,173);
    color_2 = color (0);

    // 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);
    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449); 

    // window
    fill (11,11,10 + c);
    rect (width/2, height/2 - 180, 200, 200);

    // moon
    noStroke();
    fill (230,230,180);
    ellipse (320,120,100,100);
    fill (11,11,10 + c);
    ellipse (375 - h,120,95,110);

    // bed
    fill (152,118,84);
    strokeWeight (0.5);
    rect (width/2 - 200, height/4 + 210, 300, 100);
    rect (width/2 - 200, height/4 + 310, 40, 40);
    rect (width/2 + 60, height/4 + 310, 40, 40);

    // hair on head
    fill (255);
    ellipse (280,315,100,40);

    // pillow
    fill (0);
    ellipse (280,300,70,45);

    //blanket
    strokeWeight (2);
    fill (123,24,26);
    square (width/2 - 200, height/4 + 170, 50);
    square (width/2 - 150, height/4 + 220, 50);
    square (width/2 - 100, height/4 + 170, 50);
    square (width/2 - 50, height/4 + 220, 50);
    square (width/2, height/4 + 170, 50);
    square (width/2 - 200, height/4 + 270, 50);
    square (width/2 - 100, height/4 + 270, 50);
    square (width/2, height/4 + 270, 50);

    fill (0,65,169);
    square (width/2 - 200, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 170, 50);
    square (width/2 - 100, height/4 + 220, 50);
    square (width/2 - 50, height/4 + 170, 50);
    square (width/2, height/4 + 220, 50);
    square (width/2 - 150, height/4 + 270, 50);
    square (width/2 - 50, height/4 + 270, 50);
    
    // Flickering Zzz's
    zzz();
}

function zzz() {
    
    if (second () % 2 == 0) {
        stroke (255);
        strokeWeight (4);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);

        push();
        translate (40, -20);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();

        push();
        translate (80, -40);
        line (280,270,320,270);
        line (280,230,320,230);
        line (280,270,320,230);
        pop();
    }   
}

// 8:00 to 20:00
function daytime () {
    
    var s = map (minute (), 0, 60, 0, 3600) + second();
    var m = floor (map (minute (), 2, 60, 2, 10));
    var x = map (s, 0, 3600, 0, 340);
    var c = map (hour (), 3, 20, 0, 100);
    
    
    color_1 = color (25,206,255 - m);
    color_2 = color (0,129,150 - m);

    // 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);
    } 
    
    // moving clouds
    noStroke();
    fill (255);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    
    push();
    translate (72,80);
    circle (300 + c,120,50);
    circle (300 + c,90,50);
    circle (340 + c,120,50);
    circle (340 + c,90,50);
    circle (282 + c,105,50);
    circle (358 + c,105,50);
    pop();

    stroke (0);
    strokeWeight (8);
    
    // walls
    noFill();
    rect (width/2, height/2 - 180, 200, 200);
    
    fill (255,127,80);
    noStroke();
    rect (0, height/6 - 80, 221, 260);
    rect (height/2 - 12, 0, 240, 41);
    rect (0, height/2 + 24, width, 202);
    rect (height/2 + 204, 0, 22, 300);

    
    // countertop
    fill (255);
    rect (0,width/2 + 24, width, 30);

    // cabinets
    fill (86,60,40);
    rect (0,width/2 + 48, width, 200);

    stroke (0);
    noFill();
    strokeWeight (2);
    rect (28,width/2 + 72, 80, 140);
    rect (132,width/2 + 72, 80, 140);
    rect (236,width/2 + 72, 80, 140);
    rect (340,width/2 + 72, 80, 140);

    // doorknobs
    noStroke();
    fill (212,175,55);
    circle (90,330,20);
    circle (150,330,20);
    circle (300,330,20);
    circle (360,330,20);

    strokeWeight (8);

    // canvas border lines
    line (1,1,1,449);
    line (1,1,449,1);
    line (1,449,449,449);
    line (449,1,449,449);

    // "GOOD"
    if (second () % 2 == 0) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,20,40,20);
        line (20,20,20,60); 
        line (20,60,40,60);
        line (40,60,40,40); 
        line (40,40,30,40); 

        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20);

        push();
        translate (40,0);
        line (60,20,80,20);
        line (60,20,60,60); 
        line (60,60,80,60);
        line (80,60,80,20); 
        pop();

        line (140,20,140,60);
        line (140,20,160,40);
        line (140,60,160,40);
        pop();

    }

    // "DAY!!!"
    if (second () % 2 == 1) {
        
        push();
        translate (20,40);
        stroke (0);
        strokeWeight (4);
        line (20,80,20,120);
        line (20,80,40,100);
        line (20,120,40,100);
        
        line (60,80,80,80);
        line (60,80,60,120); 
        line (60,100,80,100);
        line (80,120,80,80); 

        line (100,80,110,100); 
        line (110,100,120,80); 
        line (110,100,110,120); 

        line (140,80,140,110);
        line (150,80,150,110);
        line (160,80,160,110);

        point (140,120);
        point (150,120);
        point (160,120);
        pop();
    }  
}

Blog 06: “e4708”

By Ilia Urgen
Section B

This week, I came across a cool work of late-20th Century digital art. “e4708” was created in 1980 by Mark Wilson, one of the greatest pioneers in digital image making. Since then, his various computer generated art pieces have been widely exhibited across the world, but “e4708” remains his most popular work.

Wilson’s digital artwork is a combination of both a well-thought geometrical layout and aspects randomly generated by the computer’s algorithm. For instance, the rows/columns of the squares and circles are distinctively arranged to form a certain pattern. However, we notice that the background overlay, circle diameter/stroke width, and the square/circle fill are randomly generated.

This delegation of assigned and random elements create a structured, but very unique piece of art.

Project 05: 1950’s Atomic-Era Wallpaper!

Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!

sketch Download

// Ilia Urgen
// Section B

let shape_width = 90;
let shape_height = 160; 

// I created 4 different designs, which I named Quad 1, Quad 2, Quad 3, and Quad 4.
// Each design is stored in a separate function below.

function setup() {
    createCanvas (600, 600);
    background (200);
}   

function draw() {

    // Quad 1 Coordinates
    let x1 = 60;
    let y1 = 60;

    let x2 = 180;
    let y2 = 220;


    // Quad 2 Coordinates
    let x3 = 60;
    let y3 = 220;

    let x4 = 180;
    let y4 = 60;

    // Quad 3 Coordinates
    let x5 = 0;
    let y5 = -20;

    let x6 = 120;
    let y6 = 140;

    // Quad 4 Coordinates
    let x7 = 0;
    let y7 = 140;

    let x8 = 120;
    let y8 = -20;

    let row_increase = 240;
    let col_increase = 320;

    background (210);
    
    // Prints outer Quad 1
    for (var rowA = 1; rowA <= 10; rowA += 1) {
        for (var colA = 1; colA <= 10; colA += 1) {

            quad_2 (x1, y1);  
            y1 += col_increase;
        } 

        x1 += row_increase; 
        y1 = 60;
    }

    // Prints inner Quad 1
    for (var rowB = 1; rowB <= 10; rowB += 1) {
        for (var colB = 1; colB <= 10; colB += 1) {

            quad_2 (x2, y2);  
            y2 += col_increase;
        } 

        x2 += row_increase; 
        y2 = 220;
    }

    // Prints outer Quad 2
    for (var rowC = 1; rowC <= 10; rowC += 1) {
        for (var colC = 1; colC <= 10; colC += 1) {

            quad_1 (x3, y3);  
            y3 += col_increase;
        } 

        x3 += row_increase; 
        y3 = 220;
    }

    // Prints inner Quad 2
    for (var rowD = 1; rowD <= 10; rowD += 1) {  
        for (var colD = 1; colD <= 10; colD += 1) {

            quad_1 (x4, y4);  
            y4 += col_increase;
        } 

        x4 += row_increase; 
        y4 = 60;
    }
    
    // Prints outer Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x5, y5); 
            y5 += col_increase;
        } 

        x5 += row_increase; 
        y5 = -20;
    }
    
    // Prints inner Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x6, y6);  
            y6 += col_increase;
        } 

        x6 += row_increase; 
        y6 = 140;
    }

    // Prints outer Quad 4
    for (var rowF = 1; rowF <= 10; rowF += 1) {  
        for (var colF = 1; colF <= 10; colF += 1) {

            quad_4 (x7, y7); 
            y7 += col_increase;
        } 

        x7 += row_increase; 
        y7 = 140;
    }
    
    // Prints inner Quad 4
    for (var rowG = 1; rowG <= 10; rowG += 1) {  
        for (var colG = 1; colG <= 10; colG += 1) {

            quad_4 (x8, y8);  
            y8 += col_increase;
        } 

        x8 += row_increase; 
        y8 = -20;
    }

    noLoop();
}

function quad_1 (x1, y1) {
    noStroke();
    
    fill (96,149,130);    
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 - shape_width/6, y1 - shape_height/2);
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 + shape_height/2,   x1 - shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2,   x1 + shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/6, y1 - shape_height/2);

    fill (114,102,78);
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 - shape_height/2, x1, y1 - shape_height/2);   
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 + shape_height/2, x1, y1 + shape_height/2);
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 + shape_height/2, x1, y1 + shape_height/2);   
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 - shape_height/2, x1, y1 - shape_height/2);

    fill (53,98,115);
    quad (x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2);
    
    fill (32,64,60);
    quad (x1 - shape_width/4.5, y1,   x1, y1 - shape_height/3,   x1 + shape_width/4.5, y1,   x1, y1 + shape_height/3);

    stroke(255);
    strokeWeight(1);
    line (x1 - shape_width/10, y1, x1 + shape_width/10, y1);
    line (x1, y1 - shape_height/10, x1, y1 + shape_height/10);
    line (x1 - shape_width/20, y1 - shape_height/20, x1 + shape_width/20, y1 + shape_height/20);
    line (x1 + shape_width/20, y1 - shape_height/20, x1 - shape_width/20, y1 + shape_height/20);

    circle (x1 - shape_width/10, y1, 3);
    circle (x1 + shape_width/10, y1, 3);
    circle (x1, y1 - shape_height/10, 3);
    circle (x1, y1 + shape_height/10, 3);

    circle (x1 - shape_width/20, y1 - shape_height/20, 3);
    circle (x1 + shape_width/20, y1 + shape_height/20, 3);
    circle (x1 + shape_width/20, y1 - shape_height/20, 3);
    circle (x1 - shape_width/20, y1 + shape_height/20, 3);
}

function quad_2 (x3, y3) {
    noStroke();
    
    fill (53,98,115);    
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 - shape_width/6, y3 - shape_height/2);
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 + shape_height/2,   x3 - shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2,   x3 + shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/6, y3 - shape_height/2);

    fill (114,102,78);
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 - shape_height/2, x3, y3 - shape_height/2);   
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 + shape_height/2, x3, y3 + shape_height/2);
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 + shape_height/2, x3, y3 + shape_height/2);   
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 - shape_height/2, x3, y3 - shape_height/2);

    fill (96,149,130);
    quad (x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2);
    
    fill (255);
    quad (x3 - shape_width/4.5, y3,   x3, y3 - shape_height/3,   x3 + shape_width/4.5, y3,   x3, y3 + shape_height/3);

    stroke(32,64,60);
    strokeWeight(1);
    line (x3 - shape_width/10, y3, x3 + shape_width/10, y3);
    line (x3, y3 - shape_height/10, x3, y3 + shape_height/10);
    line (x3 - shape_width/20, y3 - shape_height/20, x3 + shape_width/20, y3 + shape_height/20);
    line (x3 + shape_width/20, y3 - shape_height/20, x3 - shape_width/20, y3 + shape_height/20);

    circle (x3 - shape_width/10, y3, 4);
    circle (x3 + shape_width/10, y3, 4);
    circle (x3, y3 - shape_height/10, 4);
    circle (x3, y3 + shape_height/10, 4);

    circle (x3 - shape_width/20, y3 - shape_height/20, 4);
    circle (x3 + shape_width/20, y3 + shape_height/20, 4);
    circle (x3 + shape_width/20, y3 - shape_height/20, 4);
    circle (x3 - shape_width/20, y3 + shape_height/20, 4);
}

function quad_3 (x5, y5) {
    noStroke();
    
    fill (96,149,130);    
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 - shape_width/6, y5 - shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2,   x5 + shape_width/6, y5 + shape_height/2);

    fill (53,98,115);
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 + shape_height/2,   x5 - shape_width/6, y5 + shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/6, y5 - shape_height/2);

    fill (253,217,181);
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 - shape_height/2, x5, y5 - shape_height/2);   
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 + shape_height/2, x5, y5 + shape_height/2);
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 + shape_height/2, x5, y5 + shape_height/2);   
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 - shape_height/2, x5, y5 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (205,91,69);
    quad (x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2);
    
    strokeWeight (1.5);

    line (x5 - shape_width/10, y5, x5 + shape_width/10, y5);
    line (x5, y5 - shape_height/10, x5, y5 + shape_height/10);
    line (x5 - shape_width/20, y5 - shape_height/20, x5 + shape_width/20, y5 + shape_height/20);
    line (x5 + shape_width/20, y5 - shape_height/20, x5 - shape_width/20, y5 + shape_height/20);

    circle (x5 - shape_width/10, y5, 4);
    circle (x5 + shape_width/10, y5, 4);
    circle (x5, y5 - shape_height/10, 4);
    circle (x5, y5 + shape_height/10, 4);

    circle (x5 - shape_width/20, y5 - shape_height/20, 4);
    circle (x5 + shape_width/20, y5 + shape_height/20, 4);
    circle (x5 + shape_width/20, y5 - shape_height/20, 4);
    circle (x5 - shape_width/20, y5 + shape_height/20, 4);
}

function quad_4 (x7, y7) {
    noStroke();
    
    fill (53,98,115);    
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 - shape_width/6, y7 - shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2,   x7 + shape_width/6, y7 + shape_height/2);
    
    fill (96,149,130);
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 + shape_height/2,   x7 - shape_width/6, y7 + shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/6, y7 - shape_height/2);

    fill (205,91,69);
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 - shape_height/2, x7, y7 - shape_height/2);   
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 + shape_height/2, x7, y7 + shape_height/2);   
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 + shape_height/2, x7, y7 + shape_height/2);
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 - shape_height/2, x7, y7 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (253,217,181);
    quad (x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2);

    strokeWeight (1.5);
 
    line (x7 - shape_width/10, y7, x7 + shape_width/10, y7);
    line (x7, y7 - shape_height/10, x7, y7 + shape_height/10);
    line (x7 - shape_width/20, y7 - shape_height/20, x7 + shape_width/20, y7 + shape_height/20);
    line (x7 + shape_width/20, y7 - shape_height/20, x7 - shape_width/20, y7 + shape_height/20);

    circle (x7 - shape_width/10, y7, 4);
    circle (x7 + shape_width/10, y7, 4);
    circle (x7, y7 - shape_height/10, 4);
    circle (x7, y7 + shape_height/10, 4);

    circle (x7 - shape_width/20, y7 - shape_height/20, 4);
    circle (x7 + shape_width/20, y7 + shape_height/20, 4);
    circle (x7 + shape_width/20, y7 - shape_height/20, 4);
    circle (x7 - shape_width/20, y7 + shape_height/20, 4);   
}

Blog 05: “PK3D Studio”

By Ilia Urgen
Section B

PK3D Studio is a CGI-based studio in Warsaw, Poland that was founded by Piotr Kosinski. His main speciality of design includes automotive and technology advertisements.

CGI is a field of 3D Computer Graphics that focus on real-life characteristics. I am truly inspired by Kosinski’s work related to automotive advertisements because I am a passionate car enthusiast. He is very good at making cars blend in any background he chooses.

You know when you see in-focused cars speeding down mountains in ads? That’s a huge majority of Kosinski’s portfolio. I really admire how he takes crip, high-quality photos of cars at different angles, and then blends that car with any beautiful landscape using CGI.

His advertising skills definitely work. Kosinski has a good eye for design, as evident through his diverse automotive portfolio. Every time I see his ads, it makes me want to buy that exact car!

Below are 3 of my favorite CGI-designed automotive ads:

Blog 04: “Sound Machines”

By Ilia Urgen
Section B

“A visual instrument to compose and control electronic music in a comprehensive and responsible way.” – MediaArtTube, January 28, 2012. I love how this modern audiovisual concept is based on a timeless design used throughout the greater portion of the 20th Century – the record player.

I am truly fascinated and intrigued by this stunning piece of technology. As quoted by the creator, Sound Machines consist of 3 units, each unit resembling Vinyl record players. Each unit has the capacity of holding 3 tracks, just like traditional record players.

MediaArtTube, however, embodies this classical design with a 21st Century makeover. There is no direct contact of the needle to the groove in the disc in a Sound Machine. Signals received from the laser light of the “needle” is synced to a sequencer, producing a sound output.

Sound Machines are definitely a cool way to mix various digitally-transmitted tracks together, and I hope that we continue to see a greater implementation of this technology in everyday life.

(YouTube link: https://www.youtube.com/watch?v=_gk9n-2lBb8)