Author: Chuong

LO 5: 3D Computer Graphics

For this Week’s Looking Outwards, I will talk Romain Lemaire’s Color Project – Blue 01 Oily Paint Stroke (Early 2021).

Lemaire is a French “Freelance Material Artist” – as per his ArtStation Profile. He created this artwork as he sees his ability to work with color as a weakness. Hence, by working more with color, he will improve his abilities.

The Work itself was made using rendering techniques from what I could find. As for guesses on what algorithms were used, I would say ones that depend on where the strokes of the mouse are. I admit I am unknowledgeable of the process of creating 3D art other than the common terms like “rendering” that are used.

Other than that, I like the Work because of how different it is from everything else I saw. When Professor Cortina told us not to do Video Games, I was kind of dreading writing this LO up. That dread increased as I was trying to find 3d Computer Graphic Artwork that was not Video Game related. I originally used google images, but after clicking on one of the links for this Week LO’s writeup, I began searching on ArtStation instead. After searching the tags of #Digital 3D and #Abstract, I found Lemaire’s Work.


Besides the Work’s originality, I liked how warm it made me feel and a weird sort of peace that it instilled. Finally, it just looks good in all honesty – which I know I say for all of my LOs.


Here is the links to this Work, his ArtStation Profile, and his ArtStation Blog.

Project-05: Wallpaper

My Work

//cbtruong;
//Section B;

function setup() {
    createCanvas(600, 600);
    //cream background color that goes with the wallpaper-esque idea;
    background(248, 241, 196);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(248, 241, 196);
    //two for loops to draw repeated versions of pattern 1;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both i and j are initialized as width/height /4 to allow for centering;
    for (var j = height/4; j < height*2; j += 300){
        for (var i = width/4; i < width*2; i += 300){
            pattern1(i, j);
        }
    }
    //two for loops to draw repeated versions of pattern 2;
    //inner loop is the x coordinate while the outer is the y coordinate;
    //both l and m are intialized as width/height /2 to allow for centering;
    //between pattern 1;
    for (var m = height/2; m < height*2; m += 300){
        for (var l = width/2; l < width*2; l += 300){
            pattern2(l, m);
        }

    }
}


function pattern1 (x, y) {
    //scaled it down by 0.5 by encasing;
    //the entire pattern in a push/pop;
    push();

    scale(0.5);
    strokeWeight(1);
    noFill();
    //connecting lines;
    line(x, y, x - 50, y);
    line(x, y, x + 50, y);
    curve(x + 50, y, x - 50, y, x - 50, y - 50, x + 50 , y);
    curve(x - 50, y, x + 50, y, x + 50, y + 50, x - 50, y);
    //white circle;
    fill(255);
    circle(x, y, 15);
    //muted blue color rectangle;
    fill(92, 143, 191);
    rect(x - 50, y - 70, 20, 40);
    //muted red color rectangle;
    fill(182, 30, 40);
    rect(x + 30, y + 30, 20, 40);
    //reddish lines;
    fill(196, 59, 62);
    strokeWeight(4);
    line(x - 40, y - 10, x - 5, y - 40);
    line(x - 35, y - 5, x, y - 35);
    line(x + 5, y + 40, x + 40, y + 10);
    line(x, y + 35, x + 35, y + 5);
    //muted green triangles;
    strokeWeight(1);
    fill(62, 167, 32);
    triangle(x + 45, y + 50, x + 25, y + 70, x - 15, y + 60);
    triangle(x - 45, y - 50, x - 25, y - 70, x + 15, y - 60);
    //second set of connecting lines;
    line(x, y, y - 40, y + 40);
    line(x, y, y + 40, y - 40);
    noFill();
    curve(x, y, x - 40, y + 40, x - 50, y, x, y);
    curve(x, y, x + 40, y - 40, x + 50, y, x, y);
    //yellow ellipse tilted using push/pop;
    push();
    translate(x - 30, y + 50);
    rotate(radians(45));
    fill(217, 227, 10);
    ellipse(0, 0, 20, 50);
    pop();
    //orange ellipse tilted using push/pop;
    push();
    translate(x + 30, y - 50);
    rotate(radians(45));
    fill(226, 160, 29);
    ellipse(0, 0, 20, 50);
    pop();

    pop();
    noLoop();
}

