GarrettRauck-Project-5

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Assignment-05-project

/////////////////////////////////
// INIT VARIABLES
/////////////////////////////////
var canvasWidth, canvasHeight, margin;
//grid vars
var nRows, nCols, cellSize, ellipseSize, gridLeft, gridTop, cx, cy;
//color
var colorYellow, colorBrown, colorGreen;

/////////////////////////////////
// HELPER FNS
/////////////////////////////////
function drawBanana(x, y) {
		drawLeftCurve(x,y);
		drawRightCurve(x,y);
		drawLowerCap(x,y);
		drawUpperCap(x,y);
}

function drawLeftCurve(x,y) {
	//set shape pts...pts determined using guess-and-check
	var ax = x + 20;  var ay = y + 40;
	var bx = x - 20;  var by = y + 20;
	var cx = x - 25;  var cy = y - 20;
	var dx = x - 10;  var dy = y - 40;
	//draw curve
	noFill();
	stroke(colorBrown);
	bezier(ax, ay, bx, by, cx, cy, dx, dy);

	// //vis pts
	// noStroke();
	// fill(0,255,0);
	// ellipse(x, y, 10);
	// fill(255,0,0);
	// ellipse(ax, ay, 5);
	// ellipse(bx, by, 5);
	// ellipse(cx, cy, 5);
	// ellipse(dx, dy, 5);
}

function drawRightCurve(x,y) {
	//get bezier pts...pts determined using guess-and-check
	var ax = x + 25;  var ay = y + 35;
	var bx = x;  var by = y + 15;
	var cx = x - 7;  var cy = y - 20;
	var dx = x - 5;   var dy = y - 40;
	//draw curve
	noFill();
	stroke(colorBrown);
	bezier(ax, ay, bx, by, cx, cy, dx, dy);

	// //vis pts
	// noStroke();
	// fill(0,255,0);
	// ellipse(x, y, 10);
	// fill(255,0,0);
	// ellipse(ax, ay, 5);
	// ellipse(bx, by, 5);
	// ellipse(cx, cy, 5);
	// ellipse(dx, dy, 5);
}

function drawLowerCap(x,y) {
	//set shape pts...pts determined using guess-and-check
	var ax = x + 20;  var ay = y + 40;
	var bx = x + 25;  var by = y + 35;
	var cx = x + 27;  var cy = y + 37;
	var dx = x + 22;  var dy = y + 42;
	//draw shape
	fill(colorBrown);
	stroke(colorBrown);
	quad(ax, ay, bx, by, cx, cy, dx, dy);

}

function drawUpperCap(x,y) {
	//set shape pts...pts determined using guess-and-check
	var ax = x - 10;  var ay = y - 40;
	var bx = x - 5;   var by = y - 40;
	var cx = x - 1;   var cy = y - 49;
	var dx = x - 7;   var dy = y - 51;
	//draw shape
	fill(colorBrown);
	stroke(colorBrown);
	quad(ax, ay, bx, by, cx, cy, dx, dy);
}

function drawVine(x, y) {
	//set curve pts...pts determined using guess-and-check
	var ax = x - 4;  var ay = y - 50;
	var bx = x +10;   var by = y - 150;
	var cx = x + 50;   var cy = y - 170;
	var dx = x + 60;   var dy = y - 155;
	//draw curve
	noFill();
	stroke(colorGreen);
	bezier(ax, ay, bx, by, cx, cy, dx, dy);
}

/////////////////////////////////
// RUN!
/////////////////////////////////
function setup() {
	// INIT VARS
	//canvas
	canvasWidth = 800;
	canvasHeight = 800;
	margin = 25;
	//grid vars
	nRows = 6;
	nCols = 7;
	cellSize = (canvasHeight-margin*2)/nRows;
	ellipseSize = 35;
	gridLeft = margin + ellipseSize/2;
	gridTop  = (canvasHeight - ((nRows-1)*sqrt(3)/2*cellSize))/2;
	//color
	colorYellow = color(255, 211, 0);
	colorBrown = color(51, 34, 9);
	colorGreen = color(0, 82, 1);
	
	// CANVAS SETUP
    createCanvas(canvasWidth, canvasHeight);
    background(colorYellow);

    noLoop();
}

function draw() {
	//generate hex grid
	for (row = 0; row < nRows; row++) {
		for (col = 0; col < nCols; col++) {
			//get x,y center for pattern cells
			if (row % 2 == 0) { cx = gridLeft + col*cellSize; } //x alignment for even rows
			else { cx = gridLeft + col*cellSize + cellSize/2; } //x alignment for odd rows
			cy = gridTop + row*(sqrt(3)/2)*cellSize; //y alignment for all rows

			//draw pattern, with subtle randomness
			if ((row == 2) & (col == 4)) { continue; }
			else if ((row == 3) & (col == 3)) { drawBanana(cx, cy);}
			else {
				drawBanana(cx, cy); //draw banana
				drawVine(cx, cy); //draw arc
			}
		}
	}
	
}

I wanted to spin off of the historic catalog of wallpapers and create a pattern that was more fun and cheesy. A banana became my basic element. Most of the time was spent creating a set of helper functions to draw the banana. No fun. Then I simply applied the banana graphic to a version of the hexagonal grid from assignment 5b, and used a couple conditional statements add some visual interest by removing a single cell in the pattern.