Merge pull request #362 from AnimeshSinha1309/es6/interaction

Updating Interaction Examples to ES6 standards

Author: lmccart

src/data/examples/en/10_Interaction/10_Tickle.js

@@ -3,11 +3,12 @@
  * @description The word "tickle" jitters when the cursor hovers over.
  * Sometimes, it can be tickled off the screen.
  */
-var message = "tickle",
+let message = 'tickle',
   font,
   bounds, // holds x, y, w, h of the text's bounding box
   fontsize = 60,
-  x, y; // x and y coordinates of the text
+  x,
+  y; // x and y coordinates of the text
 
 function preload() {
   font = loadFont('assets/SourceSansPro-Regular.otf');
@@ -32,11 +33,15 @@ function draw() {
   // write the text in black and get its bounding box
   fill(0);
   text(message, x, y);
-  bounds = font.textBounds(message,x,y,fontsize);
+  bounds = font.textBounds(message, x, y, fontsize);
 
   // check if the mouse is inside the bounding box and tickle if so
-  if ( mouseX >= bounds.x && mouseX <= bounds.x + bounds.w &&
-    mouseY >= bounds.y && mouseY <= bounds.y + bounds.h) {
+  if (
+    mouseX >= bounds.x &&
+    mouseX <= bounds.x + bounds.w &&
+    mouseY >= bounds.y &&
+    mouseY <= bounds.y + bounds.h
+  ) {
     x += random(-5, 5);
     y += random(-5, 5);
   }

src/data/examples/en/10_Interaction/20_Follow1.js

@@ -4,12 +4,11 @@
  * @description A line segment is pushed and pulled by the cursor.
  * Based on code from Keith Peters.
  */
-var x = 100,
+let x = 100,
   y = 100,
   angle1 = 0.0,
   segLength = 50;
 
-
 function setup() {
   createCanvas(710, 400);
   strokeWeight(20.0);
@@ -22,8 +21,8 @@ function draw() {
   dx = mouseX - x;
   dy = mouseY - y;
   angle1 = atan2(dy, dx);
-  x = mouseX - (cos(angle1) * segLength);
-  y = mouseY - (sin(angle1) * segLength);
+  x = mouseX - cos(angle1) * segLength;
+  y = mouseY - sin(angle1) * segLength;
 
   segment(x, y, angle1);
   ellipse(x, y, 20, 20);

src/data/examples/en/10_Interaction/21_Follow2.js

@@ -5,8 +5,8 @@
  * angle between the segments is calculated with atan2() and the position
  * calculated with sin() and cos(). Based on code from Keith Peters.
  */
-var x = [0,0],
-  y = [0,0],
+let x = [0, 0],
+  y = [0, 0],
   segLength = 50;
 
 function setup() {
@@ -22,9 +22,9 @@ function draw() {
 }
 
 function dragSegment(i, xin, yin) {
-  var dx = xin - x[i];
-  var dy = yin - y[i];
-  var angle = atan2(dy, dx);
+  const dx = xin - x[i];
+  const dy = yin - y[i];
+  const angle = atan2(dy, dx);
   x[i] = xin - cos(angle) * segLength;
   y[i] = yin - sin(angle) * segLength;
   segment(x[i], y[i], angle);

src/data/examples/en/10_Interaction/22_Follow3.js

@@ -5,12 +5,12 @@
  * each segment to the next is calculated with atan2() and the position of
  * the next is calculated with sin() and cos(). Based on code from Keith Peters.
  */
-var x = [],
+let x = [],
   y = [],
   segNum = 20,
   segLength = 18;
 
-for (var i = 0; i < segNum; i++) {
+for (let i = 0; i < segNum; i++) {
   x[i] = 0;
   y[i] = 0;
 }
@@ -24,15 +24,15 @@ function setup() {
 function draw() {
   background(0);
   dragSegment(0, mouseX, mouseY);
-  for( var i=0; i<x.length-1; i++) {
-    dragSegment(i+1, x[i], y[i]);
+  for (let i = 0; i < x.length - 1; i++) {
+    dragSegment(i + 1, x[i], y[i]);
   }
 }
 
 function dragSegment(i, xin, yin) {
-  var dx = xin - x[i];
-  var dy = yin - y[i];
-  var angle = atan2(dy, dx);
+  const dx = xin - x[i];
+  const dy = yin - y[i];
+  const angle = atan2(dy, dx);
   x[i] = xin - cos(angle) * segLength;
   y[i] = yin - sin(angle) * segLength;
   segment(x[i], y[i], angle);

src/data/examples/en/10_Interaction/23_snake.js

@@ -4,44 +4,44 @@
  * inside the black area, and control the snake using i j k and l. Don't let
  * the snake hit itself or the wall!<br>
  * Example created by <a href='https://github.com/prashantgupta24' target='_blank'>Prashant Gupta
-*/
+ */
 
 // the snake is divided into small segments, which are drawn and edited on each 'draw' call
-var numSegments = 10;
-var direction = 'right';
+let numSegments = 10;
+let direction = 'right';
 
-var xStart = 0; //starting x coordinate for snake
-var yStart = 250; //starting y coordinate for snake
-var diff = 10;
+const xStart = 0; //starting x coordinate for snake
+const yStart = 250; //starting y coordinate for snake
+const diff = 10;
 
-var xCor = [];
-var yCor = [];
+let xCor = [];
+let yCor = [];
 
-var xFruit = 0;
-var yFruit = 0;
-var scoreElem;
+let xFruit = 0;
+let yFruit = 0;
+let scoreElem;
 
 function setup() {
   scoreElem = createDiv('Score = 0');
   scoreElem.position(20, 20);
   scoreElem.id = 'score';
   scoreElem.style('color', 'white');
-  
+
   createCanvas(500, 500);
   frameRate(15);
   stroke(255);
   strokeWeight(10);
   updateFruitCoordinates();
 
-  for (var i = 0; i < numSegments; i++) {
-    xCor.push(xStart + (i * diff));
+  for (let i = 0; i < numSegments; i++) {
+    xCor.push(xStart + i * diff);
     yCor.push(yStart);
   }
 }
 
 function draw() {
   background(0);
-  for (var i = 0; i < numSegments - 1; i++) {
+  for (let i = 0; i < numSegments - 1; i++) {
     line(xCor[i], yCor[i], xCor[i + 1], yCor[i + 1]);
   }
   updateSnakeCoordinates();
@@ -61,8 +61,7 @@ function draw() {
  or down, the segment's y coordinate is affected.
 */
 function updateSnakeCoordinates() {
-
-  for (var i = 0; i < numSegments - 1; i++) {
+  for (let i = 0; i < numSegments - 1; i++) {
     xCor[i] = xCor[i + 1];
     yCor[i] = yCor[i + 1];
   }
@@ -92,13 +91,15 @@ function updateSnakeCoordinates() {
  or if the snake hits itself.
 */
 function checkGameStatus() {
-  if (xCor[xCor.length - 1] > width ||
-      xCor[xCor.length - 1] < 0 ||
-      yCor[yCor.length - 1] > height ||
-      yCor[yCor.length - 1] < 0 ||
-      checkSnakeCollision()) {
+  if (
+    xCor[xCor.length - 1] > width ||
+    xCor[xCor.length - 1] < 0 ||
+    yCor[yCor.length - 1] > height ||
+    yCor[yCor.length - 1] < 0 ||
+    checkSnakeCollision()
+  ) {
     noLoop();
-    var scoreVal = parseInt(scoreElem.html().substring(8));
+    const scoreVal = parseInt(scoreElem.html().substring(8));
     scoreElem.html('Game ended! Your score was : ' + scoreVal);
   }
 }
@@ -108,9 +109,9 @@ function checkGameStatus() {
  has to be the same as one of its own segment's (x,y) coordinate.
 */
 function checkSnakeCollision() {
-  var snakeHeadX = xCor[xCor.length - 1];
-  var snakeHeadY = yCor[yCor.length - 1];
-  for (var i = 0; i < xCor.length - 1; i++) {
+  const snakeHeadX = xCor[xCor.length - 1];
+  const snakeHeadY = yCor[yCor.length - 1];
+  for (let i = 0; i < xCor.length - 1; i++) {
     if (xCor[i] === snakeHeadX && yCor[i] === snakeHeadY) {
       return true;
     }
@@ -125,7 +126,7 @@ function checkSnakeCollision() {
 function checkForFruit() {
   point(xFruit, yFruit);
   if (xCor[xCor.length - 1] === xFruit && yCor[yCor.length - 1] === yFruit) {
-    var prevScore = parseInt(scoreElem.html().substring(8));
+    const prevScore = parseInt(scoreElem.html().substring(8));
     scoreElem.html('Score = ' + (prevScore + 1));
     xCor.unshift(xCor[0]);
     yCor.unshift(yCor[0]);
@@ -148,22 +149,22 @@ function updateFruitCoordinates() {
 function keyPressed() {
   switch (keyCode) {
     case 74:
-      if (direction != 'right') {
+      if (direction !== 'right') {
         direction = 'left';
       }
       break;
     case 76:
-      if (direction != 'left') {
+      if (direction !== 'left') {
         direction = 'right';
       }
       break;
     case 73:
-      if (direction != 'down') {
+      if (direction !== 'down') {
         direction = 'up';
       }
       break;
     case 75:
-      if (direction != 'up') {
+      if (direction !== 'up') {
         direction = 'down';
       }
       break;

src/data/examples/en/10_Interaction/24_Wavemaker.js

@@ -20,14 +20,14 @@ function draw() {
   for (let x = 0; x <= width; x = x + 30) {
     for (let y = 0; y <= height; y = y + 30) {
       // starting point of each circle depends on mouse position
-      let xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);
-      let yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);
+      const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);
+      const yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, true);
       // and also varies based on the particle's location
-      let angle = xAngle * (x / width) + yAngle * (y / height);
+      const angle = xAngle * (x / width) + yAngle * (y / height);
 
       // each particle moves in a circle
-      let myX = x + 20 * cos(2 * PI * t + angle);
-      let myY = y + 20 * sin(2 * PI * t + angle);
+      const myX = x + 20 * cos(2 * PI * t + angle);
+      const myY = y + 20 * sin(2 * PI * t + angle);
 
       ellipse(myX, myY, 10); // draw particle
     }

src/data/examples/en/10_Interaction/25_reach1.js

@@ -4,25 +4,28 @@
  * @description The arm follows the position of the mouse by calculating the
  * angles with atan2(). Based on code from Keith Peters.
  */
-var segLength = 80,
-  x, y, x2, y2;
+let segLength = 80,
+  x,
+  y,
+  x2,
+  y2;
 
 function setup() {
   createCanvas(710, 400);
   strokeWeight(20);
   stroke(255, 100);
 
-  x = width/2;
-  y = height/2;
+  x = width / 2;
+  y = height / 2;
   x2 = x;
   y2 = y;
 }
 
 function draw() {
   background(0);
   dragSegment(0, mouseX, mouseY);
-  for( var i=0; i<x.length-1; i++) {
-    dragSegment(i+1, x[i], y[i]);
+  for (let i = 0; i < x.length - 1; i++) {
+    dragSegment(i + 1, x[i], y[i]);
   }
 }
 

src/data/examples/en/10_Interaction/26_reach2.js

@@ -4,14 +4,15 @@
  * @description The arm follows the position of the mouse by calculating the
  * angles with atan2(). Based on code from Keith Peters.
  */
-var numSegments = 10,
+let numSegments = 10,
   x = [],
   y = [],
   angle = [],
   segLength = 26,
-  targetX, targetY;
+  targetX,
+  targetY;
 
-for (var i = 0; i < numSegments; i++) {
+for (let i = 0; i < numSegments; i++) {
   x[i] = 0;
   y[i] = 0;
   angle[i] = 0;
@@ -22,22 +23,22 @@ function setup() {
   strokeWeight(20);
   stroke(255, 100);
 
-  x[x.length-1] = width/2; // Set base x-coordinate
-  y[x.length-1] = height;  // Set base y-coordinate
+  x[x.length - 1] = width / 2; // Set base x-coordinate
+  y[x.length - 1] = height; // Set base y-coordinate
 }
 
 function draw() {
   background(0);
 
   reachSegment(0, mouseX, mouseY);
-  for(var i=1; i<numSegments; i++) {
+  for (let i = 1; i < numSegments; i++) {
     reachSegment(i, targetX, targetY);
   }
-  for(var j=x.length-1; j>=1; j--) {
-    positionSegment(j, j-1);
+  for (let j = x.length - 1; j >= 1; j--) {
+    positionSegment(j, j - 1);
   }
-  for(var k=0; k<x.length; k++) {
-    segment(x[k], y[k], angle[k], (k+1)*2);
+  for (let k = 0; k < x.length; k++) {
+    segment(x[k], y[k], angle[k], (k + 1) * 2);
   }
 }
 
@@ -47,8 +48,8 @@ function positionSegment(a, b) {
 }
 
 function reachSegment(i, xin, yin) {
-  var dx = xin - x[i];
-  var dy = yin - y[i];
+  const dx = xin - x[i];
+  const dy = yin - y[i];
   angle[i] = atan2(dy, dx);
   targetX = xin - cos(angle[i]) * segLength;
   targetY = yin - sin(angle[i]) * segLength;