jamieh-project-05-wallpaper

I first started with picking the colour palette for the background triangles, then took inspiration from cherry blossom trees and its changes over time with blue representing winter and pink representing summer.

``````/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 5
*/

var SIZE = 50;
var c1x = 0; 	//top L (TL) corner X
var c1y = 0;	//top L (TL) corner Y
var c2x = 50;	//top R (TR) corner X
var c2y = 0;	//top R (TR) corner Y
var c3x = 0;	//bottom L (BL) corner X
var c3y = 50;	//bottom L (BL) corner Y
var c4x = 50;	//bottom R (BR) corner X
var c4y = 50;	//bottom R (BR) corner Y
var ratio = 0.5;
var ratio2 = 2/3;
var snow = 5;
var petal = 6;

function setup() {
createCanvas(400, 350);
background(0);

noLoop();
}

function draw() {

for(var h = 0; h < width/SIZE; h++){
for(var v = 0; v < height/SIZE; v++){
r = map(h, 0, width/SIZE, 155, 255);
b = map(v, 0, height/SIZE, 155, 255);

fill(r, b, b);
strokeWeight(0.5);
if(h < 4){									//Left half
if(v%2 == 0){							//odd rows
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
c2x+h*SIZE, c2y+v*SIZE,
c3x+h*SIZE, c3y+v*SIZE);
stroke(255);
triangle(c2x+h*SIZE, c2y+v*SIZE,	//Right angle @ corner 4 (BR)
c3x+h*SIZE, c3y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);
push();
//branches
stroke(0);
strokeWeight(0.5);
line(c4x+h*SIZE, c4y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c2x*ratio*ratio+h*SIZE, c2y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
//snow
noStroke();
fill(255);
ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow, snow);
ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow, snow);

//snow pile
bezier(c3x+h*SIZE, c3y+v*SIZE,
c1x+c2x*ratio2*ratio+h*SIZE, c4y-ratio*ratio*ratio+v*SIZE,
c1x+c2x*ratio*ratio+h*SIZE, c4y-c4y*ratio*ratio2+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);
pop();

} else {
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 2 (TR)
c2x+h*SIZE, c2y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
c3x+h*SIZE, c3y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);

push();
//branches
stroke(0);
strokeWeight(0.5);
line(c4x*ratio*ratio+h*SIZE, c4y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c2x+h*SIZE, c2y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

//snow
noStroke();
fill(255);
ellipse(c2x*ratio*ratio+h*SIZE, c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
ellipse(c2x*ratio+h*SIZE, c4y*ratio*ratio*ratio+v*SIZE, snow, snow);
ellipse(c2x*ratio*ratio2+h*SIZE, c4y-c4y*ratio*ratio+v*SIZE, snow*ratio, snow*ratio);
pop();
}

} else {										//Right half
if(v%2 != 0){								//odd rows
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 1 (TL)
c2x+h*SIZE, c2y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 4 (BR)
c3x+h*SIZE, c3y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);

push();
//branches
stroke(0);
strokeWeight(1);
line(c3x+h*SIZE, c3y*ratio*ratio+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c3x+(c4x-c4x*ratio*ratio)+h*SIZE, c4y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);

//flower (EVEN)
noStroke();
fill(255, 102, 140);
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
//white centre
fill(255);
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);

pop();

} else {
stroke(255);
triangle(c3x+h*SIZE, c3y+v*SIZE,	//Right angle @ corner 2 (TR)
c2x+h*SIZE, c2y+v*SIZE,
c4x+h*SIZE, c4y+v*SIZE);
stroke(255);
triangle(c1x+h*SIZE, c1y+v*SIZE,	//Right angle @ corner 3 (BR)
c3x+h*SIZE, c3y+v*SIZE,
c2x+h*SIZE, c2y+v*SIZE);

push();
//branches
stroke(0);
strokeWeight(1);
line(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE);
line(c3x+h*SIZE, c3y+v*SIZE,
c4x*ratio+h*SIZE, c4y*ratio+v*SIZE)

//flower
noStroke();
fill(255, 102, 140);
//centre flower (ODD)
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal, petal/ratio);
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal/ratio, petal);
//on line flower
ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal, petal/ratio);
ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal/ratio, petal);
//edge line flower
ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal, petal/ratio);
ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal/ratio, petal);
//white centre
fill(255);
ellipse(c4x*ratio+h*SIZE, c4y*ratio+v*SIZE, petal*ratio, petal*ratio);
ellipse(c1x+(c2x-c2x*ratio*ratio)+h*SIZE, c2y+v*SIZE, petal*ratio, petal*ratio);
ellipse(c2x+h*SIZE, c4y*ratio*ratio+v*SIZE, petal*ratio, petal*ratio);
pop();
}
}
}
}
}``````

