Category: Project-05-Wallpaper

Bettina-Project05-Wallpaper-SectionC

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 5 Wallpaper

function setup() {
  createCanvas(480,480);
  background("#8ca1d2");
  for (var y=0;y<7;y++) {
    if (y%2===0) { //every odd row
          for (var x = 0; x < 5; x++) {
              var ty=y;
              var tx=x;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDrops(tx,ty);

          }
      }
      else {
        for (var x = 0; x < 4; x++) { //every even row
              var tx=x+.5; //shifts every other row to the right
              var ty=y;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDropsTwo(tx,ty);
          }
      }
  }
  noLoop();
}

function TearDrops(tx,ty) {
  var TearCounter=random(3); //only draws about a little under half of the tears
  if (TearCounter>1.75) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)+50,(ty*50)+random(50));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function TearDropsTwo(tx,ty) {
  var TearCounter=random(3);//only draws about half of the tears
  if (TearCounter>1.5) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)-random(10,50),(ty*50)+random(70));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function drawTriangles(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,ty*65);
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function drawTrianglesTwo(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,(ty*65)+10); //draws the second in the pair that's translated in the y-direction
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function HorizontalLines(tx,ty) {
  noFill();
  stroke("#194e93");
  strokeWeight(3);
  var lineCounter=random(3); //only draws about less than half of line groups
  if (lineCounter>1.85) {
  push();
  translate((tx*80)-20,(ty*60)-random(10,20));
  line(65,70,110,70);
  line(50,80,80,80);
  line(95,80,120,80);
  line(85,90,105,90);
  pop();
  }
}

I was inspired by the chilly fall evenings to create a pattern that symbolized the weather. I first sketched a variety of geometric and organic shapes in illustrator and developed a color palette. I simplified the shapes to create more abstract representations of rain, stars, and clouds. Wanting to create something aligning with the characteristics of code (as opposed to trying to “pixel-push”) I realized that mathematical patterns are a key speciality of code. I was inspired by the assignments to create a pseudo-hexagonal grid for all of my elements, and added random omissions and translation variations using conditionals. (try refreshing, the pattern will vary each time!)

sntong-Project-05-Wallpaper

sketch

//Scarlet Tong
//sntong@andrew.cmu.edu
//Section A
// Project 5: Wallpaper

//x and y coordinates the tip of the tear drops
var x = 0;
var y = 0;
// scale
var Large = 25;
var Medium = Large-1;
var Small = Large-5;
// for loop coordinates
var transY = 0;
var transX = 30;

function setup() {
    createCanvas(480, 480);
    background (243,117,117);//hot pink!
}

