## mecha-project05-wallpaper

``````//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-05

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

function draw() {
bird();
noLoop();
}

function bird() {
background(230,225,215);
//dictates the x position of all of the elements
var z = random(-70,20);

//randomizes angle of grass

//randomizes whether or not third piece of grass will appear
var randomGrass = random(0,10);

//nested for loop that creates grid of chickens
for(var x = z; x < 880; x+=140){
for(var y = z; y < 880; y+=140){
//grass
noFill();
strokeWeight(1);
stroke(130,125,115);

//chance that third piece of grass will appear
if(randomGrass <= 5){
}

noStroke();
fill(215,200,190);
rect(3+x,52+y,35,30,40,20,0,20);

//legs
noFill();
stroke(255,123,0);
strokeWeight(2);
line(40+x,90+y,40+x,110+y);
line(40+x, 110+y, 37+x, 110+y);

stroke(215,93,0);
line(30+x, 110+y, 27+x, 110+y);
line(30+x,90+y,30+x,110+y);

//body
noStroke();
fill(255);
rect(10+x,25+y,30,70,0,20,0,50);
rect(20+x,60+y,50,35,0,0,20,20);

//eye
fill(130,125,115);
ellipse(20+x,34+y,5.5,5.5);
noFill();
strokeWeight(1);
stroke(130,125,115);
ellipse(20+x,34+y,8,8);

//beak
noStroke();
fill(255,123,0);
triangle(10+x,35+y,-2+x,25+y,10+x,25+y);

fill(230,225,215);
rect(30+x,52+y,35,30,40,20,0,20);

//wing
fill(255);
rect(30+x,50+y,35,30,40,20,0,20);
}
}
}``````

For this project, I decided to start with creating a graphic that I could use to repeat and make an aesthetically pleasing wallpaper with. While I was originally planning to create a function and place it in a for loop in draw, I instead implemented a nested for loop in my “bird” function. After creating my bird, I added different lines of grass that would change angles based on randomized x and y values. Additionally, a randomized variable would dictate whether or not a third piece of grass would show up.

## jennyzha, Project-05-Wallpaper

``````//Jenny Zhang
//Section D
//jennyzha@andrew.cmu.edu
//Project 05: Wallpaper

var tw = 0;
var th = 0;
var oy = 0;
var ox = 0;

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

function draw() {
background(180, 215, 255);
var tw = 55;
var th = 55;
var oy = 45;
var ox = 45;

for (var x = 0; x < width; x = x + 1) {
for (var y = 0; y < 8; y += 1) {
stroke(255);
point(x, (y * 100) + 60 - 50 * sin(radians(x)));
stroke(255, 255, 0);
point(x, (y * 100) + 60 - 50 * cos(radians(x)));
}
}

for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value
for (var x = 0; x < 7; x+= 1.5) {
var py = oy +y *th;
var px = ox +x *tw;
fill(185,145,255);
noStroke();
rect(px, py, 50, 50);
noStroke();
rect(px, py, 60, 60);
}
}
for (var y = 0; y < 7; y += 2) { //writes the code for the circles on every odd x and y value
for (var x = 0; x < 7; x+= 1.5) {
var py = oy +y *th;
var px = ox +x *tw;
fill(255);
noStroke();
rect(px, py, 25, 25);
noStroke();
rect(px, py, 25, 25);
}
}
for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
for (var x = 1; x < 7; x+= 1.5) {
var py = oy +y *th;
var px = ox +x *tw;
noStroke();
fill(255, 255, 225);
ellipse(px, py, 30, 30);
}
}
for (var y = 0; y < 7; y += 2) { //writes code for the circles of every even value -- these two loops help to create the honeycomb-like off-set grid
for (var x = 1; x < 7; x+= 1.5) {
var py = oy +y *th;
var px = ox +x *tw;
noStroke();
fill(255);
ellipse(px, py, 15, 15);
}
}
noLoop();
}``````

For this project, I was inspired by assignment 05B for this week’s deliverables. I wanted to gain a deeper understanding of how the program worked and added a couple more shapes, lines, and colors to make it my own and make it into a more aesthetically pleasing wallpaper.

## alchan-Project 05-wallpaper

``````// palette
var dark = {r: 179, g: 191, b: 191}
var medium = {r: 203, g: 214, b: 214}
var light = {r: 217, g: 225, b: 225}

function setup() {
createCanvas(480, 480);
background(250);
rectMode(CENTER);
angleMode(DEGREES);
noLoop();
}

