Project 5 Liz Maday

final wallpaper

function setup() {
	createCanvas(600, 600);
	strokeWeight(0.5);
}

function draw() {
	background(247, 140, 142);
	//center banana line starting left
	for (i = 0; i < 13; i += 1) {
		var startX = 25;
		var startY = 25;
		var bananaX = (startX * i * 2);
		var bananaY = (startY * i * 2);	
		banana(bananaX, bananaY);
		banana2(bananaX, bananaY);
	}
	//banana line below center line, starting left
    for (i = 0; i < 7; i += 1) {
    	var startX3 = 25;
    	var startY3 = 25;
    	var bananaX3 = startX3 * i * 2;
    	var bananaY3 = (startY3 * i * 2) + 200;
		banana(bananaX3, bananaY3);
		banana2(bananaX3, bananaY3);    	
    }
   	//2nd banana line below center line, starting left
    for (i = 0; i < 5; i += 1) {
    	var startX4 = 25;
    	var startY4 = 25;
    	var bananaX4 = startX4 * i * 2;
    	var bananaY4 = (startY4 * i * 2) + 400;
		banana(bananaX4, bananaY4);
		banana2(bananaX4, bananaY4);    	
    }
    //banana line above center line, starting left
    for (i = 0; i < 7; i += 1) {
    	var startX5 = 25;
    	var startY5 = 25;
    	var bananaX5 = (startX5 * i * 2) + 200;
    	var bananaY5 = (startY5 * i * 2);
		banana(bananaX5, bananaY5);
		banana2(bananaX5, bananaY5);    	
    }   
    //2nd banana line above center line, starting left
    for (i = 0; i < 3; i += 1) {
    	var startX6 = 25;
    	var startY6 = 25;
    	var bananaX6 = (startX6 * i * 2) + 400;
    	var bananaY6 = (startY6 * i * 2);
		banana(bananaX6, bananaY6);
		banana2(bananaX6, bananaY6);    	
    }  
	//center banana line starting right
	for (i = 0; i < 12; i += 1) {
		var startX2 = width - 100;
		var startY2 = 25;
		var bananaX2 = startX2 - (i * 25 * 2);
		var bananaY2 = startY2 * i * 2;	
		banana(bananaX2, bananaY2);
		banana2(bananaX2, bananaY2);
	}
	//banana line below center line, starting right
	for (i = 0; i < 9; i += 1) {
		var startX7 = width - 100;
		var startY7 = 25;
		var bananaX7 = (startX7 - (i * 25 * 2)) + 100;
		var bananaY7 = (startY7 * i * 2) + 100;	
		banana(bananaX7, bananaY7);
		banana2(bananaX7, bananaY7);
	}	
	//2nd banana line below center line, starting right
	for (i = 0; i < 9; i += 1) {
		var startX8 = width - 100;
		var startY8 = 25;
		var bananaX8 = (startX8 - (i * 25 * 2)) + 200;
		var bananaY8 = (startY8 * i * 2) + 200;	
		banana(bananaX8, bananaY8);
		banana2(bananaX8, bananaY8);
	}
	//banana line above center line, starting right
	for (i = 0; i < 11; i += 1) {
		var startX9 = width - 100;
		var startY9 = 25;
		var bananaX9 = (startX9 - (i * 25 * 2)) - 100;
		var bananaY9 = (startY9 * i * 2) - 100;	
		banana(bananaX9, bananaY9);
		banana2(bananaX9, bananaY9);
	}		
	//2nd banana line above center line, starting right
	for (i = 0; i < 11; i += 1) {
		var startXa = width - 100;
		var startYa = 25;
		var bananaXa = (startXa - (i * 25 * 2)) - 300;
		var bananaYa = (startYa * i * 2) - 100;	
		banana(bananaXa, bananaYa);
		banana2(bananaXa, bananaYa);
	}
	//kiwi loop
	for (x = 0; x < 7; x += 1) {
		for (y = 0; y < 8; y += 1) {
			var indent = 0;
			if (y % 2 === 0) {
                indent = 100;
			} else {
				indent = 0;
			}
			kiwi((x * 200) + indent, y * 100);
		}
	}
    //additional bananas
	banana(-50, -50);
	banana2(-50, -50);
	banana(width - 50, -50);
	banana2(width - 50, -50);
}
//banana part 1
function banana(x, y) {
    strokeWeight(0.5);
    push();
    translate(x, y);
    beginShape();
    fill(247, 190, 0);
    strokeWeight(.5);
	vertex(30, 20);
	bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
	bezierVertex(50, 80, 60, 25, 30, 20); //inner curve
	endShape();
	fill(99, 66, 29);
	ellipse(30, 20, 10, 10); //banana tip
	noFill();
	strokeWeight(1);
	stroke(99, 66, 29);
	bezier(30, 20, 70, 25, 70, 65, 36, 75);//banana line
	pop();
}

