## Elena Deng Project 5 Wallpaper

``````/*Elena Deng
Section E
edeng1@andrew.cmu.edu
Project-05
}
*/

function setup() {
createCanvas(600, 600);
noStroke();
}

function draw() {
background("pink");

//draws background lines (light pink)
for(var i=-20; i<width; i+=30){
rect(i,0,20,height);
fill(250,171,206);
}

//draws circles (dough)
for (var y = 20; y < height; y += 80) {
for (var x = 20; x < width; x += 70) {
fill(200,164,118);
ellipse(x, y, 60, 60);
}
}
//draws icing (chocolate)
for (var y=20;y<height;y+=80){
for (var x = 10;x<width;x+=70){
fill(126,87,49);
ellipse(x+10, y, 48, 48);
}
}

//draws donut hole
for (var y=20;y<height;y+=80){
for (var x = 10;x<width;x+=70){
fill("pink");
ellipse(x+10, y, 15, 15);
}
}
//sprinkles (yellow and blue)
for(var y=10;y<height;y+=80){
for(var x=10;x<width;x+=70){
stroke("yellow");
strokeWeight(2.5);
line(x,y,x+3,y+3);
line(x+5,y+20,x,y+23);
line(x+25,y+10,x+28,y+14);
line(x+10,y-5,x+14,y-2);
stroke(126,211,247);
line(x+22,y+2,x+19,y+6);
line(x-9,y+13,x-5,y+15);
line(x+14,y+22,x+20,y+25);

}
}
noLoop();
}
``````

I’m not completely satisfied with this iteration but I’m proud of the overall visual result. As you can see in my sketchbook (will upload soon), I originally wanted to attempt a more complex shape, however after trying multiple times to create Shrek, I was unable to get it to how I wanted it to look, so I changed my idea.

Out of all the projects we’ve done thus far, I am not as proud of this assignment compared to the other ones, I hope in the future I can improve on the skills that can be used through nested functions. I hope by the end of this class I will be able to create Shrek.

## Eliza Pratt – Project 05

``````/*
Eliza Pratt
Section E
elpratt@andrew.cmu.edu
Project 05
*/

function setup() {
createCanvas(600, 500);
background(103, 196, 92);

for (y = -5; y < height; y+=35) {
//even rows
if (y%2 == 0) {
for (x = 15; x < width; x+=30) {
}
}
//odd rows
else {
for (x = 15; x < width; x+=30) {
}
}
}
noLoop();
}

push();
translate(x, y);

var bodyY = y + 20; //body origin
var bodyW = 50; //size of body

noFill();
strokeWeight(2);
fill(0);

//body
noStroke();
fill(255, 0, 0);
ellipse(x, bodyY, bodyW, bodyW);

//wing line
stroke(0);
strokeWeight(2);
line(x, bodyY - bodyW/2, x, bodyY + bodyW/2);

//spots
fill(0);
ellipse(x - 15, bodyY, 8, 8);
ellipse(x - 10, bodyY - 15, 8, 8);
ellipse(x - 8, bodyY + 15, 8, 8);
ellipse(x + 15, bodyY, 8, 8);
ellipse(x + 10, bodyY - 15, 8, 8);
ellipse(x + 8, bodyY + 15, 8, 8);

pop();

}
``````

This was the first time I’ve created a function to help with my code! I was trying to find a way to have the individual ladybugs rotate at random angles, but I got too confused. I probably wouldn’t put this wallpaper in my house, but maybe it would make a nice paper napkin print?

Early sketches: ## Shirley Chen – Project – 05 – Wallpaper

``````// Shirley Chen
// Section B
// junfanc@andrew.cmu.edu
// Project-05

function setup() {
createCanvas(600, 450);
noStroke();
}

function draw() {
background(255, 230, 178);
noLoop();

//Draw the background dots pattern
for (var y = 30; y < 450; y += 50) {
for (var x = 30; x < 600; x += 50) {
fill(137, 188, 157);
ellipse(x, y, 4, 4);
}
}

//Draw the background orangle line pattern
for (var y = 50; y < 450; y += 120) {
for (var x = 50; x < 600; x += 120) {
strokeWeight(4);
stroke(252, 155, 85);
line(x, y, x+4, y+2);
}
}

//Draw the background blue line pattern
for (var y = 10; y < 450; y += 60) {
for (var x = 20; x < 600; x += 200) {
strokeWeight(2);
stroke(129, 182, 211);
line(x+5, y, x, y+7);
}
}

//Draw grid for the smiling watermelon
for (var y = 0; y < 450; y += 80) {
for (var x = 0; x < 600; x += 200) {
noStroke();
push();
translate(x, y);
drawMellon();
pop();
}
}

//Draw grid for the screaming watermelon
for (var y = 0; y < 450; y += 100){
for (var x = 100; x < 600; x += 200){
push();
translate(x, y);
drawTiltedMellon();
pop();
}
}
}