function draw() {
var offsetX = 50;
var offsetY = 52;
var rowNum;
var slant = -20;
var which = 1;

for(var y = 0; y < 5; y++) {
//check if the row is odd or even and offset odd rows
if(y % 2 == 0) {
offsetX = 10;
rowNum = 6;
} else {
offsetX = 60;
rowNum = 5;
}
for(var x = 0; x < rowNum; x++) {
scratch(x*130 - offsetX, y*150 - offsetY);

//determine which type of knife to draw
which = nf(random(0,3)+1, 1, 0);
if(which == 1) {
sharp(x*100 + offsetX, y*100 + offsetY, slant);
} else if(which == 2) {
sharp2(x*100 + offsetX, y*100 + offsetY, slant);
} else if(which == 3) {
sharp3(x*100 + offsetX, y*100 + offsetY, slant);
}
}
}
}

// KNIFE 1
function sharp(xPos, yPos, angle) {
var sharpX = 0;
var sharpY = 0;

var sharpW = 8;
var sharpH = 30;
var guardW = 10 + sharpW;
var guardH = 3;
var handleW = 6;
var handleH = 20;

noStroke();
push();
translate(xPos, yPos);
rotate(angle);
fill(medium.r, medium.g, medium.b);
rect(sharpX, sharpY, sharpW, sharpH);
triangle(sharpX + sharpW/2, sharpY + sharpH/2,
sharpX, sharpY + sharpH/2,
sharpX, sharpY + sharpH/2 + 12);
fill(light.r, light.g, light.b);
rect(sharpX - sharpW/4, sharpY, sharpW/2, sharpH);
triangle(sharpX - sharpW/2, sharpY + sharpH/2,
sharpX, sharpY + sharpH/2,
sharpX, sharpY + sharpH/2 + 12);

// guard 1
fill(dark.r, dark.g, dark.b);
rect(sharpX, sharpY - sharpH/2 - guardH/2, guardW, guardH);
ellipse(sharpX - guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);
ellipse(sharpX + guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);

// handle 1
rect(sharpX, sharpY - sharpH/2 - handleH/2, handleW, handleH);

// pommel 1
ellipse(sharpX, sharpY - sharpH/2 - handleH, handleW + 2);
pop();
}

// KNIFE 2
function sharp2(xPos, yPos, angle){
var sharp2X = -5;
var sharp2Y = -18;

var sharp2W = 25;
var sharp2H = 80;
var handle2W = 6;
var handle2H = 22;

noStroke();
push();
translate(xPos, yPos, angle);
rotate(angle);
fill(medium.r, medium.g, medium.b);
arc(sharp2X, sharp2Y, sharp2W, sharp2H, 0, 90, PIE);
fill(light.r, light.g, light.b);
rect(sharp2X - 1, sharp2Y + sharp2H/4, 2, sharp2H/2);

// handle 2
fill(dark.r, dark.g, dark.b);
rect(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H/2,
handle2W, handle2H);
ellipse(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H,
handle2W);
pop();
}

// KNIFE 3
function sharp3(xPos, yPos, angle) {
var sharp3X = 0;
var sharp3Y = 0;

var sharp3W = 8;
var sharp3H = 30;
var handle3W = 6;
var handle3H = 20;
var guard3W = sharp3W + 4;
var guard3H = 4;

noStroke();
push();
translate(xPos, yPos);
rotate(angle);

// handle 3
fill(dark.r, dark.g, dark.b)
rect(sharp3X, sharp3Y - sharp3H/2 - handle3H/2,
handle3W, handle3H);

// guard 3
rect(sharp3X, sharp3Y - sharp3H/2 - guard3H/2-1,
guard3W, guard3H);
// pommel 3
ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
handle3W+3);
fill(light.r, light.g, light.b);
ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
handle3W-2);

fill(light.r, light.g, light.b);
quad(sharp3X - sharp3W/2, sharp3Y - sharp3H/2,
sharp3X + sharp3W/2, sharp3Y - sharp3H/2,
sharp3X + sharp3W/2, sharp3Y + sharp3H/2 + 8,
sharp3X - sharp3W/2, sharp3Y + sharp3H/2);
// highlights
fill(medium.r, medium.g, medium.b);
sharp3X + sharp3W/2, sharp3Y + 8,
sharp3X + sharp3W/2, sharp3Y + 4,
sharp3X - sharp3W/2, sharp3Y - 4);
quad(sharp3X - sharp3W/2, sharp3Y - 8,
sharp3X + sharp3W/2, sharp3Y,
sharp3X + sharp3W/2, sharp3Y - 16,
sharp3X - sharp3W/2, sharp3Y - 16);
pop();
}

