Reworked Color Examples

Author: Malayvasa

package-lock.json

@@ -1,26 +1,27 @@
 /*
  * @name Hue
- * @arialabel Vertical bars of color appear in a gradient pattern as the user drags their mouse across the screen
- * @description Hue is the color reflected from or transmitted through an
- * object and is typically referred to as the name of the color (red, blue,
- * yellow, etc.) Move the cursor vertically over each bar to alter its hue.
+ * @arialabel Horizontal bars that step through different hues, controlled using a loop
+ * @description Hue is that attribute of a color by the virtue of
+ * which it is perceptible as red, green, blue etc. It is independent
+ * of saturation(intensity) and brightness.
  */
-const barWidth = 20;
-let lastBar = -1;
-
 function setup() {
-  createCanvas(720, 400);
-  colorMode(HSB, height, height, height);
-  noStroke();
-  background(0);
+  createCanvas(400, 400) ;
+  colorMode(HSB);
 }
 
 function draw() {
-  let whichBar = mouseX / barWidth;
-  if (whichBar !== lastBar) {
-    let barX = whichBar * barWidth;
-    fill(mouseY, height, height);
-    rect(barX, 0, barWidth, height);
-    lastBar = whichBar;
+  background (220)
+  noStroke();
+
+  for (let i = 0;i<12;i++){
+    
+    //with each iteration of the loop 
+    //the hue steps down by 25
+    
+    //fill(hue,saturation,brightness)
+    fill (360-i*25,100,100) ;
+
+    rect (0,i*height/12,width,height/12) ;
   }
 }

src/data/examples/en/07_Color/00_Hue.js

@@ -1,26 +1,27 @@
 /*
  * @name Saturation
- * @arialabel Vertical bars of color appear in a gradient rainbow pattern as the user drags their mouse across the screen. The saturation of these bars change as the user’s mouse drags through
+ * @arialabel Horizontal bars that step through saturation(high to low) of a color, controlled using a loop
  * @description Saturation is the strength or purity of the color and
  * represents the amount of gray in proportion to the hue. A "saturated"
  * color is pure and an "unsaturated" color has a large percentage of gray.
- * Move the cursor vertically over each bar to alter its saturation.
  */
-const barWidth = 20;
-let lastBar = -1;
-
 function setup() {
-  createCanvas(720, 400);
-  colorMode(HSB, width, height, 100);
-  noStroke();
+  createCanvas(400, 400) ;
+  colorMode(HSB);
 }
 
 function draw() {
-  let whichBar = mouseX / barWidth;
-  if (whichBar !== lastBar) {
-    let barX = whichBar * barWidth;
-    fill(barX, mouseY, 66);
-    rect(barX, 0, barWidth, height);
-    lastBar = whichBar;
+  background (220)
+  noStroke();
+
+  for (let i = 0;i<6;i++){
+    
+    //with each iteration of the loop 
+    //the saturation steps down by 20
+    
+    //fill(hue,saturation,brightness)
+    fill (28,100 - i*20,95) ;
+
+    rect (0,i*height/6,width,height/6) ;
   }
 }

src/data/examples/en/07_Color/01_Saturation.js

@@ -1,47 +1,26 @@
 /*
  * @name Brightness
- * @arialabel A black and white photograph of an astronaut on the moon covered by black. The mouse acts as a light and a circular area of the photograph is illuminated where the mouse hovers
- * @description By Dan Shiffman. This program adjusts the brightness of a part
- * of the image by calculating the distance of each pixel to the mouse.
- * <p><em><span class="small"> To run this example locally, you will need
- * at least an image file and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
+ * @arialabel Horizontal bars that step through brightness(high to low) of a color, controlled using a loop
+ * @description Lightness is the amount of black or white that’s been mixed with a hue.
+ * Adding white makes the color lighter and adding black makes it darker.
  */
-let img;
-
-function preload() {
-  img = loadImage('assets/moonwalk.jpg');
-}
-
 function setup() {
-  createCanvas(720, 200);
-  pixelDensity(1);
-  img.loadPixels();
-  loadPixels();
+  createCanvas(400, 400) ;
+  colorMode(HSB);
 }
 
 function draw() {
-  for (let x = 0; x < img.width; x++) {
-    for (let y = 0; y < img.height; y++) {
-      // Calculate the 1D location from a 2D grid
-      let loc = (x + y * img.width) * 4;
-      // Get the R,G,B values from image
-      let r, g, b;
-      r = img.pixels[loc];
-      // Calculate an amount to change brightness based on proximity to the mouse
-      let maxdist = 50;
-      let d = dist(x, y, mouseX, mouseY);
-      let adjustbrightness = (255 * (maxdist - d)) / maxdist;
-      r += adjustbrightness;
-      // Constrain RGB to make sure they are within 0-255 color range
-      r = constrain(r, 0, 255);
-      // Make a new color and set pixel in the window
-      //color c = color(r, g, b);
-      let pixloc = (y * width + x) * 4;
-      pixels[pixloc] = r;
-      pixels[pixloc + 1] = r;
-      pixels[pixloc + 2] = r;
-      pixels[pixloc + 3] = 255;
-    }
+  background (220)
+  noStroke();
+
+  for (let i = 0;i<6;i++){
+    
+    //with each iteration of the loop 
+    //the brightness steps down by 20
+    
+    //fill(hue,saturation,brightness)
+    fill (28,100,100-i*20) ;
+
+    rect (0,i*height/6,width,height/6) ;
   }
-  updatePixels();
 }

src/data/examples/en/07_Color/02_Brightness.js

@@ -0,0 +1,37 @@
+/*
+ * @name Color Wheel
+ * @arialabel 36 Circles in a circular arrangement cycling through different hues of the color wheel
+ * @description A color wheel is an organization of color hues around a circle,
+ *  which shows the relationships between primary colors, secondary colors, tertiary colors etc.
+ */
+function setup() {
+    createCanvas(400, 400) ;
+    colorMode(HSB);
+    
+    //setting angle mode to degrees 
+    //to aid in positioning of circles
+    angleMode(DEGREES);
+  }
+  
+  function draw() {
+    background (220)
+    noStroke();
+  
+    //loop steps through 36 times drawing 
+    //a circle with a separate hue each time
+    
+    for (let i = 0;i<36;i++){
+      
+    //determines position of circles
+      x = 200 + 100*cos(i*10);
+      y = 200 + 100*sin(i*10);
+    
+    //i * 10 allows to cover the entire hue range
+    //the first circle has a hue of 0*10 = 0
+    // last circle has has a hue of 35*10 = 350
+    // hue of 0 and 360 are identical
+      
+      fill(i*10,100,100);
+      circle(x,y,50);
+    }
+  }