Category: Project-05-Wallpaper

Project 5 Alison Hoffman

Alison Hoffman


var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
    createCanvas(800, 400);
    background(0);
}

function draw() {
    // draw white stripes
    for(var i = 40; i <height; i +=100){
        stroke(255);
        strokeWeight(50);
        line(0,i,width,i);
    }

    //draw the flowers
    for(var y = 0; y < height; y+= yspacing){
        for(var x = 0; x < width; x+= xspacing){
            flower(x,y);
        }
    }

    noLoop();
}

function flower(x,y){     // function to make flower
    noStroke();

    push();
    translate(x,y);
    
    // leaves           
    fill(179,253,181);
    ellipse(petalD,0,120,20);
    rotate(radians(143));
    ellipse(petalD,0,120,20);
    rotate(radians(230));
    ellipse(petalD,0,120,20);
    rotate(radians(195));
    ellipse(petalD,0,120,20);
    
    rotate(radians(0));  // reset to no rotation
    for (var i=0; i<9; i++){     // makes up to nine petals
        if(i%2==0){
            fill(255,191-i,229-i);  // make every other petal darker 
            petalW = 90;  // vary petal width 
            petalD = 80; //vary petal depth
        }else{
            fill(255,200+i,230+i); // make every other petal lighter
            petalD = 75;  // vary petal depth
            petalW = 90; // vary petal width
        }
        rotate(radians(rotation));
        ellipse(petalD/2,0,petalD,petalW); // makes a petal
        rotation += i;   // makes rotations less uniform and circular
        fill(0);
        ellipse(10,0,15); // center circles 
    }

    pop();

}

For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.

Kyle Lee Project 5 Duck Wallpaper

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();
}

img_4095
Planning

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.

 

Project 5: Wallpaper

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();

}

Wallpaper-05-sehenry

sketch 

//Seth Henry

//Tuesday at 10:30

//sehenry@andrew.cmu.edu

//Assignment-05 Wallpaper




function setup() {
    createCanvas(660, 340);
    }

function draw() {
	  background(128, 0, 32); //Burgundy
	  blackDot(); 
	  fill('orange'); //Color of Ball
	  Bball();
	  fill(240, 248, 255); //Color of Diamonds
	  diamond();

	 }


function Bball(){ //Basketball Layout
	var x = 90;
	var y = 50;
	for(x = 90; x < 660; x += 120){
	
	for(y = 50; y < 340; y += 80){
		ellipse(x, y, 60, 60)
		
	  beginShape(); // left curve on basketball
	  
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 19.5, y - 22.5);
	  curveVertex(x - 12.5, y - 10);
	  curveVertex(x - 12.5, y + 10);
	  curveVertex(x - 19.5, y + 22.5);
	  curveVertex(x - 19.5, y + 22.5);
	  endShape();
   	  beginShape(); // right curve on basketball
	  
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 19.5, y - 22.5);
	  curveVertex(x + 12.5, y - 10);
	  curveVertex(x + 12.5, y + 10);
	  curveVertex(x + 19.5, y + 22.5);
	  curveVertex(x + 19.5, y + 22.5);
	  endShape();
		line(x, y + 30, x, y-30); //vertical line on basketball
		line(x - 30, y, x + 30, y); //horizontal line on basketball
}

}
noLoop();
}


function diamond(){ //Diamond Layout Plus Number 4 Text

var a = 0; //starter variables
var b = 0;


for(a = 0; a < 650; a += 120){ //moves over the diamonds/4 in rows
for(b = 0; b < 340; b += 50){ //moves over the diamonds/4 in columns
quad(a + 30, b + 5, a + 45, b + 20, a + 30, b + 35, a + 15, b + 20);
textAlign(CENTER);

text("#4", a + 30, b + 50); //#4
}	
} 
noLoop(); //end loop
}

function blackDot(){ //Makes black dots behind the balls, numbers, and diamonds
	var v = 0;
	var w = 0;

	for(v=0; v<660; v+=5){ //moves over the dots in rows
		for(w=0; w<340; w+=5){ //moves over the dots in columns
		ellipse(v,w,1,1);
		}
		
	}
	noLoop();
}

I decided to cut off one row of the basketballs because when I embed the wallpaper into my post, it cannot capture all of the extra row. So I decided to just remove it from the preview even though it is in my code.

Making this project would have actually been finished relatively fast if I didn’t have a hard time with the curves on the basketball and getting the diamonds to move over by certain amounts without distorting their shape. I drew a sketch to begin with and toyed with the idea of having basketballs all over the picture. I later added the number 4 to the wallpaper because it is my current number on the basketball team and I decided to add the black dots because I thought it would make the wallpaper pop out even more! I had fun with this project and it showed me that I am actually getting better at coding.

wallpaper-sketch

JihoonPark_Project_05

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();
}

Sarita Chen – Project 05 – Wallpaper

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.

Sofia Syjuco – Project-05

Music Box Pattern
sketch

// sofia syjuco
// section A
// smsyjuco@andrew.cmu.edu
// Assignment-5-C

function setup() {
    createCanvas(400, 200);// create a cavas 
}