function pattern2 (x, y){
    //scaled it down by 0.5 as well;
    //also encased it in a push/pop to allow scaling;
    push();
    scale(0.5);

    //draws aquamarine rectangle;
    fill(69, 166, 159);
    rectMode(CENTER);
    rect(x, y, 30, 30);
    //draws connecting lines;
    line(x - 20, y + 15, x - 35, y + 35);
    line(x + 20, y - 15, x + 35, y - 35);
    line(x + 35, y - 35, x - 15, y - 35);
    line(x - 35, y + 35, x + 15, y + 35);
    line(x - 20, y + 15, x - 20, y - 15);
    line(x + 20, y - 15, x + 20, y + 15);
    //draws muted pink circles;
    fill(153, 139, 102);
    circle(x - 35, y - 35, 40);
    circle(x + 35, y + 35, 40);
    //draws muted reddish triangles;
    fill(196, 59, 62);
    triangle(x - 20, y - 15, x - 30, y + 20, x - 60, y);
    triangle(x + 20, y + 15, x + 30, y - 20, x + 60, y);
    //draws tilted muted yellow rectangles;
    fill(187, 164, 91);
    push();
    translate(x - 10, y + 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();
    push();
    translate(x + 10, y - 40);
    rotate(radians(315));
    rect(0, 0, 20, 30);
    pop();

    pop();
}

I based it off of the early 20th Century Russian Art Movement known as Suprematism. I had the most fun so far creating this Program. Overall, it is very simple in terms of its creation. I just used pre-defined shapes and muted colors. I also used push/pop transformations to angle somethings and to make the main two patterns fit better on the 600×600 canvas.

LO 4: Sound Art

Forty-Part Motet (2001)

For this week’s Looking Outwards, I chose Janet Cardiff and George Bures Miller’s Forty-Part Motet Sound Installation.


The British-Columbia based Artists created this Installation by having the Salisbury Cathedral Choir sing Thomas Tallis’ 1573 “Spem in Alium.” With the recordings in place, 40 Speakers were set up in groups of 5 and separated by Musical Group.


By moving between the Speakers and within the area, a person is about change their perception of the Track – feeling and hearing it dynamically morph.
I admire the Work’s simplicity and ease of access.


The Artists just used Speakers to create their Sound Art, relying on already utilized Algorithms to make this.


Furthermore, the music they chose to record and convey through the Speakers is beautiful.


Finally, the Artists were right in saying that the Installation evokes a spiritual/emotional aspect. This aspect is shown through the Music itself and no doubt it is much more pronounced in person.


Here is their website, this specific work, the video, works, and their about section.

Project-04: String-Art

My Project

//allows for rotation
var rot = 0;

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

function draw() {
    background(220);
    lineSpread(400, 0, 0, 400, 10, 0, 0);
    lineSpread(0, 300, 0, 400, 10, 0, 0);
    lineSpread(0, 0, 0, 400, 10, 0, 0);
    lineSpread()
    fill(220);
    rect(300, 20, 80, 80);
    circle(75, 225, 75);
    if ((mouseX > 300 & mouseX < 380) && (mouseY < 100 && mouseY > 20) ){
        background(220);
        line(150, 100, 250, 100);
        line(150, 200, 250, 200);
        line(150, 100, 150, 200);
        line(250, 100, 250, 200);
        lineSpread(200, 0, 150, 250, 10, 0, 100);
        lineSpread(200, 300, 150, 250, 10, 0, 200);
        lineSpread(0, 150, 100, 200, 10, 150, 0);
        lineSpread(400, 150, 100, 200, 10, 250, 0);
        line(0, 150, 200, 0);
        line(200, 0, 400, 150);
        line(200, 300, 400, 150);
        line(0, 150, 200, 300);
    }
    else if (dist(mouseX, mouseY, 75, 225) < 40){
         background(220);
         fill(220);
         lineSpread(200, 150, 0, 300, 5, 112.5, 0);
         lineSpread(200, 150, 0, 300, 5, 287.5, 0);
         for (var i = 0; i < 300; i += 5){
              line(0, i, 112.5, i);
              line(287.5, i, 400, i);
         }
         stroke(20);
         circle(75, 225, 75);
         circle(75, 75, 75);
         circle(325, 75, 75);
         circle(325, 225, 75);
         lineSpread(200, 0, 150, 250, 10, 0, 60);
         lineSpread(200, 300, 150, 250, 10, 0, 240);
         lineSpread(200, 150, 150, 250, 10, 0, 60);
         lineSpread(200, 150, 150, 250, 10, 0, 240);
         push();
         translate(75, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(75, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 225);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();
         push();
         translate(325, 75);
         rotate(radians(rot));
         line(0, 0, 26.5, 26.5);
         pop();

         rot = rot += 2;

    }
    else {
        background(220);
        lineSpread(400, 0, 0, 400, 10, 0, 0);
        lineSpread(0, 300, 0, 400, 10, 0, 0);
        lineSpread(0, 0, 0, 400, 10, 0, 0);
        fill(220);
        rect(300, 20, 80, 80);
        circle(75, 225, 75);
    }

    
}

function lineSpread(x1, y1, startDegree, endDegree, lineSpace, sXNum, sYNum){
    if (sXNum == 0 & sYNum == 0){
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, degree);
    }
    }
    else if (sXNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, sXNum, degree);
    }
    }
    else if (sYNum > 0) {
    for (var degree = startDegree; degree <= endDegree; degree += lineSpace){
        line(x1, y1, degree, sYNum);
    }
}

}

