Category: Section A

haewanp – Project 05 – WallPaper

Wall Paper

var x = 0;
var y = 0;

function setup() {
    createCanvas(480, 480);
    noStroke();
    rectMode(CENTER);
}

function draw() {
    background(240, 64, 66); //red background
    noLoop();
    pattern();
}

function pattern() {
    
    //blue circles
    for (x = 0; x <= width; x += 120) {
        for (y = 0; y <= height; y += 120) {
            fill(22, 68, 130);//blue
            ellipse(x - 60, y, 150, 150);
        }
    }
    
    //flower shape and green bar
    var i = 0;
    for (y = 30; y <= height + 30; y += 60) {
        i = i + 1;
        for (x = 60; x <= width + 60; x += 120) {
            if (i % 2 == 1) {
                
                //green bar
                fill(120, 200, 210);
                rect(x - 60, y - 30, 15, 50);
                
                //flower
                
                //yellow rectangle 
                fill(241, 235, 82);
                rect(x, y + 30, 70, 70);
                //white rectangle at the center of flower
                fill(255);
                rect(x, y + 30, 30, 30);
                //yellow petal of flower
                fill(241, 235, 82);
                arc(x + 17, y + 12, 50, 50, PI + QUARTER_PI, QUARTER_PI); //upper right
                arc(x - 17, y + 48, 50, 50, QUARTER_PI, PI + QUARTER_PI); //lower left
                arc(x + 17, y + 48, 50, 50, TWO_PI - QUARTER_PI, HALF_PI + QUARTER_PI); //lower right
                arc(x - 17, y + 12, 50, 50, HALF_PI + QUARTER_PI, TWO_PI - QUARTER_PI); //upper left
                //red circle at the center of flower
                fill(240, 64, 66); //red
                ellipse(x, y + 30, 20, 20);
                
            }   
        }     
    }
    
}

It is not too difficult and complex to code p5.js in this project. But, it is necessary to consider and organize compositions and color of graphic elements. It would be nicer and more interesting if this project is not confined in a static condition.

keuchuka Looking Outwards 05

DIFFUSION from Kouhei Nakama on Vimeo.

Kouhei Nakama is a visual art director. He also works for a company that does work for big corporations. For this project, he uses a variety of generative and particle based animation to bring 3D figures to life in this motion graphics short piece titled diffusion. Nakama has a series of work blending the human form with the geometric nature of 3D graphics. He blends them seamlessly, and at times the body mutates into other forms because of this blending. In this particular piecce, the body is blended with different textures that range from organic to more alien and computer like. The human’s flesh and body is stretched and elongated to its maximum capacity. It changes colors and patterns while questions about evolution are revoked.

hdw – Looking Outward – 5

Zeitguised is a creative studio that specializes in VR and 3d printing. They believe in combining the physical and digital worlds and like to focus on the intersection between these two planes.

Giest.xyz is a series they did handcrafted algorithmic textiles. Their design concept is a shift from passive to living matter and they use algorithmic models to iterate on form before building it in real life. The concept uses the idea of a synthetic ghost that is able to phase from one thing to another.

These two images are concept models of that were used for the final product.

These three images are some renderings of the final product. You can view the rest here.

amui1-LookingOutwards-05

For this Looking Outwards, I decided to reflect on this piece:

It is called “One is the Loneliest Number” by Stefan Morrell. When it comes to 3D computer graphics, I usually gravitate towards CGI animations and short stories. However, just like what the post says, looking outwards is about searching for inspiration in new things.

I thought this piece was really inspiring because of the immense amount of detail the artist included in each piece of the graphic. If you zoom into the buildings, you can see that the artist rendered every single piece of it: from buttons, to panels, to gateways, to objects, etc. In addition, I really like the concept of this piece. It shows one lonely space craft in a humongous arena. When I looked at this piece, I immediately thought of the phrase: “small fish in a big pond.” I really like the contrast in size and sense of depth portrayed throughout this whole piece.