//banana part 2
function banana2(x, y) { 
	push();
	translate(x, y);
	beginShape();
	fill(235, 150, 70);
	vertex(30, 20);
	bezierVertex(80, 20, 80, 75, 30, 75); //outer curve
	bezierVertex(70, 70, 70, 25, 30, 20); //inner curve
	endShape();
	pop();
}

//kiwi
function kiwi(x, y) {
	push();
	translate(x, y);
	fill(124, 83, 36);
	bezier(101 - 100, 25 - 39.5, 71 - 100, 25 - 39.5, 71 - 100, 60 - 39.5, 101 - 100, 54.5 - 39.5); //brown

	fill(120, 210, 0); 
	ellipse(0, 0, 26.5, 29.5); //green

	fill(0);
	ellipse(0, 0, 17, 14); // black

	fill(255, 228, 148); 
	ellipse(1, 0, 15, 10); //beige
	pop();
}

 

 

 

 

 

 

I really enjoyed doing this project because of the simple premise, but how rewarding it was to see the iteration of a simple design. I experimented more than I had in the past with making shapes look three dimensional (using different colors to indicate shadow for the bananas, using bezier to make the partial profile of the kiwi). I also enjoyed finding the colors that matched what I was seeing in my head. I was glad to have had a basic understanding of how modulus works in creating this project.

 

Xiaoying Meng- Project 05 Wallpaper

sketch

var tw=17;
var th=25;
function setup() {
    createCanvas(600, 300);
    background(218,235,209);
}

function draw() {
    //background
    for (var z=5; z<600; z=z+25){
        for(var b=2; b< 300; b= b+20){
                    ellipse(z,b,0.1,0.1);
        }
    }

    for (var x=1; x<7; x++){
        for (var y=1; y<5; y++){

            //pot
            if (x%2===1){
                fill(234,186,195);
            }
            else {
                fill(166,203,221);
            }

            stroke(0);
            strokeWeight(0.5);
            rect(x*tw*5,y*th*2.5,20,23);
            line(x*tw*5,y*th*2.5+5,x*tw*5+20,y*th*2.5+5);

            //plant
            
            fill(61,133,50);
            //middle part
            beginShape();
            curveVertex(x*tw*5+5,y*th*2.5);
            curveVertex(x*tw*5+5,y*th*2.5);
            curveVertex(x*tw*5+5,y*th*2.5-9);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+15,y*th*2.5-9);
            curveVertex(x*tw*5+15,y*th*2.5);
            curveVertex(x*tw*5+15,y*th*2.5);
            endShape();

            //left part

            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-20);
            curveVertex(x*tw*5+7,y*th*2.5-25);
            curveVertex(x*tw*5,y*th*2.5-27);
            curveVertex(x*tw*5-5,y*th*2.5-20);
            curveVertex(x*tw*5,y*th*2.5-15);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();

            //right part
            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-20);
            curveVertex(x*tw*5+7,y*th*2.5-25);
            curveVertex(x*tw*5,y*th*2.5-27);
            curveVertex(x*tw*5-7,y*th*2.5-25);
            curveVertex(x*tw*5-5,y*th*2.5-20);
            curveVertex(x*tw*5,y*th*2.5-15);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();

            beginShape();
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+15,y*th*2.5-15);
            curveVertex(x*tw*5+20,y*th*2.5-25);
            curveVertex(x*tw*5+22,y*th*2.5-30);
            curveVertex(x*tw*5+13,y*th*2.5-28);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            curveVertex(x*tw*5+10,y*th*2.5-13);
            endShape();
            // dots

            noFill();
            strokeWeight(1);
            ellipse(x*tw*5,y*th*2.5-25,1,1);
            ellipse(x*tw*5-2,y*th*2.5-20,1,1);
            ellipse(x*tw*5+5,y*th*2.5-17,1,1);
            ellipse(x*tw*5+10,y*th*2.5-9,1,1);
            ellipse(x*tw*5+7,y*th*2.5-3,1,1);
            ellipse(x*tw*5+15,y*th*2.5-7,1,1);
            ellipse(x*tw*5+15,y*th*2.5-20,1,1);
            ellipse(x*tw*5+20,y*th*2.5-27,1,1);



        }
    }

