week7_tiling - OpenProcessing

mySketch
xxxxxxxxxx
 
//canvas
let canvasWidth = 635;
let canvasHeight = 610;
let backgroundColor = 255;
​
//tiling margin from starting point Y
let startingX = 20;
//tiling margin from starting point X
let startingY = 20;
​
//triangles dimensions
let triangleWidth = 60;
let triangleHeight = 20;
​
//spacing between triangles
let s = 10;
//spacing between grid piece rectangle
let gs = 5;
​
//amount of rows
let rowCount = 23;
​
​
function setup() {
  createCanvas(canvasWidth, canvasHeight);
}
​
function draw() {
  noLoop();
  background(backgroundColor);
  
  for (let j = 0; j < rowCount; j++) {
    //next step to each triangle Y
    let y = startingY + (triangleHeight + gs) * j;
  
    //INTENSITY OF TRIANGLES GOING DOWN BY EACH  ROW
    let fillProbabilityMax = 95;
    let fillProbabilityMin = 5;
    //each step of decreasing of fill
    let probabilityStep = (fillProbabilityMax - fillProbabilityMin) / rowCount;
​
    for (let i = 0; i < 8; i++) {
      //next step to each triangle X
      let x = startingX + (triangleWidth + gs + s ) * i;
      
      //is triangle filled or not?
      let isTriangleLeftFilled = random(0, 100) < fillProbabilityMax - (probabilityStep * j);
      let isTriangleRightFilled = random(0, 100) < fillProbabilityMax - (probabilityStep * j);
​
      
      //LEFT TRIANGLE
    
      if (isTriangleLeftFilled) {
        fill(0);
        //IF BACKGROUND COLOR TOO DARK, TRIANGLES WILL BE LIGHT --> DARK MODE
        if (backgroundColor < 100) {
          fill(255);
          stroke(255);
        } 
        else {
          fill(0);
          stroke(0);
        }
      }
​
      else {
        noFill();
      }
      
      triangle(
        x, y, 
        (x + triangleWidth), y, 
        x, (y + triangleHeight)
      );
​
      
      
      //RIGHT TRIANGLE
      
      if (isTriangleRightFilled) {
        fill(0);
         if (backgroundColor < 100) {
           fill(255);
           stroke(255);
         } 
         else {
           fill(0);
           stroke(0);
         }
      } 
      
      else {
        noFill();
      }
      
      triangle(
        (x + s), (y + triangleHeight), 
        (x + triangleWidth + s), (y), 
        (x + triangleWidth + s), (y + triangleHeight)
      ); 
    } 
  }
}
​
//WHEN KEY PRESSED, RANDOMIZES BACKGROUND COLOR 
//TRIANGLES' COLOR WILL BE ACCORDINGLY (dark bg- light triangles or vice versa)
function keyPressed() {
  if (key === 'r') {
    backgroundColor = random(255);
    draw();
  }
}