I initially tried to do something more complex, but I settled for simpler things. I had fun writing the Function I used.

Project-03: Dynamic Drawing

My Project

//sets up RGB values for color change;
var colorR = 236;
var colorG = 47;
var colorB = 19;
var colorR2 = 22;
var colorG2 = 167;
var colorB2 = 233;
//sets up angle variable that moves center rectangle;
var angle = 1;
//sets up direction variable that determines which direction said rectangle rotates;
var dir = 1;

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

function draw() {
    //creates a background that changes color dependant on which;
    //side of the canvas the mouse is on;
    background(colorR, colorG, colorB);
    //makes the rectangles based on the center of themselves; 
    rectMode(CENTER);
    //allows the rectangles to change color dependant on which;
    //side of the cnavas the mouse is on;
    fill(colorR2, colorG2, colorB2);
    //creates the 2 rectangles nearer to the perimeter of the canvas;
    //they are opposite each other in direction and location;
    //they increase in size when the mouse is on the right side and decrease when on the left;
    rect(constrain(mouseX, 50, 600), 50, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));
    rect(max(600 - mouseX, 50), 350, max(50, min(mouseX, 300)), max(50, min(mouseX, 300)));
    //I used existing RGB values to make the center rectangle have dynamic color change as well;
    fill(colorR, colorG2, colorB);
    //allows for the center rectangle to rotate;
    push();
    translate(325, 200);
    rotate(radians(angle));
    rect(0, 0, max(250-mouseX, 50), max(250-mouseX, 50));
    pop();
    angle = angle + (dir*1);
    //changes the color between color depending on which side the mouse is on;
    if ( ((colorR != 22) & (colorG != 167) 
        && (colorB != 233)) && mouseX > 325 ){
        colorR -= 1; 
        colorG += 1; 
        colorB += 1;
    }
    else if ( ((colorR != 236) & (colorG != 47) 
        && (colorB != 19)) && mouseX < 325 ){
        colorR += 1;
        colorG -= 1;
        colorB -= 1;
    }
    if ( ((colorR2 != 22) & (colorG2 != 167) 
        && (colorB2 != 233)) && mouseX < 325 ){
        colorR2 -= 1; 
        colorG2 += 1; 
        colorB2 += 1;
    }
    else if ( ((colorR2 != 236) & (colorG2 != 47) 
        && (colorB2 != 19)) && mouseX > 325 ){
        colorR2 += 1;
        colorG2 -= 1;
        colorB2 -= 1;
    }
    //changes the dir variable and thereby the direction of the center rectangle;
    //dependant on which side of the canvas the mouse is on;
    if (mouseX < 325){
        dir = -1;
    }
    else{
        dir = 1;
    }

}

I originally had something more complex but I changed it to something simpler. And I like how it is now.

LO3: Computational Fabrication