noLoop();
}

I created this wallpaper choosing my favorite plant cactus. I first sketched out the cactus I want to draw. After I finished the code for the plants, I decided to add dots to the background and switching the color for the pots to make it a little more interesting.

jacky-project-05

sketch

function setup() {
    createCanvas(600, 400);
    background(128, 128, 128);
    var tw = 60;
    var th = 60;
    var oy = 25;
    var ox = 5;

    for (var y = 0; y < 6; y++) {
        for (var x = 0; x < 10; x++) {
            var py = oy + y * th;
            var px = ox + x * tw;
           
            strokeWeight(0);
            fill(200, 190,  100)
            rect(px, py, 50, 50);
            strokeWeight(2);
            stroke(255);
            line(px,  py + 15,  px + 80,  py + 15);
            strokeWeight(4);
            stroke(65, 105, 225);
            line(px + 35, py, px + 35, py +  80)
            noStroke()
            fill(128, 0, 0);
            ellipse(px + 50, py + 50, 10, 10);
        }
    }
  noLoop();
    
    }

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

I was inspired by the famous Burberry Pattern with the rectangle and lines that going both in vertical and horizontal direction.

Sean Meng – Project 5

sketch


function setup() {
    createCanvas(500, 500);

}

function draw() {
    
    background(245,245,220);
    noStroke()
//The repreating circles 
    for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
            fill(178,34,34);   
            ellipse(50*x + 25, 50*y + 40, 10, 10);

        }

    }
//The first set of vertical shapes
    for (var a = 0; a < 5; a++) {
        for (var b = 0; b < 7; b++) {
            fill(0,0,139);
            rect(a*100, b*60, 5, 200)
        }
    }

//The second set of vertical shapes    
    for (var i = 0; i < 5; i++) {
        for (var j = 0; j < 10; j++) {
            fill(210,180,140)
            rect(i*100+45, j*50, 20, 200)
        }
    }
//The first set of horizontal shapes
    for (var m = 0; m < 5; m++) {
        for (var n = 0; n < 15; n++) {
            fill(240,230,140)
            rect(m*120, n*50, 300, 3)
        }    
    }
//The second set of horizontal shapes
    for (var p = 0; p < 5; p++) {
        for (var q = 0; q < 15; q++) {
            fill(255)
            rect(p*120, q*50+20, 300, 12)
        }    
    }
    
}

Speaking of something that I would wear everyday, plaid pattern is one of my favorites. In this project, I played with simple geometries and designed this multicolored plaid pattern. And I added circle shapes to contrast with the rectangles to increase the visual balance.

Project 05 – Min Lee

sketch

function setup() {
    createCanvas(600, 600);
    background(169, 209, 226);
}

