NOC_I_05_NoiseWalk : Screenshot added,title added,code updated,comments added

VRamazing · VRamazing · commit fe23d717711e · 2017-10-06T15:53:27.000+05:30
diff --git a/chp00_introduction/NOC_I_05_NoiseWalk/index.html b/chp00_introduction/NOC_I_05_NoiseWalk/index.html
@@ -1,8 +1,9 @@
 <head>
-  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.js"></script>
   <script language="javascript" type="text/javascript" src="noise.js"></script>
-  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script> 
+  <title>Noise Walk</title>
 </head>
 
 <body>
-</body>
+</body>
diff --git a/chp00_introduction/NOC_I_05_NoiseWalk/screenshot.png b/chp00_introduction/NOC_I_05_NoiseWalk/screenshot.png
diff --git a/chp00_introduction/NOC_I_05_NoiseWalk/sketch.js b/chp00_introduction/NOC_I_05_NoiseWalk/sketch.js
@@ -5,30 +5,35 @@
 var walker;
 
 function setup() {
-  createCanvas(640,360);
-  walker = new Walker();
-  background(127);
+  createCanvas(640,360); //creating canvas of size 640 x 360
+  walker = new Walker(); //creating an instance/object of class Walker
+  background(127); // creating a grey background for canvas
 }
 
 function draw() {
-  walker.walk();
+  walker.step();
   walker.display();
 }
 
 function Walker() {
-  this.position = createVector(width/2,height/2);
-  this.noff = createVector(random(1000),random(1000));
+  this.tx = 0; //perlin noise x-offset
+  this.ty = 10000; //perlin noise y-offset
+  this.x = width/2; //x position for drawing ellipse initialized to center of canvas 
+  this.y = height/2; //x position for drawing ellipse initialized to center of canvas 
+
 
   this.display = function() {
-    strokeWeight(2);
-    fill(51);
-    stroke(0);
-    ellipse(this.position.x, this.position.y, 48, 48);
+    strokeWeight(2); //stroke thickness of 2
+    fill(51); //adding a fill of dark grey
+    stroke(0); //black stroke
+    ellipse(this.x, this.y, 48, 48); //ellipse of width 48x48 drawn a pos this.x,this.y
   };
 
-  this.walk = function() {
-    this.position.x = map(noise(this.noff.x),0,1,0,width);
-    this.position.y = map(noise(this.noff.y),0,1,0,height);
-    this.noff.add(0.01,0.01,0);
+  this.step = function() {
+    this.x = map(noise(this.tx),0,1,0,width); //noise returns a value between 0 & 1 -> Mapping it to (0,canvas width)
+    this.y = map(noise(this.ty),0,1,0,height); //Mapping perlin noise to (0,canvas.height)
+    this.tx += 0.01; //incrementing perlin noise x offset
+    this.ty += 0.01; //incrementing perlin noise y offset
   };
 }
+
