sketch

//Michael Miller
//Section A
//mmiller5@andrew.cmu.edu
//Project-05

var toggle = [-1,1]; //randomly flip the spiral
var columnNum = 9

function setup() {
    createCanvas(480, 480);
    background(255);
}

function draw() {
    for (var i1 = 0; i1 < columnNum; i1 ++) { //makes rows of bamboo
	x = map(i1, 0, 7, 0, 7 * width / columnNum);
	var yOffset = random(-height / 3, 0); /*each column height will be
						randomly offset*/
	for (var i2 = 0; i2 < 4; i2 ++) { //makes columns of bamboo
	    y = map(i2, 0, 3, 0, 3 * height / 3);
	    bambooDesign(x, y, yOffset);
	}
    }
    noLoop();
}

function bambooDesign(x, y, yOffset) { //makes bamboo segments
    colorFill(x, y, yOffset);
    stroke(0, 25);
    strokeWeight(3);
    fill(200, 204, 153);
    rect(x + .5, y + yOffset - 2.5, width / columnNum - 1, 4);//segment joints
    var spiralX = x + width / (2 * columnNum) + random(-5, 5);
    var spiralY = y + yOffset + height / 6
    var flip = random(toggle);
    spiral(spiralX, spiralY, flip);
}

function colorFill(x, y, yOffset) { //colors each bamboo segment with a gradient
    var size = 1
    for (var iy = size / 2; iy < height / 3; iy += size) {
	for (var ix =  size / 2; ix < width / columnNum; ix += size) {
	    //color of each segment will be the same, so map it to current one
	    r = map(iy + y, y, y + height / 3, 125, 175);
	    g = map(ix + x, x, x + width / columnNum, 125, 200);
	    noStroke();
	    fill (r, g, 0); 
	    ellipse(ix + x, iy + y + yOffset, size, size);
	}
    }
}

function spiral(spiralX, spiralY, flip) { //small spiral ingrained into bamboo
    var angle = 35 - (105 * flip);
    var spiralSize = 200;
    fill(255, 150);
    noStroke();
    push();
    translate(spiralX, spiralY + 60);
    rotate(radians(angle));
    for(count = 0; count < spiralSize; count ++) { //made from many ellipses
	push();
	rotate(radians(flip * 6 * count));
	translate (1, 1);
	ellipse(count/15, count/15, 2, 2);
	pop();
    }
    pop();
}

I was playing around with rectangular tiles that had randomly spaced heights when I thought it looked like bamboo! It then took me way too long to color the segments properly with a gradient, but it worked out in the end. I also wanted to make leaves, but it didn’t pan out, so I have the flowery-ish spirals instead — one of these days though, there will be leaves. Also, the bamboo heights and spiral directions randomize with each refresh.

sketch

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 5: Wallpaper

//x and y coordinates the tip of the tear drops
var x = 0;
var y = 0;
// scale
var Large = 25;
var Medium = Large-1;
var Small = Large-5;
// for loop coordinates
var transY = 0;
var transX = 30;

function setup() {
    createCanvas(480, 480);
    background (243,117,117);//hot pink!
}

function draw() {
  //array the pattern on the odd rows
  for (var transY = 0; transY < width; transY+= Large*6+15) {
    for (var transX = 0; transX < width+30; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
  // array the pattern for even rows and offset them so they fill the gap
  for (var transY = -Large*3-8; transY < width; transY+= Large*6+15) {
    for (var transX = Large+5; transX < width; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
  noLoop();
}

function pattern(transX,transY){
  stroke(255);
  strokeWeight(1);
  //deep blue tear drop, aka large drop
  push();
  translate(transX,transY);
  fill(48,78,109,200);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Large,Large*3);
  curveVertex(x,Large*4);
  curveVertex(x-Large, y+Large*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  pop();
  //pale orange tear drop, medium drop
  push();
  translate(transX,transY+Large*6);
  fill(237,168,131,100);
  angleMode(DEGREES);
  rotate(180);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Medium,Medium*3);
  curveVertex(x,Medium*4);
  curveVertex(x-Medium, y+Medium*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  // teal tear drop, small drop
  fill(43,188,177,120);
  beginShape();
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  curveVertex(Small,Small*3+10);
  curveVertex(x,Small*4+10);
  curveVertex(x-Small, y+Small*3+10);
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  endShape();
  //yellow circle
  fill(253,185,74,200);
  ellipse(x,Small*5,Large,Large);
  //small dark blue circle on the tip of the shape
  fill(48,78,109);
  ellipse(0,0,10,10);
  pop();
}

I was inspired by the the features of a peacock when making this pattern. Using the tear drop shape as the base, I was able to rotate and scale the shape accordingly to generate the pattern before I array it to make the wallpaper using for loops and nested loops. I used Rhino to help me to generate the line work before going into Illustrator to add in the color. As I was coding I also played with the alpha channels to manipulate the opacity of the colors to see the layers of tear drops that make up the pattern.