One of my challenges was trying keeping track of my variables, especially for the x and y coordinates of the corners that help me generate each triangle/square. I also had difficulty trying to shorten the code, which I know I can create my own function and call it, but I couldn’t figure out how to make sure it wouldn’t confuse my corner variables.

Project 5 – Wallpaper

``````function setup() {
createCanvas(480, 440);
background(169,201,203);

//First level of diamond
var y0 = 0;
var quaSize = sqrt(1.5)*width/8
for (var quaCol=0; quaCol<5; quaCol++) {
var x0 = width/8;
for (var quaRow=0; quaRow<5; quaRow++) {
stroke (117,180,208);
strokeWeight (3);
noFill();
quad (x0, y0, x0-width/8, y0+quaSize, x0, y0+quaSize*2, x0+width/8, y0+quaSize);
x0 += width/4;
}
y0 += quaSize*2;
}

//Secondary diamond
var y1 = quaSize/3;
var quaSize1 = quaSize/3*2;
for (var quaCol=0; quaCol<5; quaCol++) {
var x1 = 0;
for (var quaRow=0; quaRow<5; quaRow++) {
stroke (208,208,117);
strokeWeight (5);
noFill();
quad (x1, y1, x1-width/12, y1+quaSize1, x1, y1+quaSize1*2, x1+width/12, y1+quaSize1);
x1 += width/4;
}
y1 += quaSize*2;
}

//Fourth level diamond
var quaSize4 = quaSize/3*2;
var y4 = 0 - quaSize4;
for (var quaCol=0; quaCol<6; quaCol++) {
var x4 = width/8;
for (var quaRow=0; quaRow<5; quaRow++) {
stroke (124,186,112);
strokeWeight (3);
quad (x4, y4, x4-width/12, y4+quaSize4, x4, y4+quaSize4*2, x4+width/12, y4+quaSize4);
x4 += width/6 + width/12;
}
y4 += quaSize4*3;
}

//Thirdary diamond
var quaSize2 = quaSize/3;
var y2 = quaSize2*2;
for (var quaCol=0; quaCol<5; quaCol++) {
var x2 = width/12 + width/24;
for (var quaRow=0; quaRow<5; quaRow++) {
stroke (230,230,75);
strokeWeight (3);
quad (x2, y2, x2-width/24, y2+quaSize2, x2, y2+quaSize2*2, x2+width/24, y2+quaSize2);
x2 += width/4;
}
y2 += quaSize*2;
}
var y3 = 0 - quaSize/3;
for (var quaCol=0; quaCol<5; quaCol++) {
var x3 = 0;
for (var quaRow=0; quaRow<5; quaRow++) {
strokeWeight (4);
quad (x3, y3, x3-width/24, y3+quaSize2, x3, y3+quaSize2*2, x3+width/24, y3+quaSize2);
x3 += width/4;
}
y3 += quaSize*2;
}

//Decorated dots
//vertical ones
var sizeC = width/64;
var yC = quaSize - sizeC*2;
for (var cCol=0; cCol<8; cCol++) {
var xC = 0;
for (var cRow=0; cRow<6; cRow++) {
noStroke();
fill (124,186,112);
ellipse (xC, yC, sizeC);
xC += width/4;
}
if (cCol % 2 == 0) {
yC += sizeC*4;
} else {
yC += quaSize*2 - sizeC*4;
}
}

//horizontal ones
var yC1 = quaSize;
for (var cCol=0; cCol<8; cCol++) {
var xC1 = sizeC*2;
for (var cRow=0; cRow<8; cRow++) {
ellipse (xC1, yC1, sizeC);
if (cRow % 2 == 0) {
xC1 += width/4 - sizeC*4;
} else {
xC1 += sizeC*4;
}
}
yC1 += quaSize*2;
}

noLoop();
}

function draw() {
}
``````

This wallpaper that I design has a vintage feel. I used yellow green and blue as the swatch. The geometries that I used are circles and diamonds, which are simple but timeless.

akluk-Project5-Section-A-Wallpaper

sketch
My art is inspired by a logo that i quite like and it was fun recreating it as a wallpaper. It was a challenge to create complex and organic/natural pattern using simply a double for loop and little hard coding for each one specific cell. Creating a if statement that was able to create a pattern with the colors was also interesting to think about.

