eeryan-Project05-wallpaper

sketch

//Erin Ryan
//lab c
//eeryan@andrew.cmu.edu
//project-05-wallpaper
var offset = 0;

function setup() {
  createCanvas(480,380);
  angleMode(DEGREES);
}

function draw() {
  background(193,222,229);
  matchstick()
}
//draws match
function matchstick(){
     var stickW;
     var stickH;
     var tipX;
     var tipY;
     var tipW;
     var tipH;
     var row = 5;
     for(var y = 0; y < 3; y++){//nested foor loop creates a grid
      if(y%2==0){//offsets even rows by 50
         offset = 50;
       }
       else{
         offset = 100;
       }
       for(var x = 0; x < row; x++){
         stickW = 7;
         stickH = 85;
         tipX = x*90 + 3.5;
         tipY = y*100 + 40;
         tipW = 11;
         tipH = 15;
        //match tip
         noStroke();
         fill(225,61,38);
         ellipse(tipX + offset, tipY, tipW, tipH);
         triangle(tipX - tipW/2 + offset, tipY, tipX + tipW/2 + offset, tipY, tipX- 0.5 + offset, tipY + 30);
        //shade match tip
         noStroke();
         fill(231,82,40);
         ellipse(tipX - .75 + offset, tipY + .25, tipW - 5, 12);
         //draw match stick
         noStroke();
         fill(190,169,130);
         rect(x * 90 + offset, y * 100 + 50, stickW, stickH,0,0,45,45);
         //shade match stick
         noStroke();
         fill(219,191,149);
         rect(x * 90 - 1 + offset, y*100 + 50, stickW-1.5,stickH,0,0,45,45);
     }
    }
}

I started by making my match image in Illustrator, and I took the dimensions of the graphic from that. I enjoyed coming up with the artwork for this project, but I had a lot of difficulty implementing it into a pattern. I originally had my nested for loop in my draw function, but when I called it it wouldn’t produce a grid, like it would if I just drew a rectangle in the loop, which I think was because of the way some of my variables were defined in the function. I eventually figured out how to tweak my code within my matchstick function to create the pattern I wanted.