elizabew-Project-05- Wallpaper

sketch

// Elizabeth Wang
// elizabew
// Section E
//Project 5: Wallpaper


function setup() {
  createCanvas(450, 450);
  background(214,239,255); //blue
  noLoop();

}


function draw() {
  drawLine(); //vertical lines
  drawDiaganal(); //diaganal lines
  drawDots(); //dots
  drawLeaf(); //ellipses
}

function drawLine() { //vertical lines
  for (var xv = 0; xv < width; xv += 5) { //vertical lines
    var xvPos = xv * 10;
    strokeWeight(2);
    stroke(177,226,174); //green
    line(xvPos, 0, xvPos, height);
  }

}

function drawDiaganal(){ //diagnal lines

  for (var y = 0; y < height; y += 100){ //diaganal lines from left to right
      strokeWeight(1);
      stroke(243,207,194); //pink
      line(y, 0, width, height - y);
      yPos = -400 + y;
      line(yPos, 0, width, height - yPos);
  }
  for (var y = 0; y < height; y += 100){ //diaganal lines from right to left
      strokeWeight(1);
      stroke(243,207,194); //pink
      line(50, height + y, width + 50, y );
      yPos = y - 400;
      line(0, height + yPos - 50 , width, yPos - 50);
  }

}


function drawDots() { //hexigonal grid of dots

  for( var ly = 0; ly < height; ly += 5){

    if (ly%2 == 0){ // every other row
      for (var lx = 0; lx < width; lx += 10) {
        var lxPos = (lx * 20) ; //x position of dot
        var lyPos = ly * 20; // y position of dot
        noStroke();
        fill(237,240,218); //yellow
        ellipse(lxPos/2, lyPos/2, 10, 10);
      }
    }
    else {
      for (var lx = 0; lx < width; lx += 10) {
        var lxPos = (lx * 20) + 100; //x position of dot
        var lyPos = (ly * 20) ; // y position of dot
        noStroke();
        fill(237,240,218); //yellow
        ellipse(lxPos/2, lyPos/2, 10, 10);
      }
    }
  }
}


function drawLeaf(){

  for( var ly = 0; ly < height; ly += 5){

    if (ly%2 == 0){ //creates a hexogonal grid
      for (var lx = 0; lx < width; lx += 10) {
        var lxPosRight = (lx * 20) + 21 ; //position of right leaf x
        var lxPosLeft = (lx * 20) - 19 ; //position of left leaf x
        var lyPos = (ly * 20) - 100; // y position of leaves
        fill(177,226,174);
        noStroke();
        ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
        ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
      }
    }
    else {
      for (var lx = 0; lx < width; lx += 10) {
        var lxPosRight = (lx * 20) + 121; //position of right leaf x
        var lxPosLeft = (lx * 20) - 119;//position of left leaf x
        var lyPos = (ly * 20) + 100 ;// y position of leaves
        fill(177,226,174);
        noStroke();
        ellipse(lxPosRight/2, lyPos/2, 20, 10); //right side of leaf
        ellipse(lxPosLeft/2, lyPos/2, 20, 10); //left side of leaf
      }
    }
  }

}

Reflection

What I think was really helpful for me during this process was the fact that we had an assignment that had to do with a hexagonal grid — which I used for pretty much every aspect of my wallpaper. Overall it was a huge learning experience and I’m very pleased with the results — I think the overall colors that I’ve chosen and the pattern I’ve made really suits who I am. However, the process was a bit difficult for me since I am still not used to for() looping lines and the large amount of code was a bit overwhelming (making my own functions was incredibly helpful for this).