Category: Section E

yoonyouk-LookingOutwards-05

 

 

One of Frank Guzonne’s 3D work displayed on his Instagram(https://www.instagram.com/p/BZJdCaPh_5M/?taken-by=fjg_3d)

For this week’s Looking Outward I focused on the 3D graphic computational artwork of Frank J. Guzonne whose works have popped up on my Instagram feed recently. His works are very flamboyant with his color choices been great and his graphics being quirky. He takes seemingly simple and mundane every day objects and plays around with dynamic movement and lighting in order to create a pleasantly unexpected graphic video work. It seems for each project he makes a unique algorithm that would determine how objects would move in relation to each other and the lighting. Guzonnes 3D renderings allows for creative explorations of fictitious animations.

Although we are currently working on 2D objects, I like how computation can bring about 3D movement and work. This opens up a new creative window in making animation work. I thought this kind of computing would be particularly useful for not only animation but also generating potential real life situations.

jooheek-Project05-Wallpaper

sketch

function setup() {
    createCanvas(450, 450);
    ellipseMode(CENTER);
    angleMode(DEGREES);
}

function draw() {
	background(255, 227, 238);

	noStroke();

	//orange position variables
	var orangeX = 0;
	var orangeY = 50;

	//start of loops for oranges
	for (orangeY = 0; orangeY < 500; orangeY += 115) {
		for (orangeX = 0; orangeX < 500; orangeX += 115) {

			//shadow of oranges
			fill(191, 128, 153);
			ellipse(orangeX + 5, orangeY + 5, 70, 70);

			//if-else that makes orange slices at every even increment
			//and whole oranges at every odd increment
			if ((orangeX+1)%2 == 0) {

				//outer orange peel circle
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//inner lighter orange peel circle
				fill(249, 234, 175);
				ellipse(orangeX, orangeY, 60, 60);

				//inner orange slice sections
				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 7, 72);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 79, 144);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 151, 216);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 223, 288);

				fill(249, 201, 65);
				arc(orangeX, orangeY, 50, 50, 295, 360);

			} else {

				//whole orange peel
				fill(249, 201, 65);
				ellipse(orangeX, orangeY, 70, 70);

				//orange shine circles
				fill(249, 225, 130);
				ellipse(orangeX + 23, orangeY - 10, 10, 10);

				fill(249, 225, 130);
				ellipse(orangeX + 15, orangeY - 20, 5, 5);

				//orange leaf
				fill(99, 187, 83);
				ellipse(orangeX - 10, orangeY - 35, 15, 8);
			}
		}
	}

//cherry variable positions set to be in middle of each orange increment
	var cherryX = 57;
	var cherryY = 57;

	//start of for loops for cherries
	//same increment but starts at the middle of orange increment
	for (cherryY = 57; cherryY < 500; cherryY += 115) {
		for (cherryX = 57; cherryX < 500; cherryX += 115) {
			//stem shadows
			stroke(211, 148, 173);
			strokeWeight(3);
			noFill();
			//right stem shadow
			arc(cherryX + 18, cherryY + 8, 60, 60, 180, 250);
			//left stem shadow
			arc(cherryX + 38, cherryY - 22, 70, 70, 123, 170);

			//stems
			//right stem
			stroke(99, 187, 83);
			arc(cherryX + 15, cherryY + 5, 60, 60, 180, 250);
			//left stem
			arc(cherryX + 35, cherryY - 25, 70, 70, 123, 170);

			//leaf shadow
			noStroke();
			fill(211, 148, 173);
			ellipse(cherryX + 13, cherryY - 18, 20, 10);
			//leaf
			fill(99, 187, 83);
			ellipse(cherryX + 10, cherryY - 21, 20, 10);

			//cherries
			//right cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX + 18, cherryY + 18, 20, 20);
			//left cherry shadow
			fill(211, 148, 173);
			ellipse(cherryX -12, cherryY + 18, 20, 20);
			//right cherry
			fill(239, 58, 71);
			ellipse(cherryX + 15, cherryY + 15, 20, 20);
			//left cherry
			fill(239, 58, 71);
			ellipse(cherryX - 15, cherryY + 15, 20, 20);
			//left cherry shine
			fill(249, 125, 135);
			ellipse(cherryX + 18, cherryY + 10, 5, 5);
			//right cherry shine
			fill(249, 125, 135);
			ellipse(cherryX - 12, cherryY + 10, 5, 5);
		}
	}

}

