//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.