Category: Project-05-Wallpaper

Elena Deng Project 5 Wallpaper

sketch

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

sketch

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

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

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

//draws ladybug
function ladybug(x, y) {
    push();
    translate(x, y);

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

    //head and antenna
    noFill();
    strokeWeight(2);
    arc(x, y - headW*(2/3), headW, headW, 0, PI);
    fill(0);
    ellipse(x, y, headW, headW);

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

sketch

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

Project

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

lingfanj-project05

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

sketch

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

kzr wallpaper

/*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);
                //head
                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);
                //head
                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

sketch

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

Sketch: green strings and yellow lights on a beige background

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

rjpark_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.