October 2021 – Page 29 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 5 – Wallpaper

In this work I tried to incorporate the four colors of the Korean flag: red, blue, black and white, in addition to the rectangles present on the flag, and a brief geometric shape of the national flower (Mugunghwa).

var col;
var row;
var col1;
var row1;
function setup() {
    createCanvas(600, 600);
}

function draw() {
    background(0);
    rectangles();
    for(col = 60; col <= 600; col += 200) {
        for(row = 60; row <=600; row += 200) {
            flowers(col,row);
            print(row);
        }
        print(col);
    }
    noLoop();
    for(col1 = 150; col1 <= 600; col1 += 200) {
        for(row1 = 150; row1 <= 600; row1 += 200) {
            flowers(col1, row1);
        }
    }
}

function rectangles(){
    for(var x = 0; x<=600; x +=90){
        for (var y=20; y<=600; y +=50){
        fill(255);
        rect(x,y,55,15);    
        }
    
    }
}


function flowers(x,y) {
    push();
    translate(x,y);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0)
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(255,0,0);
    ellipse(25,0,30,30);
    rotate(PI/3);
    fill(0,0,153);
    ellipse(25,0,30,30);
    fill(230,230,250);
    ellipse(0,0,15,15);
    pop();
}

Looking Outwards – 05

The artwork that I found inspiration is called

“Gone, and Appear” by the artist Yuuki Morita.

I admire the artist and his works as they are hyperrealistic works of mythical creatures. The texture in addition to the shadow and lighting is as if the works are sculptures of the creatures he creates. The patterns on the texture of the “sculptures” create an impactful visual appeal to the audience. As an artist who started art only in 2019, I find it amazing that he can create such intricate 3d art.

Link

Project 5 Wallpaper

It was really hard doing this becuase of translate as it took alot of calculation to figure out where the origin is.

sketch



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

function draw() {
  
  //for the color
  colorMode(RGB);
  let from = color(random(0,255),random(0,255),random(0,255));
  let to = color(random(0,255), random(0,255), random(0,255));
  colorMode(RGB); 
  let interA = lerpColor(from, to, 0.33);
  let interB = lerpColor(from, to, 0.66);
 
 //for the pattern 
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(from);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(200,0);
    for (var row = 0; row < 4; row += 1){
      //translate(0,150);
      fill(interA);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(-200,0);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      design();
    }
  }
  
  for (var col = 0; col < 2; col += 1){
    translate(0,-200);
    for (var row = 0; row < 2; row += 1){
      //translate(0,-150);
      fill(interB);
      design();
    }
  }
  
  for (var col = 0; col < 4; col += 1){
    translate(0,200);
    for (var row = 0; row < 4; row += 1){
      //translate(0,-150);
      fill(to);
      design();
    }
  }
    
 
  noLoop();
}



function design(){
  fill
  ellipsoid(30, 40, 30);
  torus(60,20);
}

Looking Outward 05

One particular 3D art that I find interesting is Robert DeNiro by character artist Thomas Rousvoal. What is so cool about this piece is that Rousval is able to combine the personality and legendary facial expressions of DeNiro into an 3D piece art. It looks very realistic without losing that touch of cartoon that elevates the piece. Rousval paid a lot of attention to applying noise and grain to the 3D art, to express the personality of the piece. He uses a real 8K scanner to project onto UV’s, this enables him to start a new sculpture with different shapes while having layers of details of realistic skin.

LO5: 3D Computer Graphics

Link of the artwork:https://www.artstation.com/artwork/6aZZQO
The project Ramen is designed by 3D student Laura Keuk. The 3D picture shows a bowl of ramen with a dreamy and peaceful atmosphere. I really admire how the noodles and soup seems so real, as if it is an actual photo taken by a high quality camera. The egg and soup seem so delicious that it makes me hungry when I’m writing this near midnight. According to the website, Keuk imported elements on Zbrush to know where and how the different ingredients touch the soup. And keuk drew multiple layers for the soup, and I guess possibly for the other elements as well. These layers are making the image real. And Kuek also uses a lot random elements to make it real. Keuk successfully created the atmosphere and the image she want.

