Merge pull request #350 from AnimeshSinha1309/es6/image

Updating Image Examples to ES6 standards

Author: lmccart

src/data/examples/en/05_Image/00_Load_and_Display_Image.js

@@ -7,16 +7,16 @@
  * local server</a>.</span></em></p>
 
  */
-var img;  // Declare variable 'img'.
+let img; // Declare variable 'img'.
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage("assets/moonwalk.jpg");  // Load the image
+  img = loadImage('assets/moonwalk.jpg'); // Load the image
 }
 
 function draw() {
   // Displays the image at its actual size at point (0,0)
   image(img, 0, 0);
   // Displays the image at point (0, height/2) at half size
-  image(img, 0, height/2, img.width/2, img.height/2);
+  image(img, 0, height / 2, img.width / 2, img.height / 2);
 }

src/data/examples/en/05_Image/01_Background_Image.js

@@ -7,14 +7,14 @@
  * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.</span></em></p>
  */
-var bg;
-var y = 0;
+let bg;
+let y = 0;
 
 function setup() {
   // The background image must be the same size as the parameters
   // into the createCanvas() method. In this program, the size of
   // the image is 720x400 pixels.
-  bg = loadImage("assets/moonwalk.jpg");
+  bg = loadImage('assets/moonwalk.jpg');
   createCanvas(720, 400);
 }
 

src/data/examples/en/05_Image/02_Transparency.js

@@ -7,19 +7,19 @@
  * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.</span></em></p>
  */
-var img;
-var offset = 0;
-var easing = 0.05;
+let img;
+let offset = 0;
+let easing = 0.05;
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage("assets/moonwalk.jpg");  // Load an image into the program
+  img = loadImage('assets/moonwalk.jpg'); // Load an image into the program
 }
 
 function draw() {
-  image(img, 0, 0);  // Display at full opacity
-  var dx = (mouseX-img.width/2) - offset;
+  image(img, 0, 0); // Display at full opacity
+  let dx = mouseX - img.width / 2 - offset;
   offset += dx * easing;
-  tint(255, 127);  // Display at half opacity
+  tint(255, 127); // Display at half opacity
   image(img, offset, 0);
 }

src/data/examples/en/05_Image/03_Alpha_Mask.js

@@ -7,12 +7,12 @@
  * image files, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.</span></em></p>
  */
