September 2017 – Page 2 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

hannahk2-Project-05

//Hannah Kim
//Section A
//hannahk2@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(590, 390);
    noStroke();
}
 
function draw() {
    background(224, 206, 163);
    drawGrid();
    noLoop(); 
}
function drawGrid() {
        //ears
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            var r = map(y, 0, 400, 100, 200);
            var g = map(x, 0, 600, 200, 100);
            strokeWeight(5);
            stroke(r, g, 8);
            fill(224, 206, 163);
            //left ear
            triangle(x-30, y, x-40, y-45, x-10, y-20);
            //right ear
            triangle(x+10, y, x+20, y-45, x-10, y-20);
        }
    }
        //drop shadow
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            //gradates color using mapping
        	var r = map(y, 0, 400, 200, 100);
        	var g = map(x, 0, 600, 200, 100);
            noStroke();
        	fill(r, g, 200);
            ellipse(x, y, 70, 70);
        }
    }
        //face
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
        	var r = map(y, 0, 400, 100, 200);
        	var g = map(x, 0, 600, 200, 100);
        	fill(r, g, 8);
            ellipse(x-10, y-10, 70, 70);
        }
    }
        //left eye
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
        	var r = map(y, 0, 400, 100, 200);
        	var g = map(x, 0, 600, 100, 200);
        	fill(0);
            ellipse(x-20, y-10, 10, 10);
            //pupil
            fill(255);
            ellipse(x-21, y-12, 2, 2);

            //right eye
            fill(0);
            ellipse(x, y-10, 10, 10);
            //pupil
            fill(255);
            ellipse(x-1, y-12, 2, 2);
        }
    }
        //nose
        for (var y = 50; y < height + 50; y += 100) {
        for (var x = 50; x < width + 50; x += 100) {
            fill(0);
            arc(x-10, y, 5, 5, 0, PI, PIE);
        }
    }

}

This project was kind of fun for me but not really because I dont really enjoy making pattern-based work, but it got me even more familiar with loops which I still seem to be struggling with.

Looking Outwards 05 – Yugyeong Lee

Chaotic Atmospheres is a self-taught 3D artist who explores inspirational 3D environment, representing nature digitally. An example of his surreal landscape is “Shapes in Nature: Procedurally Eroded Terrains.” In this project, he used program known as World Machine to generate 3D Terrain which is then imported into Vue to explore eroded terrains. The project is so inspiring in its precision with incredible details and resolution to represent nature. Postwork was also done in Photoshop which reflect his effort to generate engaging 3D artwork. Not only creating surreal looking landscapes, his portfolio also had interesting projects such as “Alien Bonsais” that explores different software such as Substance Designer and Cinema 4D in texturing trees with extreme forms. The final renderings are done with such precision that they also look surreal with both fantasy-looking forms and realistic textures.

Portfolio Website: http://chaoticatmospheres.com/

Shapes in Nature: Procedurally Eroded Terrains

Alien Bonsais

keuchuka proj 5

//Fon Euchukanonchai
//15-104 SECTION A
//keuchuka@andrew.cmu.edu

function setup() {
    createCanvas(480, 480);
    background(255);
    var angle1 = 0;
    var angle2 = 2;

// setting up for loops for x and y values
    for (var y = 0; y < 5; y++) {
        for (var x = 0; x < 6; x++) {
        	// if the row is even then angle of arc, the circle poxition changes
       		if (x % 2 == 0){
    			angle1 = 3;
    			angle2 = 5;
    			pop=60
    			arcStroke=(50);
    			circleX = -30

    		// conditions if row is odd
   			} else {
    			angle1 = 0;
    			angle2 = 2;
    			arcStroke=(0);
    			circleX =0
    		}

    		// array of arcs
        	stroke(255, arcStroke, 255);
        	strokeWeight(5);
        	noFill();
        	arc(90+x*60, 50+ y*120, 80, 80, angle1, angle2);

        	// array of circles with gradient
        	var circstrokeMap = map(x, pop+90+x*105, width, 230, 255);
        	stroke(255, circstrokeMap, 0);
        	strokeWeight(4);
        	ellipse(x*90+190, y*120+circleX+30, 50, 50);

        	// array of rectangles with gradient
        	var rectstrokeMap = map(x, x*100+240, width, 220, 230);
        	strokeWeight(6);
        	stroke(0, rectstrokeMap, 255);
        	rect(x*100+240, y*94+80, 50, 30, 3);
        	}
        }
    noLoop();    
}

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

