From 649b0865906880cc24d1811063ea73a4ed3eca33 Mon Sep 17 00:00:00 2001
From: Evan Raskob <erask002@gold.ac.uk>
Date: Fri, 18 Dec 2020 15:35:10 +0000
Subject: [PATCH] comments and hsl mode update
---
.../Albers_contrast_squares/sketch.js | 67 ++++++++++++++-----
1 file changed, 52 insertions(+), 15 deletions(-)
diff --git a/colour_and_pattern/exercises/Albers_contrast_squares/sketch.js b/colour_and_pattern/exercises/Albers_contrast_squares/sketch.js
index e2c2b81..42a61ae 100644
--- a/colour_and_pattern/exercises/Albers_contrast_squares/sketch.js
+++ b/colour_and_pattern/exercises/Albers_contrast_squares/sketch.js
@@ -1,31 +1,69 @@
-//
+///
+/// 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);
--
GitLab