function drawMellon(){
//Draw the skin of the watermelon
fill(86, 135, 109);
arc(50, 50, 60, 60, 0.2*PI, 0.45*PI);
//Draw the fruit of the watermellon
fill(226, 133, 143);
arc(50, 50, 50, 50, 0.2*PI, 0.45*PI);
//Drawing the face for the smiling watermellon
stroke(6);
strokeWeight(2);
line(52, 58, 54, 62);
line(56, 55, 60, 59);
noFill();
strokeWeight(1);
arc(50, 50, 40, 40, 0.3*PI, 0.4*PI)

}

function drawTiltedMellon(){
//Draw the skin of the watermelon
fill(86, 135, 109);
arc(50, 50, 80, 80, 0.5*PI, 0.75*PI);
//Draw the fruit of the watermelon
fill(226, 133, 143);
arc(50, 50, 70, 70, 0.5*PI, 0.75*PI);
//Drawing the face for the screaming watermelon
stroke(6);
strokeWeight(2);
line(40, 56, 43, 60);
line(39, 62, 43, 60);
line(50, 58, 46, 60);
line(50, 62, 46, 60);
fill(216, 55, 49);
strokeWeight(1);
ellipse(45, 70, 5, 10);
noFill();
strokeWeight(1);
arc(45, 50, 40, 40, 0.3*PI, 0.4*PI)
arc(50, 40, 50, 80, 0.5*PI, 0.65*PI)
}
``````

For this wallpaper project, I created two variation of watermelon, smiling watermelon and screaming watermelon. I used the “for” loop command to create two sets of grid to define the position of the watermelon. And I add two kinds of faces on the watermelon. For the background, I also used “for” loop to add dot and line pattern with different color and stroke weight. In general, this project is very fun to work with and helps me get more practice on the “for” loop command. ## Sharon Yang Project 05 Wallpaper

``````/*Sharon Yang
Section C
junginny
Project-05
*/

function setup() {
createCanvas(500,600);
background(253,254,210);
noStroke();
//6 rows of donuts
for (var y = 0; y < 6; y++) {
if (y % 2 == 0) { //hexagonal formation
for (var x = 0; x < 6; x++) {
fill(225,182,128);
noStroke();
ellipse(30+x*110, 20+y*110, 75, 75); //base of donut
if (x % 2 == 0) {
fill(246,166,199); //strawberry glaze
}
else {
fill(95,42,22); //chocolate glaze
}
noStroke();
ellipse(30+x*110, 20+y*110, 65, 65);
fill(253,254,210);
noStroke();
ellipse(30+x*110, 20+y*110, 30, 30); //donut hole
//sprinkles!
if (x % 2 == 0) {
strokeWeight(3); //chocolate sprinkles
stroke(95,42,22);
line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
}
else {
strokeWeight(3); //colorful sprinkles
stroke(185,85,130);
line(5+x*110,y*110,12+x*110,3+y*110); //top left sprinkle
stroke(255);
line(x*110+35,y*110+38,x*110+40,y*110+45); //bottom right sprinkle
stroke(239,245,174);
line(x*110+56,y*110+5,x*110+50,y*110+15); //top right sprinkle
stroke(62,170,230);
line(2+x*110,30+y*110,8+x*110,27+y*110); //bottom left sprinkle
}
}
}
else {
for (var x = 0; x < 4; x++) {
fill(225,182,128);
noStroke();
ellipse(90+x*110, 20+y*110, 75, 75);
if (x % 2 == 1) {
fill(246,166,199);
}
else {
fill(95,42,22);
}
noStroke();
ellipse(90+x*110, 20+y*110, 65, 65);
fill(253,254,210);
noStroke();
ellipse(90+x*110, 20+y*110, 30, 30);
//sprinkles!
if (x % 2 == 1) {
strokeWeight(3); //chocolate sprinkles
stroke(95,42,22);
line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
}
else {
strokeWeight(3); //colorful sprinkles
stroke(185,85,130);
line(65+x*110,y*110,72+x*110,3+y*110); //top left sprinkle
stroke(255);
line(x*110+95,y*110+38,x*110+100,y*110+45); //bottom right sprinkle
stroke(239,245,174);
line(x*110+116,y*110+5,x*110+110,y*110+15); //top right sprinkle
stroke(62,170,230);
line(62+x*110,30+y*110,68+x*110,27+y*110); //bottom left sprinkle
}
}
}
}
noLoop();
}``````

