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

Leave a Reply