``````//Alvin Luk
//Section A
//akluk@andrew.cmu.edu
//Assignment-05-B

var total; //variable that controls the number of circles at current row
var w = 90;
var sx = w/2;
var sy = w/2;

function setup() {
createCanvas(450, 450);
background(color(119,221,170));

for (var y = 0; y < height/w; y++) {
for (var x = 0; x < width/w; x++) {

//determines color of the heart
if ((y*5+x)%2 == 0){
fill(color(255,20,20));
}
else if (x%2 == 1){
fill(color(255,105,180));
}
else {
fill(color(255,215,0));
}
noStroke();

//draws heart outline
ellipse(sx+x*w-10, sy+y*w-10,20,20);
ellipse(sx+x*w+10, sy+y*w-10,20,20);
triangle(sx+x*w-20,sy+y*w-7,sx+x*w+20,sy+y*w-7,sx+x*w,sy+y*w+18)

//draws eye whites
fill(255);
ellipse(sx+x*w-9, sy+y*w-7,10,6);
ellipse(sx+x*w+9, sy+y*w-7,10,6);

//draws pupils
fill(0);
ellipse(sx+x*w-9, sy+y*w-7,5,6);
ellipse(sx+x*w+9, sy+y*w-7,5,6);
}
}

//draws line grid
for (var i = 0; i < 4 ; i++){
stroke(0);
strokeWeight(2);
line(w*(i+1)-3,0,w*(i+1)-3,height);
line(w*(i+1)+3,0,w*(i+1)+3,height);
line(0,w*(i+1)-3,width,w*(i+1)-3);
line(0,w*(i+1)+3,width,w*(i+1)+3);
}

//draws purple loops around intersection
for (var j = 0; j < 4 ; j++){
for (var k = 0; k < 4; k++){
noFill();
stroke(106,90,205);
strokeWeight(4);
ellipse(w*(j+1),w*(k+1),20,20);
}
}
noLoop();
}

function draw() {
// draw is not called due to noLoop() in setup()
}``````

NatalieKS-Project-05

``````//Natalie Schmidt
//nkschmid@andrew.cmu.edu
//Sectiond D
//Project-05

var x = 0;
var y = 0;

function setup() {
createCanvas(400, 480);
background(102, 159, 166);
}

function draw() {

for (var y = -460; y < height - 35; y += 140) {
for (var x = -50; x < width - 50; x += 130) {
leaf(x, y);
push();
fill(191, 158, 57);
triangle(x + 5, y + 55, x + 18, y + 40, x + 30, y + 55);
triangle(x + 5, y + 55, x + 18, y + 70, x + 30, y + 55);
noFill();
stroke(191, 158, 57);
strokeWeight(2);
triangle(x, y + 55, x + 18, y + 35, x + 35, y + 55);
triangle(x, y + 55, x + 18, y + 75, x + 35, y + 55);
pop();
}
}
noLoop();

}

