nick34992
4/20/2016 - 3:09 PM

Stripe Pattern. Using p5.js library.

Stripe Pattern. Using p5.js library.

function setup() {
  midnightBlue    = color(0, 51, 102);
  dodgerBlue      = color(51, 153, 255);
  peachOrange     = color(255, 204, 153);
  atomicTangerine = color(255, 153, 102);
  createCanvas(896, 504);
  noStroke();
  noLoop();
}

function draw() {
  drawStripes(midnightBlue, dodgerBlue, peachOrange, atomicTangerine, 0, width / 64);
}

function drawStripes(e, f, g, h, y, stripeWidth) {
  // drawStripes, totalStripes, stripeOrder parameters must match
  var totalStripes = 4;
  var stripeOrder = [e, f, g, h];
  for(var i = 0; i < width; i += stripeWidth * totalStripes) {
    for(var j = 0; j < totalStripes; j++) {
      fill(stripeOrder[j]);
      rect(i + j * stripeWidth, y, stripeWidth, height);
    }
  }
  textSize(80);
  textFont("Georgia");
  fill(255);
  textStyle(BOLD);
  text('Midnight Blue', 50, 100);
  text('Dodger Blue', 50, 200);
  text('Peach Orange', 50, 300);
  text('Atomic Tangerine', 50, 400);
}