Section B – Page 24 – [OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice

hannajan-05-Wallpaper

//Hanna Jang 
//Section B 
//hannajan@andrew.cmu.edu 
//Project 05

var space1=10; 
var space2=40; 
var space3=30; 
var area=80; 
var area2=5
var px; 
var py; 

function setup () {
	createCanvas(400, 400); 
	background(255, 201, 227);
	noStroke(); 
	}

function draw() {
for (var y=0; y<5; y++) {
		for (var x=0; x<5; x++) {
		
		//plate shadows
		px=space1+x*area;
		py=space1+y*area; 
		fill(102, 20, 79); 
		rect(px, py, space3*2+7, space3*2+7); 
		
		//plates  
		fill(255, 128, 159); 
		rect(px, py, space3*2, space3*2); 
		
		//egg white circle 1
		px=space3+x*space2*2;
		py=space3+y*space2*2; 
		fill(255); 
		ellipse(px, py, space3, space3); 
		
		//egg white circle 2
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(255); 
		ellipse(px, py, space2+3, space2+3); 
		
		//egg white circle 3
		px=space3+3+x*area;
		py=space3+3+y*area; 
		fill(255); 
		ellipse(px, py, space3+2, space3+2); 
		
		//yolk shadows 
		px=space2+5+x*area;
		py=space2+5+y*area; 
		fill(203, 141, 15); 
		ellipse(px, py, 3+area2*4, 3+area2*4); 
		
		//yolk
		px=space2+3+x*area;
		py=space2+3+y*area; 
		fill(255, 181, 75); 
		ellipse(px, py, area2*4, area2*4); 
		
		//yolk shine 
		px=space2+x*area;
		py=space2+y*area; 
		fill(255); 
		ellipse(px, py, area2, area2); 
		
		}
	}
}

For this project, I wanted to make patterns with one of my favorite foods: eggs. I first sketched out a basic grid design I wanted to use as plates for the eggs (as seen in the image above). I was also inspired by the theme for this week’s Looking Outwards and wanted to give a 2-D image a more 3-D look. I did this using some simple shadows to also add a 3-D element and am quite happy with the repeated pattern overall.

nayeonk1-LookingOutwards-05

Do you think she is just a normal high school girl from japan? Actually, she is not real for real. She is a virtual character created by a graphic design team name ‘Telyuka’. But she looks like real, acts like real, and she is even competing with real girls in real idol audition right now in japan.

When I saw the picture at the first time, I thought ‘well, she’s pretty but little bit feel like a doll. Too much photoshop.’And after I found out she is a just virtual character, I was surprised by the fact that I don’t feel any uncanny valley which is a huge problem for any computer graphic characters in video game and movies.

Team ‘Telyuka’ said they want to create ‘virtual human’ with personality and feelings communicating with people. They also interviewed that it’s still on progress of developing more realistic modeling of her since she looks less human in the moving video than a still picture. I also think that if they can compensate the current problem with moving and voice, some people would be reasoned she’s alive.

Team Telyuka

Jonathan Perez Project 5

sketch

//Jonathan Perez
//Section B
//jdperez@andrew.cmu.edu
//Assignment-01
function setup() {
    createCanvas(480, 480);
    pixelDensity(3.0);
}

function draw() {
    background(51, 116, 173); //pale blue
    drawGrid(); //diagonal grid of black and white lines
    for(x = 120; x < width + 240; x += 240) { //spacing to fit within gridwork givin
        for(y = 0; y < height + 120; y += 120) {
        push();
            if((y+120)%240 == 0 ) {
                translate(-120, 0); //acounts for the alternating horizontal positions among rows
            }
        drawTile(x, y); // draws image in tile with givin x, y coordinates as center
        rectMode(CENTER);
        noStroke();
        rect(x-120, y, 20, 20); //black blocks between tiles
        pop();
        }
    }
    noLoop();
    
    
}

function drawGrid() {
    for(x = 0; x < width + 480; x+= 120) { //lines spaced 120 pixels apart horizontally
        if(x%240 == 0 || x == 0) {
            stroke(0); //black lines every other line
            } else {
            stroke(220); //whitish grey lines otherwise
            }
        line(x, 0, x-480, height); //positive 45 degree slope lines
        line(x-480, 0, x, height); //negative 45 degree slope lines
    }
}

function drawTile(x, y) {
    push();
    translate(x, y); //move center of tile
    fill(255);
    stroke(0);
    strokeWeight(1);
    for(j = 0; j < 4; j++){ //rotates long diamonds 90 degrees 4 times
        push();
        rotate(j*PI/2);
        fill(230);
        quad(-100, 0, -50, -12, 15, 0, -50, 12); //long horizontal diamond shape
        stroke(0);
        strokeWeight(1);
        line(-70, 0, -40, 0); //line detail on horizontal diamond
        pop();
    }


    strokeWeight(1.5);
    rectMode(CENTER);
    fill(179, 91, 141); //darker lilac purple
    rect(0, 0, 65, 65); //underlying square
    fill(175, 162, 208); // light lilac
    for(i = 0; i < 4; i++) {
        push();
        rotate(i*PI/2);
        translate(-25, 0);
        quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
        pop();
    }
    // push();
    // translate(-25, 0);
    // quad(-25, 0, 0, -20, 20, 0, 0, 20); //lefthand diamond
    // pop();
    // push();
    // translate(25, 0);
    // quad(-20, 0, 0, -20, 25, 0, 0, 20); //righthand diamond
    // pop();
    // push();
    // translate(0, 25);
    // quad(-20, 0, 0, -20, 20, 0, 0, 25); //lower central diamond
    // pop();
    // push();
    // translate(0, -25);
    // quad(-20, 0, 0, -25, 20, 0, 0, 20); // upper central diamond
    // pop();
    fill(255, 220, 80); //pollen yellow
    quad(-25, 0, 0, -25, 25, 0, 0, 25); //central diamond
    pop();
    
}

The original inspiration for this paper was the old victorian floral wallpaper style… I tried to work in an organic subject and organic style with distinctly computer generated graphics (using geometric, sharp lines).

My first sketches were playing with overlapping diamond shapes, and feeling out what could be feasible to accomplish with my code.

As I started trying to implement these sketches and concepts into practice, I had to cut out some details I originally wanted to be a part of the wallpaper. The canvas I was working with was a 480×480 block, not a wall, and quickly became cluttered. So, my artistic direction for the project quickly adapted to a simpler aesthetic.

To be honest, the bulk of the work in this project for me was deciding what details to keep, and what to get rid of… I think I was moderately successful. I think this is a project I will return to, and see if I can keep it from being cluttered, but still improve the aesthetics of it. Currently, I think the color scheme and horizontal vs. diagonal lines are what carry the appeal of this wallpaper.

SaveSaveSaveSave

jamieh-Looking-Outwards-05

Diego Querol is a 3D artist and renders interior spaces as if the render itself was a photograph taken on site. He uses the modeling tool 3ds Max and rendering tool VRay to generate his renders. The entire process of generating an interior render starts from finding inspiration images on composition and details that could hint stories to modeling the interior pieces to adding textures and light. Within the process of rendering in VRay, the scale of the textures must match with reality and the multiple lighting options must be adjusted in a way that would enhance the rendering. For example, the scale of the pattern on the wood cannot be too big or small. And the treatment of glass and reflective surfaces because of the way light behaves on such surfaces (light is absorbed, transmitted and reflected on glass).

This type of artwork can bring a space to reality, which was once imagined. Querol also spends a lot of time and effort focusing on adding in details and filling the space with what is needed in order to convey a story or an atmospheric environment. This can be seen through his Arts and Crafts (below) rendered artwork, which is one of my favourite works of his.

Nayeon-Project05-WallPaper

nayeonk1

//Na-yeon Kim
//15-104, B section
//nayeonk1@andrew.cmu.edu
//Project-05 (WallPaper)

function setup() {
    createCanvas(451, 600);
    background(255);
    noStroke();
}

function draw() {
  //background pattern
    for (var x = 0; x < width + 50; x += 50) {
      for (var y = 0; y < height + 50; y += 50) {
        fill(230, 130, 90, 100);
        ellipse(x, y, 100, 100);
      }
    }
  //white lines
    var x = 0;
    var y = 0;
    var len = height;
    var spacing = 50;

    for (var x = 25; x < width; x += spacing) {
  //white lines_thick line
      strokeWeight(8);
      stroke(255, 200);
      line(x, y, x, y + len);
  //white lines_thin lines
      strokeWeight(2);
      stroke(255, 180);
      line(x + 8, y, x + 8, y + len);
      line(x + 42, y, x + 42, y + len);
    }
  //flowers
    push();
    var px = 0;
    var py = 0;
    for (var px = 0; px < width; px += spacing) {
      for (var py = 0; py < height + 50; py += 50) {
      flower(px, py);
    pop();
    }
  }
    noLoop();
}
  //flower draw function
  function flower(px, py) {
    push();
    translate(px, py);
    noStroke();
    for (var i = 0; i < 6; i ++) {
      fill(250, 80, 60);
      ellipse(0, 0, 6, 15);
      rotate(PI/4)
      fill(255);
      ellipse(0, 0, 3, 3);
    }
  }

I got inspired by this wallpaper. It reminds me of grandparents house.

From this image, I tried to make something similar, but using loop function and shapes. It was fun to manipulate some var and loops to create different images. Changing small position creates whole other images.

Matthew Elrebacher Looking Outward-05

One piece of 3D art that I found to be very interesting was “I am no Chuck Close” by Patrick Gunderson. I find the piece to be strangely mesmerizing. It is obvious that it is supposed to be a face, but the disjointed appearance of the piece gives it a feeling of unease. A big part of this is how the eyes are obscured. I also feel that the green background gives me the impression that the face is lost in time. This is further enforced by the random crescent moon shapes put around the canvas. The algorithms used to create this were likely very complex. I assume he used a large amount of loop variables to create lines, as well as geometric shapes. It is also possible that he worked on this in a modeling program such as maya or blender.

Gunderson, Patrick. “I Am No Chuck Close.” Flickr, Yahoo!, 11 Mar. 2009, www.flickr.com/photos/gunderson/3345620341/in/photostream/.

jamieh-project-05-wallpaper

I first started with picking the colour palette for the background triangles, then took inspiration from cherry blossom trees and its changes over time with blue representing winter and pink representing summer.

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 5
*/

var SIZE = 50;
var c1x = 0; 	//top L (TL) corner X
var c1y = 0;	//top L (TL) corner Y
var c2x = 50;	//top R (TR) corner X
var c2y = 0;	//top R (TR) corner Y
var c3x = 0;	//bottom L (BL) corner X
var c3y = 50;	//bottom L (BL) corner Y
var c4x = 50;	//bottom R (BR) corner X
var c4y = 50;	//bottom R (BR) corner Y
var ratio = 0.5;
var ratio2 = 2/3;
var snow = 5;
var petal = 6;

function setup() {
    createCanvas(400, 350);
    background(0);
    
    noLoop();
}

function draw() {
	
	for(var h = 0; h < width/SIZE; h++){
		for(var v = 0; v < height/SIZE; v++){
			r = map(h, 0, width/SIZE, 155, 255);
  			b = map(v, 0, height/SIZE, 155, 255);

  			fill(r, b, b);
  			strokeWeight(0.5);
  			if(h < 4){									//Left half
	  			if(v%2 == 0){							//odd rows
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c3x+h*SIZE, c3y+v*SIZE);	
					stroke(255);
					triangle(c2x+h*SIZE, c2y+v*SIZE,	//Right angle @ corner 4 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);
					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x*ratio*ratio+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow, snow);
					
					//snow pile
					bezier(c3x+h*SIZE, c3y+v*SIZE,
						   c1x+c2x*ratio2*ratio+h*SIZE, c4y-ratio*ratio*ratio+v*SIZE,
						   c1x+c2x*ratio*ratio+h*SIZE, c4y-c4y*ratio*ratio2+v*SIZE,
						   c4x+h*SIZE, c4y+v*SIZE);
					pop();	

				} else {
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 2 (TR)
							 c2x+h*SIZE, c2y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);	
					stroke(255);
					triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
							 c3x+h*SIZE, c3y+v*SIZE,
							 c4x+h*SIZE, c4y+v*SIZE);

					push();
					//branches
					stroke(0);
					strokeWeight(0.5);
					line(c4x*ratio*ratio+h*SIZE, c4y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
					line(c2x+h*SIZE, c2y+v*SIZE,
						 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

					//snow
					noStroke();
					fill(255);
					ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow, snow);
					ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
					pop();
				}		


			} else {										//Right half
				if(v%2 != 0){								//odd rows						
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 4 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);
						line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+(c4x-c4x*ratio*ratio)+h*SIZE, c4y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

						//flower (EVEN)
						noStroke();
						fill(255, 102, 140);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);

						pop();

					} else {
						stroke(255);
						triangle(c3x+h*SIZE, c3y+v*SIZE,	//Right angle @ corner 2 (TR)
								 c2x+h*SIZE, c2y+v*SIZE,
								 c4x+h*SIZE, c4y+v*SIZE);	
						stroke(255);
						triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
								 c3x+h*SIZE, c3y+v*SIZE,
								 c2x+h*SIZE, c2y+v*SIZE);

						push();
						//branches
						stroke(0);
						strokeWeight(1);						
						line(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
						line(c3x+h*SIZE, c3y+v*SIZE,
							 c4x*ratio+h*SIZE, c4y*ratio+v*SIZE)

					//flower
						noStroke();
						fill(255, 102, 140);
						//centre flower (ODD)
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
						//on line flower
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal, petal/ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal/ratio, petal);
						//edge line flower
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal, petal/ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal/ratio, petal);
						//white centre
						fill(255);
						ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal*ratio, petal*ratio);
						ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal*ratio, petal*ratio);
						pop();
					}		
				}
			}
	}
}

