Merge pull request #355 from AnimeshSinha1309/es6/input

Updating Input Examples to ES6 standards

Author: lmccart

src/data/examples/en/21_Input/00_Clock.js

@@ -1,45 +1,45 @@
 /*
  * @name Clock
- * @description The current time can be read with the second(), 
- * minute(), and hour() functions. In this example, sin() and 
+ * @description The current time can be read with the second(),
+ * minute(), and hour() functions. In this example, sin() and
  * cos() values are used to set the position of the hands.
  */
-var cx, cy;
-var secondsRadius;
-var minutesRadius;
-var hoursRadius;
-var clockDiameter;
+let cx, cy;
+let secondsRadius;
+let minutesRadius;
+let hoursRadius;
+let clockDiameter;
 
 function setup() {
   createCanvas(720, 400);
   stroke(255);
-  
-  var radius = min(width, height) / 2;
+
+  let radius = min(width, height) / 2;
   secondsRadius = radius * 0.71;
-  minutesRadius = radius * 0.60;
-  hoursRadius = radius * 0.50;
+  minutesRadius = radius * 0.6;
+  hoursRadius = radius * 0.5;
   clockDiameter = radius * 1.7;
-  
+
   cx = width / 2;
   cy = height / 2;
 }
 
 function draw() {
   background(230);
-  
+
   // Draw the clock background
   noStroke();
-  fill(244,122,158);
+  fill(244, 122, 158);
   ellipse(cx, cy, clockDiameter + 25, clockDiameter + 25);
-  fill(237,34,93);
+  fill(237, 34, 93);
   ellipse(cx, cy, clockDiameter, clockDiameter);
-  
+
   // Angles for sin() and cos() start at 3 o'clock;
   // subtract HALF_PI to make them start at the top
-  var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
-  var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
-  var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
-  
+  let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
+  let m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
+  let h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
+
   // Draw the hands of the clock
   stroke(255);
   strokeWeight(1);
@@ -48,15 +48,15 @@ function draw() {
   line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
   strokeWeight(4);
   line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
-  
+
   // Draw the minute ticks
   strokeWeight(2);
   beginShape(POINTS);
-  for (var a = 0; a < 360; a+=6) {
-    var angle = radians(a);
-    var x = cx + cos(angle) * secondsRadius;
-    var y = cy + sin(angle) * secondsRadius;
+  for (let a = 0; a < 360; a += 6) {
+    let angle = radians(a);
+    let x = cx + cos(angle) * secondsRadius;
+    let y = cy + sin(angle) * secondsRadius;
     vertex(x, y);
   }
   endShape();
-}
+}

src/data/examples/en/21_Input/01_Constrain.js

@@ -1,36 +1,36 @@
 /*
  * @name Constrain
- * @description Move the mouse across the screen to move 
+ * @description Move the mouse across the screen to move
  * the circle. The program constrains the circle to its box.
  */
-var mx = 1;
-var my = 1;
-var easing = 0.05;
-var radius = 24;
-var edge = 100;
-var inner = edge + radius;
+let mx = 1;
+let my = 1;
+let easing = 0.05;
+let radius = 24;
+let edge = 100;
+let inner = edge + radius;
 
 function setup() {
   createCanvas(720, 400);
-  noStroke(); 
+  noStroke();
   ellipseMode(RADIUS);
   rectMode(CORNERS);
 }
 
 function draw() {
   background(230);
-  
+
   if (abs(mouseX - mx) > 0.1) {
     mx = mx + (mouseX - mx) * easing;
   }
   if (abs(mouseY - my) > 0.1) {
-    my = my + (mouseY- my) * easing;
+    my = my + (mouseY - my) * easing;
   }
-  
+
   mx = constrain(mx, inner, width - inner);
   my = constrain(my, inner, height - inner);
-  fill(237,34,93);
-  rect(edge, edge, width-edge, height-edge);
+  fill(237, 34, 93);
+  rect(edge, edge, width - edge, height - edge);
   fill(255);
   ellipse(mx, my, radius, radius);
-}
+}

src/data/examples/en/21_Input/02_Easing.js

@@ -1,32 +1,30 @@
 /*
  * @name Easing
  * @description Move the mouse across the screen and the symbol
- * will follow. Between drawing each frame of the animation, the 
+ * will follow. Between drawing each frame of the animation, the
  * program calculates the difference between the position of the
  * symbol and the cursor. If the distance is larger than 1 pixel,
  * the symbol moves part of the distance (0.05) from its current
  * position toward the cursor.
  */
-var x = 1;
-var y = 1;
-var easing = 0.05;
+let x = 1;
+let y = 1;
+let easing = 0.05;
 
 function setup() {
   createCanvas(720, 400);
   noStroke();
 }
 
