Converted to ES6 syntax

Updated code for data module.

Author: AnimeshSinha1309

src/data/examples/en/01_Form/00_Points_and_Lines.js

@@ -1,16 +1,15 @@
 /*
  * @name Points and Lines
- * @description Points and lines can be used to draw basic geometry. 
- * Change the value of the variable 'd' to scale the form. The four 
+ * @description Points and lines can be used to draw basic geometry.
+ * Change the value of the variable 'd' to scale the form. The four
  * variables set the positions based on the value of 'd'.
  */
 function setup() {
-  
-  var d = 70;
-  var p1 = d;
-  var p2 = p1+d;
-  var p3 = p2+d;
-  var p4 = p3+d;
+  let d = 70;
+  let p1 = d;
+  let p2 = p1 + d;
+  let p3 = p2 + d;
+  let p4 = p3 + d;
 
   // Sets the screen to be 720 pixels wide and 400 pixels high
   createCanvas(720, 400);
@@ -29,9 +28,9 @@ function setup() {
   // Draw white points
   stroke(255);
   point(p1, p1);
-  point(p1, p3); 
+  point(p1, p3);
   point(p2, p4);
-  point(p3, p1); 
+  point(p3, p1);
   point(p4, p2);
   point(p4, p4);
-}
+}

src/data/examples/en/01_Form/01_Shape_Primitives.js

@@ -1,12 +1,11 @@
 /*
  * @name Shape Primitives
- * @description The basic shape primitive functions are triangle(), 
- * rect(), quad(), ellipse(), and arc(). Squares are made with rect() 
- * and circles are made with ellipse(). Each of these functions requires 
+ * @description The basic shape primitive functions are triangle(),
+ * rect(), quad(), ellipse(), and arc(). Squares are made with rect()
+ * and circles are made with ellipse(). Each of these functions requires
  * a number of parameters to determine the shape's position and size.
  */
 function setup() {
-
   // Sets the screen to be 720 pixels wide and 400 pixels high
   createCanvas(720, 400);
   background(0);
@@ -25,8 +24,8 @@ function setup() {
   ellipse(252, 144, 72, 72);
 
   fill(204);
-  triangle(288, 18, 351, 360, 288, 360); 
+  triangle(288, 18, 351, 360, 288, 360);
 
   fill(255);
   arc(479, 300, 280, 280, PI, TWO_PI);
-}
+}

src/data/examples/en/01_Form/02_Pie_Chart.js

@@ -1,14 +1,14 @@
 /*
  * @name Pie Chart
- * @description Uses the arc() function to generate a pie chart from the data 
+ * @description Uses the arc() function to generate a pie chart from the data
  * stored in an array.
  */
-var angles = [ 30, 10, 45, 35, 60, 38, 75, 67 ];
+let angles = [30, 10, 45, 35, 60, 38, 75, 67];
 
 function setup() {
   createCanvas(720, 400);
   noStroke();
-  noLoop();  // Run once and stop
+  noLoop(); // Run once and stop
 }
 
 function draw() {
@@ -17,11 +17,18 @@ function draw() {
 }
 
 function pieChart(diameter, data) {
-  var lastAngle = 0;
-  for (var i = 0; i < data.length; i++) {
-    var gray = map(i, 0, data.length, 0, 255);
+  let lastAngle = 0;
+  for (let i = 0; i < data.length; i++) {
+    let gray = map(i, 0, data.length, 0, 255);
     fill(gray);
-    arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(angles[i]));
+    arc(
+      width / 2,
+      height / 2,
+      diameter,
+      diameter,
+      lastAngle,
+      lastAngle + radians(angles[i])
+    );
     lastAngle += radians(angles[i]);
   }
-}
+}

src/data/examples/en/01_Form/03_Regular_Polygon.js

