Tag: Section B

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!

Looking Outwards 05: 3D Computer Graphics

Down (2019) by Vladimir Desancic is the artwork I have chosen. I appreciate the contrast in the intense orange shades of the background as well as the pseudo-realistic foreground of city structures. It appears that the artist utilized a repetition of lines with sharper, angular structures to mimic real-life skyscrapers. In doing so, he must have used some type of looping and preset functions to create this effect of depth and spacing. Desancic’s artistic ability manifests itself in the delicate balance between the vibrance of the background and the sterility of the foreground; in addition, he utilizes a clever balance of blues and grays to further enrich his piece. 

^^aforementioned painting

Linked here

Looking Outwards 06: Randomness

The painting, Shimmering Substance (1946), by Jackson Pollock combined his technique of utilizing random shapes and colors to create a comprehensive piece. I admired the way he was able to use this apparent lack of purpose to drive forth purpose in his work; a paradoxical paragon of art, if you will. Pollock was famed for the way he approached art, sparking forth a new movement of randomness in abstract art and this painting proves it all the more so. Although he did not utilize algorithms (as it was a traditional media piece), the way he approached the creation of the work could have been seen as similar to how a computer generates randomness: he utilized his whims to emulate the randomness that a computer can now generate. However, despite doing so, Pollock was able to use his artistic senses to balance out the randomness of the painting with a cohesion that allowed the painting to not only present a theme of shimmering but also look aesthetically pleasing.

^^ the aforementioned painting

Project 06

sketchDownload
// 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.

“e4708” as it appeared in 1980.

Project-05-Wallpaper

cybergoth dragon recursion!!!

sketch 

// Zoe Lin (ID: youlin)
// Section B

function setup() {
  createCanvas(400, 600);
  noLoop();
  strokeWeight(0.025);
}

function draw() {
  callDragon(5, 5, width/1.5, height/2.5, 40);

function callDragon(x, y, width, height, d){
    background(255);
    d = map(40, 0, 60, 10, 16);

    push(); //dragon1
    drawDragon(x + width/3, y-2, width, height, d);
    pop();

    push(); //dragon2
    drawDragon(x + width/3, y+height+2, width, height, d);
    pop();
  
    push(); //dragon3
    drawDragon(x + width/3, y+height*2+2, width, height, d);
    pop();
  
    //push(); //dragon4
    //drawDragon(x + width/4.5, y+height*2.5, width, height, d);
    //pop();
}

function drawDragon(x, y, width, height, d){
    
    //draw
    triangle(x , y+height/2.5, x+width/2, y, x+width, y+height/2);
    translate(x, y+height/2);
  
    push();
    dragon(width, d);
    pop();
}

function dragon(len, d) {
    if (d <= 0) {
        return;
    }

    fill(255);
    triangle(0, 0, len/2, -(len/2), len/2.5, 0);
    push();

    var newLen = len/1.4;
    rotate(- PI/4);
    fill(0);
    triangle(0, 0, newLen, 0, newLen/2.5, -(newLen/2));
    dragon(newLen, d - 1); //recursion
    pop();

    push();
    translate(len, 1.4);
    rotate(-3 * PI/4);
    fill(0);
    triangle(0, 0, newLen, 0, newLen/2.5, -(newLen/3));
    dragon(newLen, d - 1);
    pop();  
}
}

Project 05 / Wallpaper

sketchDownload
// Kyli Hilaire - Project 05
// khilaire@andrew.cmu.edu 
// Section B 

var x = 0;
var y = 0;
var beeWidth = 30;
var beeLength = 38;
var stripeY = 0;

function setup() {
    createCanvas(400, 300);
    background(247, 183, 191);
}

function draw() { 
    bgStripes();
    // draw background stripes

    push();
    translate(-45, -18); 
    // move bees in the canvas
    for(x = 0; x <= 500; x += 75) {
        for(y = 0; y <= 400; y += 75) {
            bee(); 
        }
    } pop();
    // draw bees

    for(x = 0; x <= 500; x += 75){
        for(y = 0; y <= 400; y += 75){
            greenCircles();
        }
    } 
    // draw green circles
}