function leaf(x, y) {
stroke(47, 87, 53);
strokeWeight(1);
fill(65, 121, 73);
// top leaf 1 - right
beginShape();
curveVertex(x + 25, y + 400);
curveVertex(x + 25, y + 400);
curveVertex(x + 35, y + 403);
curveVertex(x + 45, y + 408);
curveVertex(x + 50, y + 420);
curveVertex(x + 45, y + 430);
curveVertex(x + 45, y + 430);
endShape();
//top leaf 1 - left
beginShape();
curveVertex(x + 25, y + 400);
curveVertex(x + 25, y + 400);
curveVertex(x + 23, y + 406);
curveVertex(x + 23, y + 409);
curveVertex(x + 26, y + 420);
curveVertex(x + 30, y + 425);
curveVertex(x + 35, y + 428);
curveVertex(x + 45, y + 430);
curveVertex(x + 45, y + 430);
endShape();
// top leaf 2 - right
beginShape();
curveVertex(x + 45, y + 388 - 8);
curveVertex(x + 45, y + 388 - 8);
curveVertex(x + 55, y + 391 - 8);
curveVertex(x + 65, y + 396 - 8);
curveVertex(x + 70, y + 408 - 8);
curveVertex(x + 65, y + 418 - 8);
curveVertex(x + 65, y + 418 - 8);
endShape();
//top leaf 2 - left
beginShape();
curveVertex(x + 45, y + 388 - 8);
curveVertex(x + 45, y + 388 - 8);
curveVertex(x + 43, y + 394 - 8);
curveVertex(x + 43, y + 397 - 8);
curveVertex(x + 46, y + 408 - 8);
curveVertex(x + 49, y + 413 - 8);
curveVertex(x + 55, y + 416 - 8);
curveVertex(x + 65, y + 418 - 8);
curveVertex(x + 65, y + 418 - 8);
endShape();
// top leaf 3 - right
beginShape();
curveVertex(x + 51 + 9, y + 388 - 29);
curveVertex(x + 51 + 9, y + 388 - 29);
curveVertex(x + 61 + 9, y + 391 - 29);
curveVertex(x + 71 + 9, y + 396 - 29);
curveVertex(x + 76 + 9, y + 408 - 29);
curveVertex(x + 71 + 9, y + 418 - 29);
curveVertex(x + 71 + 9, y + 418 - 29);
endShape();
//top leaf 3 - left
beginShape();
curveVertex(x + 51 + 9, y + 388 - 29);
curveVertex(x + 51 + 9, y + 388 - 29);
curveVertex(x + 49 + 9, y + 394 - 29);
curveVertex(x + 49 + 9, y + 397 - 29);
curveVertex(x + 52 + 9, y + 408 - 29);
curveVertex(x + 55 + 9, y + 413 - 29);
curveVertex(x + 61 + 9, y + 416 - 29);
curveVertex(x + 71 + 9, y + 418 - 29);
curveVertex(x + 71 + 9, y + 418 - 29);
endShape();
// top leaf 4 - right
beginShape();
curveVertex(x + 51 + 24, y + 388 - 52);
curveVertex(x + 51 + 24, y + 388 - 52);
curveVertex(x + 61 + 24, y + 391 - 52);
curveVertex(x + 71 + 24, y + 396 - 52);
curveVertex(x + 76 + 24, y + 408 - 52);
curveVertex(x + 71 + 24, y + 418 - 52);
curveVertex(x + 71 + 24, y + 418 - 52);
endShape();
//top leaf 4 - left
beginShape();
curveVertex(x + 51 + 24, y + 388 - 52);
curveVertex(x + 51 + 24, y + 388 - 52);
curveVertex(x + 49 + 24, y + 394 - 52);
curveVertex(x + 49 + 24, y + 397 - 52);
curveVertex(x + 52 + 24, y + 408 - 52);
curveVertex(x + 55 + 24, y + 413 - 52);
curveVertex(x + 61 + 24, y + 416 - 52);
curveVertex(x + 71 + 24, y + 418 - 52);
curveVertex(x + 71 + 24, y + 418 - 52);
endShape();
// bottom leaf 1 - right
beginShape();
curveVertex(x + 51 + 49, y + 388 - 25);
curveVertex(x + 51 + 49, y + 388 - 25);
curveVertex(x + 61 + 49, y + 391 - 25);
curveVertex(x + 71 + 49, y + 396 - 25);
curveVertex(x + 76 + 49, y + 408 - 25);
curveVertex(x + 71 + 49, y + 418 - 25);
curveVertex(x + 71 + 49, y + 418 - 25);
endShape();
//bottom leaf 1 - left
beginShape();
curveVertex(x + 51 + 49, y + 388 - 25);
curveVertex(x + 51 + 49, y + 388 - 25);
curveVertex(x + 49 + 49, y + 394 - 25);
curveVertex(x + 49 + 49, y + 397 - 25);
curveVertex(x + 52 + 49, y + 408 - 25);
curveVertex(x + 55 + 49, y + 413 - 25);
curveVertex(x + 62 + 49, y + 416 - 25);
curveVertex(x + 71 + 49, y + 418 - 25);
curveVertex(x + 71 + 49, y + 418 - 25);
endShape();
// bottom leaf 2 - right
beginShape();
curveVertex(x + 51 + 33, y + 388 - 1);
curveVertex(x + 51 + 33, y + 388 - 1);
curveVertex(x + 61 + 33, y + 391 - 1);
curveVertex(x + 71 + 33, y + 396 - 1);
curveVertex(x + 76 + 33, y + 408 - 1);
curveVertex(x + 71 + 33, y + 418 - 1);
curveVertex(x + 71 + 33, y + 418 - 1);
endShape();
//bottom leaf 2 - left
beginShape();
curveVertex(x + 51 + 33, y + 388 - 1);
curveVertex(x + 51 + 33, y + 388 - 1);
curveVertex(x + 49 + 33, y + 394 - 1);
curveVertex(x + 49 + 33, y + 397 - 1);
curveVertex(x + 52 + 33, y + 408 - 1);
curveVertex(x + 55 + 33, y + 413 - 1);
curveVertex(x + 62 + 33, y + 416 - 1);
curveVertex(x + 71 + 33, y + 418 - 1);
curveVertex(x + 71 + 33, y + 418 - 1);
endShape();
// bottom leaf 3 - right
beginShape();
curveVertex(x + 51 + 15, y + 388 + 18);
curveVertex(x + 51 + 15, y + 388 + 18);
curveVertex(x + 61 + 15, y + 391 + 18);
curveVertex(x + 71 + 15, y + 396 + 18);
curveVertex(x + 76 + 15, y + 408 + 18);
curveVertex(x + 71 + 15, y + 418 + 18);
curveVertex(x + 71 + 15, y + 418 + 18);
endShape();
//bottom leaf 3 - left
beginShape();
curveVertex(x + 51 + 15, y + 388 + 18);
curveVertex(x + 51 + 15, y + 388 + 18);
curveVertex(x + 49 + 15, y + 394 + 18);
curveVertex(x + 49 + 15, y + 397 + 18);
curveVertex(x + 52 + 15, y + 408 + 18);
curveVertex(x + 55 + 15, y + 413 + 18);
curveVertex(x + 62 + 15, y + 416 + 18);
curveVertex(x + 71 + 15, y + 418 + 18);
curveVertex(x + 71 + 15, y + 418 + 18);
endShape();
// bottom leaf 4 - right
beginShape();
curveVertex(x + 51 - 2, y + 388 + 35);
curveVertex(x + 51 - 2, y + 388 + 35);
curveVertex(x + 61 - 2, y + 391 + 35);
curveVertex(x + 71 - 2, y + 396 + 35);
curveVertex(x + 76 - 2, y + 408 + 35);
curveVertex(x + 71 - 2, y + 418 + 35);
curveVertex(x + 71 - 2, y + 418 + 35);
endShape();
//bottom leaf 3 - left
beginShape();
curveVertex(x + 51 - 2, y + 388 + 35);
curveVertex(x + 51 - 2, y + 388 + 35);
curveVertex(x + 49 - 2, y + 394 + 35);
curveVertex(x + 49 - 2, y + 397 + 35);
curveVertex(x + 52 - 2, y + 408 + 35);
curveVertex(x + 55 - 2, y + 413 + 35);
curveVertex(x + 62 - 2, y + 416 + 35);
curveVertex(x + 71 - 2, y + 418 + 35);
curveVertex(x + 71 - 2, y + 418 + 35);
endShape();
fill(73, 135, 82);
stroke(191, 158, 57);
strokeWeight(1);
//center line for leaf
push();
noFill();
stroke(47, 87, 53);
strokeWeight(3);
beginShape();
curveVertex(x + 30, y + 310);
curveVertex(x + 30, y + 435);
curveVertex(x + 100, y + 360);
curveVertex(x + 50, y + 360)
endShape();
pop();
}
``````