function draw() {
  //array the pattern on the odd rows
  for (var transY = 0; transY < width; transY+= Large*6+15) {
    for (var transX = 0; transX < width+30; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
  // array the pattern for even rows and offset them so they fill the gap
  for (var transY = -Large*3-8; transY < width; transY+= Large*6+15) {
    for (var transX = Large+5; transX < width; transX+= Large*2+10) {
      pattern(transX,transY);
    }
  }
  noLoop();
}

function pattern(transX,transY){
  stroke(255);
  strokeWeight(1);
  //deep blue tear drop, aka large drop
  push();
  translate(transX,transY);
  fill(48,78,109,200);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Large,Large*3);
  curveVertex(x,Large*4);
  curveVertex(x-Large, y+Large*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  pop();
  //pale orange tear drop, medium drop
  push();
  translate(transX,transY+Large*6);
  fill(237,168,131,100);
  angleMode(DEGREES);
  rotate(180);
  beginShape();
  curveVertex(x,y);
  curveVertex(x,y);
  curveVertex(Medium,Medium*3);
  curveVertex(x,Medium*4);
  curveVertex(x-Medium, y+Medium*3);
  curveVertex(x,y);
  curveVertex(x,y);
  endShape();
  // teal tear drop, small drop
  fill(43,188,177,120);
  beginShape();
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  curveVertex(Small,Small*3+10);
  curveVertex(x,Small*4+10);
  curveVertex(x-Small, y+Small*3+10);
  curveVertex(x,y+10);
  curveVertex(x,y+10);
  endShape();
  //yellow circle
  fill(253,185,74,200);
  ellipse(x,Small*5,Large,Large);
  //small dark blue circle on the tip of the shape
  fill(48,78,109);
  ellipse(0,0,10,10);
  pop();
}

I was inspired by the the features of a peacock when making this pattern. Using the tear drop shape as the base, I was able to rotate and scale the shape accordingly to generate the pattern before I array it to make the wallpaper using for loops and nested loops. I used Rhino to help me to generate the line work before going into Illustrator to add in the color. As I was coding I also played with the alpha channels to manipulate the opacity of the colors to see the layers of tear drops that make up the pattern.

     

Jihee Kim_SectionD_Project-05 (Wallpaper)

jiheek1_project5

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project5 WallPaper
//section D

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

function draw() {

    background(0);
    // make a grid of colorful ellipses
    //draw small ellipses on top of grid to make crescent shapes
    //the position of smaller ellipses changes the orientation of the crescent
    //form a heart shape with the crescents in the middle of canvas
    //other black voids should look like fish
    drawGrid();

    // form crescents on left half of canvas
    // draw smaller circles that cover up bottom right of the bigger circles
    for (var y = 25; y < height+40; y += 40) { // offset center by 5
        for (var x = 25; x < width/2; x += 40) {
            fill (0);
            ellipse(x, y, 30, 30); // draw smaller circles
        }
    }
   // draw rectangles that look like eyes for the fish on left
    for (var y = 20; y < height+40; y += 40) { // offset center by 5
        for (var x = 20; x < width/2-40; x += 40) {
            fill (255);
            rect(x, y, 3, 3); // draw rectangles
        }
    }
    // form crescents on right half of canvas
    // draw smaller circles that cover up bottom left of the bigger circles
    for (var y = 25; y < height+40; y += 40) { //offset center by -5
        for (var x = width/2 + 15; x < width+40; x += 40) {
            fill (0);
            ellipse(x, y, 30, 30); // draw smaller circles
        }
    }
    // draw rectangles that look like eyes for the fish on right
    for (var y = 20; y < height+40; y += 40) { // offset center by 5
        for (var x = width/2 + 60; x < width; x += 40) {
            fill (255);
            rect(x, y, 3, 3); // draw rectangles
        }
    }

    // each heart is where fish lay eggs. draw arrays of dots
    // if needed divide up the line and treat the heart as item with two sides
    // arrays converge in the middle
    for (var y = 13; y < height + 30; y += 40) {
        // line 1 (left)
        for (var x = width/2 - 19; x < width/2 - 10; x += 6) {
            fill(255); //white dots
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 13; y < height + 30; y += 40) {
        // line 1 (right)
        for (var x = width/2 + 12; x < width/2 + 19; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 16; y < height + 30; y += 40) {
        // line 2 (left)
        for (var x = width/2 - 25; x < width/2 - 3; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 16; y < height + 30; y += 40) {
        // line 2 (right)
        for (var x = width/2 + 6; x < width/2 + 27; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 19; y < height + 30; y += 40) {
        // line 3 (left)
        for (var x = width/2 - 25; x < width/2 -1; x += 6) {
            fill(255); //white dots
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 19; y < height + 30; y += 40) {
        // line 3 (right)
        for (var x = width/2 + 6; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 22; y < height + 30; y += 40) {
        // line 4 (left)
        for (var x = width/2 - 24; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 22; y < height + 30; y += 40) {
        // line 4 (right)
        for (var x = width/2 + 5.5; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 25; y < height + 30; y += 40) {
        // line 5 (left)
        for (var x = width/2 - 29; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 25; y < height + 30; y += 40) {
        // line 5 (right)
        for (var x = width/2 + 4.5; x < width/2 + 31; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 28; y < height + 30; y += 40) {
        // line 6 (left)
        for (var x = width/2 - 28; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 28; y < height + 30; y += 40) {
        // line 6 (right)
        for (var x = width/2 + 3.5; x < width/2 + 32; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 31; y < height + 30; y += 40) {
        // line 7 (left)
        for (var x = width/2 - 26; x < width/2; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 31; y < height + 30; y += 40) {
        // line 7 (right)
        for (var x = width/2 + 2; x < width/2 + 29; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 34; y < height + 30; y += 40) {
        // line 8
        for (var x = width/2 - 24; x < width/2 + 26; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 37; y < height + 30; y += 40) {
        // line 9
        for (var x = width/2 - 21; x < width/2 + 24; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 40; y < height + 30; y += 40) {
        // line 10
        for (var x = width/2 - 12; x < width/2 + 17; x += 6) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 43; y < height + 30; y += 40) {
        // line 11
        for (var x = width/2 - 8; x < width/2 + 10; x += 5) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 46; y < height + 30; y += 40) {
        // line 12
        for (var x = width/2 - 4; x < width/2 + 7; x += 4) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 49; y < height + 30; y += 40) {
        // line 13
        for (var x = width/2 - 2; x < width/2 + 4; x += 4) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 52; y < height + 30; y += 40) {
        // line 14
        for (var x = width/2; x < width/2 + 2; x += 2) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    for (var y = 55; y < height + 30; y += 40) {
        // line 15
        for (var x = width/2; x < width/2 + 2; x += 2) {
            fill(255);
            ellipse(x, y, 1, 1);
        }
    }
    noLoop();
}

function drawGrid() {
    //cover canvas with grid of ellipses
    for (var y = 20; y < height+40; y += 40) {
        for (var x = 20; x < width + 40; x += 40) {
            fill(249 - x/2, 145, 145); // apply a color gradient to the circles
            ellipse(x, y, 40, 40);
        }
    }
}

For this project, I wanted to apply learned concepts and use grids and loops. Using the same shape(ellipses) at different scales and varying the position of them, I created a flowing pattern that takes advantage of both positive and negative spaces. I basically created crescents by using two different ellipses and by putting them in a grid, I made it so that the negative space( in black) would read as fish shapes and hearts. The heart-shaped spaces in the middle are filled with fish eggs!

sketches

yoonseo1-project5 Wall paper

Davewall

////Yoonseo(Dave) Choi
//Section B
//yoonseo1@andrew.cmu.edu
//Project 05 - Wall Paper
function setup() {
    createCanvas(480, 480);
    background(0); //set back ground to black

}
 
function draw() {
	noStroke(); // removing Stroke from the petals
    for (var p = 0;p < 12; p ++){ // setting for loop for patter
    	for (var j = 0; j <12; j ++){
    		var red = map(p*200,0,height,0,255);  //color set for red
            var green = map(j*200,0,width,0,255); //color set for green 
    		petal(p*200+90,j*200+90,red,green,random(0,255)); //execute petal 
    		stroke(255,4); //set stroke color
    		line(p*40,0,p*40,height); //vertical stroke
    		line(0,p*40,p*40,0); // diagonal stroke
    		line(width,p*40,p*40,height); // diagonal stroke
    		noStroke(); // no stroke for the petal

    	}
   }
   noLoop(); //only run once
}

function petal(x,y,r,g,b){ //petal function
	push(); // setting geomety
	scale(0.45); //scale down whole thign by 0.45 too big initially
	fill(r,0,b); // set color of petals
	rectMode(CENTER); // settting center to middle
	translate(x,y); //translate to x, y coordinate given at execution
	for (var i = 0; i < 6; i ++){ //for loop for petal rotation
	push(); 
	scale(1.1) //scale petals up by 1.1
	rotate(TWO_PI*i/6); //make them rotate around the center 
	translate(50,0); //translate them 50 from the cente 
	rotate(180); //rotate the single petals by 180 to create form intended
	beginShape(); //half of petal
	vertex(40,20);
	bezierVertex(70,30,40,50,40,60);
	endShape();
	beginShape(); //another half of petal
	vertex(40,20);
	bezierVertex(-10,35,40,50,40,0);
	endShape();
	pop();// pop the form 

	}
	pop(); //pop the whole 
	}

For this project I started with a flower initially to create a wall paper pattern. I started to modify the form from there and transformed the petals into irregular petal shapes. I have populated them by giving 6 petals a center. I had to scale the petal sizes down because they were too big initially. I have used the color to give random variation through out the wall paper. I have used for loop and random variable for the color lies inside of the loop. After the placement of the petals, it needed extra color of form to contrast with. I decided to put white transparent thin lines to give emphasis on the petals and contrast through out whole wall paper pattern.

jiaxinw-Project 05- Wallpaper

sketch

function setup() {
    noLoop();
    createCanvas(480, 600);
    background(255);
    //fill the canvas with a gradient color
    bgColor();

    //riandrop length
    var dLen = 10;

    noStroke();
    //fill the canvas with raindrop, set raindrop x and y equal 10
    for(var dy = 10; dy < height-dLen; dy += 40 ){
        for(var dx = 10; dx < width - dLen; dx += 40){
            stroke(144, 197, 242);
            strokeWeight(3);
            line(dx, dy, dx+dLen, dy+dLen);
        };
    };
    
    //umbrella size 
    var size = 80;

    //fill the canvas with umbrellas, set umbrella x and y equal 60
    for ( var y = 60; y < height-size/2; y += 95){
        for (var x = 60; x < width-size/2; x += 90){

            //blue umbrellas
            if((x+y)%7==0){
                    
                push();
                translate(x,y);
                rotate(radians(-45))
                //umbrella handle 
                noStroke();
                fill(57,130,158);
                rectMode(CENTER);
                rect(0, 0, 4, 80)

                noFill();
                stroke(71,165,200)
                strokeWeight(4);
                arc(0-size/12, 0+40, size/6, size/6, 0, PI)

                //umbrella top                   
                noStroke();
                blueUmbre(0,0);
                //small triangles of umbrella
                var tx=0;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, 0, tx-size/2+(size/6), 0, tx-size/2+size/12, 0+size/12);
                    tx += size/6;
                };
                pop();
            } else {//red umbrellas
                //umbrella handle 
                noStroke();
                fill(234, 145, 145);
                rectMode(CENTER);
                rect(x, y, 4, 80)

                noFill();
                stroke(230,80,80)
                strokeWeight(4);
                arc(x-size/12, y+40, size/6, size/6, 0, PI)

                noStroke();
                //umbrella top
                redUmbre(x,y);
                //arc(x, y, size, size, PI, 2*PI)
                //small triangles of umbrella
                var tx=x;
                for(i = 0; i < 6; i++){
                    triangle(tx-size/2, y, tx-size/2+(size/6), y, tx-size/2+size/12, y+size/12);
                    tx += size/6;
                };
            };
        };
    };
    
}

function draw() {
}

function bgColor(){
    //create a gradient color from green to blue
    colorMode(RGB);
    noStroke();
    from = color (179, 222, 213);
    to = color (179, 209, 222);
    interA = lerpColor(from, to, .20)
    interB = lerpColor(from, to, .40)
    interC = lerpColor(from, to, .60)
    interD = lerpColor(from, to, .80)
    fill(from);
    rect(0,0,width,height/6);
    fill(interA);
    rect(0,height/6,width,2*height/6);
    fill(interB);
    rect(0,2*height/6,width,3*height/6);
    fill(interC);
    rect(0,3*height/6,width,4*height/6);
    fill(interD)
    rect(0,4*height/6,width,5*height/6);
    fill(to);
    rect(0,5*height/6,width,height);
}

//create gradient red color for red umbrellas
function redUmbre(x,y){
    var r = 230;
    for (var size=80; size > 0; size -= 2){
        fill(r,80,80)
        arc(x, y, size, size, PI, 2*PI)
        r -=1; 
    };
}

//create gradient blue color for blue umbrellas
function blueUmbre(x,y){
    var g = 165;
    for (var size=80; size > 0; size -= 2){
        fill(71,g,200)
        arc(x, y, size, size, PI, 2*PI)
        g -=1; 
    };
}

To start with the project, I drew out the sketch to have a sense of how the layout should look like.

At first, I only wanted the umbrella all looked like the same. When I created the all-umbrella wallpaper, I found if some of the umbrellas can be changed would be interesting. Therefore, I thought about how to make only some of the umbrellas change but not in a “boring” pattern. Later I found out if I ply around with the variables for the umbrella’s x and y, this design maybe can work! I tried to use modulo related to x and y, and it worked. What’s more, because the color looked “flat”, I thought maybe making the color become gradient can be more attractive, so I add gradient colors to umbrellas and the background.

aranders-project-05

aranders-project-05

function setup() {
  createCanvas(480, 450);
  background(255, 255, 150);
  noLoop();
}

function draw () {
  animals(0, 0);
  animals(0, 150);
  animals(0, 300);
  animals(240, 0);
  animals(240, 150);
  animals(240, 300);
}

function animals(x, y) {

  push();
  translate(x, y);
  //panda
  fill(0);
  ellipse(10, 60, 12, 12);
  fill(0);
  ellipse(50, 60, 12, 12);
  fill(255);
  ellipse(30, 75, 47, 47);
  fill(0);
  ellipse(20, 75, 16, 12);
  fill(0);
  ellipse(40, 75, 16, 12);
  fill(0);
  triangle(25, 85, 30, 90, 35, 85);
  fill(255);
  ellipse(20, 75, 10, 10);
  fill(255);
  ellipse(40, 75, 10, 10);
  fill(0);
  ellipse(20, 75, 6, 6);
  fill(0);
  ellipse(40, 75, 6, 6);
  fill(255);
  ellipse(22, 75, 3, 3);
  fill(255);
  ellipse(42, 75, 3, 3);
  line(27, 93, 30, 90);
  line(33, 93, 30, 90);

  //bunny
  fill(209, 209, 224);
  ellipse(75, 60, 10, 40);
  fill(209, 209, 224);
  ellipse(105, 60, 10, 40);
  fill(209, 209, 224);
  ellipse(90, 75, 47, 47);
  fill(0);
  ellipse(80, 75, 12, 12);
  fill(0);
  ellipse(100, 75, 12, 12);
  fill(255);
  ellipse(82, 78, 3, 3);
  fill(255);
  ellipse(102, 78, 3, 3);
  fill(255);
  ellipse(102, 73, 5, 5);
  fill(255);
  ellipse(82, 73, 5, 5,);
  fill(255, 179, 217);
  triangle(85, 85, 90, 90, 95, 85);
  line(90, 90, 90, 93);


  //cat
  fill(255, 255, 220);
  triangle(128, 65, 128, 45, 145, 58);
  fill(255, 255, 220)
  triangle(155, 58, 171, 45, 171, 65);
  fill(255, 255, 220);
  ellipse(150, 75, 47, 47);
  fill(0);
  ellipse(140, 75, 15, 12);
  fill(0);
  ellipse(160, 75, 15, 12);
  fill(255);
  ellipse(163, 74, 7, 7);
  fill(255);
  ellipse(143, 74, 7, 7);
  fill(255, 179, 217);
  triangle(145, 85, 150, 90, 155, 85);
  push();
  strokeWeight(.75);
  line(130, 85, 143, 86);
  line(130, 89, 143, 87);
  line(132, 92, 143, 88);
  line(157, 86, 170, 85);
  line(157, 87, 170, 89);
  line(157, 88, 168, 92);
  pop();

  //bear
  fill(179, 217, 255);
  ellipse(230, 60, 14, 20);
  fill(179, 217, 255);
  ellipse(190, 60, 14, 20);
  fill(179, 217, 255);
  ellipse(210, 75, 47, 47);
  fill(0);
  ellipse(200, 75, 11, 11);
  fill(0);
  ellipse(220, 75, 11, 11);
  fill(255);
  ellipse(198, 74, 5, 5);
  fill(255);
  ellipse(217, 74, 5, 5);
  fill(0);
  ellipse(210, 87, 7, 6);
  line(197, 64, 205, 63);
  line(215, 63, 223, 64);

  fill(255, 204, 102);
  ellipse(30, 25, 15, 15);

  fill(204, 102, 255);
  ellipse(90, 25, 15, 15);

  fill(153, 255, 187);
  ellipse(150, 25, 15, 15);

  fill(255, 77, 77);
  ellipse(210, 25, 15, 15);

  fill(255, 204, 102);
  ellipse(30, 125, 15, 15);

  fill(204, 102, 255);
  ellipse(90, 125, 15, 15);

  fill(153, 255, 187);
  ellipse(150, 125, 15, 15);

  fill(255, 77, 77);
  ellipse(210, 125, 15, 15);

  pop();

}

I was inspired by an old t-shirt I had when I was little. I think the wallpaper came out really well and I might be getting better at programming!

afukuda-Project-05-Wallpaper


afukuda-project-05-wallpaper

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 05
 */ 

var diamondX // x-coordinate for diamond  
var x // horizontal line increment 
var y // vertical line increment 

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

function draw() {
    background(140, 164, 212);
    stroke(219, 242, 248);
 
    for (y = 0; y <481; y += 80) {        
        for (x = 0; x < 481; x += 80) {                

        // ODD COLUMN GEOMETRY 
            if (x%160 == 0) {                                     // calling only odd columns 
                line(x, y, x+80, y);                                 // array horizontal lines 
                line(x, y+40, x+40, y);                              // array top-left diamond lines 
                line(x, y+40, x+40, y+80)                            // array bottom-left diamond lines
                line(x+40, y, x+80, y+40);                           // array top-right diamond lines
                line(x+40, y+80, x+80, y+40);                        // array bottom-right diamond lines 
               
                
                for (diamondX = 0; diamondX < 41; diamondX += 8) {    
                    if (y%160 == 0) {                             // from odd columns - calling only odd rows
                      line(x+40, y, x+diamondX, (y+40)+diamondX);       // array fanning-left lines (fan down)
                      line(x+40, y, (x+40)+diamondX, (y+80)-diamondX);  // array fanning-right lines (fan down)  

                      // TURQUOISE TRIANGLE (BOTTOM)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x, y);
                        vertex(x+40, y);
                        vertex(x, y+40);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (TOP)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x, y);
                        vertex(x, y-40);
                        vertex(x+40, y);
                      endShape();   
                      pop();
                    }

                    else {                                        // from odd columns - calling now even rows 
                      line(x+40, y+80, x+diamondX, (y+40)-diamondX);    // array fanning-left lines (fan up)
                      line(x+40, y+80, (x+40)+diamondX, y+diamondX);    // array fanning-right lines (fan up)

                      noFill();
                      ellipse(x-40, y, 138, 80);                        // array oval 
                      arc(x+40, y-40, 138, 80, 0, PI);                  // array oval (bottom-half)
                      arc(x+40, y+40, 138, 80, PI, 0);                  // array oval (top-half)

                      // TURQUOISE TRIANGLE (TOP)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x+40, y+80);
                        vertex(x+80, y+40);
                        vertex(x+80, y+80);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (BOTTOM)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x+40, y-80);
                        vertex(x+80, y-80);
                        vertex(x+80, y-40);
                      endShape();   
                      pop();
                    }
                } 
            }

        // EVEN COLUMN GEOMETRY
            else {
                line(x, y+40, x+80, y+40);     // array horizontal lines 
                
                line(x, y, x+40, y+40);        // array top-left diagonal lines 
                line(x+40, y+40, x, y+80);     // array bottom-left diagonal lines 
                line(x+40, y+40, x+80, y);     // array bottom-right diagonal lines 
                line(x+40, y+40, x+80, y+80);  // array top-right diagonal lines 

                if (y%160 == 0) {                    // from even columns - calling only odd rows   
                    line(x, y-40, x, y+40);          // array left vertical lines 
                    line(x+80, y-40, x+80, y+40);    // array right vertical lines 

                    // ORANGE DIAMOND OFFSET (TOP)
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);      
                      vertex(x+40, y-40); 
                      vertex(x+80, y);  
                      vertex((x+80)-(20/sqrt(2)-5), y+10); 
                      vertex(x+40, y-20);
                      vertex(x+(20/sqrt(2)-5), y+10);
                    endShape();
                    pop();
                    
                    // PINK ELLIPSE (TOP)
                    ellipseMode(CENTER);
                    fill(249, 200, 203);
                    ellipse(x+40, y+26, 20, 20);     
                }

                else {                               // from even columns - calling now even rows 
                    // PINK ELLIPSE (BOTTOM)
                    fill(249, 200, 203);             
                    ellipse(x+40, y-25, 20, 20);
                    
                    // ORANGE DIAMOND OFFSET (BOTTOM)  
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);
                      vertex(x+(20/sqrt(2)-3), y-10);
                      vertex(x+40, y+20);         
                      vertex((x+80)-(20/sqrt(2)-5), y-10);
                      vertex(x+80, y);
                      vertex(x+40, y+40);
                    endShape();
                    pop();
                }
            }                                                 
        }
    }  

} // draw function end bracket

My wallpaper was inspired by this geometric pattern I came across while brainstorming for ideas. One thing I noticed upon completing the base of the pattern, was that while it does exhibit a degree of offset row by row, it still had a very strong vertical presence. In order to mitigate the verticality of the pattern I incorporated the overlapping ellipses to create a floral, petal-like design horizontally across the canvas. Finally I added some colors in specific moments to make the wallpaper stand out more.