Daniel Widrig’s Instances (2019)

For this week’s LO, I will talk about Daniel Widrig’s Instances (2019) – pictured above.


Daniel Widrig is a London based Architect and Designer who uses Digital Outlets to create. He has his own Studio and has designed many Buildings with Architect Zaha Hadid. He has also won many awards for design.


As for Widrig’s Instances, what I like about it is how it looks. The Sculpture/Artwork gives off a very futuristic and almost alien like vibe. However, from what I have seen of Computational Fabrication, that is a common feature.


That is not to say I would not have it in my house. I would.


I guess I admire its compactness and what seems to be the fact that it can be remade quickly? But also, uniqueness in that there should only be one of it.


I have no idea of the algorithms of which the Widrig used to create this work, but my guess is one that is complex but has constraints in the x, y, and z directions.


As for Widrig’s sensibilities, the Sculpture shows off how far into the future his work is.


To end, I like the Sculpture and its practicality. I would like to know how it was made.


Links to Daniel Widrig, this specific work, and his other works (Instances is labeled 158-156).

Project-02: Variable-Face

My Project

//sets up ability to make different backgrounds;
var backgroundSelector = 1;
//global variables for background 1 (morning) and 2 (night);
var cloudX1 = 100;
var cloudX2 = 300;
var cloudX3 = 180;
var cloudX4 = 220;
//sets up global variables for backround 2 (night);
var saucerX = 60;
var saucerY = 100;
var dir = 1;
var dirSaucer = 1;
//global variables for background 3 (evening);
var background3r = 231;
var background3g = 148;
var background3b = 20;
var sunY = 80;
var moonY = 720;
//sets up ability to make different face shapes;
var face = 1;
//sets up global variables for face shapes;
var rectWidth = 150;
var rectHeight = 250;
var circleRad = 300;
var ellipseWidth = 260;
var ellipseHeight = 320;
//sets up ability to use different Skin Tones;
var skinPreset = 0;
//sets up global variables for skin color;
var skinR = 224;
var skinG = 172;
var skinB = 105;
//sets up variables for facial features;
//creates initial x-coordinates of eyes that;
//fits all initial face shapes;
var leftEye = 195;
var rightEye = 285;
//sets up ability to have different Eye Colors;
var eyeColorPreset = 1;
//sets up global variables for Eye Colors;
var eyeColorR = 99;
var eyeColorG = 78;
var eyeColorB = 52;
//sets up global variables for noses;
var noseX2 = 220;
var noseY1 = 240;
var noseY2 = 340;
//sets up smile size;
var smileW = 20;
var smileH = 30;


