Month: September 2016

sketch

// Grace Cha
//Section C
//heajinc@andrew.cmu.edu
//Project 5: Wallpaper

var y = 0;//the pattern starts at the top of canvas
function setup() {
    createCanvas(640, 480);
    noStroke();
}
function draw() {
    background("#D9D4C8");
    //background("#47505A");
    for(y; y < height + 90; y += 50){
    myTriangles();//the blue triangle
    myTriangles1();//the orange outlined triangles
    }
    noLoop(); // save computation -- no animation
}

function myTriangles(){
    for (var x = - 90; x < width; x += 30){
    fill(82,100,129,110);
    beginShape(TRIANGLES);  //This draws 2 blue triangles
    vertex(x + 10, y);
    vertex(x + 30 , y-55);
    vertex(x + 50, y);
    vertex(x + 70, y-55);
    vertex(x + 90, y);
    vertex(x + 110, y-55);
    endShape();
 }
}

function myTriangles1(){
    for (var x = -90; x < width ; x += 20){
    noFill();
    stroke("#F0A321");
    strokeWeight(1);
    beginShape(TRIANGLES); //This draws 2 outlined orange traingles
    vertex(x + 10, y);
    vertex(x + 30 , y-55);
    vertex(x + 50, y);
    vertex(x + 70, y-55);
    vertex(x + 90, y);
    vertex(x + 110, y-55);
    endShape(); 
 }
}

Process

Wow!  the for loop and nested for loop really eliminate the need for long code.   I was inspired by the traditional “Cradle Quit” color scene/pointy star pattern and the modern plaid sweater(finally sweater weather!) to design my wallpaper. To add a geometric vibe to it, I tried using triangles and overlapping lines to create visual balance.

kdlee-project-05

//Kyle Lee
//Section C

var x = 100;
var y = 100;
var h = 4;
var rowStart = 0;
var columnStart = 60;
var xSpace = 200;
var ySpace = 100;

function setup() {
    createCanvas(600, 600);
    background("#EBF8FF");//light blue
    noStroke();
}

function draw(){
    for (var y = 0; y < 6; y++) {
        var evenOdd = y%2;//creates even or odd rows
        if(evenOdd == 0) {//if row is even make 4 per row
            rowStart = 0;
            h = 4;
        } else if(evenOdd == 1) {//if row is odd make 3 per row
            h = 3;
            rowStart = ySpace;
        }//closes if else
        for (var x = 0; x < h; x++) {
            px = rowStart + x * xSpace;
            py = columnStart + y * ySpace;
            duck(px, py);
        }//closes forloop
    }//closes complete nested forloop
}//closes draw

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

    var headW = 50;
    var headH = 40;
    var headY = -30;
    var bodyW = 40;
    var bodyH = 30;
    var wingW = 30;
    var wingH = 10;
    var mouthY = -20;
    var mouthW = 13;
    var mouthH = 8;
    var eyeX = 10;
    var eyeY = -35;
    var eyeD = 7;
    var footX = 7;
    var footY = 16;
    var footW = 8;
    var footH = 4;

    fill("#FAD438");//yellow
    ellipse(0, headY, headW, headH);//head
    ellipse(0, 0, bodyW, bodyH);//body

    push();//right wing
        rotate(radians(20));
        ellipse(bodyH/2, 0, wingW, wingH);
    pop();
    push();//left wing
        rotate(radians(-20));
        ellipse(-bodyH/2, 0, wingW, wingH);
    pop();

    fill("#FF9D14");//orange
    ellipse(0, mouthY, mouthW, mouthH);

    fill("#534C45");//brown
    ellipse(eyeX, eyeY, eyeD, eyeD);
    ellipse(-eyeX, eyeY, eyeD, eyeD);
    ellipse(footX, footY, footW, footH);
    ellipse(-footX, footY, footW, footH);

    pop();
    noLoop();
}

For my project, I made a repeating pattern of ducks. I could definitely see this pattern on a pair of fun socks, or pj pants, or a short sleeve button up. I created a duck function in which I drew all the individual shapes. I then called upon that function in a for loop to repeat the pattern in a simple pattern.

