karinac-Project-05

//Karina Chiu
//Section C
//karinac@andrew.cmu.edu
//Project-05

function setup() {
    createCanvas(500,500);
}
 
function draw() {
    background(138,0,45);

    //first set of boxes
    for (var y = 30; y < height-30; y += 90) {
        for (var x = 30; x < width-30; x += 90) {
            stroke(250);
            strokeWeight(10);
        	noFill();
            rect(x, y, 70, 70);
        }
    }

    //underneath layer of boxes
    for (var a = 50; a < height-80; a += 90) {
        for (var b = 50; b < width-80; b += 90) {
            stroke(250);
            strokeWeight(6);
            noFill();
            rect(a, b, 70, 70);
        }
    }
}

I wanted to create a wallpaper with simple geometric designs that are not too distracting. The hardest part I faced was trying to find the parameters for the loop.

sketch

// Bettina Chou
// yuchienc@andrew.cmu.edu
// Section C
// Project 5 Wallpaper

function setup() {
  createCanvas(480,480);
  background("#8ca1d2");
  for (var y=0;y<7;y++) {
    if (y%2===0) { //every odd row
          for (var x = 0; x < 5; x++) {
              var ty=y;
              var tx=x;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDrops(tx,ty);

          }
      }
      else {
        for (var x = 0; x < 4; x++) { //every even row
              var tx=x+.5; //shifts every other row to the right
              var ty=y;
              drawTriangles(tx,ty);
              drawTrianglesTwo(tx,ty);
              HorizontalLines(tx,ty);
              TearDropsTwo(tx,ty);
          }
      }
  }
  noLoop();
}

function TearDrops(tx,ty) {
  var TearCounter=random(3); //only draws about a little under half of the tears
  if (TearCounter>1.75) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)+50,(ty*50)+random(50));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function TearDropsTwo(tx,ty) {
  var TearCounter=random(3);//only draws about half of the tears
  if (TearCounter>1.5) {
  fill("#728fc9");
      noStroke();
      push();
      translate((tx*100)-random(10,50),(ty*50)+random(70));
          beginShape();
          curveVertex(50,80);
          curveVertex(50,80);
          curveVertex(58,102);
          curveVertex(50,110);
          curveVertex(42, 102);
          curveVertex(50,80);
          curveVertex(50,80);
          endShape();
      pop();
  }
}

function drawTriangles(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,ty*65);
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function drawTrianglesTwo(tx,ty) {
  noFill();
  stroke("#ffefbd");
  strokeWeight(2);
  push();
  translate(tx*95,(ty*65)+10); //draws the second in the pair that's translated in the y-direction
  triangle(50, 25, 65, 47, 35, 47);
  pop();
}

function HorizontalLines(tx,ty) {
  noFill();
  stroke("#194e93");
  strokeWeight(3);
  var lineCounter=random(3); //only draws about less than half of line groups
  if (lineCounter>1.85) {
  push();
  translate((tx*80)-20,(ty*60)-random(10,20));
  line(65,70,110,70);
  line(50,80,80,80);
  line(95,80,120,80);
  line(85,90,105,90);
  pop();
  }
}

I was inspired by the chilly fall evenings to create a pattern that symbolized the weather. I first sketched a variety of geometric and organic shapes in illustrator and developed a color palette. I simplified the shapes to create more abstract representations of rain, stars, and clouds. Wanting to create something aligning with the characteristics of code (as opposed to trying to “pixel-push”) I realized that mathematical patterns are a key speciality of code. I was inspired by the assignments to create a pseudo-hexagonal grid for all of my elements, and added random omissions and translation variations using conditionals. (try refreshing, the pattern will vary each time!)

afukuda-project-05-wallpaper

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 05
 */ 

var diamondX // x-coordinate for diamond  
var x // horizontal line increment 
var y // vertical line increment 

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