Lastly, the artist did not release any information on his process for this piece. However, I discovered that Stefan Morrell is an environmental artist from New Zealand and the bulk of his pieces have won awards for being extremely photo realistic 3d.

Find piece in better quality here

Link to Stefan Morrell’s full page of pieces here and here

heeseoc-Project05-Wallpaper

sketch

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-05

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

function draw() {
	grid();
	grid2();
	grid3();
	grid4();
}

function grid() {
	background(243,242,224);
	angleMode(DEGREES);
	rotate(45);

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			
			strokeWeight(7.5);
			stroke(250,176,91);
			fill(235,1,0);
			rect(x-15,y-15,150,150); //red rect w/ yellow str//
		}
	}
}

function grid2() {

    	for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(81,56,49);
			fill(235,176,14);
			rect(x+90,y+250,100,100); //yellow rect w/ brown str//

			stroke(47,215,127);
			fill(95,115,0);
			rect(x+100,y+260,80,80); //olive rect w/ neon green str//

			stroke(229,129,7);
			fill(234,7,14);
			rect(x+110,y+270,60,60);

			stroke(47,215,127); //green flower petals//
			fill(95,115,0);
			ellipse(x+125,y+285,25,25);
			ellipse(x+125,y+315,25,25);
			ellipse(x+155,y+315,25,25);
			ellipse(x+155,y+285,25,25);

			strokeWeight(2); //red flower petals//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+126,y+300,20,20);
			ellipse(x+155,y+300,20,20);
			ellipse(x+140.5,y+314.5,20,20);
			ellipse(x+140.5,y+285.5,20,20); 

			stroke(81,56,49); //yellow center//
			fill(255,192,1);
			ellipse(x+140.5,y+300,20,20); 
		}
	}
}

function grid3() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {
			strokeWeight(5);
			stroke(255,100,8);
			fill(0,0,153);
			rect(x,y,120,120); //blue rect w/ orange str//

		}
	}
}

function grid4() {
	    for (var y = -height; y < height*2; y+=160) {
		for (var x = 0; x < width*2; x+=160) {

			strokeWeight(5);
			stroke(0,0,153);
			fill(240,175,23);
			ellipse(x+60,y+220,100,100); //yellow cirlces within blue rect//

			stroke(68,220,135);
			fill(255,119,1);
			ellipse(x+60,y+220,80,80); //orange circles with neon green stroke//

			strokeWeight(2.5); //red petals within the orange circle//
			stroke(255,195,112);
			fill(234,7,14);
			ellipse(x+40,y+220,40,20);
			ellipse(x+80,y+220,40,20);
			ellipse(x+60,y+200,20,40);
			ellipse(x+60,y+240,20,40);

			strokeWeight(1.5); //green petals within the orange circle//
			stroke(243,242,224); 
			fill(95,115,0);
			ellipse(x+45,y+205,20,20);
			ellipse(x+45,y+235,20,20);
			ellipse(x+75,y+235,20,20);
			ellipse(x+75,y+205,20,20);

			strokeWeight(2.5); //orange center//
			stroke(255,195,112);
			fill(255,119,1);
			ellipse(x+60,y+220,35,35);
		}
	}
}

I was inspired by the traditional pattern of Korea. I simplified the pattern so that I would be able to execute it with coding, and adhered to the color scheme in the reference shown below. It has a lot of repetition and symmetrical shapes, which I thought was interesting to show through computation. Also, how these traditional patterns are meant to be crafted and drawn by hand but could also be digitally generated was another point of interest. I had to split my pattern into parts because it did not let me layer some shapes on top of other shapes even though I carefully controlled the order of my lines of codes.

akluk – Section A – Looking outwards-05

The project that I was inspired by that was related to 3-dimensional graphics is Lee Grigg’s Xgen’s 3D renderings, created in 2014.