function draw() {
    background(244, 100, 123);//make a pink background

    pattern(0, 0); // row 1, grid 1 of pattern
    pattern(100, 0); // row 1, grid 2  of pattern
    pattern(200, 0);// row 1, grid 3, of pattern
    pattern (300, 0); // row 1, grid 4 of pattern

    pattern(0, 100); // row 2, grid 1 of pattern
    pattern(100, 100); //row 2, grid 2 of pattern
    pattern (200, 100);// row 2, grid 3 of pattern
    pattern (300, 100); // row 2, grid 4 of pattern

}

function pattern(x,y){
    fill("gold"); // fill shapes with gold color
    stroke(255); // strokes are colored white

    push();
    translate(x, y);// place pattern square in designated position
    for (var yPos = 10; yPos < 100; yPos +=10){ //draw all the horizontal lines
        line(0, yPos, 40, yPos); // lines on left
        line (40, yPos, random(41, 59), yPos-(random(2, 9)));// draw random line
        line(60, yPos, 100, yPos); // lines on right
        ellipse (60, yPos, 5, 5);// draw an ellipse
    }
    noLoop(); // don't make it repeat. Keep it static
    pop();
}

whiteboard-on-29-sep-2016-9_17_01-am

I’ve been thinking about music boxes lately, just as a kind of portable nostalgia, and thought it might be interesting to make a pattern that incorporated elements of music boxes. I wanted to make it a little non-representational, but just enough that someone looking at it wouldn’t immediately guess music box – but they could come to that conclusion if they spent a little time with it. To add subtle variation, and not make it too staid, I added a subtle variation to how the little tines are bent, as if the whole pattern is in the middle of playing some huge song.

Michal Luria – Project 05 – Wallpaper

mluria-wallpaper

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-05-B
*/

var marg = 20; //margin for background dots
var start = 195; //starting point of diamond
var step = 100; //margin space in big diamond
var smallStepX = 50; //X margin space in small diamond
var smallStepY = 80; //Y margin space is small diamond

function setup() {
    createCanvas(783, 540);
    background(236,229,206);
    noStroke();


    for (var y = 0; y < height/20; y++) {
        if(y % 2 == 0){

            //draw background dots
            for (var x = 0; x < width/20; x++) {
                fill(244,142,121);
                ellipse(marg*x, 10 + marg*y, 3, 3);
            }
        } else {
            //alternate dot background
            for (var x = 0; x < width; x++) {
                fill(244,142,121);
                ellipse(marg*x + marg/2, 10 + marg*y, 3, 3);
            }

        }
    }   

    fill(197, 224, 220);

    for (var i = 0; i < 5; i++) {
        //draw big diamond
        quad(i*start, height/2, i*start+step, height/4,
        i*start+(2*step), height/2, i*start+step, height/4*3);

        //draw squares in diamonds
        push();
        fill(224, 142, 121);
        rect((i*start + i*start+step)/2, (height/2+height/4)/2, 100, 130);
        pop();

        //draw small diamond
        quad(i*start+smallStepX, height/2, i*start+step, height/4+smallStepY,
        i*start+(2*step)-smallStepX, height/2, i*start+step, height/4*3-smallStepY);

        //draw center circle
        push();
        fill(231,202,145);
        ellipse(i*start+2*smallStepX, height/2, 50, 50);
        pop();

    }



    noLoop();

}

In the process I wanted to create a wallpaper that I would enjoy (for my computer) as well. I wanted to use some geometrical/tribal inspired forms and organic colors for this project. Starting with an initial sketch (attached), programming the pattern and previewing it allowed me to iterate and modify according to my preference and esthetic taste as I went.

project-05-sketch

Isabella Hong – Project 05 – Wallpaper

For this project, I imagined that I was creating a design that would be printed on canvas bags and pouches. The design is clean, simple, and whimsical. I could also see the design being used for stationary paper or stickers as well.

ijhong-05

// Isabella Hong
// Section A
// ijhong@andrew.cmu.edu
// Project-05

function setup() { 
	createCanvas(600, 780);
	//save computation 
	noLoop(); 
}

function draw() {
	//tan 
	background(221, 198, 168); 
	//loop cawfee function 
	for (var x = -150; x < width + 200; x += 100) {
		for (var y = 0; y < height; y += 100) {
			cawfee(x, y);
		}
	}	
	//loop bean function 
	for (var x = -5; x < width; x += 97) {
		for (var y = 20; y < height + 100; y += 100) {
			bean(x, y); 
		}
	}
	}	

//coffee cup 
function cawfee(x, y) {
	noStroke();
	angleMode(DEGREES); 
	fill(54, 40, 21);
	ellipse(x + 50, y + 20, 60, 8);  
	fill(255); 
	arc(x + 50, y + 20, 60, 60, 0, 180, OPEN); 
	noFill();
	stroke(255);
	strokeWeight(2); 
	arc(x + 60, y + 30, 60, 15, 315, 100, OPEN); 	
}

//coffee bean 
function bean(x, y) {
	push();
	noStroke();
	angleMode(DEGREES); 
	fill(54, 40, 21); 
	arc(x + 20, y + 60, 15, 30, 250, 120, CHORD); 
	arc(x + 15, y + 60, 30, 30, 110, 250, CHORD); 
	pop(); 
}

I didn’t have much process work to show, just a page of initial doodles that I drew while brainstorming potential design ideas.

Doodles upon doodles (ijhong)
Doodles upon doodles (ijhong)