While the project was very straightforward and quite easy, it was also a lot of fun and I could understand better the use of for loops and nested for loops. I feel more comfortable declaring the variables I need within the for loops and adjusting the increments.

I have been inspired by the google image attached. ## Lingfan Jiang – Project 05 – Wallpaper

``````//Lingfan Jiang
//Section B
//lingfanj@andrew.cmu.edu
//Project-05

var tx; //triangle positions
var tw = 60; //triangle width

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

function draw(){
background(229, 249, 224);
translate(-150, -200); //make sure the pattern fills canvas

for (var tx = 0; tx < 800; tx += (1.25 * tw)){ //make sure the distance between the triangles stays 1.25 in x axis
for (var j = 0; j < 20; j++){ //make the pattern repeats in the y axis

fill(163, 247, 181);
stroke(229, 249, 224);
strokeWeight(10); //create a different visual effect where one group of triangles has lineweight and the other don't
//calculating the positions of each points using tw and tx
//basically all the triangles are based on the first triangle created in the left up corner
triangle(tx + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
tx + tw + (j * tw / 4), (sqrt(3) * tx / 5) + (j * 3 * sqrt(3) / 4 * tw),
tx + tw / 2 + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw / 2) + (j * 3 * sqrt(3) / 4 * tw));

fill(64, 201, 162);
noStroke();
//calculating the other group of triangles using tw and tx
triangle(tx + 0.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw),
tx + 1.75 * tw + (j * tw / 4), (sqrt(3) * tx / 5) + (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw),
tx + 1.25 * tw + (j * tw / 4), (sqrt(3) * tx / 5) - (sqrt(3) * tw) / 4 + (j * 3 * sqrt(3) / 4 * tw));
}
}
}
`````` This is the starting idea of my wallpaper, and I really liked how triangles form the hexagon in the middle. However, when I get into the codes, I realized the difficulties to code triangles. In order to form the triangles, I have to calculate the positions of each point and the distance with other ones so that they could form the hexagon perfectly. It is also hard to lay out those triangles since they do not array in the x or y-axis directly. Instead, they move diagonally. Therefore, it is harder to use the nested loop. In the end, I played a little bit with line weights and color to make it look nicer and more interesting.

## Kyle Leve-Project-05-Wallpaper

``````// Kyle Leve
// kleve@andrew.cmu.edu
// Section A
// Project-05-Wallpaper

var x = 0;
var y = 10;
var spacing = 20;
var spacing2 = 440;
var spacing3 = 50;
var cirX = 15;
var cirY = 10;
var cirX2 = 240;
var cirY2 = 10;
var cirX3 = 50;
var cirY3 = 50;
var curveX = 240;
var curveY = 240;

function setup() {
createCanvas(480, 480);
background(0, 100, 200);
noLoop();
}