Project 5 Wall Paper

sketch

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

var s = 5
var xstar = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
var ystar = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
function draw() {
// background hexagons
    push()
    background(255)
    for(var x = 0; x <= 600; x += 15){
        for (var y = 0; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(200,220),random(220,255))
            hexagon(x,y)
            noLoop();
        }
    }
    for (var x = 7.5; x <= 600; x += 15){
        for (var y = s*sqrt(3)/2; y <= 600; y += 2*s*sqrt(3)/2){
            fill(random(100,160),random(150,200),random(150,255))
            hexagon(x,y)
        }
    }
// stars
    push()
    translate(random(0,100),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(0,300))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(0,100),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(100,200),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(200,300),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(300,400),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(150,230))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()

    push()
    translate(random(400,500),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
    push()
    translate(random(500,600),random(300,580))
    scale(0.3)
    strokeWeight(random(8,25))
    stroke(random(30,80),random(20,50),random(40,200))
    rotate(random(radians(50,360)))
    fill(0)
    var nPoints = xstar.length;
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        vertex(xstar[i], ystar[i]);
    }
    endShape(CLOSE);
    pop()
//TEXT CMU SCHOOL OF MUSIC
    for (var x = 0; x <= 600; x += 150){
        for (var y = 50; y <= 600; y += 180){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(0,0,128)
            strokeWeight(1.8)
            fill(0,0,128)
            text("CMU SCHOOL OF MUSIC",-50,-20)
            pop()
        }   
    }
//TEXT ELECTRONIC MUSIC
    for (var x = 0; x <= 800; x += 150){
        for (var y = 50; y <= 800; y += 175){
            push()
            translate(x,y)
            rotate(radians(45))
            textSize(15);
            textStyle(ITALIC)
            stroke(225,112,133)
            strokeWeight(1.8)
            fill(255, 182, 193)
            text("ELECTRONIC MUSIC",-30,-80)
            pop()
        }   
    }
    pop()
}

//self-defined function: hexagon
function hexagon(x,y){
    push();
    translate(x,y)
    noStroke();
    triangle(0,0,-s,0,-s/2,-s*sqrt(3)/2)
    triangle(0,0,-s/2,-s*sqrt(3)/2,s/2,-s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,-s*sqrt(3)/2)
    triangle(0,0,-s,0,-s/2,s*sqrt(3)/2)
    triangle(0,0,-s/2,s*sqrt(3)/2,s/2,s*sqrt(3)/2)
    triangle(0,0,s,0,s/2,s*sqrt(3)/2)
    pop();
}

I started the project by creating a background that consists of many small hexagons, I gave them random colors, but I decided on the general trend of the colors so they seem coherent. Then I drew stars appearing randomly in certain areas with random color(within a hue), random rotation, and random stroke and strokeWeight(within a range). Lastly, I drew the rotated pattern of the texts using for loops. Trying to keep them all rotated within the for loop was challenging for me.

Cambot

When I was a little girl, I grew fond of one animated Pixar movie called “WALL-E”. I loved it because it showed people that even robots can learn how to love, how to feel and express emotions for those around them and be more human than many humans on this earth.

I chose a 3D Graphic Project by Dong Liang called “Cambot”. Dong Liang created a touching story where a “Cambot, short for Camera Robot, is a type of robot that will go around and shoot photos under its owner’s command.” However, there was one abandoned Cambot, NO. 406, who encountered a glitch during its production and now doesn’t follow the commands of its owner and only wanders around taking pictures of things he finds interesting, attractive and fascinating. How cute is that? I admire this project because the creator didn’t just create a 3D image, no, he gave this image its own life by having a story behind it. This so-called glitch made this robot have its own personality, look for beautiful things in the world on its own – this glitch made NO. 406 be alive.