One of my challenges was trying keeping track of my variables, especially for the x and y coordinates of the corners that help me generate each triangle/square. I also had difficulty trying to shorten the code, which I know I can create my own function and call it, but I couldn’t figure out how to make sure it wouldn’t confuse my corner variables.

ctv-Project-05-Wallpaper

sketch

//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-05

//canvas size
var cWid = 470;
var cHgt = 470;

//blockForm size
var wid = 50;
var hgt = 70;

//counter
var i = 0;

//some traits of circles and lines
var dia = wid;
var wght = 1;

//points shapes interact with
var xZero = 0;
var xOne = wid*.25;
var xTwo = wid*.5;
var xThree = wid*.75;
var xFour = wid;
var x = [xZero, xOne, xTwo, xThree, xFour];

var yZero = 0;
var yOne = hgt*.25;
var yTwo = hgt*.5;
var yThree = hgt*.75;
var yFour = hgt;
var y = [yZero, yOne, yTwo, yThree, yFour];


function setup() {
    createCanvas(cWid, cHgt);
    
    //splits canvas into cells for each pattern block
    //x-axis
    for(xOff=0; xOff<=cWid/wid; xOff++){
        
        //y-axis
        for(yOff=0; yOff<=cHgt/hgt*2; yOff++){
            
            //calls helper function bg(), sends coordinates
            draw(xOff, yOff);
        }
    }
}