function draw() {
for (y = 0; y <= height; y += spacing) { // Creates repeated purple horizontal lines
stroke('purple');
strokeWeight(3);
line(x, y, width, y);
}

for (cirX = 0; cirX < (0.5 * width); cirX += spacing) { // Creates light blue repeated circles
for (cirY = 0; cirY < height; cirY += spacing) {
fill('skyblue');
stroke('blue');
strokeWeight(2);
ellipse(cirX + 10, cirY + 10, 15, 15);
}
}

for (cirX2 = 240; cirX2 <= width; cirX2 += spacing) { // Creates light green repeated circles
for (cirY2 = 0; cirY2 < height; cirY2 += spacing) {
fill('lightgreen');
stroke('green');
strokeWeight(2);
ellipse(cirX2 + 10, cirY2 + 10, 15, 15);
}
}

for (cirX3 = 0; cirX3 <= 480; cirX3 += spacing2) { // Creates the four silver circles in the corners
for (cirY3 = 0; cirY3 <= 480; cirY3 += spacing2) {
fill('silver');
stroke(0);
ellipse(cirX3 + 20, cirY3 + 20, 15, 15);
}
}
// Creates the purple and orange patterns in the center
fill('violet');
stroke('purple')
strokeWeight(5);
curve(curveX, height, curveX, height, curveX, 0.75 * height, 800, 280);

fill('orange');
stroke('red')
strokeWeight(5);
curve(curveY, height, curveY, height, curveY, 0.75 * height, -320, 280);

fill('violet');
stroke('purple')
strokeWeight(5);
curve(curveX, 0.75 * height, curveX, 0.75 * height, curveX, 0.5 * height, 800, 140);

fill('orange');
stroke('red')
strokeWeight(5);
curve(curveY, 0.75 * height, curveY, 0.75 * height, curveY, 0.5 * height, -320, 140);

fill('violet');
stroke('purple')
strokeWeight(5);
curve(curveX, 0.5 * height, curveX, 0.5 * height, curveX, 0.25 * height, 800, 0);

fill('orange');
stroke('red')
strokeWeight(5);
curve(curveY, 0.5 * height, curveY, 0.5 * height, curveY, 0.25 * height, -320, 0);

fill('violet');
stroke('purple')
strokeWeight(5);
curve(curveX, 0.25 * height, curveX, 0.25 * height, curveX, 0, 800, -100);

fill('orange');
stroke('red')
strokeWeight(5);
curve(curveY, 0.25 * height, curveY, 0.25 * height, curveY, 0, -320, -100);
}`````` Starting this project I knew I wanted to experiment with different sides of the canvas. I decided to make the center of the canvas a divider where I would have the same thing on both sides, however different colors. I experimented with the curve function to create the centerpiece rather than doing the circles that I had intended. Overall, I enjoyed this project because my ideas were able to develop and evolve after the initial draw phase.

## Kevin Riordan Project-05-Wallpaper-Section C

``````/*Kevin Riordan
Section C
kzr@andrew.cmu.edu
project_05*/
function setup() {
createCanvas(600,400);
background(139,210,247);
var yStart=50;
var xStart=50;
var height=Math.sqrt(3)/2; //making hexagon shaped grid
for (var rows=-1; rows<7; rows++) {
if(rows%2==0) { //for even numbered rows
for (var columns=0; columns<10; columns++) {
var yPos=yStart+rows*80*height;
var xPos=xStart+columns*80;
//bunny
//left ear
noStroke();
fill(255);
arc(xPos-15,yPos,10,80,PI,2*PI);
fill(233,138,159);
arc(xPos-15,yPos,6,65,PI,2*PI);
//right ear
fill(255);
arc(xPos+15,yPos,10,80,PI,2*PI);
fill(233,138,159);
arc(xPos+15,yPos,6,65,PI,2*PI);
fill(255);
ellipse(xPos,yPos,50,40);
//nose
fill(0);
arc(xPos,yPos,8,8,0,PI);
fill(233,138,159);
triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
//mouth
stroke(0);
line(xPos,yPos+4,xPos,yPos+8);
line(xPos-3,yPos+11,xPos,yPos+8);
line(xPos,yPos+8,xPos+3,yPos+11);
//left eye
noStroke();
fill(0);
ellipse(xPos-15,yPos-5,4,4);
//right eye
ellipse(xPos+15,yPos-5,4,4);
//carrot
//green parts
fill(54,116,54);
triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
fill(89,169,61);
triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
//orange part
fill(229,120,56);
arc(xPos-40,yPos+5,20,4,PI,2*PI);
triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
}
}
else { //for odd numbered rows
for (var columns=-1; columns<11; columns++) {
var yPos=yStart+rows*80*height;
var xPos=xStart+40+columns*80;
//bunny
//left ear
noStroke();
fill(255);
arc(xPos-15,yPos,10,80,PI,2*PI);
fill(233,138,159);
arc(xPos-15,yPos,6,65,PI,2*PI);
//right ear
fill(255);
arc(xPos+15,yPos,10,80,PI,2*PI);
fill(233,138,159);
arc(xPos+15,yPos,6,65,PI,2*PI);
fill(255);
ellipse(xPos,yPos,50,40);
//nose
fill(0);
arc(xPos,yPos,8,8,0,PI);
fill(233,138,159);
triangle(xPos-3,yPos,xPos+3,yPos,xPos,yPos+4);
//mouth
stroke(0);
line(xPos,yPos+4,xPos,yPos+8);
line(xPos-3,yPos+11,xPos,yPos+8);
line(xPos,yPos+8,xPos+3,yPos+11);
//left eye
noStroke();
fill(0);
ellipse(xPos-15,yPos-5,4,4);
//right eye
ellipse(xPos+15,yPos-5,4,4);
//carrot
//green parts
fill(54,116,54);
triangle(xPos-40,yPos+5,xPos-49,yPos-35,xPos-38,yPos-29);
triangle(xPos-40,yPos+5,xPos-35,yPos-31,xPos-39,yPos-26);
fill(89,169,61);
triangle(xPos-40,yPos+5,xPos-48,yPos-20,xPos-38,yPos-15);
triangle(xPos-40,yPos+5,xPos-34,yPos-21,xPos-39,yPos-14);
//orange part
fill(229,120,56);
arc(xPos-40,yPos+5,20,4,PI,2*PI);
triangle(xPos-30,yPos+5,xPos-50,yPos+5,xPos-40,yPos+40);
}
}
}
noLoop();
}
function draw() {
}``````

