Month: October 2021

LO: Computer Graphics

After looking through many different types of 3D computer graphic artworks, my personal favorite is Game Buildings by Gustavo Henrique. I really admire this artwork because I think it’s so interesting how Henrique manipulates his photographs of cubes to make them look softer and rounder. I feel that using computer graphic techniques create an interesting mood to his artworks. When I first saw the artwork, I didn’t recognize it was originally a photograph because the objects looked so smooth and soft. Henrique uses different programs to render the original photographs he takes. The creator’s artistic sensibilities are manifested in the final form by working with geometric shapes and models to create a building that has a soft atmosphere to it. 

Game Buildings by Gustavo Henrique

Project 05: Wallpaper

sketch

I thought this project was pretty fun! I approached it almost like making a singular tile and then repeating that to create the pattern.

//Jacky Lococo
//jlococo
//section C
function setup() {
    createCanvas(500, 500);
    background(220);
    rectMode(CENTER) 
}

function draw() {
    for(var y = 125/4; y <= height-25; y += 62.5){  //columns made from tile function
        for (var x = 125/4; x <= width-25; x += 62.5){ //rows for tile fuction
        tile (x, y)
    } 
    }

}

function tile (x,y){
    push();
    translate(x,y)

    //main square for the tile -- contains quarter arcs that will make a semi cirlce when repeated
    strokeWeight(0)
    fill(255, 247, 243)
    rect(x, y, 125, 125)

    //black circle within the horizontal cirlce
    strokeWeight(0)
    fill(0)
    ellipse(x+25, y+10, 23, 23)

    //horizontal arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x+25, y+10, 75, 75, 0, PI+ TWO_PI, CHORD)


    //3 lines coming from the horizontal arc
    strokeWeight(1)
    line(x + 25, y+10, x-25, y-62.5)
    line(x - 12.5, y+10, x-61, y-62.5)
    line(x + 5, y+10, x -43, y-62.5)

    //bottom left quarter arc to make verticle arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x-24, y+62.5, 75, 75, PI, PI*3/2, PIE)

    //top left quarter arc to make verticle arc
    strokeWeight(0);
    fill(242, 0, 0)
    arc(x-24, y-62.5, 75, 75, PI/2, PI, PIE)

    //single left to right line
    strokeWeight(1)
    line(x-24, y+50, x+62.5, y-62.5)

    //small black arc in the middle of the verticle arc -- only shown half of ellipse 
    strokeWeight(0)
    fill(0)
    ellipse(x-24, y+62.5, 25, 25)

    //tan colored arc at the top right of the tile
    strokeWeight(0);
    fill(255, 247, 243)
    arc(x-24, y-62.5, 25, 25, PI/2, PI, PIE)

    //two small dots on top of each other -- sitting below horizontal arc
    strokeWeight(0);
    fill(0)
    ellipse(x+25, y+55, 5, 5)
    strokeWeight(0);
    fill(0)
    ellipse(x+25, y-55, 5, 5)

    pop()
}

Project 5 – Wallpaper

This week’s project asked us to make a wallpaper, so I decided to make my work based on african textiles. Attached is a sketch of my initial idea and my final product. Enjoy!

sketch 
var num = 6; //number of itterations of everything

function setup() {
    createCanvas(600, 400);
    background(250, 249, 246);
}

/*let eyeBrown = color(165,42,42);
let bgBrown = color(255, 200, 168);
let branchGreen = color(63, 146, 65);
let turq = color(64,224,208);*/

function drawBackground() {
    //random lines from ex 4 but in for loop
    stroke(255, 200, 168);
    strokeWeight(1);
    for (var y = 0; y < height; y+=20) {
        for (var x = 0; x < width; x+=20) {
            if (random(1) > 0.5) {
              line(x, y, x+20, y+20);
            }
            else {
              line(x, y+20, x+20, y);
            }
        }
    }

    //ornaments
    for (var j = 0; j <= width; j+=width/num) {
        var colors = [color(145,205,211), color(234,204,84)]
        noStroke();
        fill(random(colors));
        circle(random(j, j+(width/num)), random(height/2), random(40,60));
        circle(random(j, j+(width/num)), random(height/2,height), random(40,60));

        push();
        fill(200,74,55);
        translate(random(j,j+(width/num)), random(height));
        for (var r = 10; r < 60; r+=10) {
            for (var i = 0; i < 360; i+=30) {
                push();
                scale(0.3);
                circle(r*cos(radians(i)), r*sin(radians(i)), r/3);
                pop();
            }
        }
        pop();
    }



}