function setup() {
    //I went with the Portrait Dimensions;
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    
    //changes the background between morning (1), night(2), and sunset(3 or almost 3);
    //morning background;
    if (backgroundSelector <= 1){
        background(135, 206, 235);
        noStroke();
        //creates clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX2, 90, 60, 30);
        ellipse(cloudX2+30, 105, 80, 30);
        ellipse(cloudX2+17, 105, 30, 60);
        ellipse(cloudX2+42, 105, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        rect(cloudX4, 130, 60, 30);
        ellipse(cloudX4+30, 145, 80, 30);
        ellipse(cloudX4+17, 145, 30, 60);
        ellipse(cloudX4+42, 145, 30, 60);
        //causes the Clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX2 = cloudX2 - 1.5;
        if (cloudX2 < -width){
            cloudX2 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
        cloudX4 = cloudX4 - 1.2;
        if (cloudX4 < -width){
            cloudX4 = width;
        }
        //creates sun;
        fill(252, 290, 77);
        circle(80, 80, 80);
    }
    //night background;
    else if (backgroundSelector > 1 & backgroundSelector <= 2){
        background(76, 64, 142);
        noStroke();
        //creates moon
        fill(244, 246, 240);
        circle(400, 80, 80);
        //creates saucer;
        fill(180, 229, 175);
        rect(saucerX, saucerY, 70, 20);
        fill(180);
        rect(saucerX+15, saucerY-10, 40, 10);
        rect(saucerX+15, saucerY+10, 40, 10);
        fill(180, 20, 30);
        rect(saucerX+5, saucerY+5, 5, 5);
        fill(20, 30, 180);
        rect(saucerX+60, saucerY+5, 5, 5);
        fill(224, 55, 45);
        quad(saucerX, saucerY+20, saucerX+10, saucerY+30, saucerX+60, saucerY+30, saucerX+70, saucerY+20);
        //causes saucer to move;
        saucerX = saucerX + (dir*1.7);
        if (saucerX > width){
            dir = -dir;
        }
        if (saucerX < -width){
            dir = -dir;
        }
        //causes the Saucer to move up and down cartoonishly;
        saucerY = saucerY - (dirSaucer*0.5);
        if (saucerY < 80){
            dirSaucer = -dirSaucer;
        }
        else if (saucerY > 120){
            dirSaucer = -dirSaucer;
        }
        //adds clouds;
        fill(243, 242, 231);
        rect(cloudX1, 120, 60, 30);
        ellipse(cloudX1+30, 135, 80, 30);
        ellipse(cloudX1+17, 135, 30, 60);
        ellipse(cloudX1+42, 135, 30, 60);
        rect(cloudX3, 60, 60, 30);
        ellipse(cloudX3+30, 75, 80, 30);
        ellipse(cloudX3+17, 75, 30, 60);
        ellipse(cloudX3+42, 75, 30, 60);
        //causes clouds to move;
        cloudX1 = cloudX1 - 1.5;
        if (cloudX1 < -width){
            cloudX1 = width;
        }
        cloudX3 = cloudX3 - 1;
        if (cloudX3 < -width){
            cloudX3 = width;
        }
    }
    //evening background;
    else if (backgroundSelector > 2 & backgroundSelector < 3){
        background(background3r, background3g, background3b);
        noStroke();
        //changes background to night and causes sun to go down;
        if (background3r != 76){
            background3r = background3r-1;
        }
        if (background3g != 64){
            background3g = background3g-1;
        }
        if (background3b != 142){
            background3b = background3b+1;
        }
        fill(252, 290, 77);
        circle(80, sunY, 80);
        if (sunY != 720){
            sunY = sunY + 4;
        }
        fill(244, 246, 240);
        circle(400, moonY, 80);
        if (moonY != 80){
            moonY = moonY - 4;
        }
    }
    //creates different skinPresets;
    if (skinPreset <= 1){
        skinR = 224;
        skinG = 172;
        skinB = 105;
    }
    else if (skinPreset > 1 & skinPreset <= 2) {
        skinR = 198;
        skinG = 134;
        skinB = 66;
    }
    else if (skinPreset > 2 & skinPreset <= 3) {
        skinR = 141;
        skinG = 85;
        skinB = 36;
    }
    else if (skinPreset > 3 & skinPreset <= 4) {
        skinR = 255;
        skinG = 219;
        skinB = 172;
    }
    //creates different eye colors;
    if (eyeColorPreset <= 1){
        eyeColorR = 99;
        eyeColorG = 78;
        eyeColorB = 52;
    }
    else if (eyeColorPreset > 1 & eyeColorPreset <= 2){
        eyeColorR = 46;
        eyeColorG = 83;
        eyeColorB = 111;
    }
    else if (eyeColorPreset > 2 & eyeColorPreset <= 3){
        eyeColorR = 61;
        eyeColorG = 103;
        eyeColorB = 29;
    }
    else if (eyeColorPreset > 3 & eyeColorPreset <= 4){
        eyeColorR = 28;
        eyeColorG = 120;
        eyeColorB = 71;
    }
    else if (eyeColorPreset > 4){
        eyeColorR = 73;
        eyeColorG = 118;
        eyeColorB = 101;
    }
    //creates different faceShapes and by extension, the faces;
    //each faceShape will also have features that are specific to it;
    //rectangle faceShape;
    if (face <= 1){
        fill(skinR, skinG, skinB);
        stroke(40);
        rect( ((width/2) - (rectWidth/2)), ((height/2) - (rectHeight/2) + 30), rectWidth, rectHeight);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //circle faceShape;
    else if (face > 1 & face <= 2){
        fill(skinR, skinG, skinB);
        stroke(40);
        circle(240, 380, circleRad);
        //creates eyes;
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 280, 40);
        circle(rightEye, 280, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 280, 20);
        circle(rightEye, 280, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileW, smileH, HALF_PI, PI);
    }
    //ellipse faceShape;
    else if (face > 2 & face < 3){
        fill(skinR, skinG, skinB);
        stroke(40);
        ellipse(240, 380, ellipseWidth, ellipseHeight);
        //creates eyes
        fill(230);
        leftEye = ( (width/2) - (rectWidth/2) + 30 );
        rightEye = ( (width/2) + (rectWidth/2) - 30 );
        circle(leftEye, 260, 40);
        circle(rightEye, 260, 40);
        fill(eyeColorR, eyeColorG, eyeColorB);
        circle(leftEye, 260, 20);
        circle(rightEye, 260, 20);
        //creates nose;
        stroke(20);
        line(240, noseY1, noseX2, noseY2);
        line(noseX2, noseY2, 240, noseY2);
        //creates smile;
        noFill();
        arc(200, 430, smileH, smileW, HALF_PI, PI);
    }
    //creates pictureframe-like border;
    fill(160, 82, 45);
    stroke(160, 82, 45);
    rect(0, 0, 480, 10);
    rect(0, 630, 480, 10);
    rect(0, 10, 10, 620);
    rect(470, 10, 10, 620);
}

function mousePressed(){
    //randomly determines background, faceShape, skinPresets, and eyeColors;
    //also randomly determines faceShapeSize, Nose Size (through Coordinates);
    backgroundSelector = random(3);
    face = random(3);
    skinPreset = random(4);
    eyeColorPreset = random(5);
    circleRad = random(300, 420);
    ellipseWidth = (260, 310);
    ellipseHeight = (320, 400);
    rectWidth = random(150, 230);
    rectHeight = random(250, 330);
    noseX2 = random(180,230);
    noseY1 = random(240, 300);
    noseY2 = random(320, 420);
    smileW = random(20, 80);
    smileH = random(30, 50);

    //resets background 3 (evening) to initial conditions;
    background3r = 231;
    background3g = 148;
    background3b = 20;
    sunY = 80;
    moonY = 720;
}

I created this with about 8 hours of work. I had a lot of fun. However, the WordPress Posting was terrible.

LO2: Generative Art

Froschkonig (Frog Prince), 2020

The Piece of Generative Art that I found to be inspirational and admirable was Moka’s Froschkonig (Frog Prince), made in 2020.  

Moka, as known as Matthias Dorfelt, was born in the city of Hamburg, Germany in 1987. However, he earned his Master of Fine Arts from the University of California in Los Angeles and also bases himself there. His art also ranges from human-like doodles to pixel work.  

I found this particular piece to be particularly amusing, interesting, and inspiring. I like the character of Pepe, whom I find humorous, and to find him drawn this way, through computer algorithms, has caused me to rethink Generative Art as a whole.

The Piece is very human-like. If I had not known that it was generated, I would have considered it a well-done painting.

However, now that I know, I am astounded and am considering going further into Generative Art on my own. As for the Artwork itself, Moka did not reveal or speak about how he made it. His want of his work being playful and humorous shows through in this piece though. To conclude, Moka’s Piece and other work has made me change my view of Generative Art and has made me interested in the medium as a whole now.

Links for his Website, the Specific Piece (scroll until you see it), and Moka’s Background.

Project 1: Self-Portrait

This is what it looks like.

My Project

function setup() {
    createCanvas(800, 1200);
    background(250);
    //creates the text-box looking thing for "2-Dimensional Me"
    textSize(20);
    stroke(0);
    strokeWeight(3);
    fill(255, 145, 164);
    rect(300, 40, 200, 70);
    strokeWeight(0);
    fill(0);
    text("2-Dimensional Me", 320, 80);
    //creates the text-box for my name
    textSize(40);
    fill(204, 204, 255);
    stroke(0);
    strokeWeight(3);
    rect(240, 1050, 325, 75);
    strokeWeight(0);
    fill(20);
    text("Chuong Truong", 262.5, 1100);
    }

function draw() {
    //creates painting-like frame
    fill(150, 75, 0);
    rect(0, 0, 800, 10)
    rect(0, 10, 10, 1180);
    rect(790, 10, 10, 1180);
    rect(0, 1190, 1200, 10);
    //creates base face canvas
    strokeWeight(1);
    fill(241, 194, 125);
    rect(150, 300, 500, 700);
    //Creates lines that attach it to the ends of the painting frame, the 3d effect was unintensional
    fill(2, 0, 0);
    strokeWeight(3);
    line(10, 10, 300, 40);
    line(500, 40, 790, 10);
    line(10, 75, 300, 75);
    line(500, 75, 790, 75);
    line(10, 150, 300, 110);
    line(500, 110, 790, 150);
    //creates eyes
    fill(250);
    quad(240, 520, 290, 440, 340 ,520, 290, 600);
    quad(460, 520, 510, 440, 560, 520, 510, 600);
    //pupils
    fill(99, 57, 15);
    circle(510, 520, 50);
    circle(290, 520, 50);
    fill(20);
    circle(290, 520, 30);
    circle(510, 520, 30);
    //eyelids
    fill(241, 194, 125);
    triangle(265, 480, 290, 440, 315, 480);
    triangle(485, 480, 510, 440, 535, 480);
    triangle(265, 560, 290, 600, 315, 560);
    triangle(485, 560, 510, 600, 535, 560);
    //eyebrows
    fill(80);
    rect(260, 420, 60, 5);
    rect(480, 420, 60, 5);
    //nose
    line(400, 600, 400, 700);
    line(400, 700, 350, 750);
    line(400, 700, 450, 750);
    fill(20);
    circle(415, 740, 10);
    circle(385, 740, 10);
    //mouth
    fill(241, 194, 125);
    strokeWeight(5);
    arc(340, 780, 200, 200, HALF_PI, PI);
    fill(20);
    square(235, 780, 10);
    square(340, 875, 10);
    //hair
    triangle(150, 280, 300, 280, 100, 180);
    triangle(250, 280, 300, 280, 200, 180);
    triangle(280, 280, 350, 280, 230, 170);
    triangle(320, 280, 400, 280, 450, 160);
    triangle(400, 280, 520, 280, 580, 170);
    triangle(530, 280, 580, 280, 700, 180);
    triangle(580, 280, 620, 280, 650, 170);
    triangle(600, 280, 620, 280, 670, 180);
    triangle(620, 280, 650, 280, 710, 160);
    triangle(100, 250, 150, 330, 150, 280);
    triangle(650, 350, 650, 300, 700, 220);
    rect(150, 260, 500, 100);
    noLoop();
}

LO: My Inspiration

The Interactive and Computational Piece of Art that inspires me is the Video Game Fallout: New Vegas. 

A Screenshot featuring Dinky the Dinosaur that is the main attraction of a location in the Game called Novac

The Video Game was created by Obsidian Entertainment, with Joshua Sawyer as Game Director, Inon Zur as Game Composer, and John Gonzalez as Head Writer among about 100 other developers.  The Game’s Development team had 18 months and used the common Gamebryo Engine (out of house engine which they also added code to) to create the game. 

The Development Team also took a lot of story elements from Project Van Buren (which was meant to be another Fallout game before the studio that made it, Black Isle closed down) and the series staple of 1950s Cold War aesthetics.

It released to favorable reviews and had a myriad of bugs.  However, after the bug fixes and DLC came out, the game slowly became a favorite among the Gaming Community. 

I consider it to be the best game in the Fallout Franchise, the best RPG ever made, and my favorite video game. 

I find it inspirational because it shows how open ended you can be when it comes to making Computational and Interactive Pieces of Art. 

This can be seen in the choices it gives you when you participate in the Story and Gameplay. 

For example, I can be a total pacifist in the game, never hurting any Non-Playable-Character, but I can also pick choices that results in the worst possible ending for everyone.  I can do the reverse of this and everything in between. 

I admire that it takes the Interactivity that is allotted to it by its nature of being Computational Art to the very extreme.  The game itself has also inspired me to write and create stories of my own – and potentially create Video Games/Interactive and Computational pieces of Art like it. 

As for future possibilities, the Game was successful so other Fallout games have been made.  Furthermore, the modding community of this specific Fallout Title is very active. 

Finally, here are the links to the Game’s Wikipedia Pages – one is Wikipedia Proper and the other is written by Fans of the Game.