I started by sketching out my idea of doing alternating bunnies and carrots. To make this project I started with the hexagonal grid template, and then made one bunny and one carrot, and then played around with the variables to put them into the right spot so that they would be translated the right way. This project made me more comfortable with nested for loops, and how to make copies of pictures on varying grids.

## Sarah Yae Project 05 Section B

``````//Sarah Yae
//Section B
//smyae@andrew.cmu.edu
//Project-05

//variables for arc
var uparc_x;
var uparc_y;
var arc_w = 100;
var arc_h = 50;

//variables for dots
var px;
var py;
var yx;
var yy;

function setup() {
createCanvas(500, 500);
background(213,196,161);
}

function draw() {

//upper green arc
for (var uparc_y = 50; uparc_y < 500; uparc_y += 100) {
for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
noFill ();
stroke (177,194,122);
strokeWeight (3);
arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
}
}

//upper blue arc
for (var uparc_y = 100; uparc_y < 600; uparc_y += 100) {
for (var uparc_x = 50; uparc_x < 500; uparc_x += 100) {
noFill ();
stroke (180,216,231);
strokeWeight (3);
arc(uparc_x, uparc_y, arc_w, arc_h, PI, TWO_PI);
}
}

//pink dots
for (var py = 25; py < 500; py += 50) {
for (var px = 50; px < 500; px += 200) {
fill(255,195,194);
noStroke();
ellipse(px,py,10,10);
}
}

//yellow dots
for (var yy = 25; yy < 500; yy += 50) {
for (var yx = 150; yx < 500; yx += 200) {
fill(253,253,150);
noStroke();
ellipse(yx,yy,10,10);
}
}

noLoop();

}
``````

I was originally planning on doing a wallpaper that resembles string lights:

However, I realized that as I was creating the wallpaper, it was more aesthetically pleasing to do different patterns and colors, rather than just string lights. I used a lot of pastel colors, to evoke a soft feeling.

## Erin Fuller – Wallpaper

``````//Erin Fuller
//SectionA
//efuller@andrew.cmu.edu
//Project 05 - WallPaper

function setup() {
createCanvas(600, 400);
noLoop();
}

function draw() {
background(255, 206, 233);
for (var i = -1; i < 6; i++) { //for loop to make grid of "tiles"
for (var j = -1; j < 4; j++) {
rX = i * 100; // tile spacing
rY = j * 100;// tile spacing
tile(); //runs "tile" function where all my actual components are
}
}
}

function tile() {
squiggle(); //runs two arc functions to make "squiggle"
triangles(); //draws 2 triangles offset
circles(); //draws 2 circles offset
}

function squiggle() {
strokeWeight(6);
stroke(0);
noFill();
arc(rX + 30, rY, 30, 30, PI, 3 * HALF_PI); // upper curve
arc(rX + 30, rY + 70, -30, 30, 0, 3 * HALF_PI); // lower curve
}

function triangles() {
noStroke();
fill(0); // background triangle always black
triangle(rX + 80, rY + 5, rX + 35, rY + 55, rX + 80, rY + 55);

fill(random(255), random(255), random(255)); // makes front triangle fun colors!
triangle(rX + 85, rY + 10, rX + 40, rY + 60, rX + 85, rY + 60);
}