function draw(xOff, yOff){

    ellipseMode(CENTER);
    stroke(200);
    strokeWeight(1);
    
    
    //
    for(i=0; i<xOff; i++) {
        for(j=0; j<yOff; j++){
            
            
    //creates an offset variable for the shapes        
    var xOffset =  i * xOne;
    var yOffset = j * yFour;
            
    strokeWeight(wght);
    
    //rightDownLines
    line(xOne + xOffset, yZero + yOffset, xFour + xOffset, yFour + yOffset);

    
    //leftDownLines
    line(xThree + xOffset, yZero + yOffset, xZero + xOffset, yFour + yOffset);

    //verticalLines
    line(xZero + xOffset*2, yZero + yOffset, xZero + xOffset*2, yFour + yOffset);

    
    //horizontalLines
    line(xZero + xOffset*4, yZero + yOffset/2, xFour + xOffset*4, yZero + yOffset/2);

    
    //ellipses
    noFill();
    ellipseMode(CENTER);
    ellipse(xZero + xOffset*4, yOne + yOffset+8, dia, dia);        
        }
    }
}

This project is based around the Modernist movement (minus color). I am interested in proportions of shape and axis of movement within a static structure. This grid is loosely based on a project I am starting to work on for designing a typeface. Type has four major components: horizontal strokes, vertical strokes, diagonal strokes, and curves. This grid is a dissociation of those elements.