function draw() {
	// milk boxes 
	var xPosition = 0;
	var yPosition = 0;
	translate(0, -50);
	fill(255);

	for (var y = 1; y < 12; y++) {
		for (var x = 0; x < 10; x++) {
			if (y % 2 == 0) {
				var spaceX = 90;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x, yPosition - 7 + spaceY * y)
				//milk eyes
				push();
				fill(0);
				ellipse(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				ellipse(xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20, 3, 3);
				curve(xPosition + 16 + spaceX * x, yPosition + spaceY * y + 20, 
					xPosition + 20 + spaceX * x, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x - 2, yPosition + spaceY * y + 20 + 6,
					xPosition + 32 + spaceX * x, yPosition + spaceY * y + 20)
				pop();

			} else {
				var spaceX = 75;
				var spaceY = 60;
				//milk face
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y,
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y, 
				xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk side
				quad(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition + 58 + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + 70 + spaceY * y);
				//milk middle
				quad(xPosition + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y);
				//milk top
				quad(xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y, 
				xPosition + 10 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 - 3 + spaceY * y)
				//milk triangle
				triangle(xPosition + 50 + spaceX * x + 18 * x + spaceX / 8, yPosition + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 15 + spaceX * x + 18 * x + spaceX / 8, yPosition - 12 + spaceY * y);
				//box crease
				line(xPosition + 50 + 6 + spaceX * x + 18 * x + spaceX / 8, yPosition - 22 + spaceY * y, 
				xPosition + 50 + 7 + spaceX * x + 18 * x + spaceX / 8, yPosition - 7 + spaceY * y)
				//milk eyes
			};
		};
	};
}

For this project I wanted to create a wallpaper full of cute milk boxes with different faces, but I came across a problem trying to create the second face, so it’s not as cute. I’d still drink it.

Yingying Yan-Project-05-Wallpaper

sketch

/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-05
*/

var oy = 0; // orginal y position
var ox = 0; // original x position 
var tw = 50; // the width spacing
var th = 50; // the height spacing

function setup() {
    createCanvas(585, 600);
    background(234, 185, 83);

}

function draw() {
	// for all the odd rolls and columns, we will draw flowers
	//by calling the x and y position
	for (var y = 0; y < 20; y++) {
	    for (var x = 0; x < 20; x++) {
	    	if((x % 2 == 1) & (y % 2 == 1)){
            var py = oy + y * th;
            var px = ox + x * tw;
            push();
            flower(px, py);
            pop();
        }
    // for all the even rolls and columns, we will draw cactus
    // by changing the x and y position
            if ((x % 2 == 1) & (y % 2 ==1)){
        	var ly = oy + y * th;
        	var lx = ox + x * tw;
        	push();
        	cactus(lx, ly);
        	pop();

        }
    }
}

noLoop();
}

// function that draws the flower with variables x and y
function flower (x,y) {
	translate (x, y);
	scale(0.5)
	for (var i = 0; i < 7; i += 1) {
        fill(147, 87,37, 100);
        noStroke();
		rectMode(CENTER);
		ellipse (0, 0, 20, 100);
		rotate(radians(45));
	}
}

//function that draws cactus and called by variable x and y 
function cactus(x, y) {
    translate(x,y);
    scale(0.5);
    noStroke();
    //the vertical stem
    fill(90,87,36, 140);
	ellipse(100, 100, 10, 100);
    // the left rectangle bend
	push()
	noStroke();
	translate(85,110);
	rotate(radians(30))
	rectMode(CORNER);
	rect(0,0, 20, 8);
	pop();
    //the left ellipse or branch
	push();
	noStroke();
	translate(83, 112);
	rotate(radians(-50));
	ellipse(0,0, 10, 30);
	pop();
    //the branch on the right side
    push();
	translate(100,100)
	rotate(radians(-120));
	ellipseMode(CORNER);
	ellipse(0, 0, 10, 50);
	pop();


}

I wanted to draw minions and bananas, but it was too challenging so I ended up drawing flowers and cactus. I like how I accidentally made my flower transparent, that was cool. Then I basically used assignment B’s method to place my flowers and cactus. This project is a little bit stressful than the other ones. As you can tell I turned this in 5 minutes before it is due.

Katherine Hua – Project-05 – Wallpaper

sketch

/* Katherine Hua
Section A
khua@andrew.cmu.edu
Project-05 */

function setup() {
    createCanvas(600, 600);
    background(213, 233, 233);
    noLoop();
}