I started by looking at inspiration from the Internet and found cute fruit wallpapers that I really liked, so I decided to do some kind of wallpaper with oranges. But, I realized that just oranges seemed too bland and wanted to add some other fruit that would compliment it, so I chose the cherry. I also wanted to have some kind of element alternate, so I made the whole orange and sliced orange alternate.

Sheenu-Project-05-Background

sketch

function setup() {
    createCanvas(480, 480);
    background("#F9CDAD");
}

function draw() {
	for(var x=0; x<=8; x++){
		for(var y=0; y<=8; y++){
		fill(255);
		noStroke();
		//GUIDE
		//rect(x*60,y*60,60,60);
		//GREEN Lines
		stroke("#83AF9B")
		strokeWeight(8);
		line(x*60,68+y*60,68+x*60,y*60);
		stroke("#C8C8A9")
		strokeWeight(4);
		line(x*60,68+y*60,68+x*60,y*60);
		//RED Lines
		
		stroke("#FE4365")
		strokeWeight(15);
		line(-8+x*60,-8+y*60,68+x*60,68+y*60);
		stroke("#FC9D9A")
		strokeWeight(8);
		line(-14+x*60,-14+y*60,74+x*60,74+y*60);
		


	}
	}
}

I really aimed to make this background look visually pleasing color-wise. I found a palette online I really liked and used it to color this striped background. I think it looks really nice and looks like a background for a bakery or a candy. I would totally wear a texture like this around school. I made the canvas 480×480 and divided it by 8 giving me 60, meaning that 64 60×60 squares will fill the whole entire canvas. I started with a draft rectangle and worked on the texture from there.

jwchou-project05-wallpaper

sketch 285

// Jackie Chou
// Section E
// jwchou@andrew.cmu.edu
// Project-05-Wallpaper

