Category: Project-05-Wallpaper

sketch

//maddy cha
//section e
//mecha@andrew.cmu.edu
//project-05

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

function draw() {
    bird();
    noLoop();
}

function bird() {
    background(230,225,215);
    //dictates the x position of all of the elements
    var z = random(-70,20);

    //randomizes angle of grass
    var grassAdd = random(-10,10);
    var grassAdd3 = random(0,20);

    //randomizes whether or not third piece of grass will appear
    var randomGrass = random(0,10);

    //nested for loop that creates grid of chickens
    for(var x = z; x < 880; x+=140){
        for(var y = z; y < 880; y+=140){
        //grass
        noFill();
        strokeWeight(1);
        stroke(130,125,115);
        line(80+x,140+y,80+x-grassAdd,140+y-random(8,14));
        line(85+x,140+y,85+x-grassAdd,140+y-random(10,20));

        //chance that third piece of grass will appear
        if(randomGrass <= 5){
            line(100+x+grassAdd3,140+y,100+x-grassAdd+grassAdd3,140+y-random(8,14));
        }

        //wing shadow
        noStroke();
        fill(215,200,190);
        rect(3+x,52+y,35,30,40,20,0,20);

        //legs
        noFill();
        stroke(255,123,0);
        strokeWeight(2);
        line(40+x,90+y,40+x,110+y);
        line(40+x, 110+y, 37+x, 110+y);
        
        stroke(215,93,0);
        line(30+x, 110+y, 27+x, 110+y);
        line(30+x,90+y,30+x,110+y);

        //body
        noStroke();
        fill(255);
        rect(10+x,25+y,30,70,0,20,0,50);
        rect(20+x,60+y,50,35,0,0,20,20);

        //eye
        fill(130,125,115);
        ellipse(20+x,34+y,5.5,5.5);
        noFill();
        strokeWeight(1);
        stroke(130,125,115);
        ellipse(20+x,34+y,8,8);

        //beak
        noStroke();
        fill(255,123,0);
        triangle(10+x,35+y,-2+x,25+y,10+x,25+y);
    
        //wing shadow
        fill(230,225,215);
        rect(30+x,52+y,35,30,40,20,0,20);

        //wing
        fill(255);
        rect(30+x,50+y,35,30,40,20,0,20);
        }
    }
}

For this project, I decided to start with creating a graphic that I could use to repeat and make an aesthetically pleasing wallpaper with. While I was originally planning to create a function and place it in a for loop in draw, I instead implemented a nested for loop in my “bird” function. After creating my bird, I added different lines of grass that would change angles based on randomized x and y values. Additionally, a randomized variable would dictate whether or not a third piece of grass would show up.

sharp

// palette
var dark = {r: 179, g: 191, b: 191}
var medium = {r: 203, g: 214, b: 214}
var light = {r: 217, g: 225, b: 225}

function setup() {
    createCanvas(480, 480);
    background(250);
    rectMode(CENTER);
    angleMode(DEGREES);
    noLoop();
}

function draw() {
    var offsetX = 50;
    var offsetY = 52;
    var rowNum;
    var slant = -20;
    var which = 1;

    for(var y = 0; y < 5; y++) {
      //check if the row is odd or even and offset odd rows
      if(y % 2 == 0) {
        offsetX = 10;
        rowNum = 6;
      } else {
        offsetX = 60;
        rowNum = 5;
      }
      for(var x = 0; x < rowNum; x++) {
        scratch(x*130 - offsetX, y*150 - offsetY);

        //determine which type of knife to draw
        which = nf(random(0,3)+1, 1, 0);
        if(which == 1) {
          sharp(x*100 + offsetX, y*100 + offsetY, slant);
        } else if(which == 2) {
          sharp2(x*100 + offsetX, y*100 + offsetY, slant);
        } else if(which == 3) {
          sharp3(x*100 + offsetX, y*100 + offsetY, slant);
        }
      }
    }
}