My original idea for this project was to make a fabric pattern using florals (groundbreaking, I know!). For inspiration, I began by looking at prints from Lilly Pulitzer and Andy Warhol’s floral pop art.  However, as I began playing around with the code, the simple flower I started out with turned into an abstract “centerpiece” surrounded by ellipses that made rectangles around the sides. I ended up with a completely different deliverable, as you can see below.

sketch

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 5
*/
var petalL = 100;
var petalW = 40;
var rot = 45;

function setup() {
    createCanvas(600, 600);
    background("navy");
}

function draw() {

    for (var x = 0; x < 12; x++) {
        for (var y = 0; y < 12; y++) {

            var Petal = petalL * x;
            var innerL = petalL/x;
            var innerW = petalW*y;

            stroke("white");
            strokeWeight(2);
            noFill();

            push();
            translate(width/2, height/2);

            ellipse(0, 0, 25, 25);//center circle

            ellipse(Petal, 0, petalL, petalW);//petals of the right half of the inner "diamond"
            ellipse(Petal, 0, innerL, innerW);//inner petals of the right half of the inner "diamond"

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the upper right half 
            ellipse(Petal, 0, innerL, innerW);//inner petals of the upper right half

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the outer upper right half 
            ellipse(Petal, 0, innerL, innerW);//inner petals of the outer upper right half

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the upper right corner
            ellipse(Petal, 0, innerL, innerW);//inner petals of the upper right corner

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of upper mid right
            ellipse(Petal, 0, innerL, innerW);//inner petals of upper mid right

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the upper left
            ellipse(Petal, 0, innerL, innerW);//inner petals of the upper left

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the mid left
            ellipse(Petal, 0, innerL, innerW);//inner petals of the mid left

            rotate(radians(rot));
            ellipse(Petal, 0, petalL, petalW);//petals of the lower left
            ellipse(Petal, 0, innerL, innerW);//inner petals of the lower left
            pop();
    }
        }
        noLoop();

}

sketch
I was inspired by islamic geometric patterns as well as oriental window seals that overlapped and intersected perpetually. There are three components in this pattern, a vertical line and two zigzag lines. I created my own functions, “vertStrip” and “zigzag” to reduce redundancy in coding the overlapping strips.

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-05
var i; //horizontal loop value for vertical strips
var j; //vertical loop value for vertical strips
var k; //horizontal loop value for black zigzag
var l; //vertical loop value for black zigzag
var m; //horizontal loop value for gray zigzag
var n; //vertical loop value for gray zigzay

function setup() {
	createCanvas(800, 400);
	background(236, 245, 255); //lightblue
											//WHITE VERTICAL STRIPS
	for (j=0; j<height+20; j+=20) {
		strokeWeight(0.5);	
		fill(255, 142, 84); //orange red
		for (i=0; i<width+20; i+=20) {

			if ((i%40)==0) {					//odd number columns
				vertStrip(i, j);
			} else {							//even number columns
				vertStrip(i, j-10);
			}						
		}		
	}
	
											// HORIZONTAL ZIGZAG
	for (l=0; l<height+20; l+=20) {
		
											
		for(k=0; k<width+80; k+=80) {				
			
			if ((l%40)==0) {				//ODD ROWS
				fill(160, 255, 99);//green			//draws green zigzag strips
				zigzag(k, l);					
				
				fill(78, 232, 194);					//draws turquois zigzag strips	
				zigzag(k+20, l+10);					
			} else {						//EVEN ROWS
				fill(160, 255, 90);					//draws green zigzag strips
				zigzag(k-40, l);

				fill(78,232,194);
				zigzag(k+-20, l+10);			 	//draws turquois zigzag strips
			}
		}	
	}
	noLoop();
}

function vertStrip(i,j) {
	beginShape();						//function that draws vertical strips
	vertex(i, j+5);
	vertex(i+5, j+2.5);
	vertex(i+5, j+17.5);
	vertex(i, j+20);
	endShape(CLOSE);	
}