I really wanted to do something with plant leaves and gold, and started at first to sketch out what I wanted. That ended up changing quite a lot, as I couldn’t for the life of me figure out how to write a loop that would loop the leaf shape rather than having to figure out the coordinates for each one individually. I asked multiple people for help, including a TA and some students in other CS courses, but none of us could really make it work. I wish I could’ve figured that out and implemented it for this project, because it would’ve saved a lot of time. Otherwise, figuring out how to loop the whole plant was relatively easy, since we had learned a version of how to do so in class.

The original ideas for my wallpaper. I wanted to do some sort of fern, and did a rough sketch of what that might look like.

Trying to figure out coordinates for the leaves. Figuring out the first leaf took most of my time, as I was pretty new to using curveVertex().

A friend (from another CS course) tried to help me figure out how to write a loop for the leaves by drawing it out on paper. In the end, we couldn’t figure it out.

amui1-Project-05-Wallpaper

``````//Allison Mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-05

var x = 50;
var y = 50;

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

function draw() {
background(187,0,0)
stroke(234,247,206);
strokeWeight(1);
//flower design
for (xPosition = 40; xPosition < width - 20; xPosition += 100) {
//don't make lines through middle
if (xPosition <= 150 || xPosition > 300) {
line(xPosition,0,xPosition,height);
var y = 20;
//loops for height of canvas - 100 arbitrary number
for (i = 0; i < 100; i++) {
//checks if odd or even tick
if (i%2==0) {
fill(234,247,206);
//flower shape
ellipse(xPosition-10,y-10,5,5);
arc(xPosition-10,y-10,5,15,PI,0);
arc(xPosition-10,y-10,15,5,HALF_PI,3*HALF_PI);
//flower stem
line(xPosition,y,xPosition-10,y-10);
y+= 30;
} else {
//flower stem
line(xPosition,y-15,xPosition+10,y-25);
//flower shape
ellipse(xPosition+10,y-25,5,5);
arc(xPosition+10,y-25,5,15,PI,0);
arc(xPosition+10,y-25,15,5,3*HALF_PI,HALF_PI);
}

}
}
}

//middle line

line(width/2,0,width/2,height/2-75);
line(width/2,height/2+75,width/2,height);
//top half
ellipse(width/2,50,10,10);
ellipse(width/2,60,7,7);
ellipse(width/2,67,5,5);
//bottom half
ellipse(width/2,height-67,5,5);
ellipse(width/2,height-60,7,7);
ellipse(width/2,height-50,10,10);

//chinese oriental symbol
noFill();
stroke(218,0,0);
strokeWeight(5);
ellipse(width/2,height/2,125,125);
ellipse(width/2,height/2,50,50);
ellipse(width/2,height/2,20,20)

//inside of middle symbol
//rotate 8 times
for (var i = 0; i <8; i++) {
push();
//move to center of canvas
translate(width/2,height/2);
//rotate 8 times
rotate(TWO_PI * i/8);
strokeWeight(2);
//design
line(30,28,35,33);
line(35,33,40,28);
line(40,28,30,18);
line(30,18,20,30);
line(20,30,35,42);
line(35,42,55,15);
line(55,15,35,12);
line(35,12,33,15);
line(33,15,44,23);
pop();
}

noLoop();
}
``````

