Merge pull request #399 from abhieshekumar/master

Modifying 'learn' for ES6

Author: lmccart

src/assets/learn/curves/bezier/sketch.js

@@ -1,15 +1,15 @@
-var x1 = 100;
-var y1 = 150;
-var x2 = 200;
-var y2 = 150;
-var x3 = 50;
-var y3 = 50;
-var x4 = 250;
-var y4 = 50;
-var d1 = false;
-var d2 = false;
-var d4 = false;
-var d3 = false;
+let x1 = 100;
+let y1 = 150;
+let x2 = 200;
+let y2 = 150;
+let x3 = 50;
+let y3 = 50;
+let x4 = 250;
+let y4 = 50;
+let d1 = false;
+let d2 = false;
+let d4 = false;
+let d3 = false;
 
 function setup() {
   createCanvas(400, 400);

src/assets/learn/curves/curve_ex/sketch.js

@@ -1,16 +1,16 @@
-var x1 = 80;
-var y1 = 80;
-var x2 = 160;
-var y2 = 120;
-var x3 = 200;
-var y3 = 200;
-var x4 = 120;
-var y4 = 240;
-var d1 = false;
-var d2 = false;
-var d4 = false;
-var d3 = false;
-var d5 = false;
+let x1 = 80;
+let y1 = 80;
+let x2 = 160;
+let y2 = 120;
+let x3 = 200;
+let y3 = 200;
+let x4 = 120;
+let y4 = 240;
+let d1 = false;
+let d2 = false;
+let d4 = false;
+let d3 = false;
+let d5 = false;
 
 function setup() {
   createCanvas(300, 300);

src/assets/learn/program-flow/loadImage-example-1/loadImage-example-1.js

@@ -1,4 +1,4 @@
-var img;
+let img;
 function setup(){
   createCanvas(100, 100);
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");

src/assets/learn/program-flow/loadImage-example-2/loadImage-example-2.js

@@ -1,4 +1,4 @@
-var img;
+let img;
 function preload(){
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");
 }

src/templates/pages/learn/curves.hbs

@@ -93,7 +93,7 @@ slug: learn/
 
 
       <script type="text/p5"  data-autoplay>
-      var coords = [40, 40, 80, 60, 100, 100, 60, 120, 50, 150];
+      let coords = [40, 40, 80, 60, 100, 100, 60, 120, 50, 150];
 
       function setup() {
         createCanvas(150, 200);
@@ -113,7 +113,7 @@ slug: learn/
         curveVertex(50,150);
         endShape();
 
-         for (var i = 0; i < coords.length; i+= 2){
+         for (let i = 0; i < coords.length; i+= 2){
           ellipse(coords[i], coords[i+1], 10, 10);
          }
       }

src/templates/pages/learn/program-flow.hbs

@@ -44,7 +44,7 @@ slug: learn/
       <!-- this script only needs to get added once even if there are multiple widget instances -->
       <script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>
       <script type="text/p5" data-autoplay>
-var i = 0; // change the value of i to see the change 
+let i = 0; // change the value of i to see the change 
 function setup(){
   createCanvas(100, 100);
   rectMode(CENTER);
@@ -92,7 +92,7 @@ function draw(){
 
       <script type="text/p5" data-autoplay>
 function setup(){
-  for (var i=0; i<5; i++){
+  for (let i=0; i<5; i++){
     text(i, i*10, height/2);
   }
 }
@@ -101,10 +101,10 @@ function setup(){
 
       <p>The <em>for/in</em> statement loops through the properties of an object:</p>
       <script type="text/p5" data-autoplay>
-var person = {fname:"John", lname:"Doe", age:25}; 
-var myText = "";
+let person = {fname:"John", lname:"Doe", age:25}; 
+let myText = "";
 function setup(){
-  var x;
+  let x;
   for (x in person) {
       myText += person[x];
       myText += " ";
@@ -116,7 +116,7 @@ function setup(){
 
       <p>The while loop cycles through a block of code as long as its specified condition is true.</p>
       <script type="text/p5" data-autoplay>
-var i = 0;
+let i = 0;
 function setup(){
   while (i<5){
     text(i, i*10, height/2);
@@ -129,7 +129,7 @@ function setup(){
       <p>The <em>do/while</em> loop is a variant of the <em>while</em> loop. This loop will execute the code block once, before checking if the condition is true, it will then repeat the loop as long as the condition is true.</p>
       <!-- Is there an example particular to do/while? -->
       <script type="text/p5" data-autoplay>
-var i = 0;
+let i = 0;
 function setup(){
   do {
     text(i, i*10, height/2);
@@ -144,7 +144,7 @@ function setup(){
       <h2>noLoop(), loop() and redraw()</h2>
       <p>The <a href="/reference/#/p5/draw">draw()</a> function in p5 runs as a loop. The code inside the draw() function runs continuously from top to bottom until the program is stopped. The draw() loop may be stopped by calling <a href="/reference/#/p5/noLoop">noLoop()</a>, and can then be resumed with <a href="/reference/#/p5/loop">loop()</a>. If using <a href="/reference/#/p5/noLoop">noLoop()</a> in <a href="/reference/#/p5/setup">setup()</a>, it should be the last line inside the block.</p>
       <script type="text/p5" data-autoplay>
-var x = 0;
+let x = 0;
 function setup() {
   createCanvas(100, 100);
   noLoop();
@@ -165,7 +165,7 @@ function mouseReleased() {
 
         <p>The function <a href="/reference/#/p5/redraw">redraw()</a> executes the code within <a href="/reference/#/p5/draw">draw()</a> one time. This functions allows the program to update the display window only when necessary, such as when an event registered by <a href="/reference/#/p5/mousePressed">mousePressed()</a> or <a href="/reference/#/p5/keyPressed">keyPressed()</a> occurs. In structuring a program, it only makes sense to call <a href="/reference/#/p5/redraw">redraw()</a> within events such as <a href="/reference/#/p5/mousePressed">mousePressed()</a> outside of the draw() loop. The redraw() function does not work properly when called inside draw(). In addition, you can set the number of loops through draw by adding a single argument (an integer) to the redraw() function.</p>
         <script type="text/p5" data-autoplay>
-var x = 0;
+let x = 0;
 function setup() {
    createCanvas(100, 100);
    noLoop();
@@ -185,7 +185,7 @@ function mousePressed() {
       <h2>Asynchronicity in p5.js</h2>      
       <p>In JavaScript, events may occur concurrently with the main program flow. This is considered as asynchronicity in programming. In p5, for example, when we use <a href="/reference/#/p5/loadImage">loadImage()</a> in <a href="/reference/#/p5/setup">setup()</a>, the browser begins the process of loading the image but skip onto the next line before it is finised loading. The following example demonstrates such asynchronicity.</p>
         <pre><code class="language-javascript">   
-var img;
+let img;
 function setup(){
   createCanvas(100, 100);
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");
@@ -200,7 +200,7 @@ function draw(){
     <iframe src="/assets/learn/program-flow/loadImage-example-1/loadImage-example-1.html" width="150px" height="150px"></iframe>
       <!-- what's the file location??????????????????? -->
 <!--       <script type="text/p5" data-autoplay>
-var img;
+let img;
 function setup(){
   createCanvas(100, 100);
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");
@@ -217,7 +217,7 @@ function draw(){
       <h2>Introduction to Preload</h2>
       <p>To help with this issue of asynchronicity, p5.js has the <a href="/reference/#/p5/preload">preload()</a> function. Unlike <a href="/reference/#/p5/setup">setup()</a>, preload() forces the program to wait until everything has loaded before moving on. It is best to only make load calls in preload(), and do all other setup in setup().</p>
       <pre><code class="language-javascript">   
-var img;
+let img;
 function preload(){
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");
 }
@@ -235,7 +235,7 @@ function draw(){
       <iframe src="/assets/learn/program-flow/loadImage-example-2/loadImage-example-2.html" width="150px" height="150px"></iframe>
 
 <!--       <script type="text/p5" data-autoplay>
-var img;
+let img;
 function preload(){
   img = loadImage("/assets/learn/program-flow/images/clouds.jpg");
 }
@@ -297,14 +297,14 @@ function drawImage(img){
       <!-- example where loadJSON() in preload() -->
       <p>The following request at https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson returns data of recent earthquakes in the world from USGS.</p>
       <script type="text/p5" data-autoplay data-preview-width="200">
-var earthquakes;
+let earthquakes;
 function preload(){
   earthquakes = loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson');
 }
 function setup(){
   createCanvas(200, 100);
-  var earthquakeMag = earthquakes.features[0].properties.mag;
-  var earthquakePlace = earthquakes.features[0].properties.place;
+  let earthquakeMag = earthquakes.features[0].properties.mag;
+  let earthquakePlace = earthquakes.features[0].properties.place;
   text(earthquakePlace, 0, height/2);
   text(earthquakeMag, 0, height-height/3);
 }
@@ -340,8 +340,8 @@ function setup() {
   loadJSON('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson', showEarthquake);
 }
 function showEarthquake(earthquakes){
-  var earthquakeMag = earthquakes.features[0].properties.mag;
-  var earthquakePlace = earthquakes.features[0].properties.place;
+  let earthquakeMag = earthquakes.features[0].properties.mag;
+  let earthquakePlace = earthquakes.features[0].properties.place;
   text(earthquakePlace, 0, height/2);
   text(earthquakeMag, 0, height-height/3);
 }
@@ -351,7 +351,7 @@ function showEarthquake(earthquakes){
       <p>Sometimes we use <a href="/reference/#/p5/setInterval">setInterval()</a> to control the frequency of requests made to the API. setInterval() can also take a callback function. If you call setInterval() in <a href="/reference/#/p5/setup">setup()</a>, it will run repeatedly for the duration of the program at the interval set.</p>
       <!-- example setInterval() is used -->
       <script type="text/p5" data-autoplay data-preview-width="200">
-var i=1; // counter variable to keep track of the interval
+let i=1; // counter variable to keep track of the interval
 function setup() {
   createCanvas(200, 100);
   getEarthquake();
@@ -362,8 +362,8 @@ function getEarthquake(){
 }
 function showEarthquake(earthquakes){
   background(255);
-  var earthquakeMag = earthquakes.features[0].properties.mag;
-  var earthquakePlace = earthquakes.features[0].properties.place;
+  let earthquakeMag = earthquakes.features[0].properties.mag;
+  let earthquakePlace = earthquakes.features[0].properties.place;
   text("Data grabbed "+i, 0, height/3);
   text(earthquakePlace, 0, height/2);
   text(earthquakeMag, 0, height-height/3);
@@ -420,9 +420,9 @@ function showEarthquake(earthquakes){
 
       <p>In this example, a canvas element is created and an event listener <a href="/reference/#/p5/mousePressed">mousePressed()</a> is attached. Function changeGrey() will only run when the mouse is pressed over the canvas, and will will change the background color to a random grey. If the mouse is pressed anywhere, even outside of the canvas, the diameter of the ellipse will increase by 10 pixels. The custom function changeGray(), in this instance, is placed within the <a href="/reference/#/p5/mousePressed">mousePressed()</a> function and is to be triggered when mouse is pressed over the canvas element. If the mouse is not pressed, false is passed and changeGrey() will not run.</p>
       <script type="text/p5" data-autoplay>
-var cnv;
-var d;
-var g;
+let cnv;
+let d;
+let g;
 function setup() {
   cnv = createCanvas(100, 100);
   cnv.mousePressed(changeGray); // attach listener for canvas click only