I wanted to experiment with how different arrays of shapes interacting with each other would look with different colors and gradients in a minimal setting.

rmanagad-project05-sectione

sketch

// Robert Managad
// Section E
// rmanagad@andrew.cmu.edu
// Project-05-Wallpaper


//colors

var petalGR = 47;
	petalGG = 168;
	petalGB = 144;
var petalRR = 239;
	petalRG = 119;
	petalRB = 99;

var petalXL = 15; // left petal X-co
	petalYLR = 21.5; // left petal Y-Co; right petal Y-Co
	petalXM = 21.5; // middle petals X-Co
	petalYMT = 15.5; // top middle petal Y-co
	petalYMB = 27.5; // bottom middle petal Y-co
	petalXR = 27; // right petal X-co

//size of petals

var petalW = 4.6
var petalH = 12.3

var spacingX = 30; // x-displacement between row elements
	spacingY = 30; // y-displacement between row elements

function setup() {
    createCanvas(300, 300);
    background(252, 241, 235);
    noLoop();
}

function draw() {
	for (var y  = 0; y < 12; y++) { // 12 iterations of rows
        for (var x = 0; x < 12; x++) { // 12 iterations of columns
        	if (y % 2 == 0 & x % 2 == 0) {  // only the even rows of this variant are drawn
        		var Lpy = (petalYLR + y * spacingY) * (sqrt(3)/2); 
        		var Tpy = (petalYMT + y * spacingY) * (sqrt(3)/2);
        		var Bpy = (petalYMB + y * spacingY) * (sqrt(3)/2);
        		var Rpy = (petalYLR + y * spacingY) * (sqrt(3)/2);
            	var Lpx = (petalXL + x * spacingX) - 5; 
            	var	Tpx = (petalXM + x * spacingX) - 5; 
            	var Bpx = (petalXM + x * spacingX) - 5; 
            	var Rpx = (petalXR + x * spacingX) - 5; 
            	var	petalRR = 239;
				var	petalRG = 119;
				var	petalRB = 99;
            }
            else if (y % 2 == 1 & x % 2 == 1) { // only the odd rows of this variant are drawn
            	var Lpy = ((petalYLR + y * spacingY) * (sqrt(3)/2)); 
        		var Tpy = ((petalYMT + y * spacingY) * (sqrt(3)/2));
        		var Bpy = ((petalYMB + y * spacingY) * (sqrt(3)/2));
        		var Rpy = ((petalYLR + y * spacingY) * (sqrt(3)/2));
            	var Lpx = ((petalXL + x * spacingX) - 5); 
            	var	Tpx = ((petalXM + x * spacingX) - 5); 
            	var Bpx = ((petalXM + x * spacingX) - 5); 
            	var Rpx = ((petalXR + x * spacingX) - 5); 
            	var	petalRR = 47;
				var	petalRG = 168;
				var	petalRB = 144;
            }
            	noStroke();
				fill(petalRR, petalRG, petalRB);
				ellipse(Lpx, Lpy, petalH, petalW); //left petal
				ellipse(Tpx, Tpy, petalW, petalH); // top petal
				ellipse(Bpx, Bpy, petalW, petalH); // bottom petal
				ellipse(Rpx, Rpy, petalH, petalW); // right petal
        }
    }
}