What I believe makes these renderings interesting is the fact that each surface is created by elevating or moving a “3D’ pixel to create structures and models. As we know, the basis of all computer graphics is visualizing data, and this is achieved with pixels, the building blocks of all images in computers. It is impressive that even something ground in such structured and calculated can create renderings reminiscent of occurrences in real life. While the artist simply used a program, Maya and Arnold, to create the renderings and graphics. What really impresses me is the program that is able to simulate “vision”, where it can determine shadows, depth, colors, and lighting. That is truly what is impressive about 3D graphics. The artist always seems to like to create 3D models but not smooth renderings but with disjointed and pixelated methods. Below is a link to the referred work.
Maya XGen Colored Cubes and Spheres Rendered with Arnold

hschung-LookingOutwards-05

2016 AICP Sponsor Reel – Dir Cut from Method Studios on Vimeo.

When I think of impressive or inspiring 3D computer graphics, I am intensely drawn to this animated video that worked with Major Lazer’s “Light It Up.” Deluxe’s Method Studios was hired by production company RSA to produce this video. They used motion capture technology in conjunction with procedural animation and dynamic simulations. It has a variety of different characters with wildly unique body types and interesting textures that are not usually paired with human figures, and works in sync with music as well. I am intrigued by this video every time I watch it, because it looks so believable, and yet the textures and behaviors of the people dancing in the video would never make sense in real life. I really like it because its creators were able to take his imaginative characters and render them believably so that other people could see his creation. It’s so fantastically imaginative and entertaining.

Project 5 – Wallpaper

sketch

function setup() {
    createCanvas(480, 440);
    background(169,201,203);

    //First level of diamond
    var y0 = 0;
    var quaSize = sqrt(1.5)*width/8
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x0 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (117,180,208);
            strokeWeight (3);
            noFill();    
            quad (x0, y0, x0-width/8, y0+quaSize, x0, y0+quaSize*2, x0+width/8, y0+quaSize);    
            x0 += width/4;
        }
        y0 += quaSize*2;  
    }

    //Secondary diamond
    var y1 = quaSize/3;
    var quaSize1 = quaSize/3*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x1 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (208,208,117);
            strokeWeight (5);
            noFill();    
            quad (x1, y1, x1-width/12, y1+quaSize1, x1, y1+quaSize1*2, x1+width/12, y1+quaSize1);    
            x1 += width/4;
        }
        y1 += quaSize*2;  
    }
    
    //Fourth level diamond
    var quaSize4 = quaSize/3*2;
    var y4 = 0 - quaSize4;
    for (var quaCol=0; quaCol<6; quaCol++) {
        var x4 = width/8;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (124,186,112);
            strokeWeight (3);
            quad (x4, y4, x4-width/12, y4+quaSize4, x4, y4+quaSize4*2, x4+width/12, y4+quaSize4);
            x4 += width/6 + width/12;
        }
        y4 += quaSize4*3;
    }

    //Thirdary diamond
    var quaSize2 = quaSize/3;
    var y2 = quaSize2*2;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x2 = width/12 + width/24;
        for (var quaRow=0; quaRow<5; quaRow++) {
            stroke (230,230,75);
            strokeWeight (3);
            quad (x2, y2, x2-width/24, y2+quaSize2, x2, y2+quaSize2*2, x2+width/24, y2+quaSize2);
            x2 += width/4;
        }
        y2 += quaSize*2;
    }
    var y3 = 0 - quaSize/3;
    for (var quaCol=0; quaCol<5; quaCol++) {
        var x3 = 0;
        for (var quaRow=0; quaRow<5; quaRow++) {
            strokeWeight (4);
            quad (x3, y3, x3-width/24, y3+quaSize2, x3, y3+quaSize2*2, x3+width/24, y3+quaSize2);
            x3 += width/4;
        }
        y3 += quaSize*2;
    }

    

    //Decorated dots
    //vertical ones
    var sizeC = width/64;
    var yC = quaSize - sizeC*2;
    for (var cCol=0; cCol<8; cCol++) {
        var xC = 0;
        for (var cRow=0; cRow<6; cRow++) {
        noStroke();
        fill (124,186,112);
        ellipse (xC, yC, sizeC);
        xC += width/4;
        }
        if (cCol % 2 == 0) {
            yC += sizeC*4;
        } else {
            yC += quaSize*2 - sizeC*4;
        }
    }

    //horizontal ones
    var yC1 = quaSize;
    for (var cCol=0; cCol<8; cCol++) {
        var xC1 = sizeC*2;
        for (var cRow=0; cRow<8; cRow++) {
            ellipse (xC1, yC1, sizeC);
            if (cRow % 2 == 0) {
                xC1 += width/4 - sizeC*4;
            } else {
                xC1 += sizeC*4;
            }
        }
        yC1 += quaSize*2;   
    }
    

    noLoop();
}

