Category: Section E

sketch

//SunMin Kim 
//Section E
//sunmink@andrew.cmu.edu
//project-05

function setup() {
    createCanvas(480, 480);
    background(222, 141, 148);
    var tw = 50;  
    var th = 50;  
    var y = 100; 
    var x = 100; 

    noStroke(); 

    for (var y = 0; y < 8; y++) {
        for (var x = 0; x < 8 ; x++) {
            var posy = y + y * 1.3 *th + 15; 
            var posx = x + x * 1.1 *tw;  

            //ice cream top 
            fill(240, 230, 180);
            ellipse(posx + 50, posy + 9, 18, 19); 

            //sprinkles 1 on ice cream 
            fill(226, 161, 73);
            rect(posx + 54, posy + 4, 3, 2); 

            //sprinkles 2 on ice cream 
            fill(210, 61, 59);
            rect(posx + 48, posy + 4, 3, 2); 

            //sprinkles 3 on ice cream 
            fill(56, 83, 168);
            rect(posx + 52, posy, 3, 2); 


            //ice cream cone 
            fill(158, 65, 65);
            triangle(posx + 60, posy + 10, posx +40, posy + 10, (tw*sqrt(3)/2) + posx -10 , posy+th);
        }
    }
    noLoop();
}

function draw() { 
}




        






            
    

After finishing assignments using for() loops, I was excited to create patterns instead of inputting individual functions. Thus for the wallpaper, I wanted to take benefits of for() loop and create a creative wallpaper I want to purchase. I first created the ice-cream cone and followed by ice-cream and sprinkles on it.

Throughout this project, I struggled the most when coming up with triangle coordinates. I feel good with the outcome that I successfully used triangles for this wallpaper which was the most challenging part during the project.

katieche-05

// katie chen
// project 05
// section E
// katieche@andrew.cmu.edu

function setup (){
	createCanvas (480, 480);
	background (230);

	var c = 80; // how close together they are in a row
    var lh = 80; // line height
    var w = 80; // width
    rectMode(CENTER);

    for (var y = 0; y < 9; y++) {
        var z = 9;
        for (var x = 0; x < z; x++) {
            //var z = 10;
            var py = y * lh;
            var px = x * c;

            noFill();
            stroke(220);
            
            if (y % 2) {
                var z = 8;
                strokeWeight(1);
                stroke(240);
                rect(px+(0.5*c), py, w, w);
                rect(px+(0.5*c), py, 50, 50);
                // white horizontal long rectangles
                stroke(250);
                strokeWeight(2);
                rect(px, py, 70, 20);
                // white diagonals
                stroke(250);
                strokeWeight(2);
                //line (px-30, py-30, px+30, py+30);
                //line (px-30+(2*c), py-30, px+30, py+50);
                //line (px-30+(2.2*tw), py-30, px+30, py+50+(2.2*tw));

            }

            else {
            	strokeWeight(1);
            	stroke(240);
                rect(px, py, 70, 30);
                rect(px, py, 30, 60);
                strokeWeight(2);
            	stroke(250);
                rect(px, py, 75, 10);
                rect(px, py, 10, 70);
                // white vertical long rectangles
                stroke(250);
                strokeWeight(2);
                rect(px+(0.5*c), py, 20, 150);
                // white diagonals
                stroke(250);
                strokeWeight(2);
                //line (px-30, py-30, px+30, py+30);
                //line (px-30+(2*c), py-30, px+30, py+50);
                //line (px-30+(2*tw), py-30, px+30, py+50+(2*tw));

             }
        }
    }
    noLoop();

}

function draw (){
		
}

For this project, I started off by looking at existing wallpapers for inspiration. After doing some sketching, I tried to recreate my sketches but then started going into a different direction and doing more guess and check. I knew I wanted to keep a neutral and subtle palette.

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