lint code

index.html

@@ -30,7 +30,7 @@
 </script>
 
 <div class="wave-container">
-  <canvas height= "600" width= "600" id="canvas"></canvas>
+  <canvas height= "800" width= "800" id="canvas"></canvas>
   <div id ="panel">
     <div class="btn">
       <input type="button" value="start machine" id="startbtn">
@@ -70,14 +70,7 @@
     </form>
   </div>
 </div>
-  
-  
-
     <script  src="js/index.js"></script>
-
-
-
-
 </body>
 
 </html>

js/index.js

@@ -1,7 +1,7 @@
 const micro_height = 100;
 const micro_width = 100;
-const canvas = document.getElementById('canvas');
+const canvas = document.getElementById("canvas");
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 const SPEED = 50;
 const AMPLITUDE = 50;
 const SIZE = 1;
@@ -18,7 +18,31 @@ var midl=Math.pow(l,2)/2-l/2;
 var r = 1;
 var redstyle = 0;
 var bluestyle = 0;
-var tempx,tempy,tempvx,tempvy,i,b,j,k,f,v,vunx,vuny,vdeuxx,vdeuxy,diffun,diffdeux,average,self,start, mousedown,press,radioval,firstmic=0;
+const FRAME_RATE = 60;
+const FRAME_INTERVAL = 1000 / FRAME_RATE;
+var tempx,
+  tempy,
+  tempvx,
+  tempvy,
+  i,
+  b,
+  j,
+  k,
+  f,
+  v,
+  vunx,
+  vuny,
+  vdeuxx,
+  vdeuxy,
+  diffun,
+  diffdeux,
+  average,
+  self,
+  start,
+  mousedown,
+  press,
+  radioval,
+  firstmic = 0;
 var tab = [];
 var tabuffer = [];
 var previoustab = [];