function draw() {
}

This wallpaper that I design has a vintage feel. I used yellow green and blue as the swatch. The geometries that I used are circles and diamonds, which are simple but timeless.

akluk-Project5-Section-A-Wallpaper

sketch
My art is inspired by a logo that i quite like and it was fun recreating it as a wallpaper. It was a challenge to create complex and organic/natural pattern using simply a double for loop and little hard coding for each one specific cell. Creating a if statement that was able to create a pattern with the colors was also interesting to think about.

//Alvin Luk
//Section A
//akluk@andrew.cmu.edu
//Assignment-05-B

var total; //variable that controls the number of circles at current row
var w = 90;
var sx = w/2;
var sy = w/2;

function setup() {
    createCanvas(450, 450);
    background(color(119,221,170));

    for (var y = 0; y < height/w; y++) {
        for (var x = 0; x < width/w; x++) {

            //determines color of the heart
            if ((y*5+x)%2 == 0){
                fill(color(255,20,20));
            }
            else if (x%2 == 1){
                fill(color(255,105,180));
            }
            else {
                fill(color(255,215,0));
            }
            noStroke();

            //draws heart outline
            ellipse(sx+x*w-10, sy+y*w-10,20,20);
            ellipse(sx+x*w+10, sy+y*w-10,20,20);
            triangle(sx+x*w-20,sy+y*w-7,sx+x*w+20,sy+y*w-7,sx+x*w,sy+y*w+18)

            //draws eye whites
            fill(255);
            ellipse(sx+x*w-9, sy+y*w-7,10,6);
            ellipse(sx+x*w+9, sy+y*w-7,10,6);

            //draws pupils
            fill(0);
            ellipse(sx+x*w-9, sy+y*w-7,5,6);
            ellipse(sx+x*w+9, sy+y*w-7,5,6);
        }
    }


    //draws line grid
    for (var i = 0; i < 4 ; i++){
        stroke(0);
        strokeWeight(2);
        line(w*(i+1)-3,0,w*(i+1)-3,height);
        line(w*(i+1)+3,0,w*(i+1)+3,height);
        line(0,w*(i+1)-3,width,w*(i+1)-3);
        line(0,w*(i+1)+3,width,w*(i+1)+3);
    }

    //draws purple loops around intersection
    for (var j = 0; j < 4 ; j++){
        for (var k = 0; k < 4; k++){
            noFill();
            stroke(106,90,205);
            strokeWeight(4);
            ellipse(w*(j+1),w*(k+1),20,20);
        }   
    }
    noLoop();
}


function draw() {
    // draw is not called due to noLoop() in setup()
}

HaeWanPark-LookingOutwards-5

Rainbow paper Series By Machineast, 2015

Machineast is a design studio consisting of two designers, Rezaliando and Fizah Rahim. Most of their works are 3D computer graphics. Even though this studio has provided visual solutions to clients, these two designers have also created several personal driven works as artists. ‘Rainbow Paper Series’ is also a project driven by themselves and inspired by their childhood experiences. During the childhood, they both have fascinated by holographic colors. When they have grown up in the 80’s, holographic cartoon and toys were so popular. After grown up, they found the way to express their fascination and nostalgia toward holographic colors in their 3D artwork. The shimmering and shiny surfaces characterized their childhood and give honor to the 80’s era of a hologram. In my opinion, the combination of shiny effects on surfaces and holographic bright colors created interesting visual. This work is nice artistic expression pieces.

Rainbow Paper Series, Machineast
Rainbow Paper Series, Machineast

Rainbow Paper Link