Merge pull request #347 from AnimeshSinha1309/es6/structure

Updating Structure Examples to ES6 standards

Author: lmccart

src/data/examples/en/00_Structure/00_Coordinates.js

@@ -1,9 +1,9 @@
 /*
  * @name Coordinates
- * @description All shapes drawn to the screen have a position that is 
+ * @description All shapes drawn to the screen have a position that is
  * specified as a coordinate. All coordinates are measured as the distance from
  * the origin in units of pixels. The origin [0, 0] is the coordinate in the
- * upper left of the window and the coordinate in the lower right is [width-1, 
+ * upper left of the window and the coordinate in the lower right is [width-1,
  * height-1].
  */
 function setup() {
@@ -16,24 +16,24 @@ function draw() {
   background(0);
   noFill();
 
-  // The two parameters of the point() method each specify 
+  // The two parameters of the point() method each specify
   // coordinates.
-  // The first parameter is the x-coordinate and the second is the Y 
+  // The first parameter is the x-coordinate and the second is the Y
   stroke(255);
   point(width * 0.5, height * 0.5);
-  point(width * 0.5, height * 0.25); 
+  point(width * 0.5, height * 0.25);
 
   // Coordinates are used for drawing all shapes, not just points.
-  // Parameters for different functions are used for different 
-  // purposes. For example, the first two parameters to line()  
-  // specify the coordinates of the first endpoint and the second  
+  // Parameters for different functions are used for different
+  // purposes. For example, the first two parameters to line()
+  // specify the coordinates of the first endpoint and the second
   // two parameters specify the second endpoint
   stroke(0, 153, 255);
-  line(0, height*0.33, width, height*0.33);
+  line(0, height * 0.33, width, height * 0.33);
 
-  // By default, the first two parameters to rect() are the 
+  // By default, the first two parameters to rect() are the
   // coordinates of the upper-left corner and the second pair
   // is the width and height
   stroke(255, 153, 0);
-  rect(width*0.25, height*0.1, width * 0.5, height * 0.8);
+  rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
 }

src/data/examples/en/00_Structure/01_Width_and_Height.js

@@ -1,7 +1,7 @@
 /*
  * @name Width and Height
- * @description The 'width' and 'height' variables contain the 
- * width and height of the display window as defined in the createCanvas() 
+ * @description The 'width' and 'height' variables contain the
+ * width and height of the display window as defined in the createCanvas()
  * function.
  */
 function setup() {
@@ -11,10 +11,10 @@ function setup() {
 function draw() {
   background(127);
   noStroke();
-  for (var i = 0; i < height; i += 20) {
+  for (let i = 0; i < height; i += 20) {
     fill(129, 206, 15);
     rect(0, i, width, 10);
     fill(255);
     rect(i, 0, 10, height);
   }
-}
+}

src/data/examples/en/00_Structure/02_Setup_and_Draw.js

@@ -1,27 +1,27 @@
 /*
  * @name Setup and Draw
- * @description The code inside the draw() function runs continuously from top 
+ * @description The code inside the draw() function runs continuously from top
  * to bottom until the program is stopped.
  */
-var y = 100;
+let y = 100;
 
-// The statements in the setup() function 
+// The statements in the setup() function
 // execute once when the program begins
 function setup() {
-	// createCanvas must be the first statement
-  createCanvas(720, 400);  
-  stroke(255);     // Set line drawing color to white
+  // createCanvas must be the first statement
+  createCanvas(720, 400);
+  stroke(255); // Set line drawing color to white
   frameRate(30);
 }
-// The statements in draw() are executed until the 
-// program is stopped. Each statement is executed in 
-// sequence and after the last line is read, the first 
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
 // line is executed again.
-function draw() { 
-  background(0);   // Set the background to black
-  y = y - 1; 
-  if (y < 0) { 
-    y = height; 
-  } 
-  line(0, y, width, y);  
-} 
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/en/00_Structure/03_No_Loop.js

@@ -1,30 +1,30 @@
 /*
  * @name No Loop
- * @description The noLoop() function causes draw() to only execute once. 
+ * @description The noLoop() function causes draw() to only execute once.
  * Without calling noLoop(), the code inside draw() is run continually.
  */
-var y;
+let y;
 
-// The statements in the setup() function 
+// The statements in the setup() function
 // execute once when the program begins
-function setup() 
-{
+function setup() {
   // createCanvas should be the first statement
-  createCanvas(720, 400);  
-  stroke(255);     // Set line drawing color to white
+  createCanvas(720, 400);
+  stroke(255); // Set line drawing color to white
   noLoop();
-  
+
   y = height * 0.5;
 }
 
-// The statements in draw() are executed until the 
-// program is stopped. Each statement is executed in 
-// sequence and after the last line is read, the first 
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
 // line is executed again.
-function draw() 
-{ 
-  background(0);   // Set the background to black
-  y = y - 1; 
-  if (y < 0) { y = height; } 
-  line(0, y, width, y);  
-} 
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/en/00_Structure/04_Loop.js

@@ -1,26 +1,26 @@
 /*
  * @name Loop
- * @description The code inside the draw() function runs continuously from top 
+ * @description The code inside the draw() function runs continuously from top
  * to bottom until the program is stopped.
  */
-var y = 100;
+let y = 100;
 
-// The statements in the setup() function 
+// The statements in the setup() function
 // execute once when the program begins
 function setup() {
-  createCanvas(720, 400);  // Size must be the first statement
-  stroke(255);     // Set line drawing color to white
+  createCanvas(720, 400); // Size must be the first statement
+  stroke(255); // Set line drawing color to white
   frameRate(30);
 }
-// The statements in draw() are executed until the 
-// program is stopped. Each statement is executed in 
-// sequence and after the last line is read, the first 
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
 // line is executed again.
-function draw() { 
-  background(0);   // Set the background to black
-  y = y - 1; 
-  if (y < 0) { 
-    y = height; 
-  } 
-  line(0, y, width, y);  
-} 
+function draw() {
+  background(0); // Set the background to black
+  y = y - 1;
+  if (y < 0) {
+    y = height;
+  }
+  line(0, y, width, y);
+}

src/data/examples/en/00_Structure/05_Redraw.js

@@ -2,11 +2,11 @@
  * @name Redraw
  * @description The redraw() function makes draw() execute once. In this example,
  * draw() is executed once every time the mouse is clicked.
-*/
+ */
 
-var y;
+let y;
 
-// The statements in the setup() function 
+// The statements in the setup() function
 // execute once when the program begins
 function setup() {
   createCanvas(720, 400);
@@ -15,9 +15,9 @@ function setup() {
   y = height * 0.5;
 }
 
-// The statements in draw() are executed until the 
-// program is stopped. Each statement is executed in 
-// sequence and after the last line is read, the first 
+// The statements in draw() are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
 // line is executed again.
 function draw() {
   background(0);
@@ -29,5 +29,5 @@ function draw() {
 }
 
 function mousePressed() {
-  redraw(); 
-}
+  redraw();
+}

src/data/examples/en/00_Structure/06_Functions.js

@@ -1,9 +1,9 @@
 /*
  *@name Functions
- *@description The drawTarget() function makes it easy to draw many distinct 
+ *@description The drawTarget() function makes it easy to draw many distinct
  *targets. Each call to drawTarget() specifies the position, size, and number of
  *rings for each target.
-*/
+ */
 
 function setup() {
   createCanvas(720, 400);
@@ -13,16 +13,16 @@ function setup() {
 }
 
 function draw() {
-  drawTarget(width*0.25, height*0.4, 200, 4);
-  drawTarget(width*0.5, height*0.5, 300, 10);
-  drawTarget(width*0.75, height*0.3, 120, 6);
+  drawTarget(width * 0.25, height * 0.4, 200, 4);
+  drawTarget(width * 0.5, height * 0.5, 300, 10);
+  drawTarget(width * 0.75, height * 0.3, 120, 6);
 }
 
 function drawTarget(xloc, yloc, size, num) {
-  var grayvalues = 255/num;
-  var steps = size/num;
-  for (var i = 0; i < num; i++) {
-    fill(i*grayvalues);
-    ellipse(xloc, yloc, size - i*steps, size - i*steps);
+  const grayvalues = 255 / num;
+  const steps = size / num;
+  for (let i = 0; i < num; i++) {
+    fill(i * grayvalues);
+    ellipse(xloc, yloc, size - i * steps, size - i * steps);
   }
 }

src/data/examples/en/00_Structure/07_Recursion.js

@@ -3,7 +3,7 @@
  *@description A demonstration of recursion, which means functions call themselves.
  * Notice how the drawCircle() function calls itself at the end of its block.
  * It continues to do this until the variable "level" is equal to 1.
-*/
+ */
 
 function setup() {
   createCanvas(720, 400);
@@ -12,16 +12,16 @@ function setup() {
 }
 
 function draw() {
-  drawCircle(width/2, 280, 6);
+  drawCircle(width / 2, 280, 6);
 }
 
-function drawCircle(x, radius, level) {                    
-  var tt = 126 * level/4.0;
+function drawCircle(x, radius, level) {
+  const tt = (126 * level) / 4.0;
   fill(tt);
-  ellipse(x, height/2, radius*2, radius*2);      
-  if(level > 1) {
+  ellipse(x, height / 2, radius * 2, radius * 2);
+  if (level > 1) {
     level = level - 1;
-    drawCircle(x - radius/2, radius/2, level);
-    drawCircle(x + radius/2, radius/2, level);
+    drawCircle(x - radius / 2, radius / 2, level);
+    drawCircle(x + radius / 2, radius / 2, level);
   }
-}
+}

src/data/examples/en/00_Structure/08_Create_Graphics.js

@@ -1,18 +1,18 @@
 /*
  * @name Create Graphics
- * @description Creates and returns a new p5.Renderer object. Use this 
+ * @description Creates and returns a new p5.Renderer object. Use this
  * class if you need to draw into an off-screen graphics buffer. The two parameters
  * define the width and height in pixels.
  */
 
-var pg;
+let pg;
 
-function setup(){
+function setup() {
   createCanvas(710, 400);
   pg = createGraphics(400, 250);
 }
 
-function draw(){
+function draw() {
   fill(0, 12);
   rect(0, 0, width, height);
   fill(255);
@@ -22,8 +22,8 @@ function draw(){
   pg.background(51);
   pg.noFill();
   pg.stroke(255);
-  pg.ellipse(mouseX-150, mouseY-75, 60, 60);
+  pg.ellipse(mouseX - 150, mouseY - 75, 60, 60);
 
   //Draw the offscreen buffer to the screen with image()
   image(pg, 150, 75);
-}
+}

src/data/examples/es/00_Structure/00_Coordinates.js

@@ -5,7 +5,6 @@
  * El origen [0, 0] es la coordenada en la esquina superior izquierda de la ventana y la coordenada de la esquina inferior derecha es [ancho-1, altura-1].
  */
 function setup() {
-
   // Definir lienzo de 720 pixeles de ancho y 400 pixeles de alto
   createCanvas(720, 400);
 }
@@ -28,12 +27,11 @@ function draw() {
   // de line() especifican las coordenadas del primer extremo
   //y los siguientes dos parámetros del segundo extremo.
   stroke(0, 153, 255);
-  line(0, height*0.33, width, height*0.33);
-
+  line(0, height * 0.33, width, height * 0.33);
 
   // Por defecto, los dos primeros parámetros de rect() son
   // las coordenadas de la esquina superior izquierda y el
   // segundo par son el ancho y el alto.
   stroke(255, 153, 0);
-  rect(width*0.25, height*0.1, width * 0.5, height * 0.8);
+  rect(width * 0.25, height * 0.1, width * 0.5, height * 0.8);
 }