The first step in this project that Dong Liang has done was playing around with sketches of the robot to find the right design. Texturing of the image was done in Mari – 3D Texture Painting Software: “I exported a neutral-pose mesh for painting the generic maps such as dif, bmp, spc, and spc roughness, and then I also exported a posed mesh for the rain mask because I want the water trails to follow the gravity.” The rain in the image was done in Maya, a 3D computer graphics application, using the nParticle; for example, to create the rain streak, Dong Liang randomly instanced 5 different streak models to a nParticle system to generate random rain drops as if it was in real life. To set up the lighting, Dog Liand used aHDRI provided by sIBL which also gave him a good bokeh effect when turning on the lens blur. Lastly, “the rain streaks and splashes were rendered as separate pass and were comped into the beauty pass in Nuke.”

The creator’s artistic sensibilities played the biggest role in the final form because, as I’ve already mentioned before, Dong Liang made his work be alive by having a story about it, by giving his robot characteristics of a human being and also, by creating a short clip of NO. 406 which brought that 3D image to life in literal sense. This project radiates warmth, happiness and truth – you might have a glitch yet you’re unique and beautiful in its own way. Maybe having a glitch is an advantage? That’s something to think about.

https://obidong.wixsite.com/home/cambot-wip

Project 5- Wallpaper

sketch

var col1;
var row1;
var col2;
var row2;
var col3;
var row3;
function setup() {
    createCanvas(600, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(88,24,69);
    for (col2 = 50; col2 <=600; col2 += 100) {
        for(row2 = -50; row2 <= 400; row2 += 100) {
            stroke(218,247,166);
            noFill();
            ellipse(col2, row2 + 50, 100, 100);
        }
        noLoop();
    }
    for(col1 = 50; col1 <= 600; col1 += 200) {
        for(row1 = 50; row1 <=600; row1 += 200) {
            flower(col1,row1);
            print(row1);
        }
        print(col1);
    }
    noLoop();
    for(col3 = 150; col3 <= 600; col3 += 200) {
        for(row3 = 150; row3 <= 600; row3 += 200) {
            flower(col3, row3);
        }
    }
}

function flower(x,y) {
    fill(199,0,57);
    stroke(255,131,105);
    push();
    translate(x,y);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    rotate(PI/3);
    ellipse(25,0,50,30);
    fill(199,0,57);
    stroke(199,0,57);
    ellipse(0,0,10,10);
    pop();
}

Looking Outwards- 3D Rendering

After exploring some different kinds of 3D generated art, I chose to focus on architectural rendering. The image above is from Archicgi, an architectural rendering studio. Here’s a great article about their process: https://archicgi.com/3d-architectural-rendering-101-a-definitive-guide/

These types of renderings are very interesting to me because of the level of detail, as well as the realism that they present. The article mentions their use of various softwares, including Maya and Blender, which are popular 3D rendering tools that I’ve heard of before. But they also mention some that I haven’t heard of such as V-Ray, Cinema 4D, and Revit. I would be interested to explore these a little more.

I’m sure there are teams of artists that go into creating these images, but I think there is a lot to say about artistic vision in the process. The architecture firm can send the studio their draftings of the building, but I believe the studio is responsible for making it look good. For example, the lighting in the image above has a huge impact on the building, and makes it look very dramatic. If the lighting were flat, the building probably wouldn’t look as interesting.

LO 05: 3D Computer Graphics

Animal Crossing: New Leaf was released by Nintendo for the Nintendo 3DS in 2012. It’s the 4th iteration in the Animal Crossing series, the predecessor to its incredibly successful sequel, Animal Crossing: New Horizons, which reportedly sold over 31 million copies as of December 2020. Just New Horizons makes up about 47% of all sales in the series of games. Still, as advanced and exceptional as New Horizons is, New Leaf has a charm that keeps players coming back even a decade after the initial release. New Leaf is full of content as a life simulation game, with over 333 possible animal villagers (not including special characters). With time the gameplay may get repetitive, and New Horizons has the same problem. But New Leaf has the added factors of characters with stronger personalities, a beautiful soundtrack, and that sense of nostalgia that has players still thinking fondly of New Leaf. Despite not having modern, clean graphics, the pixelated quality is charming and doesn’t get in the way of gameplay. While nicer graphics certainly look good, it doesn’t make up for content and playability.