function setup() {
    createCanvas(480, 480);
    //background(161, 209, 255);
    background(164, 225, 219);

    var move;
    var r;
    var g;
    var b;
    var num;

    var cloudX = random(0, width); //random location of cloud 1
    var cloudY = random(0, height);

    var cloudX1 = random(0, width); //random location of cloud 2
    var cloudY1 = random(0, height);

    var cloudX2 = random(0, width); //random location of cloud 3
    var cloudY2 = random(0, height);

    var cloudX3 = random(0, width); //random location of cloud 4
    var cloudY3 = random(0, height);

    var cloudX4 = random(0, width); //random location of cloud 5
    var cloudY4 = random(0, height);

    var cloudX5 = random(0, width); //random location of cloud 6
    var cloudY5 = random(0, height);

    //cloud 1
    noStroke();
    fill(255, 255, 255, 80);
    ellipse(cloudX, cloudY, 70, 50);
    ellipse(cloudX + 15, cloudY - 10, 60, 40);
    ellipse(cloudX + 30, cloudY + 15, 40, 30);
    ellipse(cloudX + 35, cloudY, 50, 30)

    //cloud 2
    ellipse(cloudX1, cloudY1, 100, 70);
    ellipse(cloudX1 + 15, cloudY1 - 10, 70, 50);
    ellipse(cloudX1 + 30, cloudY1 + 15, 80, 50);
    ellipse(cloudX1 + 35, cloudY1, 50, 30)
 
    //cloud 3
    ellipse(cloudX2, cloudY2, 70, 50);
    ellipse(cloudX2 + 15, cloudY2 - 10, 50, 30);
    ellipse(cloudX2 + 30, cloudY2 + 15, 30, 10);
    ellipse(cloudX2 + 35, cloudY2, 40, 20)

    for(var y = 0; y < 6; y++) {
        if (y % 2 == 0) { //is row is even
            move = 45; //offset by 35
            r = 222; //pink
            g = 147;
            b = 142;
            num = 4; //have four planes

        } else {
            move = 0; //if row is odd, offset by zero
            r = 202; //purple
            g = 151;
            b = 222;
            num = 5; //have five plaes
        }
       
        for(var x = 0; x < num; x++) {
            xPos = x * 90 + move + 25; // x Position + offset
            yPos = y * 75 + 20; // y Position

            noStroke();
            fill(190);
            ellipse(xPos + 40, yPos + 40, 70, 11); //wings
            ellipse(xPos + 40, yPos + 20, 35, 8); //horz stabilizer
            fill(108, 190, 225);
            ellipse(xPos + 40, yPos + 40, 17, 45); //fuselage
            ellipse(xPos + 57, yPos + 45, 6, 15); //left engine
            ellipse(xPos + 23, yPos + 45, 6, 15); //right engine
            fill(0);
            ellipse(xPos + 23, yPos + 50, 10, 2); //right propeler
            ellipse(xPos + 57, yPos + 50, 10, 2); //left propeller
            fill(190);
            ellipse(xPos + 40, yPos + 15, 5, 17); //tail
            fill(0);
            beginShape(); //cockpit
            vertex(xPos + 35, yPos + 50);
            vertex(xPos + 40, yPos + 57);
            vertex(xPos + 45, yPos + 50);
            vertex(xPos + 45, yPos + 45);
            vertex(xPos + 40, yPos + 50);
            vertex(xPos + 35, yPos + 45);
            vertex(xPos + 35,yPos +  50);
            endShape();

    }

    //cloud 4
    noStroke();
    fill(255, 255, 255, 50);
    ellipse(cloudX3, cloudY3, 70, 50);
    ellipse(cloudX3 + 15, cloudY3 - 10, 60, 40);
    ellipse(cloudX3 + 30, cloudY3 + 15, 40, 30);
    ellipse(cloudX3 + 35, cloudY3, 50, 30)

    //cloud 5
    ellipse(cloudX4, cloudY4, 100, 70);
    ellipse(cloudX4 + 15, cloudY4 - 10, 70, 50);
    ellipse(cloudX4 + 30, cloudY4 + 15, 80, 50);
    ellipse(cloudX4 + 35, cloudY4, 50, 30)
 
    //cloud 6
    ellipse(cloudX5, cloudY5, 70, 50);
    ellipse(cloudX5 + 15, cloudY5 - 10, 50, 30);
    ellipse(cloudX5 + 30, cloudY5 + 15, 30, 10);
    ellipse(cloudX5 + 35, cloudY5, 40, 20)

}
}

For this project, I was inspired by a sweater I used to own that had a bunch of planes on it. I wanted to create something in the same vein, and I also wanted to incorporate a few random elements, which became a few clouds in the pattern that have random coordinates.

elizabew – looking outwards – 05 – SectionE

“The Race Day” is a 2D image using 3D computer graphics made by Peter Nowacki that was based off of the concept art “Old Back Street” by Gary Tonge. The image was created using software such as Maya, Photoshop, 3ds Max, V-Ray, and After Effects. According to the artist, “First I used Maya, then I exported the whole scene to 3ds Max and used V-Ray. Textures were done in Photoshop and final composition and post – work in After Effects”.

What I really love about it is not only how realistic the image looks, but how visually interesting it is. The shadows that cascade over a multitude of objects while the light shines through where the canopy doesn’t cover almost creates a story. The attention to detail is inspiring. It was almost hard to believe it wasn’t a photo. The artist themselves talked about how they enjoyed adding details to the image day by day and how they were inspired by the the world and music around them. 

For more information about this project and to see more of his work — click here to visit his behance page. 

dayoungl Looking Outwards -05

I wasn’t very familiar with 3d graphic artists so I had to do some google search to look for interesting artworks. Among the artists I found Daniel Aristizabal’s artworks most intriguing. Aristizabal is a Colombia-based artist who describes his works as “pop surrealism”. He is a fan of bold colour contrasts, scientific references, and geometric shapes. He makes use of everyday objects and turns them into something surreal and interesting. Aristizabal explains that he considers sketching process in his notebook the most important part of his art-making process; despite the 3d tools he can take advantage of, Aristizabal states that he likes the feeling of brainstorming with paper and pencil. Then, the artist use a computer program, Cinema 4D, to visualize his sketches.