function zigzag(k, l) {					//function that draws zigzag strips
	beginShape();						//all vertex of shapes are listed clockwise
	vertex(k-15, l+2.5);
	vertex(k-10, l+5);
	vertex(k-15, l+7.5);
	endShape(CLOSE);

	beginShape();
	vertex(k-10, l+5);
	vertex(k+5, l-2.5);
	vertex(k+10, l);
	vertex(k-5, l+7.5);
	endShape(CLOSE);

	beginShape();
	vertex(k+10, l);
	vertex(k+15, l-2.5);
	vertex(k+20, l);
	vertex(k+20, l+5);
	endShape(CLOSE);

	beginShape();
	vertex(k+25, l+2.5);
	vertex(k+30, l+5);
	vertex(k+50, l-5);
	vertex(k+60, l);
	vertex(k+60, l+5);
	vertex(k+50, l);
	vertex(k+30, l+10);
	vertex(k+25, l+7.5);
	endShape();
}

sketch

// Sarita Chen
// Section A
// slchen@andrew.cmu.edu
// Project: Wallpaper
function setup() {
    createCanvas(600, 600);
    noLoop();
}



function draw() {

	
	background(90,230,255); // Blue.
	
	for(var x = 0; x < width + 4; x +=60){  
		for(var y = 0; y < height; y += 80){
			luigi(x,y); // draws the function "luigi"
		}
	}	
}
	// luigi design
	function luigi(x,y) {   

		noStroke();
		var hairC = ('YellowGreen');
		var skintone = ('Orange');
		var clothes = (255);
		var buttons = ('Gold');
		var pixel = 2.5;
		


		// Note: the side comments refer to the number of squares each line
		// produces.

			// Line 1
				
			fill(clothes);
			rect(x+10*pixel,y,pixel*5,pixel); //
			

			// Line 2
			
			fill(clothes);
			rect(x+9*pixel,y+pixel,pixel*9,pixel); // 9 white
			

			//Line 3
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*2,pixel*3,pixel); // 3 green 
			

			
			fill(skintone); 
			rect(x+12*pixel,y+pixel*2,pixel*2,pixel); //2 orange
	
			fill(hairC);
			rect(x+14*pixel,y+pixel*2,pixel,pixel); // 2 green
			
			fill(skintone);
			rect(x+15*pixel,y+pixel*2,pixel,pixel); // 1 orange
			

			//Line 4
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*3,pixel,pixel);  // 1 green

			
			fill(skintone);
			rect(x+9*pixel,y+pixel*3,pixel,pixel); // 1 orange

			
			fill(hairC);
			rect(x+10*pixel,y+pixel*3,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+11*pixel,y+pixel*3,pixel*3,pixel); // 3 orange
				

			
			fill(hairC);
			rect(x+14*pixel,y+pixel*3,pixel,pixel); // 1 green
		

			fill(skintone);
			rect(x+15*pixel,y+pixel*3,pixel*3,pixel); // 3 orange
				

			//Line 5

			fill(hairC);
			rect(x+8*pixel,y+pixel*4,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+9*pixel,y+pixel*4,pixel,pixel); // 1 orange

			
			fill(hairC);
			rect(x+10*pixel,y+pixel*4,pixel*2,pixel); // 2 green

			
			fill(skintone);
			rect(x+12*pixel,y+pixel*4,pixel*3,pixel); // 3 orange
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*4,pixel,pixel); // 1 green

			
			fill(skintone);
			rect(x+16*pixel,y+pixel*4,pixel*3,pixel); //3 orange

			
			// Line 6

			fill(hairC);
			rect(x+8*pixel,y+pixel*5,pixel*2,pixel);  // 2 green

			
			fill(skintone);
			rect(x+10*pixel,y+pixel*5,pixel*4,pixel); // 4 orange
			
			fill(hairC);
			rect(x+14*pixel,y+pixel*5,pixel*4,pixel);  // 4 green

		
			fill(skintone);
			rect(x+10*pixel,y+pixel*6,pixel*7,pixel);  // 7 orange
			
			//Line 8
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*7,pixel*2,pixel); // 2 green
			
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*7,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+12*pixel,y+pixel*7,pixel*3,pixel); // 3 green
			
			//Line 9
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*8,pixel*3,pixel); // 3 green
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*8,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+12*pixel,y+pixel*8,pixel*2,pixel); // 2 green
			
			fill(clothes);
			rect(x+14*pixel,y+pixel*8,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*8,pixel*3,pixel); // 3 green
			
			//Line 10
			
			fill(hairC);
			rect(x+7*pixel,y+pixel*9,pixel*4,pixel); // 4 green
			
			fill(clothes);
			rect(x+11*pixel,y+pixel*9,pixel*4,pixel); // 4 white
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*9,pixel*4,pixel); // 4 green
			

			// Line 11
			
			fill(skintone);
			rect(x+7*pixel,y+pixel*10,pixel*2,pixel); // 2 orange
			
			fill(hairC);
			rect(x+9*pixel,y+pixel*10,pixel,pixel); // 1 green
			
			fill(clothes);
			rect(x+10*pixel,y+pixel*10,pixel,pixel); // 1 white
			
			fill(buttons);
			rect(x+11*pixel,y+pixel*10,pixel,pixel); // 1 yellow
			
			fill(clothes);
			rect(x+12*pixel,y+pixel*10,pixel*2,pixel); // 2 white
			
			fill(buttons);
			rect(x+14*pixel,y+pixel*10,pixel,pixel); // 1 yellow
			
			fill(clothes);
			rect(x+15*pixel,y+pixel*10,pixel,pixel); // 1 white
			
			fill(hairC);
			rect(x+16*pixel,y+pixel*10,pixel,pixel); // 1 green
		
			fill(skintone);
			rect(x+17*pixel,y+pixel*10,pixel*2,pixel); // 2 orange
			

			//Line 12
		
			fill(skintone);
			rect(x+7*pixel,y+pixel*11,pixel*3,pixel); // 3 orange
		
			fill(clothes);
			rect(x+10*pixel,y+pixel*11,pixel*6,pixel); // 6 white
	
			fill(skintone);
			rect(x+16*pixel,y+pixel*11,pixel*3,pixel); // 3 orange
		
			// Line 13
			
			fill(skintone);
			rect(x+7*pixel,y+pixel*12,pixel*2,pixel); // 2 orange
			

				
			fill(clothes);
			rect(x+9*pixel,y+pixel*12,pixel*8,pixel); // 8 white
			
			
			fill(skintone);
			rect(x+17*pixel,y+pixel*12,pixel*2,pixel); // 2 orange
		
			// Line 14
			
			fill(clothes);
			rect(x+9*pixel,y+pixel*13,pixel*3,pixel); // 3 white
			
			fill(clothes);
			rect(x+14*pixel,y+pixel*13,pixel*3,pixel); // 3 white
			

			// Line 15
			
			fill(hairC);
			rect(x+8*pixel,y+pixel*14,pixel*3,pixel); // 3 green
		
			fill(hairC);
			rect(x+15*pixel,y+pixel*14,pixel*3,pixel); // 3 green
			
			// Line 16
			
			fill(hairC);
			rect(x+7*pixel,y+pixel*15,pixel*4,pixel); // 4 green
			
			fill(hairC);
			rect(x+15*pixel,y+pixel*15,pixel*4,pixel); // 4 green
			



			}

			

I wanted to make my wallpaper 8bit style, so I decided to recreate an 8bit version of Luigi from the older Super Mario games. I used an image I found here, which made it convenient as I could easily count the number of “pixels” used to create the image. Actually making the Luigi function took up the most time, because I had initially started off by having a for loop generate the squares for each line.That actually made it harder for me to put the function in a for loop to generate the wallpaper, because it was too many variables to handle so I had to go back and reedit everything… Anyways, I’m happy with the final result! I tried to make the colours as vibrant as possible, since Super Mario is a very bright, cheerful game.