Merge pull request #358 from AnimeshSinha1309/es6/dom

Updating DOM Examples to ES6 standards

Author: lmccart

src/data/examples/en/16_Dom/03_Input_Button.js

@@ -1,14 +1,13 @@
 /*
  * @name Input and Button
- * @description You will need to include the 
+ * @description You will need to include the
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * for this example to work in your own project.<br><br>
  * Input text and click the button to see it affect the the canvas.
  */
-var input, button, greeting;
+let input, button, greeting;
 
 function setup() {
-
   // create canvas
   createCanvas(710, 400);
 
@@ -27,15 +26,15 @@ function setup() {
 }
 
 function greet() {
-  var name = input.value();
-  greeting.html('hello '+name+'!');
+  const name = input.value();
+  greeting.html('hello ' + name + '!');
   input.value('');
 
-  for (var i=0; i<200; i++) {
+  for (let i = 0; i < 200; i++) {
     push();
     fill(random(255), 255, 255);
     translate(random(width), random(height));
-    rotate(random(2*PI));
+    rotate(random(2 * PI));
     text(name, 0, 0);
     pop();
   }

src/data/examples/en/16_Dom/04_Slider.js

@@ -1,11 +1,11 @@
 /*
  * @name Slider
- * @description You will need to include the 
+ * @description You will need to include the
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * for this example to work in your own project.<br><br>
  * Move the sliders to control the R, G, B values of the background.
  */
-var rSlider, gSlider, bSlider;
+let rSlider, gSlider, bSlider;
 
 function setup() {
   // create canvas
@@ -23,11 +23,11 @@ function setup() {
 }
 
 function draw() {
-  var r = rSlider.value();
-  var g = gSlider.value();
-  var b = bSlider.value();
+  const r = rSlider.value();
+  const g = gSlider.value();
+  const b = bSlider.value();
   background(r, g, b);
-  text("red", rSlider.x * 2 + rSlider.width, 35);
-  text("green", gSlider.x * 2 + gSlider.width, 65);
-  text("blue", bSlider.x * 2 + bSlider.width, 95);
+  text('red', rSlider.x * 2 + rSlider.width, 35);
+  text('green', gSlider.x * 2 + gSlider.width, 65);
+  text('blue', bSlider.x * 2 + bSlider.width, 95);
 }

src/data/examples/en/16_Dom/07_Modify_DOM.js

@@ -2,49 +2,52 @@
  * @name Modifying the DOM
  * @frame 710,300
  * @description <p>Create DOM elements and modify their properties every time
- * draw() is called. You will need to include the 
+ * draw() is called. You will need to include the
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * for this example to work in your own project.</p>
  */
-var dancingWords = [];
+let dancingWords = [];
 
-function DanceSpan(element, x, y) {
-  element.position(x, y);
-  
-  this.brownian = function() {
+class DanceSpan {
+  constructor(element, x, y) {
+    element.position(x, y);
+  }
+
+  brownian() {
     x += random(-6, 6);
     y += random(-6, 6);
     element.position(x, y);
-  };
+  }
 }
 
 function setup() {
   // This paragraph is created aside of the main block of code.
-  // It's to differentiate the creation of an element from its 
-  // selection. Selected elements don't need to be created by 
+  // It's to differentiate the creation of an element from its
+  // selection. Selected elements don't need to be created by
   // p5js, they can be just plain HTML.
-  createP('I learn in this Letter, that Don Peter of Aragon, '
-    + ' comes this night to Messina').addClass('text');
+  createP(
+    'I learn in this Letter, that Don Peter of Aragon, ' +
+      ' comes this night to Messina'
+  ).addClass('text');
 
-  // This line grabs the paragraph just created, but it would 
+  // This line grabs the paragraph just created, but it would
   // also grab any other elements with class 'text' in the HTML
   // page.
-  var texts = selectAll('.text');
+  const texts = selectAll('.text');
 
-  for (var i=0; i<texts.length; i++) {
-    var paragraph = texts[i].html();
-    var words = paragraph.split(' ');
-    for (var j=0; j<words.length; j++) {   
-      var spannedWord = createSpan(words[j]);
-      var dw = new DanceSpan(spannedWord, random(600), random(200));
+  for (let i = 0; i < texts.length; i++) {
+    const paragraph = texts[i].html();
+    const words = paragraph.split(' ');
+    for (let j = 0; j < words.length; j++) {
+      const spannedWord = createSpan(words[j]);
+      const dw = new DanceSpan(spannedWord, random(600), random(200));
       dancingWords.push(dw);
     }
   }
 }
 
 function draw() {
-  for (var i=0; i<dancingWords.length; i++) {
+  for (let i = 0; i < dancingWords.length; i++) {
     dancingWords[i].brownian();
   }
 }
-

src/data/examples/en/16_Dom/08_Video.js

@@ -2,20 +2,18 @@
  * @name Video
  * @frame 710,250
  * @description <p>Load a video with multiple formats and toggle between playing
- * and paused with a button press. 
+ * and paused with a button press.
  * <p><em><span class="small"> To run this example locally, you will need at least
  * one video file, and the
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>.</span></em></p>
  */
-var playing = false;
-var fingers;
-var button;
-
+let playing = false;
+let fingers;
+let button;
 
 function setup() {
   // specify multiple formats for different browsers
-  fingers = createVideo(['assets/fingers.mov',
-                         'assets/fingers.webm']);
+  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
   button = createButton('play');
   button.mousePressed(toggleVid); // attach button listener
 }

src/data/examples/en/16_Dom/09_Video_Canvas.js

@@ -5,25 +5,24 @@
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * at least one video file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
  */
-var fingers;
+let fingers;
 
 function setup() {
   createCanvas(710, 400);
   // specify multiple formats for different browsers
-  fingers = createVideo(['assets/fingers.mov',
-                         'assets/fingers.webm']);
+  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
   fingers.hide(); // by default video shows up in separate dom
-                  // element. hide it and draw it to the canvas
-                  // instead
+  // element. hide it and draw it to the canvas
+  // instead
 }
 
 function draw() {
   background(150);
-  image(fingers,10,10); // draw the video frame to canvas
+  image(fingers, 10, 10); // draw the video frame to canvas
   filter('GRAY');
-  image(fingers,150,150); // draw a second copy to canvas
+  image(fingers, 150, 150); // draw a second copy to canvas
 }
 
 function mousePressed() {
-    fingers.loop(); // set the video to loop and start playing
-}
+  fingers.loop(); // set the video to loop and start playing
+}

src/data/examples/en/16_Dom/10_Video_Pixels.js

@@ -6,13 +6,12 @@
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * at least one video file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">local server</a>.</span></em></p>
  */
-var fingers;
+let fingers;
 
 function setup() {
   createCanvas(320, 240);
   // specify multiple formats for different browsers
-  fingers = createVideo(['assets/fingers.mov',
-                         'assets/fingers.webm']);
+  fingers = createVideo(['assets/fingers.mov', 'assets/fingers.webm']);
   fingers.loop();
   fingers.hide();
   noStroke();
@@ -22,12 +21,12 @@ function setup() {
 function draw() {
   background(255);
   fingers.loadPixels();
-  var stepSize = round(constrain(mouseX / 8, 6, 32));
-  for (var y=0; y<height; y+=stepSize) {
-    for (var x=0; x<width; x+=stepSize) {
-      var i = y * width + x;
-      var darkness = (255 - fingers.pixels[i*4]) / 255;
-      var radius = stepSize * darkness;
+  const stepSize = round(constrain(mouseX / 8, 6, 32));
+  for (let y = 0; y < height; y += stepSize) {
+    for (let x = 0; x < width; x += stepSize) {
+      const i = y * width + x;
+      const darkness = (255 - fingers.pixels[i * 4]) / 255;
+      const radius = stepSize * darkness;
       ellipse(x, y, radius, radius);
     }
   }

src/data/examples/en/16_Dom/11_Capture.js

@@ -9,7 +9,7 @@
  * default the capture feed shows up, too. You can hide the
  * feed by uncommenting the capture.hide() line.
  */
-var capture;
+let capture;
 
 function setup() {
   createCanvas(390, 240);

src/data/examples/en/16_Dom/12_Drop.js

@@ -1,14 +1,14 @@
 /*
  * @name Drop
- * @description You will need to include the 
+ * @description You will need to include the
  * <a href="http://p5js.org/reference/#/libraries/p5.dom">p5.dom library</a>
  * for this example to work in your own project.<br><br>
  * Drag an image file onto the canvas to see it displayed.
  */
 
 function setup() {
   // create canvas
-  var c = createCanvas(710, 400);
+  const c = createCanvas(710, 400);
   background(100);
   // Add an event for when a file is dropped onto the canvas
   c.drop(gotFile);
@@ -19,15 +19,15 @@ function draw() {
   noStroke();
   textSize(24);
   textAlign(CENTER);
-  text('Drag an image file onto the canvas.', width/2, height/2);
+  text('Drag an image file onto the canvas.', width / 2, height / 2);
   noLoop();
 }
 
 function gotFile(file) {
   // If it's an image file
   if (file.type === 'image') {
     // Create an image DOM element but don't show it
-    var img = createImg(file.data).hide();
+    const img = createImg(file.data).hide();
     // Draw the image onto the canvas
     image(img, 0, 0, width, height);
   } else {

src/data/examples/es/16_Dom/03_Input_Button.js

@@ -5,10 +5,9 @@
  * para que este ejemplo funcione en tu proyecto.<br><br>
  * Ingresa texto y haz click en el botón para ver cómo afecta al lienzo
  */
-var input, button, greeting;
+let input, button, greeting;
 
 function setup() {
-
   // crear un lienzo
   createCanvas(710, 400);
 
@@ -22,20 +21,20 @@ function setup() {
   greeting = createElement('h2', 'what is your name?');
   greeting.position(20, 5);
 
-  textAlign(CENTER)
+  textAlign(CENTER);
   textSize(50);
 }
 
 function greet() {
-  var name = input.value();
-  greeting.html('hello '+name+'!');
+  const name = input.value();
+  greeting.html('hello ' + name + '!');
   input.value('');
 
-  for (var i=0; i<200; i++) {
+  for (let i = 0; i < 200; i++) {
     push();
     fill(random(255), 255, 255);
     translate(random(width), random(height));
-    rotate(random(2*PI));
+    rotate(random(2 * PI));
     text(name, 0, 0);
     pop();
   }

src/data/examples/es/16_Dom/04_Slider.js

@@ -5,12 +5,12 @@
  * para que este ejemplo funcione en tu propio proyecto.<br><br>
  * Mueve las barras deslizantes para controlar los valores de color RGB del fondo.
  */
-var rSlider, gSlider, bSlider;
+let rSlider, gSlider, bSlider;
 
 function setup() {
   // crear lienzo
   createCanvas(710, 400);
-  textSize(15)
+  textSize(15);
   noStroke();
 
   // crear barras deslizantes
@@ -23,11 +23,11 @@ function setup() {
 }
 
 function draw() {
-  var r = rSlider.value();
-  var g = gSlider.value();
-  var b = bSlider.value();
+  const r = rSlider.value();
+  const g = gSlider.value();
+  const b = bSlider.value();
   background(r, g, b);
-  text("red", 165, 35);
-  text("green", 165, 65);
-  text("blue", 165, 95);
+  text('red', 165, 35);
+  text('green', 165, 65);
+  text('blue', 165, 95);
 }