I think 3D in the same way I think illustration. I start to doodle around a concept. Words, sketches, random thoughts. Whatever pops into my mind, I draw it on my notepads. After that I know what elements I need to create on Cinema 4D. A lot of the stuff I use is based on imagery and objects that I had when I was a little kid—finally I’m able to get that out into the world.

agusman-LookingOutwards-05-AFrame

A Frame: A web framework for building virtual reality experiences
A Frame Website

A Frame is a three.js framework that enables creators to construct virtual reality and experiences for the web. It has an entity-component-system architecture, which is a common and desirable pattern in 3D and game dev. According to A Frame, some of the benefits of ECS include:

“- Greater flexibility when defining objects by mixing and matching reusable parts.
– Eliminates the problems of long inheritance chains with complex interwoven functionality.
– Promotes clean design via decoupling, encapsulation, modularization, reusability.
– Most scalable way to build a VR application in terms of complexity.
– Proven architecture for 3D and VR development.
– Allows for extending new features (possibly sharing them as community components).”

What I love about software like this is that it makes a craft (creating virtual reality experiences) that up until now has been so elite and obscure accessible to the masses. It’s about time that the public start to involve themselves more personally with a field that is growing more and more rapidly every day and one that will dominate many top industries and social environments.

It’s also exciting that this platform in particular focuses on web-based experiences. The internet is the world’s most highly accessed mediums and being able to share groundbreaking digital experiences that run efficiently on the web is a big step towards making this craft more prevalant in the world.

juyeonk-LookingOutwards-05

Image result for flume album art

 

Image result for flume album art

 

Image result for flume album art

 

 

Title: Album art for Flume’s ‘Skin’

Creator: Jonathan Zawada

Year of Creation: 2016

Link to the Project: https://creators.vice.com/en_au/article/jpbxy8/visionaries-jonathan-zawada-interview

Behind The Cover Art Of Flume’s Grammy Winning Album

Link to the Bio of the Artist: http://www.zawada.art/about/

 

Many people have come across these artworks at least once in the past few years, but never wondered how they were actually made. Behind the Grammy-winning album were the cover artworks created by a digital artist and a designer named Jonathan Zawada.

He has covered a variety of medium and and kinds of artworks such as music video, furniture design and album cover design. And as you can infer from these album arts, a lot of his work is inspired by nature. Nevertheless, he was never really interested in flowers, until he started working for Flume’s album designs. This set of designs include a variety of flowers or flower-inspired images with different colors and textures all generated by computer procedures. The specific algorithm he used generates different appearances of flower petals and “all the tiny little disturbances on the surfaces”. It is ironic how the mathematical programming he used was for the purpose of creating the “airy-feathery I-love-nature” effects. He acknowledges that there are other ways of approaching these natural objects or creating such effects such as hand-paintings or drawings, but he said that he does not necessarily feel like cheating using computer programs to generate these images.

 

 

 

juyeonk-project05-wallpaper

sketch

var x = 0;
var y = 0;
var THeight = 54.6;
var TBase = 63;