I played with several ideas for my background — from merit badges to patchwork — before settling on my final concept: clover petals. I wanted to explore using nested loops and if/else statements to control where elements would appear, and how they can be controlled to do just that. I used Illustrator to plan out my composition beforehand, in addition to primary sketches.

Project 05 – Yugyeong Lee (yugyeonl)

sketch

//Yugyeong Lee
//Section B
//yugyeonl@andrew.cmu.edu
//Assigment-05-B

var len = 30;
var d = 5;
var offset = 5;
var spacingX = 140;
var spacingY = 70;

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

function draw() {
    background(155);
    stroke(255, 220, 205);
    noLoop();
    noFill();

    //forloop for the diamond shape; even number lines are shifted
    for (var y = 0; y < 9; y++) {
        stroke(212, 211, 201)
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 4; x++) {
                diamond(x*spacingX+70, y*spacingY);
            }
        } else {
            for (var x = 0; x < 5; x++) {
                diamond(x*spacingX, y*spacingY);
            }
        }
    }

    //forloop for the curve shape; even number lines are shifted
    for (var y = 0; y < 9; y ++) 
        if ((y+1) % 2 == 0) {
            for (var x = 0; x < 5; x ++) {
                push();
                translate(x*spacingX, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        } else {
            for (var x = 0; x < 4; x ++) {
                push();
                translate(x*spacingX+70, y*spacingY);
                stroke(255, 215, 188);
                symbol(0, 0);
                angleMode(DEGREES);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                rotate(90);
                symbol(0, 0);
                pop();
            }
        }
    }

function symbol (x,y) {
    push();
    translate(x, y);
    strokeWeight(3);
    beginShape();
    curveVertex(-len-offset*2, -offset);
    curveVertex((-len+offset)/2, -offset);
    curveVertex((-len+offset)/2, -len+offset*2);
    curveVertex(-len+offset*2, -len+offset*2);
    curveVertex(-len+offset*2, (-len+offset)/2);
    curveVertex(-len, (-len+offset)/2);
    curveVertex(-len, -len);
    curveVertex(-offset/2, -len);
    curveVertex(-offset/2, -offset);
    endShape();
    pop();
}

function diamond (x, y) {
    push();
    translate(x, y);
    rectMode(CENTER);
    strokeWeight(0.5);
    line(0, -3*len, 0, 3*len);
    line(-3*len, 0, 3*len, 0);
    strokeWeight(3);
    angleMode(DEGREES);
    rotate(45);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    rotate(90);
    quad(0, 0, -len/2, 0, -2*len/3, -2*len/3, 0, -len/2);
    pop();
}

For the wallpaper project, I wanted to use two shapes that are iterated alternatively. Modulus was used to call out even number lines to shift them to create the final product. Instead of creating the shape under the for loop, I created a separate function for each shape to simplify code. First the diamond shape laid out the grid for me to work with. Then, I was inspired by traditional Korean shape to create the curve shape. In comparison with the Korean traditional pattern, I made the shape with curveVertex to give a fun element. In emphasizing that, I used toned down color for the background and the diamond shape while adding a pop of color for the curve one.

looking outward-05: eroded terrain

This is a 3D rendered work by Chaotic Atmospheres, a Swiss artist. It was created by procedurally simulating the erosion of terrain, resulting in natural-looking reliefs and textures. I was intrigued by the idea of representing natural objects by imitating the natural processes that created them- this piece is as much a simulation as a work of art.

ssharada-project-05

sketch-511.js

//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Project-05


function setup(){
	createCanvas(480,480); //background sizing 
	
} 

function draw(){

	background(255);
	
	for(var y = 4; y< height; y+=10){
		strokeWeight(2);
		stroke(255, 188, 0);
		line(0, y, width, y); //background horizontal lines
	}

	for (var a = 7.5; a<width; a+= 100){
		for (var b = 10; b<height; b+= 100){
			fill(0, 152, 255, 190); //using transparencies to show overlaps in shapes 
			noStroke();
			rect(a,b,50,50) //creating the blue coloured squares
		}
	}
	
	for (var s = 16.5; s<width; s+= 100){
		for (var t = 19; t<height; t+= 100){
			fill(255, 0, 0, 150 );
			noStroke();
			rect(s,t,50,50) //creating the red coloured squares
		}
	}

	for (var c = 50.5; c<width; c+= 100){
		for (var d = 1; d<height; d+= 100){
			fill(155, 4, 148, 120);
			noStroke();
			rect(c,d,25,25) //creating the smaller purple coloured squares
		}
	}

	for (var e = 14.5; e<width; e+= 100){
		for (var f = 66; f<height; f+= 100){
			fill(0, 255, 230, 120);
			noStroke();
			ellipse(e,f,25,25) //creating the larger cyan circles 
		}
	}

	for (var g = 20.5; g<width; g+= 100){
		for (var h = 86; h<height; h+= 100){
			fill(0, 255, 0, 120);
			noStroke();
			ellipse(g,h,10,10) //creating the smaller green circles 
		}
	}

	noLoop();
}

For this project I wanted to play with the overlapping of colours and shapes and lines to see what new objects were created. To do this I started off with the idea of the sketch you can see but decided to change some elements because the whole wallpaper ended up coming out to be too symmetrical. I played with the alpha levels of all the colours to allow the overlaps between the shapes to create new colours and additional spaces.

hannajan-LookingOutwards-05

I discovered and looked at the art of Gustavo Soares. He is a 3D artist that works with archivz and characters. His art especially appealed to me because his aesthetic involved drawing faces that had a cute “clay” like 3-D appearance.

Since this Looking-Outwards theme was about the production of 2D images that depict 3D scenes and objects, I thought his clay-like art was perfect to explore. I am not completely sure which algorithms or the computation methods he used, but in terms of his art, he uses a lot of shadows and highlighting to achieve his 3-D clay effect.

His artistic sensibilities are manifest in the final form through his acute attention to detail. Without this key necessity, his art would not have achieved the perfect 3-D appearance it displays. His art inspires me to pay more attention to the small details that may completely alter the way a whole image is displayed. For example, in my project for this week, I added some simple shadow an highlighting features to give my 2-D like egg a more 3-D look appearance.

looking-outwards-05-ssharada

Absolut Amber from ZEITGUISED on Vimeo.

ZEITGUISED is a collective of international artists and designers working in the fields of sculpture, architecture, fashion and film. Almost impossible to categorise, the Berlin-based studio was founded by German architect Henrik Mauler and American sculpture and fashion designer Jamie Raap in 2001.

The founder was once stated saying “Synthetic poetry and lyrical systems are at the core of what drives our work. It is fair to say that often the music or soundscapes are the origin or pivot of our pieces”

On the outside their projects create a rhythmic, soft flowing fluid, and incredibly tranquillising aesthetic; but in reality are created using technology and synthetic non-physical matter – usually from coded algorithms.
So, when you believe you are seeing silk-like materials, or liquid, natural substances, you’re in fact witnessing pioneering motion graphics accentuated with sound or other stimulus.

LookingOutwards05-jooheek

Creative Miniworld: By Jan Reeh

This is a 3D art piece made by 3D artist Jan Reeh through a computer graphics program. I was very impressed by how much detail the artist portrays in his artwork. No matter how much you zoom, you can see every detail, and the artwork looks so alive. It’s impressive how through computer graphics, you can get art that could look so real and like a photograph. Through computer graphics, you can more detail than you can ever get by drawing or making by hand.

Jan Reeh also shows in a video about this project how he made a 3D template first and overlayed color and visuals over that 3D template, just like how when you physically sculpt something, you make the scaffold first and then overlay color, texture, etc. This made me realize how art does not always have to be about physical making but it can also be made through technology and computers, although the process is the same.