function draw() {
	var potatoOX = 70; // original x point of potato
    var potatoOY = 80; // original y point of potato
    var potatoW = 80; // width of potato
    var potatoH = 100; // height of potato
    var tw = 90;
    var th = 110;

	for (var y = 0; y < 5; y++) {
		for (var x = 0; x < 6; x++) {
			//POTATO
    		var potatoX = potatoOX + x * tw; // x position of following potatoes
    		var potatoY = potatoOY + y * th; // y position of following potatoes

   			//body
    		strokeWeight(1);
    		stroke(109, 90, 61);
    		fill(231, 193, 144); 
		 	ellipse(potatoX, potatoY, potatoW, potatoH);

		 	//eyes
		 	strokeWeight(4);
		 	point(potatoX - 25, potatoY - 7);
		 	point(potatoX + 2, potatoY - 7);

		 	//right arm
		 	strokeWeight(1);
		 	beginShape();
		 	curveVertex(potatoX + 2, potatoY + 10);
		 	curveVertex(potatoX + 2, potatoY + 10);
		 	curveVertex(potatoX - 5, potatoY + 11);
		 	curveVertex(potatoX - 10, potatoY + 15);
		 	curveVertex(potatoX - 7, potatoY + 20);
		 	curveVertex(potatoX + 5, potatoY + 20);
		 	curveVertex(potatoX + 5, potatoY + 20);
			endShape();

			//left arm
			beginShape();
		 	curveVertex(potatoX - 5, potatoY + 10);
		 	curveVertex(potatoX - 25, potatoY + 10);
		 	curveVertex(potatoX - 18, potatoY + 11);
		 	curveVertex(potatoX - 13, potatoY + 15);
		 	curveVertex(potatoX - 16, potatoY + 20);
		 	curveVertex(potatoX - 24, potatoY + 20);
		 	curveVertex(potatoX - 24, potatoY + 20);
		 	endShape();

			//left foot
			beginShape();
		 	curveVertex(potatoX - 20, potatoY + 30);
		 	curveVertex(potatoX - 20, potatoY + 30);
		 	curveVertex(potatoX - 27, potatoY + 31);
		 	curveVertex(potatoX - 32, potatoY + 35);
		 	curveVertex(potatoX - 29, potatoY + 40);
		 	curveVertex(potatoX - 17, potatoY + 40);
		 	curveVertex(potatoX - 17, potatoY + 40);
		 	endShape();

			//right foot
			beginShape();
		 	curveVertex(potatoX + 10, potatoY + 30);
		 	curveVertex(potatoX + 10, potatoY + 30);
		 	curveVertex(potatoX + 3, potatoY + 31);
		 	curveVertex(potatoX - 2, potatoY + 35);
		 	curveVertex(potatoX + 1, potatoY + 40);
		 	curveVertex(potatoX + 13, potatoY + 40);
		 	curveVertex(potatoX + 13, potatoY + 40);
		 	endShape();

			//mouth
			fill(246, 232, 226);
			ellipse(potatoX - 12, potatoY - 3, 12, 6);
			
		
		}
	}
}


I wanted to recreate one of my stuffed animals. It is so cute. I wish I could have given him a friend in my design, but I ran out of time. Through this project, I familiarized myself more with how to use curveVertex functions to create shapes such as the arms and the legs. Although they are small parts of the character I created, it took a while to get the curves and coordinates right. I can see this design being on phone cases, pencil pouches, stickers, digital backgrounds, etc. Below is a sketch of what I based my wallpaper’s character off of.

Project 5 rrandell

sketch

/* Rani Randell
rrandell@andrew.cmu.edu
Section A
Project 5 */


function setup() {
    createCanvas(400, 400);
    noLoop(); 
}
 
function draw() {
    background(205, 100, 230);

for (var y = 0; y < 450; y += 50) {
        for (var x = 0; x < 450; x += 50)
            //fill(100, 230, 240); for some reason I cant get this to change
            ellipse(x, y, 50, 50);
        }
    for (var i = 10; i < 600; i += 15) {
    	strokeWeight(3);
        line(i, 400, i, 0);
    }
}

    

For this project I wanted to think about classic lines and simple shapes, I really like when colors contrast on wallpaper so I tried to stay true to a contrasting and also retro vibe.

Yoo Jin Shin-Project-05-Wallpaper

Project-05

// Yoo Jin Shin
// Section D
// yoojins@andrew.cmu.edu
// Project-05-Wallpaper

var ellipseSize = 8;
var rectSize = 8;
var R = 120;
var G = 50;