function draw() {
    background(140, 164, 212);
    stroke(219, 242, 248);
 
    for (y = 0; y <481; y += 80) {        
        for (x = 0; x < 481; x += 80) {                

        // ODD COLUMN GEOMETRY 
            if (x%160 == 0) {                                     // calling only odd columns 
                line(x, y, x+80, y);                                 // array horizontal lines 
                line(x, y+40, x+40, y);                              // array top-left diamond lines 
                line(x, y+40, x+40, y+80)                            // array bottom-left diamond lines
                line(x+40, y, x+80, y+40);                           // array top-right diamond lines
                line(x+40, y+80, x+80, y+40);                        // array bottom-right diamond lines 
               
                
                for (diamondX = 0; diamondX < 41; diamondX += 8) {    
                    if (y%160 == 0) {                             // from odd columns - calling only odd rows
                      line(x+40, y, x+diamondX, (y+40)+diamondX);       // array fanning-left lines (fan down)
                      line(x+40, y, (x+40)+diamondX, (y+80)-diamondX);  // array fanning-right lines (fan down)  

                      // TURQUOISE TRIANGLE (BOTTOM)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x, y);
                        vertex(x+40, y);
                        vertex(x, y+40);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (TOP)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x, y);
                        vertex(x, y-40);
                        vertex(x+40, y);
                      endShape();   
                      pop();
                    }

                    else {                                        // from odd columns - calling now even rows 
                      line(x+40, y+80, x+diamondX, (y+40)-diamondX);    // array fanning-left lines (fan up)
                      line(x+40, y+80, (x+40)+diamondX, y+diamondX);    // array fanning-right lines (fan up)

                      noFill();
                      ellipse(x-40, y, 138, 80);                        // array oval 
                      arc(x+40, y-40, 138, 80, 0, PI);                  // array oval (bottom-half)
                      arc(x+40, y+40, 138, 80, PI, 0);                  // array oval (top-half)

                      // TURQUOISE TRIANGLE (TOP)
                      push();
                      fill(193, 228, 221);
                      beginShape();
                        vertex(x+40, y+80);
                        vertex(x+80, y+40);
                        vertex(x+80, y+80);
                      endShape();   
                      pop();

                      // LIGHT BLUE TRIANGLE (BOTTOM)
                      push();
                      fill(209, 226, 244);
                      beginShape();
                        vertex(x+40, y-80);
                        vertex(x+80, y-80);
                        vertex(x+80, y-40);
                      endShape();   
                      pop();
                    }
                } 
            }

        // EVEN COLUMN GEOMETRY
            else {
                line(x, y+40, x+80, y+40);     // array horizontal lines 
                
                line(x, y, x+40, y+40);        // array top-left diagonal lines 
                line(x+40, y+40, x, y+80);     // array bottom-left diagonal lines 
                line(x+40, y+40, x+80, y);     // array bottom-right diagonal lines 
                line(x+40, y+40, x+80, y+80);  // array top-right diagonal lines 

                if (y%160 == 0) {                    // from even columns - calling only odd rows   
                    line(x, y-40, x, y+40);          // array left vertical lines 
                    line(x+80, y-40, x+80, y+40);    // array right vertical lines 

                    // ORANGE DIAMOND OFFSET (TOP)
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);      
                      vertex(x+40, y-40); 
                      vertex(x+80, y);  
                      vertex((x+80)-(20/sqrt(2)-5), y+10); 
                      vertex(x+40, y-20);
                      vertex(x+(20/sqrt(2)-5), y+10);
                    endShape();
                    pop();
                    
                    // PINK ELLIPSE (TOP)
                    ellipseMode(CENTER);
                    fill(249, 200, 203);
                    ellipse(x+40, y+26, 20, 20);     
                }

                else {                               // from even columns - calling now even rows 
                    // PINK ELLIPSE (BOTTOM)
                    fill(249, 200, 203);             
                    ellipse(x+40, y-25, 20, 20);
                    
                    // ORANGE DIAMOND OFFSET (BOTTOM)  
                    push();
                    fill(253, 203, 167);
                    beginShape();
                      vertex(x, y);
                      vertex(x+(20/sqrt(2)-3), y-10);
                      vertex(x+40, y+20);         
                      vertex((x+80)-(20/sqrt(2)-5), y-10);
                      vertex(x+80, y);
                      vertex(x+40, y+40);
                    endShape();
                    pop();
                }
            }                                                 
        }
    }  

} // draw function end bracket                 

    



    

My wallpaper was inspired by this geometric pattern I came across while brainstorming for ideas. One thing I noticed upon completing the base of the pattern, was that while it does exhibit a degree of offset row by row, it still had a very strong vertical presence. In order to mitigate the verticality of the pattern I incorporated the overlapping ellipses to create a floral, petal-like design horizontally across the canvas. Finally I added some colors in specific moments to make the wallpaper stand out more.