@@ -1,8 +1,8 @@
 /*
  * @name Regular Polygon
- * @description What is your favorite? Pentagon? Hexagon? Heptagon? No? 
- * What about the icosagon? The polygon() function created for this example is 
- * capable of drawing any regular polygon. Try placing different numbers into 
+ * @description What is your favorite? Pentagon? Hexagon? Heptagon? No?
+ * What about the icosagon? The polygon() function created for this example is
+ * capable of drawing any regular polygon. Try placing different numbers into
  * the polygon() function calls within draw() to explore.
  */
 function setup() {
@@ -11,33 +11,33 @@ function setup() {
 
 function draw() {
   background(102);
-  
+
   push();
-  translate(width*0.2, height*0.5);
+  translate(width * 0.2, height * 0.5);
   rotate(frameCount / 200.0);
-  polygon(0, 0, 82, 3); 
+  polygon(0, 0, 82, 3);
   pop();
-  
+
   push();
-  translate(width*0.5, height*0.5);
+  translate(width * 0.5, height * 0.5);
   rotate(frameCount / 50.0);
-  polygon(0, 0, 80, 20); 
+  polygon(0, 0, 80, 20);
   pop();
-  
+
   push();
-  translate(width*0.8, height*0.5);
+  translate(width * 0.8, height * 0.5);
   rotate(frameCount / -100.0);
-  polygon(0, 0, 70, 7); 
+  polygon(0, 0, 70, 7);
   pop();
 }
 
 function polygon(x, y, radius, npoints) {
-  var angle = TWO_PI / npoints;
+  let angle = TWO_PI / npoints;
   beginShape();
-  for (var a = 0; a < TWO_PI; a += angle) {
-    var sx = x + cos(a) * radius;
-    var sy = y + sin(a) * radius;
+  for (let a = 0; a < TWO_PI; a += angle) {
+    let sx = x + cos(a) * radius;
+    let sy = y + sin(a) * radius;
     vertex(sx, sy);
   }
   endShape(CLOSE);
-}
+}

src/data/examples/en/01_Form/04_Star.js

@@ -1,7 +1,7 @@
 /*
  * @name Star
- * @description The star() function created for this example is capable of 
- * drawing a wide range of different forms. Try placing different numbers 
+ * @description The star() function created for this example is capable of
+ * drawing a wide range of different forms. Try placing different numbers
  * into the star() function calls within draw() to explore.
  */
 function setup() {
@@ -10,37 +10,37 @@ function setup() {
 
 function draw() {
   background(102);
-  
+
   push();
-  translate(width*0.2, height*0.5);
+  translate(width * 0.2, height * 0.5);
   rotate(frameCount / 200.0);
-  star(0, 0, 5, 70, 3); 
+  star(0, 0, 5, 70, 3);
   pop();
-  
+
   push();
-  translate(width*0.5, height*0.5);
+  translate(width * 0.5, height * 0.5);
   rotate(frameCount / 50.0);
-  star(0, 0, 80, 100, 40); 
+  star(0, 0, 80, 100, 40);
   pop();
-  
+
   push();
-  translate(width*0.8, height*0.5);
+  translate(width * 0.8, height * 0.5);
   rotate(frameCount / -100.0);
-  star(0, 0, 30, 70, 5); 
+  star(0, 0, 30, 70, 5);
   pop();
 }
 
 function star(x, y, radius1, radius2, npoints) {
-  var angle = TWO_PI / npoints;
-  var halfAngle = angle/2.0;
+  let angle = TWO_PI / npoints;
+  let halfAngle = angle / 2.0;
   beginShape();
-  for (var a = 0; a < TWO_PI; a += angle) {
-    var sx = x + cos(a) * radius2;
-    var sy = y + sin(a) * radius2;
+  for (let a = 0; a < TWO_PI; a += angle) {
+    let sx = x + cos(a) * radius2;
+    let sy = y + sin(a) * radius2;
     vertex(sx, sy);
-    sx = x + cos(a+halfAngle) * radius1;
-    sy = y + sin(a+halfAngle) * radius1;
+    sx = x + cos(a + halfAngle) * radius1;
+    sy = y + sin(a + halfAngle) * radius1;
     vertex(sx, sy);
   }
   endShape(CLOSE);
-}
+}

src/data/examples/en/01_Form/05_Triangle_Strip.js

@@ -1,37 +1,37 @@
 /*
  * @name Triangle Strip
- * @description Example by Ira Greenberg. Generate a closed ring using the 
- * vertex() function and beginShape(TRIANGLE_STRIP) mode. The outsideRadius 
+ * @description Example by Ira Greenberg. Generate a closed ring using the
+ * vertex() function and beginShape(TRIANGLE_STRIP) mode. The outsideRadius
  * and insideRadius variables control ring's radii respectively.
  */
-var x;
-var y;
-var outsideRadius = 150;
-var insideRadius = 100;
+let x;
+let y;
+let outsideRadius = 150;
+let insideRadius = 100;
 
 function setup() {
   createCanvas(720, 400);
   background(204);
-  x = width/2;
-  y = height/2;
+  x = width / 2;
+  y = height / 2;
 }
 
 function draw() {
   background(204);
-  
-  var numPoints = int(map(mouseX, 0, width, 6, 60));
-  var angle = 0;
-  var angleStep = 180.0/numPoints;
-    
-  beginShape(TRIANGLE_STRIP); 
-  for (var i = 0; i <= numPoints; i++) {
-    var px = x + cos(radians(angle)) * outsideRadius;
-    var py = y + sin(radians(angle)) * outsideRadius;
+
+  let numPoints = int(map(mouseX, 0, width, 6, 60));
+  let angle = 0;
+  let angleStep = 180.0 / numPoints;
+
+  beginShape(TRIANGLE_STRIP);
+  for (let i = 0; i <= numPoints; i++) {
+    let px = x + cos(radians(angle)) * outsideRadius;
+    let py = y + sin(radians(angle)) * outsideRadius;
     angle += angleStep;
     vertex(px, py);
     px = x + cos(radians(angle)) * insideRadius;
     py = y + sin(radians(angle)) * insideRadius;
-    vertex(px, py); 
+    vertex(px, py);
     angle += angleStep;
   }
   endShape();

src/data/examples/en/01_Form/06_Bezier.js

@@ -1,8 +1,8 @@
 /*
  * @name Bezier
- * @description The first two parameters for the bezier() function specify the 
- * first point in the curve and the last two parameters specify the last point. 
- * The middle parameters set the control points that define the shape of the 
+ * @description The first two parameters for the bezier() function specify the
+ * first point in the curve and the last two parameters specify the last point.
+ * The middle parameters set the control points that define the shape of the
  * curve.
  */
 function setup() {
@@ -13,7 +13,16 @@ function setup() {
 
 function draw() {
   background(0);
-  for (var i = 0; i < 200; i += 20) {
-    bezier(mouseX-(i/2.0), 40+i, 410, 20, 440, 300, 240-(i/16.0), 300+(i/8.0));
+  for (let i = 0; i < 200; i += 20) {
+    bezier(
+      mouseX - i / 2.0,
+      40 + i,
+      410,
+      20,
+      440,
+      300,
+      240 - i / 16.0,
+      300 + i / 8.0
+    );
   }
 }

src/data/examples/en/01_Form/07_3D_Primitives.js

@@ -6,25 +6,25 @@
  * size. These shapes are positioned using the translate() function.
  */
 function setup() {
-	createCanvas(710, 400, WEBGL);
+  createCanvas(710, 400, WEBGL);
 }
 
 function draw() {
-	background(100);
-	
-	noStroke();
-	fill(50);
-	push();
-	translate(-275, 175);
-	rotateY(1.25);
-	rotateX(-0.9);
-	box(100);
-	pop();
+  background(100);
 
-	noFill();
-	stroke(255);
-	push();
-	translate(500, height*0.35, -200);
-	sphere(300);
-	pop();
+  noStroke();
+  fill(50);
+  push();
+  translate(-275, 175);
+  rotateY(1.25);
+  rotateX(-0.9);
+  box(100);
+  pop();
+
+  noFill();
+  stroke(255);
+  push();
+  translate(500, height * 0.35, -200);
+  sphere(300);
+  pop();
 }

src/data/examples/es/01_Form/00_Points_and_Lines.js

@@ -5,12 +5,11 @@
  * variables definen las posiciones basadas en el valor de 'd'.
  */
 function setup() {
-
-  var d = 70;
-  var p1 = d;
-  var p2 = p1+d;
-  var p3 = p2+d;
-  var p4 = p3+d;
+  let d = 70;
+  let p1 = d;
+  let p2 = p1 + d;
+  let p3 = p2 + d;
+  let p4 = p3 + d;
 
   // Define el lienzo de 720 pixeles de ancho y 400 de alto
   createCanvas(720, 400);

src/data/examples/es/01_Form/01_Shape_Primitives.js

@@ -6,7 +6,6 @@
  * un número de parámetros para determinar la posición y tamaño de la figura.
  */
 function setup() {
-
   // Define un lienzo de 720 pixeles de ancho y 400 de alto
   createCanvas(720, 400);
   background(0);