cchau1 – Project05 – Wallpaper

sketch


var w = 60; //adjusts the spacing between seeds
var h = 60; //adjusts vertical distance between seeds
var spaceY = 30; //y-circle offset
var spaceX = 30; //x-circle offset
var rad; //radius of circle component of "seed"
var wid; //width of rectangle component of "seed"
var x = 1;
var y = 1;
var columns;
var spacing = 10; //for the white lined grid-feature

function setup() {
    createCanvas(480, 480);
    background(255,174,185);

    for (var x = 0; x < height; x++) {
      strokeWeight(1.5)
      stroke(255);
      noFill();
      rect(x*spacing,x*spacing,width-50,height-150);
    } //this creates the white lines on the pink watermelon flesh
  //wanted to maintain the "square grid" feature in the corners of the
  //watermelon flesh so I subtracted from the canvas dimensions

    noStroke(); //colors of the rind
    fill(141,213,149);
    rect(0,height-100,width,height);
    fill(56,167,69);
    rect(0,height-60,width,height);
    fill(49,141,60);
    rect(0,height-40, width, height);


    var rowChange = 7;
    for (var row = 0; row < 6; row++) {
      if(row%2==0) {
        rad = 10;
        w = 420/7;
        spaceX = 60;
        wid = 5;
        columns = 7;
      } else{
        rad = 24;
        w = 60;
        spaceX = 30;
        columns = 8;
        wid = 12;
      }

//loop draw the "seeds" and depending on the row #, will alternate
      for (var col = 0; col < columns; col++){
        var py = spaceY + row * h;
        var px = spaceX + col * w;
        fill(52,54,52);
        rect(px,py,wid,wid);
        console.log(px, py);
        ellipse(px, py,rad);
      } //the combination of a square on top of an ellipse creates
        //the shape of a "seed"

    }

    noLoop();
}

