Law of Symetry and Figured-Ground

P5.js, Law of Contrast, Law of Symmetry, contrast, symmetry, grid
This sample shows a static grid with horizontal lines. The lines on the top of the square are the longest. The lines on the bottom of the square are the shortest. They built together a triangle. In the middle of the square is another small triangle that built the same image that is built before.
function setup() {
   var canvas = createCanvas(500, 500);
       canvas.parent('sketch');
  background(220);
  
  var i = 0;
  while (i < 500){
    stroke(100);
    line(i, i, width, i);
    i = i + 2;
  }
  
  noStroke();
  fill(220);
  rect(200, 200, 100, 100);
  var y = 200;
  while(y < 300){
    stroke(100);
    line(y, y, y, 300);
    y += 2;
  }
}

function draw() {
  
}