function bee() {
    beeWings();
    beeBody();
}

function beeBody() {
    stroke(245, 242, 158);
    strokeWeight(1);
    fill(255, 255, 188);
    ellipse(x + 50, y + 50, beeWidth, beeLength);
    // yellow oval 
    stroke(80);
    strokeWeight(4);
    line(x + 39, y + 42, x + 61, y + 42);
    line(x + 38, y + 52, x + 62, y + 52);
    line(x + 41, y + 62, x + 59, y + 62);
    // draw bee stripes
    noStroke();
    fill(95)
    triangle(x + 44, y + 68, x + 56, y + 68, x + 50, y + 74);
    // stinger 
}

function beeWings() {
    noStroke();
    fill(255, 255, 240);
    arc(x + 50, y + 50, 65, 50, 11*PI/6, PI/6);
    arc(x + 50, y + 50, 65, 50, 5*PI/6, 7*PI/6);
    // bee wing arcs
    stroke(0);
    strokeWeight(1);
    line(x + 50, y + 50, x + 75, y + 50);
    line(x + 25, y + 50, x + 50, y + 50);
}

function bgStripes() {
    for(let i = 0; i <= 300; i += 10) {
        stroke(255, 251, 236);
        strokeWeight(0.75);
        line(0, stripeY + 2, 400, stripeY + 2);
        stripeY += 16 
        // space lines 16px apart 
    }   
}

function greenCircles() {
    noStroke();
    fill(216, 238, 219);
    circle(x + 14, y + 61, 5);
    circle(x + 20, y + 54, 8);
    circle(x + 22, y + 63, 3);
    // bottom right of bee 

    circle(x + 60, y + 10, 5);
    circle(x + 65, y + 7, 3);
    // upper left of bee
    
    stroke(216, 238, 219);
    strokeWeight(2);
    point(x + 61, y + 3);
    // small point upper left
}

Project 05: 1950’s Atomic-Era Wallpaper!

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

sketchDownload
// 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:

BMW-1
BMW-2
BMW-3

Lines: A face

For this project, I tried to make a face out of simple lines. When constructing faces, it is always interesting to see how simplistic or complicated you could make it through the assumptions of what is considered a face.

sketch
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;

function setup() {
    createCanvas(400, 400);
    background(200);
    line(50, 50, 150, 300);
    line(300, 300, 350, 100);
    line(10,380,180,300);
    line(280,260,370,390);
    dx1 = (150-50)/numLines;
    dy1 = (300-50)/numLines;
    dx2 = (350-300)/numLines;
    dy2 = (100-300)/numLines;
}

function draw() {
    fill(0);
    triangle(200,0,140,100,180,110);
    triangle(180,140,200,120,280,145);
    triangle(190,145,200,160,240,150);
    var x1 = 50;
    var y1 = 50;
    var x2 = 300;
    var y2 = 300;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    } for (var i = -150; i <= numLines * 2; i += 4) {
        line(x1, y1, x2, y2);
        x1 += dx1 / 2;
        y1 += dy1 / 2;
        x2 += dx2 / 2;
        y2 += dy2 / 2;
        //eyelashes i think
    } for (var i = 1; i <= numLines * 2; i += 4) {
        line(x2 * 5, y1 , x1 -50, y2 + 40);
        var x1 = 0;
        var x2 = 200;
        var y1 = 300;
        var y2 = 350;
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //random lines for texture
    } for (var i = 0; i <= numLines; i += 2) {
        line(x1, y1 - 300, x2, y2 - 300);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
        //hair
    } for (var i = 0; i <= numLines; i += 2) {
        x2 = 80;
        y2 = 30;
        line(x1, y1 - 300, x2, y2 - 300);
        x1 -= dx1;
        y1 -= dy1;
        x2 += dx2;
        y2 += dy2; }
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    x1 = 10;
    y1 = 380;
    x2 = 280;
    y2 = 260;
    for (var i = 0; i <= numLines; i += 1) {
        line(x1, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;  }
    noLoop();
}