Again, I really enjoyed this project and how challenging it was. Using loops is extremely efficient, however, I found it hard to conceptualize. For my project this week, I wanted to connect it with my culture. I am satisfied with my final product. However, originally, I wanted to draw a dragon. But, it was too hard to figure out curves, quadratic curves, bezier curves, etc. In the future, I’d like to expand upon that and how I can utilize loops to make it easier to draw. I started with sketching and as you can see see from my attached pictures, my wallpaper changed many times throughout the iterations.

Above is my original sketch.

Above is what I used to figure out and conceptualize how to do the for loops with the middle oriental symbol.

ctv-Project-05-Wallpaper

``````//Ty Van de Zande
//Section B
//ctv@andrew.cmu.edu
//Project-05

//canvas size
var cWid = 470;
var cHgt = 470;

//blockForm size
var wid = 50;
var hgt = 70;

//counter
var i = 0;

//some traits of circles and lines
var dia = wid;
var wght = 1;

//points shapes interact with
var xZero = 0;
var xOne = wid*.25;
var xTwo = wid*.5;
var xThree = wid*.75;
var xFour = wid;
var x = [xZero, xOne, xTwo, xThree, xFour];

var yZero = 0;
var yOne = hgt*.25;
var yTwo = hgt*.5;
var yThree = hgt*.75;
var yFour = hgt;
var y = [yZero, yOne, yTwo, yThree, yFour];

function setup() {
createCanvas(cWid, cHgt);

//splits canvas into cells for each pattern block
//x-axis
for(xOff=0; xOff<=cWid/wid; xOff++){

//y-axis
for(yOff=0; yOff<=cHgt/hgt*2; yOff++){

//calls helper function bg(), sends coordinates
draw(xOff, yOff);
}
}
}

function draw(xOff, yOff){

ellipseMode(CENTER);
stroke(200);
strokeWeight(1);

//
for(i=0; i<xOff; i++) {
for(j=0; j<yOff; j++){

//creates an offset variable for the shapes
var xOffset =  i * xOne;
var yOffset = j * yFour;

strokeWeight(wght);

//rightDownLines
line(xOne + xOffset, yZero + yOffset, xFour + xOffset, yFour + yOffset);

//leftDownLines
line(xThree + xOffset, yZero + yOffset, xZero + xOffset, yFour + yOffset);

//verticalLines
line(xZero + xOffset*2, yZero + yOffset, xZero + xOffset*2, yFour + yOffset);

//horizontalLines
line(xZero + xOffset*4, yZero + yOffset/2, xFour + xOffset*4, yZero + yOffset/2);

//ellipses
noFill();
ellipseMode(CENTER);
ellipse(xZero + xOffset*4, yOne + yOffset+8, dia, dia);
}
}
}``````

