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