// LINES
function scratch(xPos, yPos) {
var spacing = 20;

noFill();
stroke(255);
strokeWeight(4);
line(xPos, yPos, xPos + 100, yPos + 100);
line(xPos, yPos + spacing, xPos + 100, yPos + 100 + spacing);
line(xPos, yPos + spacing*2, xPos + 100, yPos + 100 + spacing*2);

}
``````

I wanted to play around with creating functions and more complex shapes, so the elements themselves are more complicated than the repetition. The type of knife is also randomly generated, so the pattern is slightly different every time.

## dayoungl: Project -05

``````//Sharon Lee
//Section E
//dayoungl@andrew.cmu.edu
//Project 05
function setup() {
createCanvas(400, 400);
background(156,255,228);
var tw = 60;
var th = 40;
var oy = 30;
var ox = 30;
var z = 10;
var d = 30;
//rows
for (var y = 0; y < 8; y += 1) {
//columns
for (var x = 0; x < z; x += 1) {
//
var py = oy + y * th;
var px = ox + x * tw;
if (y % 2) {
z = 9;
stroke(0);
strokeWeight(5);
fill(229,223,73);
stroke(255);
line(px-30, py, width-20, py);
rectMode(CENTER);
rect(px + 30, py, d, d);

} else {
z = 10;
noStroke();
fill(255,70,138);
// ellipse(px ,py , d, d);
}
}
}
noLoop();
}

``````

I worked with simple geometric shapes to create this wallpaper. I was inspired by some of the art-nouveau wallpapers which focused on shape of the plants. The yellow square is an abstract representation of leaves.

## mmiller5-Project-05

