Daniel Santana Computing 1 Final Textile

DanielSantanaTextile.js

/*
Title: Was this your card?
Imagined, Designed, and Programmed by: Daniel Santana
Date: October 12, 2017
Description: A pettern that recreates fans of cards, in which a specific card is face up.
Sources of ideas and inspiration (title, author, URL):
 *Archangels Playing Cards, Theory11, www.bicyclecards.com/product/bicycle-archangels-playing-cards/
 *Art Nouveau, Encyclopaedia Britanica, https://www.britannica.com/art/Art-Nouveau
 *History of Encaustic Cement Tile, Villa Lagoon Tile, https://www.villalagoontile.com/history-of-encaustic-tiles.html

Includes code from (title, author, URL):
 *Transformations Pt.1 (Translate, Rotate, Push/Pop) - p5.js Tutorial, Dan Shiffman, https://www.youtube.com/watch?v=o9sgjuh-CBM&t=1124s (This was used as an explanation, but I did not use any code)
 *
 *
-I did not use any unoriginal code

<Reminders, you can delete:>
<Use command + T to auto-indent your code for cleaner formatting>
<Check that variable and function names are easy to read and understand. eg. "squareButton" vs.
"shapeButton2">
<If you can't remember where you found some code, Google the text to find it.>
<Put your name in the name of this file!>
*/

let canvasX = 5000
let canvasY = 5000
//dimensions of the canvas
var increasingRotation = 2
//Will be increased and used to rotate the cancas when creating the wing shape
let cardCenter = [0,0]
//where to make the cards in relation to the origin that is translated to (how far off from the point that is translated to)
var plantOrWingProperties = {
  curve1: [[0,50],[-15,50],[-50,50]],
  curve2: [[0,50],[-50,50]],
  vertex: [0,-10],
  //these are the values that will be used to make the plant or wing bezier vertex shapes
  rotation: 10,
  originalRotation: 10,
  separationOfLeaves: 10
  //these can be altered to produe the desired leaves
}

function setup() {
  createCanvas(canvasX,canvasY);
  background(0);
  //makes a black canvas
  translate(canvasX/2-1000,canvasY/2);
  //makes origin in the center of the canvas
  angleMode(DEGREES)
  makeCardFan(0,0,20)
  //makes the fan of cards
}

function makeCardFan(x,y,numberOfCardsInFan){
  translate(x,y)
  rotate(-50);
  //makes the first rotated a little bit counter clockwise so the center of the fan points up
  for (var i = 1; i <= numberOfCardsInFan; i ++){
    //repeats while i is to be under the ammount of cards in the fan--right now it's 20
    if (i % 11 == 0) {
      //tests if the card is the 11th to make a face up 8 of diamonds instead of the back of a card
      makeFaceUpCard(cardCenter[0],cardCenter[1]);
    } else {
     makeCardBack(cardCenter[0],cardCenter[1])
    }
    translate(cardCenter[0]-691,cardCenter[1]+970);
    rotate(4)
    //4 degrees per card to make the fan
    translate(cardCenter[0]+711,cardCenter[0]-990);
  }
}

function makeFaceUpCard(x,y){
  translate(x+50,y+50)
  //makes up for the increase in x and y when a card back is made
  strokeWeight(1);
  fill(255);
  rect(-801,-1120,1509,2110)
  //creates the white rectangle that is the card
  noFill();
  strokeWeight(5);
  stroke(200,0,0);
  ellipse(-751,-1070,45,40);
  ellipse(-751,-1025,50,50);
  //makes the 8 with two ellipses
  translate(-751,-975);
  fill(200,0,0);
  beginShape();
  vertex(0,0)
  vertex(20,40);
  vertex(0,80);
  vertex(-20,40);
  vertex(0,0);
  endShape();
  //makes the diamond
  translate(751,975);
  stroke(0);
  translate(-50,-50)
  //reverses the translation that make up for the increase from the card back function
}

function makeCardBack(x,y) {
  translate(x,y)
  strokeWeight(1);
  fill(255);
  rect(-751,-1070,1509,2110)
  //the borders are slightly off-centered, mimicing how bicycle cards are always slightly misprinted.
  fill(200, 0, 0);
  rect(-711,-1020,1409,2010)
  //makes border of card
  strokeWeight(1);
  noFill();
  rotate(30);
  rotate(-2)
  //reverses the rotation that is about to happen so the orientation of the canvas is not disrupted
  for (var i = 1; i <= 20; i ++){
    makeWing(0,0,60,2);
    rotate(0.1)
  }
  //this for loop adds to the depth of the wing, by making multiple that are overlayed upon eachother
  rotate(-30);
  makeRingOfPlants(-650,0);
  //the design of the card back is coded in layers to mimic the encaustic tile making process
}