@@ -32,19 +56,17 @@ damping=document.querySelector("#damp");
 
 //////////////INITIALISATION////////
 function initialisation() {
-  
   console.log("initialisation");
   for (i = 0; i < Math.floor(canvas.height / NP); i++) {
     for (j = 0; j < Math.floor(canvas.width / NP); j++) {
-      
       addNewPart(i, j);
     }
   }
 }
 function addNewPart(x, y) {
-  tab.push({ x:(x*NP),y:(y*NP),z:SIZE,active:1,v:0});
+  tab.push({ x: x * NP, y: y * NP, z: SIZE, active: 1, v: 0 });
-  tabuffer.push({ x:(x*NP),y:(y*NP),z:SIZE});
+  tabuffer.push({ x: x * NP, y: y * NP, z: SIZE });
-  previoustab.push({ x:(x*NP),y:(y*NP),z:SIZE});
+  previoustab.push({ x: x * NP, y: y * NP, z: SIZE });
 }
 ///////////ENGINE////////////////////
 function engine() {
@@ -57,25 +79,21 @@ function engine(){
   render();
 }
 function setSin() {
-  for (i=0;i<tabsin.length;i++)
+  for (i = 0; i < tabsin.length; i++) {
-    {
     tab[tabsin[i].i].v = tabsin[i].valueUpdate();
     tabsin[i].step++;
   }
-  
 }
 function setMic(i, a) {
-    tab[i].v+=
+  tab[i].v += tab[i + l].v += (amplitude.value * (a - DB.value)) / 100;
-     tab[i+l].v+=
-     amplitude.value*(a-DB.value)/100;
   //tab[i-l].v+= amplitude.value*(a-DB.value)/100;
- 
 }
 function taken(i) {
   var u = 0;
-  for(u=0;u<tabtaken.length;u++)
+  for (u = 0; u < tabtaken.length; u++) {
-    {
+    if (tabtaken[i] === i) {
-      if (tabtaken[i]===i){return 1}
+      return 1;
+    }
   }
   return 0;
 }
@@ -83,8 +101,7 @@ function addSin(i){
   var u = 0;
   if (taken(i)) {
     return;
-  }
+  } else {
-  else{
     let sin = new Sin(210 - frequency.value, amplitude.value, i);
     console.log("sin :", sin.valueUpdate());
     tabtaken.push(i);
@@ -98,100 +115,121 @@ function Sin(freq,amp,i){
   this.freq = freq;
 
   this.valueUpdate = function () {
-    return (Math.cos(((this.step/this.freq)*2*Math.PI))*this.amp);
+    return Math.cos((this.step / this.freq) * 2 * Math.PI) * this.amp;
-    this.step++;};
+    this.step++;
+  };
   //console.log((Math.cos(((this.step/this.freq)*2*Math.PI))*this.amp));
 }
 function nextStep() {
-  var act,temp,spd,d,self=0
+  var act,
-  for(i=0;i<tab.length;i++)
+    temp,
-    {
+    spd,
+    d,
+    self = 0;
+  for (i = 0; i < tab.length; i++) {
     self = tab[i].z;
     if (i > l && i && i % l && (i % l) - l + 1 && i < l * (l - 1)) {
-        act=tab[i+l].active+tab[i-l].active
+      act =
-          +tab[i-1].active+tab[i+1].active;
+        tab[i + l].active +
-        if(!act){act=1}
+        tab[i - l].active +
+        tab[i - 1].active +
+        tab[i + 1].active;
+      if (!act) {
+        act = 1;
+      }
       // temp=(up(i)+down(i)+left(i)+right(i))*(rigi-1)/(act*rigi)+(tab[i].z)*1/rigi
       d = (self * 4 - (up(i) + down(i) + left(i) + right(i))) / 4;
       spd = tab[i].v - krigi * d - tab[i].v * DAMP;
       temp = spd + tab[i].z;
-      ;
       tabuffer[i].z = temp;
       tab[i].v = spd;
-      }
+    } else {
-      else{disable(i);
+      disable(i);
       temp = 0;
       switch (i) {
-          case 0:{ 
+        case 0:
+          {
             temp = down(i) + right(i);
-          if (!temp){temp=SIZE;}
+            if (!temp) {
+              temp = SIZE;
+            }
             act = tab[i + l].active + tab[i + 1].active;
-          }break;
+          }
-          case l-1:{
+          break;
-        temp=up(i)+right(i)
+        case l - 1:
-          if (!temp){temp=SIZE;}
+          {
+            temp = up(i) + right(i);
+            if (!temp) {
+              temp = SIZE;
+            }
             act = tab[i + l].active + tab[i - 1].active;
-          }break;
+          }
-          case tab.length-l:{
+          break;
+        case tab.length - l:
+          {
             temp = down(i) + left(i);
-          if (!temp){temp=SIZE;}
+            if (!temp) {
+              temp = SIZE;
+            }
             act = tab[i - l].active + tab[i + 1].active;
-          }break;
+          }
+          break;
         case tab.length - 1: {
           temp = up(i) + left(i);
-          if (!temp){temp=SIZE;}
+          if (!temp) {
-            
+            temp = SIZE;
+          }
         }
       }
       if (temp) {
         if (CLAMPED) {
           temp = SIZE;
+        } else {
+          temp = (temp * (rigi - 1)) / (act * rigi) + (tab[i].z * 1) / rigi;
         }
-          else{
+      } else {
-            temp=temp*(rigi-1)/(act*rigi)+(tab[i].z)*1/rigi;
+        if ((i % l) - l + 1 === 0 && i) {
-          }
-        }
-        else {
-          if (((i%l)-l+1)===0&&i){
           temp = up(i) + right(i) + left(i);
-            act=tab[i+l].active+tab[i-l].active
+          act = tab[i + l].active + tab[i - l].active + tab[i - 1].active;
-          +tab[i-1].active;
         }
         if (i % l === 0 && i !== l && i) {
           temp = right(i) + down(i) + left(i);
-            act=tab[i+l].active+tab[i-l].active
+          act = tab[i + l].active + tab[i - l].active + tab[i + 1].active;
-          +tab[i+1].active;
         }
         if (i < l * l - 1 && i > l * l - l - 1) {
           temp = up(i) + down(i) + left(i);
-            act=tab[i-l].active
+          act = tab[i - l].active + tab[i - 1].active + tab[i + 1].active;
-          +tab[i-1].active+tab[i+1].active;
         }
         if (i < l && i > 0) {
           temp = up(i) + down(i) + right(i);
           act = tab[i + l].active + tab[i - 1].active + tab[i + 1].active;
         }
-          if(!act){act=1}
+        if (!act) {
-          temp=(temp*(rigi-1)/(act*rigi)+(tab[i].z)*1/rigi)/2;
+          act = 1;
-          temp+=previoustab[i].z*1/2;
+        }
+        temp = ((temp * (rigi - 1)) / (act * rigi) + (tab[i].z * 1) / rigi) / 2;
+        temp += (previoustab[i].z * 1) / 2;
         previoustab[i].z = temp;
       }
       tabuffer[i].z = temp;
     }
   }
-  for(i=0;i<tab.length;i++)
+  for (i = 0; i < tab.length; i++) {
-    {
+    tab[i].z = tabuffer[i].z;
-      tab[i].z=tabuffer[i].z
   }
 }
 function down(i) {
-  return tab[i+1].z*tab[i+1].active;}
+  return tab[i + 1].z * tab[i + 1].active;
+}
 function up(i) {
-  return tab[i-1].z*tab[i-1].active;}
+  return tab[i - 1].z * tab[i - 1].active;
+}
 function left(i) {
-  return tab[i-l].z*tab[i-l].active;}
+  return tab[i - l].z * tab[i - l].active;
+}
 function right(i) {
-  return tab[i+l].z*tab[i+l].active;}
+  return tab[i + l].z * tab[i + l].active;
+}
 function disable(a) {
   tab[a].active = 0;
 }
@@ -199,7 +237,7 @@ function unable(a){
   tab[a].active = 1;
 }
 function toggle(a) {
-  tab[a].active ? tab[a].active=0:tab[a].active=1;
+  tab[a].active ? (tab[a].active = 0) : (tab[a].active = 1);
 }
 function makeWave(e) {
   if (press) {
@@ -207,7 +245,8 @@ function makeWave(e){
       y = event.pageY - elemTop;
     console.log("i move in make wave");
     if (ielement(x, y) != b) {
-         wave(x,y)}
+      wave(x, y);
+    }
     b = ielement(x, y);
   }
 }
@@ -219,38 +258,49 @@ function clear(){
   tabsin = [];
 }
 
-
-
 ////////////CLICK////////////////////
 
 var elemLeft = canvas.offsetLeft,
   elemTop = canvas.offsetTop,
-    context = canvas.getContext('2d'),
+  context = canvas.getContext("2d"),
   elements = [];
 
 onmousemove = function (e) {
   switch (radioval) {
-      case "Mic":{
+    case "Mic":
-                 };break;
+      {
-      case "Wall":{wallMaker(e)
+      }
-      };break;
+      break;
-      case "Wave":{makeWave(e);
+    case "Wall":
+      {
+        wallMaker(e);
+      }
+      break;
+    case "Wave":
+      {
+        makeWave(e);
         console.log(radioval);
-                  };break;
+      }
+      break;
 
     // case "Nothing":{};break;
   }
-  
+};
-}
 //onmousemove = wallMaker(e);
 damping.oninput = function () {
   DAMP = this.value;
 };
-canvas.addEventListener('mouseup', function(event) {
+canvas.addEventListener(
+  "mouseup",
+  function (event) {
     press = 0;
     firstmic = 0;
-}, false);  
+  },
-canvas.addEventListener('mousedown', function(event) {
+  false
+);
+canvas.addEventListener(
+  "mousedown",
+  function (event) {
     console.log("click");
     press = 1;
     var temp = 0;
@@ -263,33 +313,42 @@ canvas.addEventListener('mousedown', function(event) {
       }
       radioval = temp;
       switch (temp) {
-      case "Mic":{
+        case "Mic":
-        addMicro(x,y)
+          {
-                 };break;
+            addMicro(x, y);
-      case "Wall":{
+          }
-      };break;
+          break;
-      case "Wave":{makeWave(event);};break;
+        case "Wall":
+          {
+          }
+          break;
+        case "Wave":
+          {
+            makeWave(event);
+          }
+          break;
         case "Sin": {
           addSin(ielement(x, y));
         }
         // case "Nothing":{};break;
       }
     }
-}, false);
+  },
-var btn = document.getElementById('startbtn');
+  false
-var radio = document.getElementById('radio');
+);
-var clr = document.getElementById('clear');
+var btn = document.getElementById("startbtn");
-btn.addEventListener('click', getSound);
+var radio = document.getElementById("radio");
-clr.addEventListener('click',clear);
+var clr = document.getElementById("clear");
+btn.addEventListener("click", getSound);
+clr.addEventListener("click", clear);
 function startMachine() {
-  start ? start=0 : start=1;
+  start ? (start = 0) : (start = 1);
-  if (start){getSound}
+  if (start) {
-  
+    getSound;
-  
+  }
 }
 function toggleSend() {
-  send ? send=0 : send=1;
+  send ? (send = 0) : (send = 1);
-  
 }
 
 ////////////////WALLS////////////////////////
@@ -298,7 +357,8 @@ function wallMaker(event){
     var x = event.pageX - elemLeft,
       y = event.pageY - elemTop;
     if (ielement(x, y) != b) {
-         makeWall(x,y)}
+      makeWall(x, y);
+    }
     b = ielement(x, y);
   }
 }
