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