function makeFeather() {
  //this method creates a single feather, and will be repeated in the makeWing method
  strokeWeight(1);
  rotate(-90)
  //The bezier curves that make the feathers originally point in the wrong direction, so I have to rotate the canvas to make them.
  translate(-plantOrWingProperties.curve1[2][0],-plantOrWingProperties.curve1[2][1])
  fill(255)
  beginShape()
  vertex(plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  bezierVertex(plantOrWingProperties.curve1[0][0],plantOrWingProperties.curve1[0][1],plantOrWingProperties.curve1[1][0],plantOrWingProperties.curve1[1][1],plantOrWingProperties.curve1[2][0],plantOrWingProperties.curve1[2][1])
  bezierVertex(plantOrWingProperties.curve2[0][0],plantOrWingProperties.curve2[0][1],plantOrWingProperties.curve2[1][0],plantOrWingProperties.curve2[1][1],plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  endShape()
  //translate(plantOrWingProperties.separationOfLeaves,abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])*2))
  //moves over by twice the width of the feather to draw before rotating
  rotate(90)
  translate(-plantOrWingProperties.curve1[2][0],plantOrWingProperties.curve1[2][1])
  //these undo previous translations and rotations
  translate(0,-abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])/2))
  //makes next feather go up
}

//note: the makeLeafSection and makeWing functions are VERY similar, but the leaf one creates a mirrored image of the leaves while the wing function only makes 1 feather.

function makeWing(x,y,quantityOfFeathers,quantityOfWings) {
  //height is the amount of feathers in a wing. To make the wings shorter, decrease the height
  //quantityOfWings is the number of wings that are reflected by the function. For example if 3 is inputted, every 120 degrees a wing will be made, making three wings sprouting from a single point.
  //combines individual feathers by rotating and translating to form the shape of a wing
  push();
  translate(x,y);
  //translates to the given location
  for (var u = 1; u <= quantityOfWings; u ++) {
    //I use the names u and i arbitrarily to name variables in for loops
    push();
    for (var i = 1; i <= quantityOfFeathers; i ++) {
      makeFeather();
      translate(0,abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])/2)-5);
      rotate(increasingRotation);
      plantOrWingProperties.vertex[0] += 10
      increasingRotation = increasingRotation*1.03 -0.12
      //makes (the value of the height varibale) feathers, and then translates accordingly to create the wing shape
    }
    pop()
    //resets canvas
    rotate(360/quantityOfWings);
    //rotates before the loop is run again, off-setting the rotation of the wings (it divides 360 by the quantity of wings, so the wings are equally distrinuted)
    increasingRotation = 2
    plantOrWingProperties.vertex[0] = 0
    //resets the values of these variables so they can be used the next time the loop is run
  }
  pop()
}
//The appearance of the wing is inspired by the Archangels Bicycle deck

function makeLeafSection() {
  rotate(-90)
  translate(-plantOrWingProperties.curve1[2][0],-plantOrWingProperties.curve1[2][1])
  beginShape()
  vertex(plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  bezierVertex(plantOrWingProperties.curve1[0][0],plantOrWingProperties.curve1[0][1],plantOrWingProperties.curve1[1][0],plantOrWingProperties.curve1[1][1],plantOrWingProperties.curve1[2][0],plantOrWingProperties.curve1[2][1])
  bezierVertex(plantOrWingProperties.curve2[0][0],plantOrWingProperties.curve2[0][1],plantOrWingProperties.curve2[1][0],plantOrWingProperties.curve2[1][1],plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  //creates bezier curves from the plant properties.
  endShape()
  translate(plantOrWingProperties.separationOfLeaves,abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])*2))
  //moves over by twice the width of the flower to draw before rotating
  rotate(180)
  beginShape()
  vertex(-plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  bezierVertex(plantOrWingProperties.curve1[0][0],plantOrWingProperties.curve1[0][1],-plantOrWingProperties.curve1[1][0],plantOrWingProperties.curve1[1][1],-plantOrWingProperties.curve1[2][0],plantOrWingProperties.curve1[2][1])
  bezierVertex(plantOrWingProperties.curve2[0][0],plantOrWingProperties.curve2[0][1],-plantOrWingProperties.curve2[1][0],plantOrWingProperties.curve2[1][1],-plantOrWingProperties.vertex[0],plantOrWingProperties.vertex[1])
  //makes the opposite of the first plant
  endShape()
  rotate(180)
  translate(-plantOrWingProperties.separationOfLeaves,-abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])*2))
  rotate(90)
  translate(-plantOrWingProperties.curve1[2][0],plantOrWingProperties.curve1[2][1])
  //undos previous translations and rotations
  translate(0,-abs((plantOrWingProperties.vertex[1]-plantOrWingProperties.curve1[1][1])/2))
  //makes next plant go up
}

function makeRingOfPlants(x,y) {
  //creates the rounded border pattern of the card
  fill(0);
  push()
  translate(x,y);
  strokeWeight(1);
  for (var i = 1; i <= 120; i ++) {
    //120 because that is 2 * 60, which closes the entire shape
    makeLeafSection();
      if (i % 20 == 0 && i % 60 != 0) {
        //when i can be divided by 20 and not 60, this allows the shorter sides of the card to be ended every 20 leaves. (20 and 40, 80 and 100 are the values of i at the corners) Multiples of 60 do not satisfy this if statement.
        //when i = 60, 20 leaves after starting the big side will not rotate, but 40 after--which is i = 80 will. This means there are 40 leaves on the big side, and 20 on the small.
        for (var u = 1; u <= 18; u ++) {
          //makes the curved corners of the border. 18 * 5(the rotation value in degrees) = 90, which makes a rounded rectangle.
          makeLeafSection();
          rotate(5);
        }
      }
    //makes a 1:2 width to height ratio rect with rounded corners
  }
  pop()
}

function draw() {
}