Merge pull request #447 from yogitheboss/main

Adds `describe()` function to directional light, saturation, and color variable examples. It makes these examples more accessible to people using a screen reader.

Author: SableRaf

content/examples/Basics/Color/ColorVariables/liveSketch.js

@@ -42,5 +42,9 @@ function runLiveSketch(s) {
     s.pop();
 
     s.noLoop();
+
+    s.describe(
+      'There are two groups of squares. The first group contains three squares of varying sizes one above the other. The color of the smallest square is orange, the color of the middle square is gold, and the color of the biggest square is brown. On the right of the first group is the second set, which is similar to the first. The only difference here is the color of the squares; the smallest square is gold, the middle square is brown, and the biggest square is orange.'
+    );
   };
 }

content/examples/Basics/Color/Saturation/liveSketch.js

@@ -15,6 +15,9 @@ function runLiveSketch(s) {
     s.createCanvas(640, 360);
     s.colorMode(s.HSB, s.width, s.height, 100);
     s.noStroke();
+    s.describe(
+      'There is a canvas with a series of vertical bars. As the mouse moves over each bar, the saturation of the color changes. The bar is determined by the x-coordinate of the mouse and the saturation of the bar is determined by the y-coordinate of the mouse. As the move mouse up in the bar, the saturation increases. As the mouse moves down in the bar, the saturation decreases.'
+    );
   };
 
   s.draw = () => {

content/examples/Basics/Lights/Directional/Directional.pde

@@ -8,6 +8,7 @@
  * scatters in all directions. 
  */
 
+
 void setup() {
   size(640, 360, P3D);
   noStroke();

content/examples/Basics/Lights/Directional/liveSketch.js

@@ -1,20 +1,23 @@
 function runLiveSketch(s) {
-  
   s.setup = () => {
     s.createCanvas(640, 360, s.WEBGL);
     s.noStroke();
     s.fill(204);
+    s.describe(
+      'there are two dark spheres side by side, the cursor works like a light source, when mouse moves the direction of light changes and reveals some part of spheres.'
+    );
   };
 
   s.draw = () => {
-    s.noStroke(); 
-    s.background(0); 
+    s.noStroke();
+    s.background(0);
     let dirY = (s.mouseY / s.height - 0.5) * 2;
     let dirX = (s.mouseX / s.width - 0.5) * 2;
-    s.directionalLight(204, 204, 204, -dirX, -dirY, -1); 
-    s.translate(- 100, 0, 0); 
-    s.sphere(80); 
-    s.translate(200, 0, 0); 
-    s.sphere(80); 
+    s.directionalLight(204, 204, 204, -dirX, -dirY, -1);
+    s.translate(-100, 0, 0);
+    s.sphere(80);
+    s.translate(200, 0, 0);
+    s.sphere(80);
+   
   };
 }