// KNIFE 1
function sharp(xPos, yPos, angle) {
  var sharpX = 0;
  var sharpY = 0;

  var sharpW = 8;
  var sharpH = 30;
  var guardW = 10 + sharpW;
  var guardH = 3;
  var handleW = 6;
  var handleH = 20;

  noStroke();
  push();
  translate(xPos, yPos);
  rotate(angle);
  // blade 1
  fill(medium.r, medium.g, medium.b);
  rect(sharpX, sharpY, sharpW, sharpH);
  triangle(sharpX + sharpW/2, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2 + 12);
  fill(light.r, light.g, light.b);
  rect(sharpX - sharpW/4, sharpY, sharpW/2, sharpH);
  triangle(sharpX - sharpW/2, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2,
    sharpX, sharpY + sharpH/2 + 12);

  // guard 1
  fill(dark.r, dark.g, dark.b);
  rect(sharpX, sharpY - sharpH/2 - guardH/2, guardW, guardH);
  ellipse(sharpX - guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);
  ellipse(sharpX + guardW/2, sharpY - sharpH/2 - guardH/2, guardH * 1.5);

  // handle 1
  rect(sharpX, sharpY - sharpH/2 - handleH/2, handleW, handleH);

  // pommel 1
  ellipse(sharpX, sharpY - sharpH/2 - handleH, handleW + 2);
  pop();
}

// KNIFE 2
function sharp2(xPos, yPos, angle){
  var sharp2X = -5;
  var sharp2Y = -18;

  var sharp2W = 25;
  var sharp2H = 80;
  var handle2W = 6;
  var handle2H = 22;

  noStroke();
  push();
  translate(xPos, yPos, angle);
  rotate(angle);
  // blade 2
  fill(medium.r, medium.g, medium.b);
  arc(sharp2X, sharp2Y, sharp2W, sharp2H, 0, 90, PIE);
  fill(light.r, light.g, light.b);
  rect(sharp2X - 1, sharp2Y + sharp2H/4, 2, sharp2H/2);

  // handle 2
  fill(dark.r, dark.g, dark.b);
  rect(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H/2,
    handle2W, handle2H);
  ellipse(sharp2X + sharp2W/2 - handle2W/2, sharp2Y - handle2H,
    handle2W);
  pop();
}

// KNIFE 3
function sharp3(xPos, yPos, angle) {
  var sharp3X = 0;
  var sharp3Y = 0;

  var sharp3W = 8;
  var sharp3H = 30;
  var handle3W = 6;
  var handle3H = 20;
  var guard3W = sharp3W + 4;
  var guard3H = 4;

  noStroke();
  push();
  translate(xPos, yPos);
  rotate(angle);

  // handle 3
  fill(dark.r, dark.g, dark.b)
  rect(sharp3X, sharp3Y - sharp3H/2 - handle3H/2,
    handle3W, handle3H);

  // guard 3
  rect(sharp3X, sharp3Y - sharp3H/2 - guard3H/2-1,
    guard3W, guard3H);
  // pommel 3
  ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
    handle3W+3);
  fill(light.r, light.g, light.b);
  ellipse(sharp3X, sharp3Y - sharp3H/2 - handle3H,
    handle3W-2);

  // blade 3
  fill(light.r, light.g, light.b);
  quad(sharp3X - sharp3W/2, sharp3Y - sharp3H/2,
    sharp3X + sharp3W/2, sharp3Y - sharp3H/2,
    sharp3X + sharp3W/2, sharp3Y + sharp3H/2 + 8,
    sharp3X - sharp3W/2, sharp3Y + sharp3H/2);
  // highlights
  fill(medium.r, medium.g, medium.b);
  quad(sharp3X - sharp3W/2, sharp3Y,
    sharp3X + sharp3W/2, sharp3Y + 8,
    sharp3X + sharp3W/2, sharp3Y + 4,
    sharp3X - sharp3W/2, sharp3Y - 4);
    quad(sharp3X - sharp3W/2, sharp3Y - 8,
      sharp3X + sharp3W/2, sharp3Y,
      sharp3X + sharp3W/2, sharp3Y - 16,
      sharp3X - sharp3W/2, sharp3Y - 16);
    pop();
}

// LINES
function scratch(xPos, yPos) {
  var spacing = 20;

  noFill();
  stroke(255);
  strokeWeight(4);
  line(xPos, yPos, xPos + 100, yPos + 100);
  line(xPos, yPos + spacing, xPos + 100, yPos + 100 + spacing);
  line(xPos, yPos + spacing*2, xPos + 100, yPos + 100 + spacing*2);

}

I wanted to play around with creating functions and more complex shapes, so the elements themselves are more complicated than the repetition. The type of knife is also randomly generated, so the pattern is slightly different every time.

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