-var img;
-var imgMask;
+let img;
+let imgMask;
 
 function preload() {
-  img = loadImage("assets/moonwalk.jpg");
-  imgMask = loadImage("assets/mask.png");
+  img = loadImage('assets/moonwalk.jpg');
+  imgMask = loadImage('assets/mask.png');
 }
 
 function setup() {
@@ -23,6 +23,6 @@ function setup() {
 
 function draw() {
   background(0, 102, 153);
-  image(img, width/2, height/2);
+  image(img, width / 2, height / 2);
   image(img, mouseX, mouseY);
 }

src/data/examples/en/05_Image/04_Create_Image.js

@@ -3,16 +3,16 @@
  * @description The createImage() function provides a fresh buffer of pixels to
  * play with. This example creates an image gradient.
  */
-var img;  // Declare variable 'img'.
+let img; // Declare variable 'img'.
 
 function setup() {
-  createCanvas(720, 400); 
+  createCanvas(720, 400);
   img = createImage(230, 230);
   img.loadPixels();
-  for(var x = 0; x < img.width; x++) {
-    for(var y = 0; y < img.height; y++) {
-      var a = map(y, 0, img.height, 255, 0);
-      img.set(x, y, [0, 153, 204, a]); 
+  for (let x = 0; x < img.width; x++) {
+    for (let y = 0; y < img.height; y++) {
+      let a = map(y, 0, img.height, 255, 0);
+      img.set(x, y, [0, 153, 204, a]);
     }
   }
   img.updatePixels();
@@ -21,5 +21,5 @@ function setup() {
 function draw() {
   background(0);
   image(img, 90, 80);
-  image(img, mouseX-img.width/2, mouseY-img.height/2);
-}
+  image(img, mouseX - img.width / 2, mouseY - img.height / 2);
+}

src/data/examples/en/05_Image/05_Pointillism.js

@@ -7,11 +7,11 @@
  * image file, and a running <a href="https://github.com/processing/p5.js/wiki/Local-server">
  * local server</a>.</span></em></p>
  */
-var img;
-var smallPoint, largePoint;
+let img;
+let smallPoint, largePoint;
 
 function preload() {
-  img = loadImage("assets/moonwalk.jpg");
+  img = loadImage('assets/moonwalk.jpg');
 }
 
 function setup() {
@@ -25,10 +25,10 @@ function setup() {
 }
 
 function draw() {
-  var pointillize = map(mouseX, 0, width, smallPoint, largePoint);
-  var x = floor(random(img.width));
-  var y = floor(random(img.height));
-  var pix = img.get(x, y);
+  let pointillize = map(mouseX, 0, width, smallPoint, largePoint);
+  let x = floor(random(img.width));
+  let y = floor(random(img.height));
+  let pix = img.get(x, y);
   fill(pix, 128);
   ellipse(x, y, pointillize, pointillize);
-}
+}

src/data/examples/es/05_Image/00_Load_and_Display_Image.js

@@ -5,17 +5,17 @@
  * y un<a href="https://github.com/processing/p5.js/wiki/Local-server">
  * servidor local</a>.</span></em></p> corriendo.
  */
- 
-var img;  // Declarar variable 'img'.
+
+let img; // Declarar variable 'img'.
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage("assets/moonwalk.jpg");  // Cargar la imagen
+  img = loadImage('assets/moonwalk.jpg'); // Cargar la imagen
 }
 
 function draw() {
   // Muestra la imagen en su tamaño original en la posición (0,0)
   image(img, 0, 0);
   // Muestra la imagen en la posición (0, height/2) a la mitad del tamaño
-  image(img, 0, height/2, img.width/2, img.height/2);
+  image(img, 0, height / 2, img.width / 2, img.height / 2);
 }

src/data/examples/es/05_Image/01_Background_Image.js

@@ -8,13 +8,13 @@
  * servidor local</a>.</span></em></p> corriendo.
  */
 
-var bg;
-var y = 0;
+let bg;
+let y = 0;
 
 function setup() {
   // La imagen de fondo debe tener el mismo tamaño que el lienzo, según el método createCanvas().
   // En este programa, el tamaño de la imagen es de 720x400 pixels.
-  bg = loadImage("assets/moonwalk.jpg");
+  bg = loadImage('assets/moonwalk.jpg');
   createCanvas(720, 400);
 }
 

src/data/examples/es/05_Image/02_Transparency.js

@@ -6,19 +6,19 @@
  * y un<a href="https://github.com/processing/p5.js/wiki/Local-server">
  * servidor local</a>.</span></em></p> corriendo.
  */
-var img;
-var offset = 0;
-var easing = 0.05;
+let img;
+let offset = 0;
+let easing = 0.05;
 
 function setup() {
   createCanvas(720, 400);
-  img = loadImage("assets/moonwalk.jpg");  // Cargar una imagen al programa
+  img = loadImage('assets/moonwalk.jpg'); // Cargar una imagen al programa
 }
 
 function draw() {
-  image(img, 0, 0);  // Mostrar al máximo de opacidad
-  var dx = (mouseX-img.width/2) - offset;
+  image(img, 0, 0); // Mostrar al máximo de opacidad
+  let dx = mouseX - img.width / 2 - offset;
   offset += dx * easing;
-  tint(255, 127);  // Mostrar a media opacidad
+  tint(255, 127); // Mostrar a media opacidad
   image(img, offset, 0);
 }

src/data/examples/es/05_Image/03_Alpha_Mask.js

@@ -7,12 +7,12 @@
  * y un<a href="https://github.com/processing/p5.js/wiki/Local-server">
  * servidor local</a>.</span></em></p> corriendo.
  */
-var img;
-var imgMask;
+let img;
+let imgMask;
 
 function preload() {
-  img = loadImage("assets/moonwalk.jpg");
-  imgMask = loadImage("assets/mask.png");
+  img = loadImage('assets/moonwalk.jpg');
+  imgMask = loadImage('assets/mask.png');
 }
 
 function setup() {
@@ -23,6 +23,6 @@ function setup() {
 
 function draw() {
   background(0, 102, 153);
-  image(img, width/2, height/2);
+  image(img, width / 2, height / 2);
   image(img, mouseX, mouseY);
 }