function circles() {
noStroke();
fill(0); //background circle always black
ellipse(rX + 30, rY + 25, 15, 15);

fill(random(255), random(255), random(255)); //makes front circle fun colors!
ellipse(rX + 25, rY + 20, 15, 15);
}

``````

My inspiration was that I wanted my wallpaper to look like a fun 90s pattern. I made the objects in separate functions and tiled them using a for-loop. A neat thing is the triangle and circles are random fills so everytime you refresh it is a color!

## Rjpark – Project 05 – Wallpaper

``````var z = 150; // "zooming" the lines
var sw = z/20; // stroke weight of lines
var swl = z/100; // stroke weight of leaves
var l = z/10; // leaves placement on lines
var ls = z/5; // leaves size

function setup() {
createCanvas(600, 600);
background(190, 175, 155);
noLoop();
}

function draw() {
// set 1 of vertical lines (in even numbered columns)
// vx1 = variable for x coordinate movement
// vy1 = variable for y coordinate movement
for (var vx1 = 0; vx1 < width/10; vx1 ++) {
for (var vy1 = 0; vy1 < width/10; vy1 ++) {
stroke(90, 70, 60);
strokeWeight(sw);
line((z/2)+z*vx1, z*vy1, (z/2)+z*vx1, (z/2)+z*vy1);
}
}
// set 2 of vertical lines (in odd numbered columns)
// vx2 = variable for x coordinate movement
// vy2 = variable for y coordinate movement
for (var vx2 = 0; vx2 < width/10; vx2 ++) {
for (var vy2 = 0; vy2 < width/10; vy2 ++) {
stroke(120, 50, 20);
strokeWeight(sw);
line(z*vx2, (z/2)+z*vy2, z*vx2, z+z*vy2);
}
}
// set 1 of horizontal lines (in even numbered columns)
// hx1 = variable for x coordinate movement
// hy1 = variable for y coordinate movement
for (var hx1 = 0; hx1 < height/10; hx1 ++) {
for (var hy1 = 0; hy1 < height/10; hy1 ++) {
stroke(120, 50, 20);
strokeWeight(sw);
line((z/2)+z*hx1, (z/2)+z*hy1, z+z*hx1, (z/2)+z*hy1);
}
}
// set 2 of horizontal lines (in odd numbered columns)
// hx2 = variable for x coordinate movement
// hy2 = variable for y coordinate movement
for (var hx2 = 0; hx2 < height/10; hx2 ++) {
for (var hy2 = 0; hy2 < height/10; hy2 ++) {
stroke(90, 70, 60);
strokeWeight(sw);
line(z*hx2, z*hy2, (z/2)+z*hx2, z*hy2);
}
}
// set 1 of leaves on first xy coordinate of vertical lines (set 1)
for (var vx1 = 0; vx1 < width/10; vx1 ++) {
for (var vy1 = 0; vy1 < width/10; vy1 ++) {
fill(80, 110, 75);
noStroke();
ellipse((z/2)+z*vx1+l, z*vy1, ls, ls); // leaf body
triangle((z/2)+z*vx1+l, z*vy1-(ls/2), (z/2)+z*vx1+l+(ls/2), z*vy1, (z/2)+z*vx1+l+(ls/2), z*vy1-(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line((z/2)+z*vx1+(ls/5), z*vy1+(ls/3), (z/2)+z*vx1+l, z*vy1); // leaf veins

fill(130, 140, 90);
noStroke();
ellipse((z/2)+z*vx1, z*vy1-l, ls, ls); // leaf body
triangle((z/2)+z*vx1, z*vy1-l-(ls/2), (z/2)+z*vx1+(ls/2), z*vy1-l, (z/2)+z*vx1+(ls/2), z*vy1-l-(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line((z/2)+z*vx1-(ls/3), z*vy1-(ls/5), (z/2)+z*vx1, z*vy1-l); // leaf veins
}
}
// set 2 of leaves on first xy coordinate of horizontal lines (set 1)
for (var hx1 = 0; hx1 < width/10; hx1 ++) {
for (var hy1 = 0; hy1 < width/10; hy1 ++) {
fill(205, 185, 90);
noStroke();
ellipse((z/2)+z*hx1-l, (z/2)+z*hy1, ls, ls); // leaf body
triangle((z/2)+z*hx1-l-(ls/2), (z/2)+z*hy1, (z/2)+z*hx1-l, (z/2)+z*hy1+(ls/2), (z/2)+z*hx1-l-(ls/2), (z/2)+z*hy1+(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line((z/2)+z*hx1-(ls/5), (z/2)+z*hy1-(ls/3), (z/2)+z*hx1-l, (z/2)+z*hy1); // leaf veins

fill(250, 240, 190);
noStroke();
ellipse((z/2)+z*hx1, (z/2)+z*hy1+l, ls, ls); // leaf body
triangle((z/2)+z*hx1-(ls/2), (z/2)+z*hy1+l, (z/2)+z*hx1, (z/2)+z*hy1+l+(ls/2), (z/2)+z*hx1-(ls/2), (z/2)+z*hy1+l+(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line((z/2)+z*hx1+(ls/3), (z/2)+z*hy1+(ls/5), (z/2)+z*hx1, (z/2)+z*hy1+l); // leaf veins
}
}
// set 3 of leaves on first xy coordinate of vertical lines (set 2)
for (var vx2 = 0; vx2 < width/10; vx2 ++) {
for (var vy2 = 0; vy2 < width/10; vy2 ++) {
fill(80, 110, 75);
noStroke();
ellipse(z*vx2+l, (z/2)+z*vy2, ls, ls); // leaf body
triangle(z*vx2+l, (z/2)+z*vy2-(ls/2), z*vx2+l+(ls/2), (z/2)+z*vy2, z*vx2+l+(ls/2), (z/2)+z*vy2-(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line(z*vx2+(ls/5), (z/2)+z*vy2+(ls/3), z*vx2+l, (z/2)+z*vy2); // leaf veins

fill(130, 140, 90);
noStroke();
ellipse(z*vx2, (z/2)+z*vy2-l, ls, ls); // leaf body
triangle(z*vx2, (z/2)+z*vy2-l-(ls/2), z*vx2+(ls/2), (z/2)+z*vy2-l, z*vx2+(ls/2), (z/2)+z*vy2-l-(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line(z*vx2-(ls/3), (z/2)+z*vy2-(ls/5), z*vx2, (z/2)+z*vy2-l); // leaf veins
}
}
// set 4 of leaves on first xy coordinate of horizonal lines (set 2)
// replaces leaves on second xy coordinate of vertical lines (set 2) because first coordinate of first row of horizontal lines need leaves
for (var hx2 = 0; hx2 < height/10; hx2 ++) {
for (var hy2 = 0; hy2 < height/10; hy2 ++) {
fill(205, 185, 90);
noStroke();
ellipse(z*hx2-l, z*hy2, ls, ls); // leaf body
triangle(z*hx2-l-(ls/2), z*hy2, z*hx2-l, z*hy2+(ls/2), z*hx2-l-(ls/2), z*hy2+(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line(z*hx2-(ls/5), z*hy2-(ls/3), z*hx2-l, z*hy2); // leaf veins

fill(250, 240, 190);
noStroke();
ellipse(z*hx2, z*hy2+l, ls, ls); // leaf body
triangle(z*hx2-(ls/2), z*hy2+l, z*hx2, z*hy2+l+(ls/2), z*hx2-(ls/2), z*hy2+l+(ls/2)); // leaf tip

stroke(0);
strokeWeight(swl);
line(z*hx2+(ls/3), z*hy2+(ls/5), z*hx2, z*hy2+l); // leaf veins
}
}

}``````

I knew from the start that I wanted to implement nature and earth tones into my wallpaper. So, I created a simple, stair-shaped pattern for vines and pairs of leaves at each intersection of the stair-shaped lines. Although this looks like an easy pattern to code, there were a lot of different parts to consider. I had to iterate the vertical and horizontal lines both across and down; I had to make 4 double for-loops to make this happen. So, there are 2 sets of vertical and horizontal lines each. You can see the 2 sets by color (red-ish brown and dark brown). I also had to iterate the pairs of leaves at one end of each vertical and horizontal line (2 sets for each), so, I also had to make 4 double for-loops to make this happen.

Lastly, I created global variables that make it easier for the user to change the dimensions of the shapes in the wallpaper. Of those global variables, only one has to be changed because the others are dependent on that one global variable, z. If the user changes z, the entire wallpaper will either “zoom” in or out.