/* 6.914, Example 0.6

stroke : outline of a shape :: fill : inside of a shape.
We use fill the same way we use stroke: either with 1 argument for greys, or 3 arguments for RGB colors.
  fill(0); // black
  fill(100); // dark grey
  fill(255); // white
  fill(200, 0, 0); // red
  
Fill and stroke operate entirely independently. They are both turned on by default.
You can turn stroke off by using noStroke (to hide points, lines, and shape outlines.)
You can turn fill off by using noFill (make shape interiors transparent.)
Neither noFill nor noStroke takes any arguments, so you call them like this:
  noStroke();
  noFill();
  
In order to turn either one back on, you need to call fill() or stroke() WITH a color. 
  fill(); // not a valid command!
  stroke(); // not a valid command either!
  
  fill(0, 0, 140); // this will work to turn fill back on.
  stroke(4); // this will turn stroke back on, or change colors.
  
 */

void setup(){
  size(400, 350); // window of size 300 x 350
  background(175, 175, 255); // light blue background
}

void draw(){
  strokeWeight(2);
  
  // FIRST COLUMN.
  // These have stroke on, in the same color.
  stroke(0);
  
  fill(100);
  rect(20, 20, 80, 80);
  
  noFill();
  rect(20, 120, 80, 80);

  fill(255);
  rect(20, 220, 80, 80);
   
  // SECOND COLUMN.
  // For shapes, stroke and fill are entirely independent.
  fill(220);
  
  stroke(100);
  rect(200, 20, 80, 80);
  
  noStroke();
  rect(200, 120, 80, 80);

  stroke(255);
  rect(200, 220, 80, 80);

  
}