This project is based around the Modernist movement (minus color). I am interested in proportions of shape and axis of movement within a static structure. This grid is loosely based on a project I am starting to work on for designing a typeface. Type has four major components: horizontal strokes, vertical strokes, diagonal strokes, and curves. This grid is a dissociation of those elements.

Project 5, odh

``````//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 5

var Right = 0; //Declares the variable for how the series move horizontally
var Down = 0;  //Declares the variable for how the series move vertically

function setup() {
createCanvas(479, 479);
background(150, 120, 200);
}

function draw() {
translate(239, 239); //Moves the array of the series to be centes on the corner
translate(-480, Down);
translate(Right, 0);
for (var y = 0; y < 500; y += 60) {     //Sets up the series of
for (var x = 0; x < 500; x += 60) { //intersecting lines
strokeWeight(2);
stroke(200, 255, 255);
line(x, x, y + 80, y - 80);     //Creates the Series of intersecting lines
};
};
Right = Right + 100;
Down = Down - 100;
}``````

I chose to play with the criss-cross idea that often shows up on wallpapers. I am a fan of complex but organized patterns so I gave the lines a steroid injection while still keeping them in an array.

dnoh-sectionD-project5-wallpaper

``````function setup() {
createCanvas(480, 480);
background(220);
}

function draw() {
for (x = 0; x <= 480;x += 120) {
for (y = 0; y <= 480; y += 120) {
//branches thicc
stroke(105,72,31);
strokeWeight(2);
line(x+35,y+0,x+35,y+17);
line(x+35,y+17,x+58,y+16);
line(x+58,y+16,x+58,y+75);
line(x+58,y+75,x+35,y+75);
line(x+35,y+75,x+35,y+98);
line(x+35,y+98,x+25,y+98);
line(x+25,y+98,x+25,y+112);
line(x+25,y+112,x+35,y+112);
line(x+35,y+112,x+35,y+120);
line(x+97,y+0,x+97,y+10);
line(x+96,y+10,x+83,y+10);
line(x+83,y+10,x+83,y+28);
line(x+83,y+28,x+58,y+28);
line(x+58,y+59,x+84,y+59);
line(x+84,y+59,x+84,y+96);
line(x+84,y+96,x+97,y+96);
line(x+97,y+96,x+97,y+120);
//branches thin left
strokeWeight(1);
line(x+0,y+68,x+13,y+68);
line(x+13,y+68,x+13,y+78);
line(x+13,y+78,x+27,y+78);
line(x+27,y+78,x+27,y+67);
line(x+27,y+67,x+31,y+67);
line(x+31,y+67,x+31,y+54);
line(x+31,y+54,x+58,y+54);
//branches thin right
line(x+97,y+10,x+107,y+10);
line(x+107,y+10,x+107,y+60);
line(x+107,y+60,x+100,y+60);
line(x+100,y+60,x+100,y+67);
line(x+100,y+67,x+120,y+67);
//leaf top
stroke(26,175,75);
strokeWeight(2);
line(x+7,y+0,x+5,y+2);
line(x+5,y+2,x+21,y+1);
line(x+21,y+1,x+22,y+0);
//leaf 2nd to top
line(x+35,y+16,x+37,y+26);
line(x+37,y+26,x+26,y+37);
line(x+26,y+37,x+25,y+22);
line(x+25,y+22,x+35,y+16);
//leaf 3rd to top
line(x+83,y+28,x+83,y+35);
line(x+83,y+35,x+101,y+42);
line(x+101,y+42,x+95,y+28);
line(x+95,y+28,x+83,y+28);
//leaf 4th to top
line(x+84,y+86,x+95,y+77);
line(x+95,y+77,x+111,y+73);
line(x+111,y+73,x+101,y+87);
line(x+101,y+87,x+84,y+86);
//leaf bottom
line(x+7,y+120,x+19,y+109);
line(x+19,y+109,x+25,y+112);
line(x+25,y+112,x+22,y+120);
//rose
stroke(237,71,51);
line(x+54,y+90,x+40,y+102);
line(x+40,y+102,x+35,y+112);
line(x+35,y+112,x+45,y+115);
line(x+45,y+115,x+58,y+113);
line(x+58,y+113,x+57,y+97);

line(x+50,y+94,x+48,y+102);
line(x+48,y+102,x+51,y+108);
line(x+51,y+108,x+58,y+113);
line(x+35,y+112,x+48,y+102);

noStroke();
fill(237,71,51);
triangle(x+53,y+96,x+51,y+102,x+53,y+102);
triangle(x+51,y+102,x+55,y+101,x+54,y+107);
}
}
}
``````