function drawEye(a, b, side) {
    push();
    translate(a, b);

    //alternates side of branch
    if (side == 1) {
        rotate(degrees(-.009));
    } else if (side == -1) {
        rotate(degrees(.009));
    }


//eye arcs
    //blue filling
    push();
        scale(0.7);
        noFill();
        strokeWeight(10);
        stroke(52,173,193);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    //green arcs
    strokeWeight(3);
    noFill();
    stroke(50, 118, 112);
    arc(0, -45, 100, 100, radians(65), radians(180-65));
    push();
        rotate(radians(180));
        arc(0, -45, 100, 100, radians(65), radians(180-65));
    pop();

    //gold arcs
    push();
        scale(0.9);
        noFill();
        strokeWeight(2);
        stroke(234,178,57);
        arc(0, -45, 100, 100, radians(65), radians(180-65));
        push();
            rotate(radians(180));
            arc(0, -45, 100, 100, radians(65), radians(180-65));
            pop();
    pop();

    fill(165,42,42);
    noStroke();
    circle(0, 0, 10); //eyeball

    //lashes
    strokeWeight(1);
    push();
    translate(0, 45);
    rotate(radians(-35));

    stroke(0);
    for (var i = 0; i <= 50; i+=10) {
        rotate(radians(10));
        line(0, -52, 0, -54);
    }

    pop();
    pop();
}

function drawBranches() {
    stroke(63, 146, 65);
    for (var x = 0; x <= width; x+= width/num) {
        push();
        translate(x, random(-50,50));

        var side = 1;
        for (var y = -100; y < height+100; y += 1) {
            //draw alternating eyes
            if ((y%50) == 0 & side == 1) {
                drawEye(cosy+19,y-10,side);
                side = -1*side;
            } else if ((y%50) == 0 & side == -1){
                drawEye(cosy-19,y-10,side);
                side = -1*side;
            }

            //draw branches (vertical cosine curves)
            var cosy = 40-30 * cos(radians(y));

            stroke(50, 118, 112);
            strokeWeight(5);
            point(cosy, y);
        }
        pop();
    }

}

var count = 0;

function draw() {
    drawBackground();

    drawBranches();

    noLoop();
}

Looking Outwards 5


For this week’s looking outwards blog, I looked at Andy Lomas’ Morphogenetic Creations. Presented at the Watermans Art Centre, is meant to illustrate and explore how “intricate complex structures, such as those found in nature, can be created emergently through computational simulation of growth processes.” The installation includes prints, projections and videos, and stereoscopic work. Lomas uses randomization in his algorithms in order to make his creations more complex than anything he could hard code. This also helps illustrate how small changes in the algorithm can lead to massively different outcomes.

Morphogenetic Creations

LO 5

https://www.behance.net/guutv

I love Gustavo Henrique’s 3D style. The use of color and the softness of form creates a child-like, fantastical scene. He emphasizes simplicity that is full of details as he states, “All constructions were modelled in a very simple way. Most of my designs are simple but full of details.” He is motivated to inspire other people through his art. His style reminds me of a game-like environment or a rendering of a physical toy. He is able to capture the feeling of being toy-like through manipulating the camera settings. He uses a 150mm focal length and a high aperture to create a blurred background and achieve a miniature feel to his work. 

Screen-Shot-2021-10-03-at-1.41.31-PM-1

Project-05: Wallpaper

I applied the same coding structure I used in my assignment A to this project. Then, I changed the repeated shapes from Hexagon to my designed shapes 1 and 2. Because of the assignment A, it is relatively easy to create this wallpaper pattern.

project05: wallpaperDownload
var x;
var y;
var a=20;
var b=20;



function setup() {
    createCanvas(400, 300);
    background( 240,230,140);
}

