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