I started with an idea to have geometric natural figures. I started with various sketches, but decided to go with the one posted above. All the branches connect to each other to create a cohesive wallpaper. The sketch was remade in illustrator so I could find the exact pixels/locations of the lines. All in all, this was a fairly tedious project because I had to simply create lines for everything, thus having to check the pixels for everything.

Project-05-Wallpaper-sjahania

``````function setup() {
createCanvas(400, 400);
background(100,180,180);

var lineX = 20; // x coordinate of lines
var arrowX = 15; // y coordinates of arrows and dots
var arrowY = 20; // y coordinates of arrows and dots

//outermost loop has the first set of alternating x values
for (x1 = 0; x1 <= 400; x1 += 40) {

//next loop has the second set of alternating x values
for (x2 = 20; x2 <= 400; x2 += 40){

//third loop has the y values that increase each iteration
for (y = 0; y <= 400; y += 15) {

//arrows(leaves)
//if statement skips every 4th arrow
if (y % 60 != 0) {

//make them green
stroke(0,120,0);
strokeWeight(1);

//makes left side of each arrow on the x1 lines
line(arrowX + x1, arrowY + y - 5, lineX + x1, arrowY +  y);

//makes right side of each arrow on the x1 lines
line(lineX + x1, arrowY + y, arrowX + x1 + 10, arrowY + y - 5);

//makes left side of each arrow on the x2 lines
line(arrowX + x2, arrowY + y - 5 + 30, lineX + x2, arrowY +  y + 30);

//makes right side of each arrow on the x2 lines
line(lineX + x2, arrowY + y + 30, arrowX + x2 + 10, arrowY + y - 5 + 30);
}

//dots (flowers)
//if statement puts them at the top of each set of arrows
if (y % 60 == 0) {

//random colors
fill(random(0,255), 73, 113);

//random sizes
strokeWeight(random(5,10));

point(lineX + x1, y + 30);
point(lineX + x2, y);
}

//lines (stems)
//make them green
stroke(0,120,0);
strokeWeight(1);

//x1 lines
line(lineX + x1, 0, lineX + x1, height);

//x2 lines
line(lineX + x2, 0, lineX + x2, height);
}
}
}
noLoop();
}

function draw() {
}
``````

I had a lot of trouble with this because I liked a lot of different designs I found online, but could not picture how to put them in p5.js. In the end, I combined two designs I liked to make a relatively simple pattern that looks kind of like flowers.

This was my sketch. It was simple but still something I could challenge myself by trying to code.

I used this as inspiration for the flower “dots”. The image was titled “Dandelion,” so I thought about just using circle shapes for my flowers.

I used this as inspiration for the leaves. I actually started with the arrow design, and then decided they looked like leaves and added to them.

cchau1 – Project05 – Wallpaper

``````
var w = 60; //adjusts the spacing between seeds
var h = 60; //adjusts vertical distance between seeds
var spaceY = 30; //y-circle offset
var spaceX = 30; //x-circle offset
var wid; //width of rectangle component of "seed"
var x = 1;
var y = 1;
var columns;
var spacing = 10; //for the white lined grid-feature

function setup() {
createCanvas(480, 480);
background(255,174,185);

for (var x = 0; x < height; x++) {
strokeWeight(1.5)
stroke(255);
noFill();
rect(x*spacing,x*spacing,width-50,height-150);
} //this creates the white lines on the pink watermelon flesh
//wanted to maintain the "square grid" feature in the corners of the
//watermelon flesh so I subtracted from the canvas dimensions

noStroke(); //colors of the rind
fill(141,213,149);
rect(0,height-100,width,height);
fill(56,167,69);
rect(0,height-60,width,height);
fill(49,141,60);
rect(0,height-40, width, height);

var rowChange = 7;
for (var row = 0; row < 6; row++) {
if(row%2==0) {
w = 420/7;
spaceX = 60;
wid = 5;
columns = 7;
} else{
w = 60;
spaceX = 30;
columns = 8;
wid = 12;
}

//loop draw the "seeds" and depending on the row #, will alternate
for (var col = 0; col < columns; col++){
var py = spaceY + row * h;
var px = spaceX + col * w;
fill(52,54,52);
rect(px,py,wid,wid);
console.log(px, py);