//shape in the first column
function shape1(){
    push();
    translate(a,b);
    noStroke();
    x=0;
    y=0;
    var s = 10;
    if(color==1){
        fill(255);
        circle(x,y,s);
        fill(175,238,238);
        circle(x,y+5,s);
        color+=1;
    }
    else{
        fill(175,238,238);
        circle(x,y,s);
        fill(255);
        circle(x,y+5,s);
        color=1;
    }
    
    pop();
}
//shape in the second column
function shape2(){
    push();
    translate(a,b);

    x=0;
    y=0;
    var d=5;
    strokeWeight(2);
    stroke(139,69,19);
    line(x-d,y,x,y-10);
    line(x+d,y,x,y-10);
    noStroke();
    fill(255,69,0);
    circle(x-d,y,10);
    circle(x+d,y,10);
    pop();
}

function draw() {
    //two circles
    for(b=20; b<=400; b +=50){
        for(a=20; a<=500; a+=50){
            shape1();
        }
    }

    //cherry shape
    
    for(b=50; b<=250; b +=50){
        for(a=45; a<=350; a+=50){
            shape2();
        }
    }


}

Looking Outwards 05: 3D Computer Graphics

I admire the project named Supermassive Blackhole by Nika Maisuradze because of the way they created the feeling of 3D even though it is just a 2D image. The details in this piece to create the illusion of a black hole actually being there are really well done. The color schemes incorporated into this piece are also put together nicely to make it seem surreal and 3D. The highlights in some parts creating emphasis on things help create movement within the piece as well. I know the Nika used the software called Blender and Blackmagic Design Fusion. The feeling of a black hole that Nika wanted is really shown with the way the atmosphere and the background are transparent in some places and just opaquely black in others.

https://www.artstation.com/artwork/k4l5Qn

Wallpaper

sketchDownload

function setup() {
    createCanvas(400, 600);
    background(182, 217, 214);
}

function draw() {
    noStroke();
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 6; j++) {
          fill(140, 110, 60);
          square(20+(i*100), 60+(j*100), 30);
          rect(20+(i*100), 20+(j*100), 5, 40);
          triangle(20+(i*100), 60+(j*100), 50+(i*100), 60+(j*100), 50+(i*100), 40+(j*100));
          circle(55+(i*100), 45+(j*100), 30);
          triangle(40+(i*100), 45+(j*100), 50+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          triangle(70+(i*100), 45+(j*100), 60+(i*100), 20+(j*100), 55+(i*100), 45+(j*100));
          fill(255, 222, 33);
          ellipse(50+(i*100), 45+(j*100), 5, 10);
          ellipse(60+(i*100), 45+(j*100), 5, 10);
          fill(56, 83, 130);
          ellipse(70+(i*100), 80+(j*100), 25, 10);
          triangle(80+(i*100), 80+(j*100), 90+(i*100), 70+(j*100), 90+(i*100), 90+(j*100));
        }
    }
    noLoop();
}

I knew immediately that I wanted to do a cat patterned wallpaper. First I tried to break down what shapes I needed to represent a cat. Everything went well and I was able to draw it with p5js. I felt like it was missing something, so I added a fish for the cat to snack on. Once I drew the first cat and fish combo, put it in a nested for loop and changed the coordinates for each iteration. This quickly drew all of my cats for the complete wallpaper.

LO 5: 3D Computer Graphics

I am continuously amazed by the scale of Google Maps Street View / Google Earth. The fact that I can pick almost any road in the world and get a view as though I am there is insane. I love using it to look around my neighborhood and pretend that I’m taking a bike ride. Street View is also helpful when I’m going somewhere new. I appreciate that this compilation of images has been organized so that I can get a 3D view of so many places. I hope to encounter someone taking pictures to update the database. I know they are continuously retaking photos to ensure that Street View is up to date. I have no idea what specific methods they use to generate the 3D imaging, but I assume it’s all/mostly done by computers, since it would be a huge pain for humans to do it for the entire world. It is funny to see how some cars/trees/other objects in the environment are sometimes rendered badly. The computers are not perfect, but they do an amazing job.

https://www.google.com/streetview/