TextileDesignProjectCarlyBrown.js

/*
Title: Marching Elephants
Imagined, Designed, and Programmed by: Carly Brown
Date: October 16, 2017
Description: Textile Design Project

*/

function setup() {
  createCanvas(10000, 10000);
  pattern(10000, 10000); //establishing the pattern underneath the tesselation of elephants and squares
  for (var row = 0; row <= 6; row++) { //calling 7 rows of elephants and squares
    push(); //save state of canvas

    if (row%2==0){
      translate(255, 0); //offset of even rows by 255 in the x-direction
    }

    for (var col = 0; col <= 4; col++) { //calling 5 columns of elephants and squares

      //calling composite of elephant outline
      patternedShape();
      //white squares that hide the pattern between elephants
      noStroke();
      fill(255, 255, 255);
      rect(105, -25, 255, 255);
      translate(510, 0); //translate in X (left-right)
    }
    pop(); //restore state of canvas before the y translations
    translate(0, 255); //translate 255 in the Y-direction
  }

}

function draw() {

}

//masks part of pattern that are not within the shape
function shapeCutOut() {

  //creates white square around outline of elephant
  fill(255);
  noStroke();
  beginShape();
  vertex(100, 225);
  vertex(100, 490);
  vertex(365, 490);
  vertex(365, 225);
  vertex(110, 225);

  //clockwise drawing of elephant
  beginContour();
  //ear
  vertex(175, 255);
  bezierVertex(205, 235, 235, 265, 215, 280);
  //curve on back, down to back leg
  vertex(215, 280);
  bezierVertex(235, 315, 315, 250, 335, 335);
  vertex(335, 335);
  vertex(345, 460);
  //back leg
  bezierVertex(345, 475, 340, 470, 330, 472);
  vertex(285, 470);
  bezierVertex(275, 465, 275, 460, 275, 455);
  vertex(270, 390);
  vertex(245, 390);
  //front leg
  vertex(235, 460);
  bezierVertex(235, 475, 230, 465, 220, 472);
  vertex(190, 470);
  bezierVertex(180, 465, 180, 460, 180, 455);
  bezierVertex(185, 455, 170, 380, 175, 365);
  vertex(155, 365)
  //trunk
  bezierVertex(110, 455, 155, 450, 160, 410);
  vertex(170, 415);
  bezierVertex(175, 485, 80, 470, 130, 330);
  //head
  bezierVertex(110, 255, 170, 250, 175, 255);
  endContour();

  endShape();
  fill(0);
  ellipse(150, 285, 5, 10)

}

//identical function to above, without "counter" in order to outline elephant
function outline() {
  noFill();
  stroke(0);
  //clockwise drawing of elephant
  beginShape();
  //ear
  vertex(175, 255);
  bezierVertex(205, 235, 235, 265, 215, 280);
  //curve on back, down to back leg
  vertex(215, 280);
  bezierVertex(235, 315, 315, 250, 335, 335);
  vertex(335, 335);
  vertex(345, 460);
  //back leg
  bezierVertex(345, 475, 340, 470, 330, 472);
  vertex(285, 470);
  bezierVertex(275, 465, 275, 460, 275, 455);
  vertex(270, 390);
  vertex(245, 390);
  //front leg
  vertex(235, 460);
  bezierVertex(235, 475, 230, 465, 220, 472);
  vertex(190, 470);
  bezierVertex(180, 465, 180, 460, 180, 455);
  bezierVertex(185, 455, 170, 380, 175, 365);
  vertex(155, 365)
  //trunk
  bezierVertex(110, 455, 155, 450, 160, 410);
  vertex(170, 415);
  bezierVertex(175, 485, 80, 470, 130, 330);
  //head
  bezierVertex(110, 255, 170, 250, 175, 255);

  //eye
  endShape();
  fill(0);
  ellipse(150, 285, 5, 10)

}



//composite of both the pattern masking and outline drawing functions
function patternedShape() {
  shapeCutOut();
  outline();

}

var color3=[191, 87, 87]

function pattern(w, h) {
  scale(.5);
  push();
  for (var row = 0; row <= h/80; row++) {
    push(); //save state of canvas

    if (row%2==0){
      translate(75, 0);
    }

    for (var col = 0; col <= w/80; col++) { //calling 6 columns

      //individual pattern being translated
      fill(color3);
      quad(100, 80, 140, 40, 180, 80, 140, 120);
      noFill();
      strokeWeight(2);
      quad(89, 80, 140, 29, 191, 80, 140, 131);
      translate(150, 0); //translate in X direction
    }
    pop(); //restore state of canvas before the x translations
    translate(0, 50); //translate in Y direction
  }
  pop();
 }