function draw() {
}

I decided to go for a design that would be more like an entire motif rather than small objects. I had other ideas to do things such as leaves or flowers but after having Founder’s Day for CMU constantly surrounding me, I chose to go for something more quirky: a watermelon. I had some struggle creating the perfect seed “shape” but got a little more creative by overlaying the square on top of the ellipse (using math). I didn’t want to add too much detail since I was going for a more minimalist approach: seeds, rind, and for added “texture”, a loop of rectangles that also crossed to create an eye-catching “grid” design in the corners of the flesh (if you look closely at watermelon, you will see these little white veins).

ctv-Looking Outward-05

https://www.behance.net/gallery/5126039/Structural-Surface-Experiments

This designer, Levente Gyulai,

made many sketches using a Rhino 3D model software and a plugin called Grasshopper. The plugin is a drag & drop-based programming software that allows creators to quickly make complex generative forms. In the program, parameters are used to tweak surfaces in three-dimensional space. Gyulai’s work is organically inspired, and appears to grow into a form. Grasshopper allows the surfaces to be manipulated on any scale, micro and macro. The type of control allows for complex (and interesting) 3D forms; in this piece, the designer uses large, sweeping curves to create the outside forms with fine tubes on the inside. Although I have not used the Grasshopper plugin, I have used a program structured similarly (Max/MSP) to create generative 3D video art. I love the visual nature, of drag and drop programming languages because it allows me to think about the logic of a program. Coding in P5.JS allows for more detail and complexity than Max/MSP. When coding, if I can’t figure out the logic of what I want to do, I will do a quick sketch in Max/MSP.