``````//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);
for(count = 0; count < spiralSize; count ++) { //made from many ellipses
push();
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.

## ghou-project-05-Wallpaper

``````//Grace Wanying Hou
//15-104 Section D
//ghou@andrew.cmu.edu
//Assignment 05 A

//globals
//rectangles
var lx = 60;
var ly = 40;
var rx;
var ry;
//diagonals
var dx = 0;
var dy = 0;
var dyn = 0;

function setup(){
createCanvas(600,600);
background (255);
angleMode(DEGREES);
}

function draw(){
for (var y = 0; y < height/ly; y++) {
for (var x = 0; x < width/lx; x++) {
//local variable (needs to change w each square);
//circles
var sizes = [0,0,0,lx,lx*2,lx*3];
var csize = random(sizes);
//transparency
var tran1 = random(20,100);
//lineweight
var linew = random(0.1,1);
var cirw = random();

//colour
var colr = randomGaussian(200,20);
var colg = randomGaussian(200,20);
var colb = randomGaussian(200,20);

//rectangles
noStroke();
rx = x * lx;
ry = y * ly;
fill(colr,colg,250,tran1);
rect(rx,ry,lx,ly);

//circles
strokeWeight(linew);
stroke(255);
fill(250,colg,colb,tran1);
ellipse(rx,ry,csize);
}
}

for (var y = -2; y < height/ly; y++) {
for (var x = -2; x < width/lx; x++) {
var linew = random(0.5,1);
//rect strokes
rx = x * lx;
ry = y * ly;
stroke(255);
strokeWeight(2);
noFill();
rect(rx,ry,lx,ly);

//diagonals
dx = (x + 1) * lx;
dy = (y + 1) * ly;
strokeWeight(linew);
//lines crossing rectangle
line(rx,ry,dx,dy);
line(dx,ry,rx,dy);
//lines crossing each 3 rectangles
dyn = (y + 3) * ly;
line(rx,ry,dx,dyn);
line(dx,ry,rx,dyn);

}
}
noLoop()
}

``````

I wanted to create a wallpaper more suited to be a wallpaper for a phone or an iPad. Based on that, I wanted to make something more geometric. I used a Gaussian randomizer to more easily make it look more naturally generated.

## mjanco – wallpaper

``````//Michelle Janco
//Section B
//mjanco@andrew.cmu.edu
//Project-05-Wallpaper

function setup() {
createCanvas(400, 320);
}

function draw() {
background(0);
drawGrid();
noLoop();
}
function drawGrid() {
stroke(170, 80, 100);
strokeWeight(2);
//vertical ellipses - green
for (var y = -1; y < height; y += 80) {
for (var x = 50; x < width+50; x += 100) {
fill(74,250,160,90);
ellipse(x, y, 100, 200);
}
}
//horizontal ellipses - yellow
for (var y = 0; y < height+50; y += 80) {
for (var x = 50; x < width+50; x += 100) {
fill(240,200,60, 90);
ellipse(x, y, 200, 100);
}
}
//rectangles
noStroke();
for (var y = 0; y < height+50; y += 80) {
for (var x = 50; x < width+50; x += 100) {
fill(200,91,66 , 90);
rect(x-5, y-10, 10, 20);
}
}
}
``````

For this project I just wanted to use a simple geometric print using a color scheme that I like. I found that I could create new shapes by layering familiar ones, and altering the opacity of my colors.

## rgroves – Wallpaper – section B

``````//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
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: ## karinac-Project-05

``````//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-05

function setup() {
createCanvas(500,500);
}

function draw() {
background(138,0,45);

//first set of boxes
for (var y = 30; y < height-30; y += 90) {
for (var x = 30; x < width-30; x += 90) {
stroke(250);
strokeWeight(10);
noFill();
rect(x, y, 70, 70);
}
}

//underneath layer of boxes
for (var a = 50; a < height-80; a += 90) {
for (var b = 50; b < width-80; b += 90) {
stroke(250);
strokeWeight(6);
noFill();
rect(a, b, 70, 70);
}
}
}

``````

I wanted to create a wallpaper with simple geometric designs that are not too distracting. The hardest part I faced was trying to find the parameters for the loop.

## elizabew-Project-05- Wallpaper

``````// Elizabeth Wang
// elizabew
// Section E
//Project 5: Wallpaper

function setup() {
createCanvas(450, 450);
background(214,239,255); //blue
noLoop();

}

function draw() {
drawLine(); //vertical lines
drawDiaganal(); //diaganal lines
drawDots(); //dots
drawLeaf(); //ellipses
}

function drawLine() { //vertical lines
for (var xv = 0; xv < width; xv += 5) { //vertical lines
var xvPos = xv * 10;
strokeWeight(2);
stroke(177,226,174); //green
line(xvPos, 0, xvPos, height);
}

}

function drawDiaganal(){ //diagnal lines

for (var y = 0; y < height; y += 100){ //diaganal lines from left to right
strokeWeight(1);
stroke(243,207,194); //pink
line(y, 0, width, height - y);
yPos = -400 + y;
line(yPos, 0, width, height - yPos);
}
for (var y = 0; y < height; y += 100){ //diaganal lines from right to left
strokeWeight(1);
stroke(243,207,194); //pink
line(50, height + y, width + 50, y );
yPos = y - 400;
line(0, height + yPos - 50 , width, yPos - 50);
}

}

function drawDots() { //hexigonal grid of dots

for( var ly = 0; ly < height; ly += 5){

if (ly%2 == 0){ // every other row
for (var lx = 0; lx < width; lx += 10) {
var lxPos = (lx * 20) ; //x position of dot
var lyPos = ly * 20; // y position of dot
noStroke();
fill(237,240,218); //yellow
ellipse(lxPos/2, lyPos/2, 10, 10);
}
}
else {
for (var lx = 0; lx < width; lx += 10) {
var lxPos = (lx * 20) + 100; //x position of dot
var lyPos = (ly * 20) ; // y position of dot
noStroke();
fill(237,240,218); //yellow
ellipse(lxPos/2, lyPos/2, 10, 10);
}
}
}
}

function drawLeaf(){

for( var ly = 0; ly < height; ly += 5){

if (ly%2 == 0){ //creates a hexogonal grid
for (var lx = 0; lx < width; lx += 10) {
var lxPosRight = (lx * 20) + 21 ; //position of right leaf x
var lxPosLeft = (lx * 20) - 19 ; //position of left leaf x
var lyPos = (ly * 20) - 100; // y position of leaves
fill(177,226,174);
noStroke();
ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
}
}
else {
for (var lx = 0; lx < width; lx += 10) {
var lxPosRight = (lx * 20) + 121; //position of right leaf x
var lxPosLeft = (lx * 20) - 119;//position of left leaf x
var lyPos = (ly * 20) + 100 ;// y position of leaves
fill(177,226,174);
noStroke();
ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
}
}
}

}
``````