moving description from pde file to the js file

Author: yogitheboss

content/examples/Basics/Color/ColorVariables/ColorVariables.pde

@@ -5,9 +5,6 @@
  * in the program by a name, rather than a number. 
  */
 
-
-describe('There are two sets of squares. The first set contains three squares of varying sizes stacked together. 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 set 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.') 
-
 size(640, 360);
 noStroke();
 background(51, 0, 0);

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

@@ -21,6 +21,10 @@ function runLiveSketch(s) {
     //color middle = #CC9900;
     //color outside = #993300;
 
+    s.describe(
+      'There are two sets of squares. The first set contains three squares of varying sizes stacked together. 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 set 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.'
+    );
+
     s.push();
     s.translate(80, 80);
     s.fill(outside);

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

@@ -10,9 +10,6 @@
 
 
 void setup() {
-  
-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.')
-
   size(640, 360, P3D);
   noStroke();
   fill(204);

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

@@ -1,20 +1,22 @@
 function runLiveSketch(s) {
-  
   s.setup = () => {
     s.createCanvas(640, 360, s.WEBGL);
     s.noStroke();
     s.fill(204);
   };
 
   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);
+    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.'
+    );
   };
 }