## Bettina-Project05-Wallpaper-SectionC

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

``````//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)

``````//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!

## yoonseo1-project5 Wall paper

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

``````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);
//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

``````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

``````/*
* 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.