Bettina-Project05-Wallpaper-SectionC

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