function setup() {
    createCanvas(441, 328.5);
    background (253, 226, 222);


//small white triangles in the furthermost back: odd-number rows
for (var x = 0; x <= width; x += TBase) {
        for (var y = 0; y < height; y += 2 * THeight) {
            noFill();
            stroke (255, 180);
            strokeWeight (2);
            triangle (x, y + THeight, x + TBase/2, y, x + TBase, y + THeight);
        }
}

//small white triangles in the furthermost back: even-number rows
for (var x = 0; x <= width; x += TBase) {
        for (var y = -THeight; y < height; y += 2 * THeight) {
            noFill();
            stroke (255, 180);
            strokeWeight (2);
            triangle (x - TBase/2, y + THeight, x, y, x + TBase/2, y + THeight);
        }

}
    
//orange hexagons: first and third rows
for (var x = -TBase/2*3; x <= width; x += 2 * TBase) {
        for (var y = -THeight; y < height; y += 4 * THeight) {
            fill(247, 148, 29,60);
            beginShape();
            vertex(x + TBase/2, y);
            vertex(x, y + THeight);
            vertex(x + TBase/2, y + 2 * THeight);
            vertex(x + TBase / 2 * 3, y + 2 * THeight);
            vertex(x + 2 * TBase, y + THeight);
            vertex(x + TBase / 2 * 3, y);
            endShape(CLOSE);
        }
}

//small white hexagons: even-number rows
for (var x = -TBase/3; x <= width; x += TBase) {
        for (var y = 0; y < height; y += 2 * THeight) {
            fill(255, 180);
            noStroke();
            beginShape();
            vertex(x, y  + THeight);
            vertex(x + TBase/6, y + THeight/3*4);
            vertex(x + TBase/2, y + THeight / 3 * 4);
            vertex(x + TBase / 3 * 2, y + THeight);
            vertex(x + TBase/2, y + THeight/3*2);
            vertex(x + TBase/6, y + THeight / 3 * 2);
            endShape(CLOSE);
        }
}
 
//small white hexagons: odd-number rows
for (var x = -TBase/6*5; x <= width; x += TBase) {
        for (var y = -THeight; y < height; y += 2 * THeight) {
            fill(255, 180);
            noStroke();
            beginShape();
            vertex(x, y  + THeight);
            vertex(x + TBase/6, y + THeight/3*4);
            vertex(x + TBase/2, y + THeight / 3 * 4);
            vertex(x + TBase / 3 * 2, y + THeight);
            vertex(x + TBase/2, y + THeight/3*2);
            vertex(x + TBase/6, y + THeight / 3 * 2);
            endShape(CLOSE);
        }
}

//orange hexagons: second and fourth rows
for (var x = -TBase/2; x <= width; x += 2 * TBase) {
        for (var y = THeight; y < height; y += 4 * THeight) {
            fill(247, 148, 29, 50);
            beginShape();
            vertex(x + TBase/2, y);
            vertex(x, y + THeight);
            vertex(x + TBase/2, y + 2 * THeight);
            vertex(x + TBase / 2 * 3, y + 2 * THeight);
            vertex(x + 2 * TBase, y + THeight);
            vertex(x + TBase / 2 * 3, y);
            endShape(CLOSE);
        }
}

    
//red triangles: first and third rows
for (var x = -2 * TBase; x <= width; x += 2 * TBase) {
        for (var y = 0; y < height; y += 4 * THeight) {
            fill(237,28,36,40);
            stroke(237, 28, 36, 90);
            triangle (x + TBase/2, y + 2 * THeight, x + TBase/2*3, y, x + TBase/2*5,y + 2 * THeight);
        }
}

    
//red triangles: second row
for (var x = -TBase; x <= width; x += 2 * TBase) {
        for (var y = 2 * THeight; y < height; y += 4 * THeight) {
            fill(237,28,36,40);
            stroke(237, 28, 36, 90);
            triangle (x + TBase/2, y + 2 * THeight, x + TBase/2*3, y, x + TBase/2*5,y + 2 * THeight);
        }
}

    
}

 

Since I wasn’t allowed to make a dynamic art for this project I decided to spice things up by increasing the complexity of the visual elements, or at least by attempting to do so.

First I drew out a pattern that uses hexagons and triangles as its primary visual elements and then transferred it into a code. While doing so, the nest for loops that I learned during the second part of the assignment came very useful.

One thing that I wish I could do was making a mirrored or a rotated array. In that way I could have created cool kaleidoscopic patterns, instead of having the same exact patterns laid out  side by side.

hqq – secE – lookingOutwards05

I’m deeply inspired by Morphogenetic Creations by Andy Lomas, currently on display in the LACDA. This piece uses fractalization and data trees to create masses inspired by genetic code. Lomas’ work uses three-dimensional computer graphics to explore organic and natural forms that express theories behind aggregation and creation. I’m particularly inspired by Lomas’ work in this regard because it uses an architecture backstory to consider the spatial cavities that exist within the forms. As they morph and wither, it creates interesting spaces in the voids that, as an architecture student, I find valuable because much of contemporary architecture is derived from this kind of method. In doing so, Lomas second-handedly explores architectural capacities while using computer-generated graphics to dramatically express an expansion on computer- and genetic-based coding.