week8_tessellation

let canvasWidth = 600;

let canvasHeight = 600;

let backgroundColor = '#74beff';

​

//RGB colors of pattern shape upon opening

let r = 0;

let g = 34;

let b = 128;

​

//grid size

let gSize = 100;

​

//grid reference lines turn on and off

let showReferenceLines = false;

​

​

function setup() {

  createCanvas(canvasWidth, canvasHeight);

  background(backgroundColor);

}

​

function draw() {

  noLoop();

  angleMode(DEGREES);

  //setting the rotation point to the center of the pattern

  translate(gSize / 2, gSize / 2);

  for (i = 0; i < 6; i++) {

    for (j = 0; j < 6; j++) {

      //rotate at a random degree each pattern piece: 0, 90, 180 or 270 degrees

      let dice = random(0, 1);

      if (dice <= 0.25) {

        rotation = 0;

      }  

      else if (0.25 < dice && dice <= 0.5) {

        rotation = 90;

      }

      else if (0.5 < dice && dice <= 0.75) {

        rotation = 180;

      }

      else if (0.75 < dice && dice <= 1) {

        rotation = 270;

      }

      let y = i * gSize;

      let x = j * gSize;

      push();

      //drawing each pattern one by one on the grid

      translate(x, y);

      rotate(rotation);

      pattern();

      pop();

    }

  }

    //go back to start (you need this so that it doesn't break when you generate again)

    translate(- gSize / 2, - gSize / 2);

}

​

function pattern () {

  //colors

  let patternColor = color('#00156c')

  //pattern stroke weight

  let patternSW = 4;

  //reference lines of grid

  if (showReferenceLines == true) {

    noFill();

    stroke(r, g, b);

    square(0, 0, gSize);

    line(0, gSize/2, gSize, gSize/2);

    line(gSize/2, 0, gSize/2, gSize);

  }

  //when drawing the pattern: starts from here. you rotated it at center now you go back to x y start

  translate(- gSize / 2, - gSize / 2);

  //lines in the pattern

  push();

  noFill();

  stroke(r, g, b);

  strokeWeight(patternSW);

  square(0, 0, gSize);

  line(0, gSize/2, gSize/2, gSize/2);

  line(gSize/2, gSize/2, gSize, 0);

  pop();

​

  //custom shape in the pattern

  push();

  stroke(r, g, b);

  strokeWeight(patternSW);

  fill(r, g, b);

  //below are some tests for additional pattern parts

  //square(0, 0, gSize/2);

  //square(gSize/2, 0, gSize/2);

  //triangle(gSize/2, 0, gSize, 0, gSize/2, gSize/2);

  triangle(gSize/2, 0, gSize, 0, gSize, gSize/2);

  beginShape();

  vertex(0, gSize);

  vertex(gSize/2, gSize/2);

  vertex(gSize/2, (gSize/4)*3);

  vertex((gSize/4)*3, (gSize/4)*3);

  vertex(gSize, gSize);

  endShape();

  pop();

}

​

function keyPressed() {

  //redraws the composition

  if (key == 'r') {

    background(backgroundColor);

    draw();

  }

  //redraws composition with a different random blue tone color

  if(key == 'c') {

    g = random(0, 100);

    b = random(100, 255);

    background(backgroundColor);

    draw();

  }

  //downloads the canvas as a jpg file

  if (key == 's') {

  save('pattern.jpg');

  }

​

}