comments and hsl mode update

colour_and_pattern/exercises/Albers_contrast_squares/sketch.js

-// 
+///
+/// Albers contrast squares
+/// by Evan Raskob <e.raskob@gold.ac.uk>
+//
+/// - Demonstrating using HSB colour mode in p5js.
+/// - Learning about saturation, lightness and hue using
+///     background contrast.
 
-// colours for right square, left square, and 
-// square that sits in both
+
+// Colours for right square, left square, and 
+// centre square that sits in both.
+// NOTE: these are of object type p5.Color
 
 let leftColor, rightColor, centreColor;
-let leftHue = 180;
 
 
 function setup() {
   createCanvas(400, 400);
   
-  // cool trick -- write a string as `my string` and you
-  // can put a variable in it using ${variable}
-  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+  // We can use HSB mode as follows 
+  // from (https://p5js.org/reference/#/p5/colorMode):
+  // Setting colorMode(HSB) lets you use the HSB system instead.
+  // By default, this is colorMode(HSB, 360, 100, 100, 1). 
+  // You can also use HSL instead of HSB.
+
+  colorMode(HSB);
+
+  let leftHueAngle = 180; // set this to something fun. 0 is red.
+
+  // Offset for right square colour: some fraction of 
+  // a circle. 180 is opposite color, 360 goes back to the same 
+  // colour (360 rotation)
+  let hueAngleOffset = 360/2; 
+
+  leftColor = color(leftHueAngle, 80, 80);
+  rightColor = color(leftHueAngle + hueAngleOffset, 80, 80);
+
+  ///
+  /// EXERCISE FOR YOU TO DO:
+  /// Try changing this to change the centre squares until
+  /// they both look like different colours. Find 2 combinations
+  /// of colours for outer and centre squares. What parameters
+  /// worked best, and why?
+
+  centreColor = color(140, 70, 60);
+  
+  ///-------------------------------------------------------------
+  /// There's another way to do this using ES6 syntax...
+  /// uncomment the code below to use it.
+  /// For this cool trick -- write a string as `my string` and you
+  /// can put a variable in it using ${variable}
+  /// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
   
-  // hsl color is a string with hue angle (0-360),
-  // saturation (0-100%), value (0-100%)
+  /// hsl color is a string with hue angle (0-360),
+  /// saturation (0-100%), value (0-100%)
   
-  leftColor = color(`hsl(${leftHue}, 80%, 80%)`);
+  // leftColor = color(`hsl(${leftHueAngle}, 80%, 80%)`);
   
   // right colour is complimentary (180 degrees away form leftHue)
-  rightColor = color(`hsl(${leftHue+180}, 80%, 80%)`);
+  //rightColor = color(`hsl(${leftHueAngle+hueAngleOffset}, 80%, 80%)`);
   
   // EXERCISE:
   // try changing this to change the centre squares
-  centreColor = color(`hsl(140, 70%, 60%)`);
-  
+  // centreColor = color(`hsl(140, 70%, 60%)`);
+  ///-------------------------------------------------------------
+
 }
 
 function draw() {
@@ -41,8 +79,7 @@ function draw() {
   // Draw a smaller rectangle (of a single colour) in the middle 
   // of both squares and experiment with centreColour (above) 
   // until you find a colour that looks different in both but is
-  // actually the same colour. What did you change? Share the value
-  // 
+  // actually the same colour. What did you change? Share the value.
     
   fill(centreColor);
   rect(width/8, height/8, width/4, height/2);