function setup() {
    createCanvas(392, 500);
    noLoop();
}

function draw() {
	background(191, 166, 149);
	for (var y = height / 2.4; y < height; y+=35) {
		for (var x = 20; x < width; x += 50) {

			// rectangles
			fill (R, G, 50);
			noStroke();
			rectMode(CENTER);
			rect(x, y, rectSize, rectSize);

			// circles
			fill(230, 212, 200);
			stroke(R, 52, 52);
			strokeWeight(2);
			ellipse(x, y, ellipseSize, ellipseSize);

			// lines
			stroke(255);
			strokeWeight(0.5);
			line(x, 0, x, height);

			stroke(255);
			strokeWeight(0.5);
			line(x - 3, 0, x - 3, height);

			stroke(255);
			strokeWeight(0.5);
			line(x + 3, 0, x + 3, height);

			ellipseSize += 0.15;
			rectSize += 0.3;
			R -= 0.7;
			G += 0.8;
		}
	}
}

I was looking at the plain, default curtains in my dorm room and was inspired to create this design. I used the original taupe color as the base and tried to make it more interesting by adding geometric shapes (circles and squares) with gradient color changes. I tried to prevent making the design seem too congested so I started the shapes from around mid-height. I stuck with a more, toned down, deep color palette to match with the upcoming fall season. Throughout this process, I thought it was really difficult to create a design that I would actually purchase. Even though my intention was to amp up my plain curtains, I’m unsure whether I would choose this over the original. Perhaps this will be more suitable for another purpose, not curtains.

Yiran Xuan – Project 05 – Wallpaper

 

To generate the wallpaper, I first drew a pattern on graph paper, labelling the number of points and the connections that would need to be made between them. Then I realized that I would need 3 nested loops to draw this pattern with the most efficiently; outermost loop to iterate through the rows, next loop to iterate through each butterfly, and innermost loop to iterate through each line. I used arrays to store the coordinates of the points. I also wanted butterflies to alternate orientation with their horizontal and vertical neighbors, necessitating two variables to keep track of orientation.

sketch

function setup() {
    createCanvas(400, 600);
    background('grey');
    
    var xdist = 32; //horizontal distance between iteration
    var ydist = 24; //vertical distnace between iteration

    var xcoord = [16, 16, 8, 0, 4, 8, 8]; //x coordinates for butterfly
    var ycoord = [12, 4, -4, 0, -12, -8, -4]; //y coordinates for butterfly

    
    var firstdir = 1; //orientation of the pattern at the beginning of the row
	var dir = -1; //determines orientation of butterfly

	//strokeWeight(4);
	

	//line(32 + xcoord[1], 24 + dir*ycoord[1], 32 + xcoord[1+1], 24 + dir*ycoord[1+1]);

	
    for(var i = 12; i <= height; i += ydist ){ //one iteration is one row
    	dir = firstdir;	//sets first orientation

    	for(var j = 16; j <= width; j+= xdist){ //one iteration is one pattern
    		stroke(127 + dir*127);

    		for (var k = 0; k < xcoord.length; k++){ //one iteration is two lines, mirrored
    			line(j + xcoord[k], i + dir*ycoord[k], j + xcoord[k+1], i + dir*ycoord[k+1]);
    			line(j - xcoord[k], i + dir*ycoord[k], j - xcoord[k+1], i + dir*ycoord[k+1]);
    			}
    			//line(j + xcoord[3], i + dir*ycoord[3], j + xcoord[6], i + dir*ycoord[6]); //missing lines whoops
    			//line(j - xcoord[3], i + dir*ycoord[3], j - xcoord[6], i + dir*ycoord[6]); //missing lines whoops
    			line(j + xcoord[0], i + dir*ycoord[0], j + xcoord[3], i + dir*ycoord[3]); //missing lines whoops
    			line(j - xcoord[0], i + dir*ycoord[0], j - xcoord[3], i + dir*ycoord[3]); //missing lines whoops

    		dir = -dir; //flips direction so pattern alternates
    	}

    	firstdir = -firstdir; //flips first orientation so next row alternates
    }
    
    noLoop();

    
}

function draw() {
}