@@ -308,39 +368,47 @@ function makeWall(x,y){
   console.log("i made a wall", ielement(x, y));
 }
 function ielement(x, y) {
-  var temp=Math.round((x/NP))*l+Math.round(y/NP);
+  var temp = Math.round(x / NP) * l + Math.round(y / NP);
   if (temp < tab.length && temp > 0) {
     return temp;
+  } else {
+    return midl;
   }
-  else {return midl};
 }
 
 ////////////RENDER///////////////////
 function render() {
-  var xsize,ysize,xpos,ypos=10;
+  var xsize,
-  var up,right,diag=0;
+    ysize,
-  var r,g,b,avr=0;
+    xpos,
+    ypos = 10;
+  var up,
+    right,
+    diag = 0;
+  var r,
+    g,
+    b,
+    avr = 0;
 
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   for (i = 0; i < tab.length; i++) {
-    
     if (i) {
       ctx.beginPath();
       up = tab[i - 1];
       right = tab[i + l];
       diag = tab[i - 1 + l];
-      
-      
     }
     if (tab[i].active) {
-      if(tab[i].z<=0){//downhill value
+      if (tab[i].z <= 0) {
-        
+        //downhill value
 
         b = 126;
         r = 0;
-        g=-256*tab[i].z/200;
+        g = (-256 * tab[i].z) / 200;
-        if (g<0){g*=-1;}
+        if (g < 0) {
-        ctx.fillStyle='rgb(' +  r +', ' + g + ',' + b + ','+ 0.95 + ')';
+          g *= -1;
+        }
+        ctx.fillStyle = "rgb(" + r + ", " + g + "," + b + "," + 0.95 + ")";
         xsize = SIZE;
         ysize = SIZE;
         ctx.moveTo(tab[i].x, tab[i].y - tab[i].z / 2);
@@ -349,21 +417,18 @@ function render(){
         ctx.lineTo(right.x, right.y - right.z / 2);
         ctx.closePath();
         ctx.fill();
-    
+      } else {
-      }
+        //uphill value
-      
-      else{//uphill value
         avr = tab[i].z + up.z + diag.z + right.z;
         avr *= 1 / 4;
         b = 125;
-        r=256*avr/100;
+        r = (256 * avr) / 100;
         g = 0;
 
-        
+        if (g < 0) {
-        
+          g *= -1;
-        if (g<0){g*=-1;}
+        }
-        ctx.fillStyle='rgb(' +  r +', ' 
+        ctx.fillStyle = "rgb(" + r + ", " + g + "," + b + "," + 1 + ")";
-                         + g + ',' + b + ','+1 +')';
         xsize = SIZE;
         ysize = SIZE;
 
@@ -373,13 +438,15 @@ function render(){
         ctx.lineTo(right.x, right.y - right.z / 2);
         ctx.closePath();
         ctx.fill();
-        
       }
-    }
+    } else {
-    else {
+      ctx.fillStyle = "rgb(" + 250 + ", " + 240 + "," + 256 + "," + 0 + ")";
-      ctx.fillStyle='rgb(' +  250 +', ' 
+      ctx.fillRect(
-                         + 240 + ',' + 256 + ','+0+')';
+        tab[i].x - 2 * SIZE,
-      ctx.fillRect(tab[i].x-2*SIZE , tab[i].y-2*SIZE, 4*SIZE,4*SIZE);//walls
+        tab[i].y - 2 * SIZE,
+        4 * SIZE,
+        4 * SIZE
+      ); //walls
     }
   }
   ctx.stroke();
@@ -397,16 +464,17 @@ function main(){
 console.clear();
 main();
 
-
 /////////////AUDIO/////////////
-navigator.getUserMedia = navigator.getUserMedia ||
+navigator.getUserMedia =
+  navigator.getUserMedia ||
   navigator.webkitGetUserMedia ||
   navigator.mozGetUserMedia;
+
 function getSound() {
   if (navigator.getUserMedia) {
-  navigator.mediaDevices.getUserMedia({audio : true})
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
       .then(function (flux) {
-
         audioContext = new AudioContext();
         analyseur = audioContext.createAnalyser();
         microphone = audioContext.createMediaStreamSource(flux);
@@ -422,7 +490,7 @@ function getSound(){
           var values = 0;
 
           for (var i = 0; i < tab.length; i++) {
-          values += (tab[i]);
+            values += tab[i];
           }
           average = values / tab.length;
           setAverage(average);
@@ -439,8 +507,7 @@ function getSound(){
         if (send){
           state.set(values / tab.length);
         }*/
-
+        };
-    }
       })
       .catch(function (err) {
         console.log("The following error occured: " + err.name);
@@ -448,8 +515,7 @@ function getSound(){
   }
 }
 /////////////FIREBASE////////////
-var tabPersonne = firebase.database().ref('tabPersonne');
+var tabPersonne = firebase.database().ref("tabPersonne");
-
 
 function addPersonneOnline(personne) {
   myId = tabPersonne.push(personne);
@@ -464,16 +530,15 @@ function removeMicroOnline(){
 }
 function setAverage(data) {
   var fb = firebase.database().ref(myId);
-  fb.once('value', function(snapshot) {
+  fb.once("value", function (snapshot) {
     snapshot.forEach(function (child) {
       //child.forEach(function(sousChild){
       child.ref.update({
-        average : data
+        average: data,
       });
       // });
     });
   });
-  
 }
 function clearAll() {}
 //Quitte la page
@@ -482,12 +547,11 @@ var depart = firebase.database().ref(myId);
 depart.onDisconnect().remove();
 */
 
-var change = firebase.database().ref('tabPersonne');
+var change = firebase.database().ref("tabPersonne");
-change.on('value',newData);
+change.on("value", newData);
 function newData(data) {
-  
+  var fb = firebase.database().ref("tabPersonne");
-  var fb = firebase.database().ref('tabPersonne');
+  fb.once("value", function (snapshot) {
-  fb.once('value', function(snapshot) {
     snapshot.forEach(function (child) {
       child.forEach(function (sousChild) {
         var content = sousChild.val();
@@ -497,7 +561,7 @@ function newData(data){
     });
   });
 
-  engine();
+  //engine();
 }
 ///////////FONCTION ADD MAP
 
@@ -539,6 +603,18 @@ function removeAllLocal(){
     nbMicro = 0;
     firstMic = 1;
   }
-  var p = firebase.database().ref('tabPersonne');
+  var p = firebase.database().ref("tabPersonne");
   p.remove();
 }
+/*
+function startAnimationLoop() {
+  function loop(currentTime) {
+    if (currentTime - lastFrameTime >= FRAME_INTERVAL) {
+      engine();
+      lastFrameTime = currentTime;
+    }
+    requestAnimationFrame(loop);
+  }
+  requestAnimationFrame(loop);
+}
+*/