rgroves – Wallpaper – section B

sketch

//Becky Groves
//Section B
//rgroves@andrew.cmu.edu
//Project 5 Wallpaper

//dimensions of the pattern
var h = 140;
var w = 200;

function setup() {
    createCanvas(480, 480);  
    background(167, 178, 181);	
}

function draw() {
for (var y = 0; y < height/h; y++){
		for (var x = 0; x < width/w; x++) {
			//change the position of the pattern for each row
			if (y%2 == 0) {
				texas(x * 2 * w, y * h);
				//change the color of the star for each column
				noStroke();
				if (x%3 == 0) {
					fill(255, 255, 255);
				} else
				if (x%2 == 0) {
					fill(255, 0, 0);
				} else {
					fill(0, 0, 255);
				}
				star((x * 2 * w) + w, y * h, 20, 50, 5);
			} else {
				texas(-w + (x * 2 * w), y * h);
				noStroke();
				if (x%3 == 0) {
					fill(0, 0, 255);
				} else
				if (x%2 == 0) {
					fill(255, 255, 255);
				} else {
					fill(255, 0, 0);
				}
				star((x * 2 * w), y * h, 20, 50, 5);
			}
		}
	} 
}


function texas(x, y){ //combine right and left sides of the pattern
	lefttexas(x, y);
	righttexas(x + w, y);
}

function lefttexas(x, y){ //left half of the pattern
	fill(167, 178, 181);
	noStroke();
	rect(x, y, w, h);
	//grass
	fill(142, 130, 78);
	rect(x, y + h - 45, w, 45);
	//windmills
	var a = 25; //distance of first windmill from the left
	var xs = 30; //horizontal spacing
	var yst = 15; //difference in heights from the top
	var ysb = 5; //difference in heights from the bottom
	for (i = 0; i < 3; i++) {
		stroke(223, 218, 207);
		strokeWeight(3);
		line(x + a + (xs * i), y + 30 + (yst * i), x + a + (xs * i), y + h - 10 - (ysb * i));
		line(x + a + (xs * i), y + 30 + (yst * i), x + a + (xs * i) + 6, y + 30 + (yst * i));
		push();
		noStroke();
		fill(223, 218, 207);
		translate(x + a + (xs * i) + 6, y + 30 + (yst * i));
  		rotate(frameCount / 200.0 * (i + 1)); //the blades spin!
  		rotate(45 * (i + 1))
		star(0, 0, 2, 30, 3); 
		pop();
	}
	//fence
	stroke(100);
	strokeWeight(4);
	noFill();
	rect(x + ((11/16) * w), y + 80, (5/16) * w, 50, 10, 0, 0, 10);
	line(x + w - 10, y + 80 + 25, x + w, y + 80 + 25);
	for (i = 1; i <= 4; i++) {
		strokeWeight(2);
		var s = 50/5;
		line(x + ((5/8) * w), y + 80 + (i * s), x + w, y + 80 + (i * s));
	}
	stroke(188, 157, 118);
	strokeWeight(10);
	line(x + ((5/8) * w), y + 80, x + ((5/8) * w), y + h);
}

function righttexas(x, y) {
	push();
	translate(2 * x + w, 0);
	scale(-1, 1);
	lefttexas(x, y);
	pop();
}

//this is from the p5.js reference site
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

For this project I was inspired by the landscape of my home state Texas. I think it looks better at a larger scale so here’s a screenshot of what that would look like: