art deco ish?

i struggled quite a bit with keeping my variables in check without rotating absolutely everything chaotically. to deal with this, I ended up hard-coding too many numbers…

sketch
// jaden luscher
// jluscher
// section a
// project 05

// this program draws an art deco-influenced wallpaper

// initializing variables
var tileSize = 30;

// random color variables
var stemColor;
var budColor;
var frondColor;

function setup() {
    createCanvas(450, 650);
    background("#7F246B");    // fuschia
    angleMode(DEGREES);
    rectMode(CENTER);
    noLoop();

    stemColor = "#E09D00";  // ochre
    budColor = "#FFD470";   //light yellow
    frondColor = "#033B63";   // dark blue
}

function draw() {
  for(var i = 0; i < 5; i++) {
    drawBand();
    translate(-3.21*tileSize, 3*tileSize);
  }
}


function drawBand() {
  translate(tileSize, 3*tileSize);   // temporary, just to see tile in center
  for(var k = 0; k < height/(3*tileSize); k++) {
    for(var j = 0; j < width/(tileSize); j++) {
      oneTile();
      rotate(180);
      translate (2.15*tileSize, tileSize/10);
      // I cant figure out why the row slants if i dont move it
      // vertically by the arbitrary number tileSize/10 :-(
    }
    translate(-3.21*tileSize, tileSize);
    rotate(180);
  }
  print(height/ (6*tileSize));
}


function oneTile() {
  flowerStem();
  push();
  noStroke();
  // draw 2 fronds
  translate(0,-tileSize/10);  //bottom of fronds align to triangle edge
  rotate(-90);
  frond(tileSize);  // right frond
  rotate(-90);
  frond(tileSize);  //left frond

  fill(budColor);
  ellipse(0, 0, tileSize/3, tileSize*1.5)
  pop();
}


function flowerStem() {
  // rotate(180);
  fill(stemColor);
  stroke(stemColor);
  triangle(0, -tileSize, -tileSize, 0, tileSize, 0);    // triangle base
  arc(0, -1.5*tileSize, tileSize, tileSize, -135, -45, PIE);    // flower base
  strokeWeight(2);
  line(0, -tileSize, 0, -1.5*tileSize); // stem


  // stamen
  push();
  translate(0, -1.5*tileSize);
  rotate(45);   // align stamen lines with base of flower arc
  fill(budColor);
  var numStamen = tileSize/2;
  var angle = 90/numStamen;
  for(var i=0; i <= numStamen; i++) {
    strokeWeight(0.5);
    line (0, 0, 0, -tileSize);
    push();
    noStroke();
    ellipse(0, -tileSize, tileSize/12); // flower buds
    pop();
    rotate(-angle);
  }
  pop();


}

function frond(tileSize) {
  fill(frondColor);
  push();
  var x = 0;
  var y = 0;
  var leafSize = tileSize/7;  // width of leaf. /6 creates woven pattern, /8 is more leaf-like
  var numLeaves = leafSize*2;
  // left half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, -y, x+leafSize, -y);
    rotate(90/numLeaves);
    x += leafSize;
    y += leafSize;
  }
  pop();

  // right half of frond
  push();
  for (var i = 0; i < numLeaves; i++){
    triangle(0, 0, x, y, x+leafSize, y);
    rotate(90/numLeaves);
    x -= leafSize;
    y -= leafSize;
  }
  pop();
}

Leave a Reply