-function draw()
-{
-    background(237,34,93);
-    var targetX = mouseX;
-    var dx = targetX - x;
-    x += dx * easing;
+function draw() {
+  background(237, 34, 93);
+  let targetX = mouseX;
+  let dx = targetX - x;
+  x += dx * easing;
 
-    var targetY = mouseY;
-    var dy = targetY - y;
-    y += dy * easing;
+  let targetY = mouseY;
+  let dy = targetY - y;
+  y += dy * easing;
 
-    ellipse(x,y,66,66);
-
-}
+  ellipse(x, y, 66, 66);
+}

src/data/examples/en/21_Input/03_Keyboard.js

@@ -1,38 +1,38 @@
 /*
  * @name Keyboard
- * @description Click on the image to give it focus and 
- * press the letter keys to create forms in time and space. 
- * Each key has a unique identifying number. These numbers 
+ * @description Click on the image to give it focus and
+ * press the letter keys to create forms in time and space.
+ * Each key has a unique identifying number. These numbers
  * can be used to position shapes in space.
  */
-var rectWidth;
-   
+let rectWidth;
+
 function setup() {
   createCanvas(720, 400);
   noStroke();
   background(230);
-  rectWidth = width/4;
+  rectWidth = width / 4;
 }
 
-function draw() { 
+function draw() {
   // keep draw() here to continue looping while waiting for keys
 }
 
 function keyPressed() {
-  var keyIndex = -1;
+  let keyIndex = -1;
   if (key >= 'a' && key <= 'z') {
     keyIndex = key.charCodeAt(0) - 'a'.charCodeAt(0);
   }
-  if (keyIndex == -1) {
+  if (keyIndex === -1) {
     // If it's not a letter key, clear the screen
     background(230);
-  } else { 
+  } else {
     // It's a letter key, fill a rectangle
     randFill_r = Math.floor(Math.random() * 255 + 1);
     randFill_g = Math.floor(Math.random() * 255 + 1);
     randFill_b = Math.floor(Math.random() * 255 + 1);
-    fill(randFill_r,randFill_g,randFill_b);
-    var x = map(keyIndex, 0, 25, 0, width - rectWidth);
+    fill(randFill_r, randFill_g, randFill_b);
+    let x = map(keyIndex, 0, 25, 0, width - rectWidth);
     rect(x, 0, rectWidth, height);
   }
-}
+}

src/data/examples/en/21_Input/04_Mouse1D.js

@@ -13,12 +13,12 @@ function setup() {
 function draw() {
   background(230);
 
-  var r1 = map(mouseX, 0, width, 0, height);
-  var r2 = height - r1;
-  
-  fill(237,34,93,r1);
-  rect(width/2 + r1/2, height/2, r1, r1);
-  
-  fill(237,34,93,r2);
-  rect(width/2 - r2/2, height/2, r2, r2);
-}
+  let r1 = map(mouseX, 0, width, 0, height);
+  let r2 = height - r1;
+
+  fill(237, 34, 93, r1);
+  rect(width / 2 + r1 / 2, height / 2, r1, r1);
+
+  fill(237, 34, 93, r2);
+  rect(width / 2 - r2 / 2, height / 2, r2, r2);
+}

src/data/examples/en/21_Input/05_Mouse2D.js

@@ -1,20 +1,20 @@
 /*
  * @name Mouse 2D
- * @description Moving the mouse changes the position and 
+ * @description Moving the mouse changes the position and
  * size of each box.
  */
 function setup() {
-  createCanvas(720, 400); 
+  createCanvas(720, 400);
   noStroke();
   rectMode(CENTER);
 }
 
 function draw() {
-  background(230); 
-  fill(244,122,158);
-  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
-  fill(237,34,93);
-  var inverseX = width-mouseX;
-  var inverseY = height-mouseY;
-  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
-}
+  background(230);
+  fill(244, 122, 158);
+  rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
+  fill(237, 34, 93);
+  let inverseX = width - mouseX;
+  let inverseY = height - mouseY;
+  rect(inverseX, height / 2, inverseY / 2 + 10, inverseY / 2 + 10);
+}

src/data/examples/en/21_Input/06_MouseIsPressed.js

@@ -10,12 +10,11 @@ function setup() {
 }
 
 function draw() {
-  if (mouseIsPressed){
+  if (mouseIsPressed) {
     stroke(255);
+  } else {
+    stroke(237, 34, 93);
   }
-  else {
-    stroke(237,34,93);
-  }
-  line(mouseX-66, mouseY, mouseX+66, mouseY);
-  line(mouseX, mouseY-66, mouseX, mouseY+66);
-}
+  line(mouseX - 66, mouseY, mouseX + 66, mouseY);
+  line(mouseX, mouseY - 66, mouseX, mouseY + 66);
+}