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,412 +1,480 @@
-const micro_height=100;
+const micro_height = 100;
-const micro_width=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 SPEED = 50;
-const AMPLITUDE=50;
+const AMPLITUDE = 50;
-const SIZE=1;
+const SIZE = 1;
-const NP=10;
+const NP = 10;
-const rigi=5;
+const rigi = 5;
-const krigi=0.9;
+const krigi = 0.9;
-const CLAMPED=1;
+const CLAMPED = 1;
-var DAMP=0.05;
+var DAMP = 0.05;
 var firstMic = 1;
 var myId = 0;
 var nbMicro = 0;
-var l=Math.floor(canvas.height/NP); //length of a row
+var l = Math.floor(canvas.height / NP); //length of a row
-var midl=Math.pow(l,2)/2-l/2;
+var midl = Math.pow(l, 2) / 2 - l / 2;
-var r=1;
+var r = 1;
-var redstyle=0;
+var redstyle = 0;
-var bluestyle= 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;
-var tab=[];
+const FRAME_INTERVAL = 1000 / FRAME_RATE;
-var tabuffer=[];
+var tempx,
-var previoustab=[];
+  tempy,
-var tabtaken=[];
+  tempvx,
-var tabsin=[];
+  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 = [];
+var tabtaken = [];
+var tabsin = [];
 
-frequency=document.querySelector("#freq");
+frequency = document.querySelector("#freq");
-amplitude=document.querySelector("#gain");
+amplitude = document.querySelector("#gain");
-DB=document.querySelector("#db");
+DB = document.querySelector("#db");
-damping=document.querySelector("#damp");
+damping = document.querySelector("#damp");
 
 //////////////INITIALISATION////////
 function initialisation() {
-  
   console.log("initialisation");
-  for (i=0;i<Math.floor( canvas.height/NP);i++){
+  for (i = 0; i < Math.floor(canvas.height / NP); i++) {
-    for (j=0;j<Math.floor(canvas.width/NP);j++){
+    for (j = 0; j < Math.floor(canvas.width / NP); j++) {
-      
+      addNewPart(i, j);
-      addNewPart(i,j);
     }
   }
 }
-function addNewPart(x,y){
+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(){
+function engine() {
   setSin();
   //setMics();
-  var m=0;
+  var m = 0;
-  for (m=0;m<r;m++){
+  for (m = 0; m < r; m++) {
     nextStep();
   }
   render();
 }
-function setSin(){
+function setSin() {
-  for (i=0;i<tabsin.length;i++)
+  for (i = 0; i < tabsin.length; i++) {
-    {
+    tab[tabsin[i].i].v = tabsin[i].valueUpdate();
-      tab[tabsin[i].i].v=tabsin[i].valueUpdate();
     tabsin[i].step++;
   }
-  
 }
-function setMic(i,a){
+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++) {
+    if (tabtaken[i] === i) {
+      return 1;
     }
-function taken(i){
-  var u=0;
-  for(u=0;u<tabtaken.length;u++)
-    {
-      if (tabtaken[i]===i){return 1}
   }
   return 0;
 }
-function addSin(i){
+function addSin(i) {
-  var u=0;
+  var u = 0;
-  if (taken(i)){
+  if (taken(i)) {
     return;
-  }
+  } else {
-  else{
+    let sin = new Sin(210 - frequency.value, amplitude.value, i);
-    let sin= new Sin(210-frequency.value,amplitude.value,i); 
+    console.log("sin :", sin.valueUpdate());
-    console.log("sin :",sin.valueUpdate());
     tabtaken.push(i);
     tabsin.push(sin);
   }
 }
-function Sin(freq,amp,i){
+function Sin(freq, amp, i) {
-  this.i=i;
+  this.i = i;
-  this.step=0;
+  this.step = 0;
-  this.amp=amp;
+  this.amp = amp;
-  this.freq=freq;
+  this.freq = freq;
 
-  this.valueUpdate= function(){
+  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 (){
+function nextStep() {
-  var act,temp,spd,d,self=0
+  var act,
-  for(i=0;i<tab.length;i++)
+    temp,
-    {
+    spd,
-      self=tab[i].z;
+    d,
-      if(i>l&&i&& i%l && (i%l)-l+1 && i<l*(l-1)){
+    self = 0;
-        act=tab[i+l].active+tab[i-l].active
+  for (i = 0; i < tab.length; i++) {
-          +tab[i-1].active+tab[i+1].active;
+    self = tab[i].z;
-        if(!act){act=1}
+    if (i > l && i && i % l && (i % l) - l + 1 && i < l * (l - 1)) {
+      act =
+        tab[i + l].active +
+        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;
+      d = (self * 4 - (up(i) + down(i) + left(i) + right(i))) / 4;
-        spd=tab[i].v-krigi*d-tab[i].v*DAMP;
+      spd = tab[i].v - krigi * d - tab[i].v * DAMP;
-        temp=spd+tab[i].z;
+      temp = spd + tab[i].z;
-      ;
+      tabuffer[i].z = temp;
-        tabuffer[i].z=temp;
+      tab[i].v = spd;
-        tab[i].v=spd;
+    } else {
-      }
+      disable(i);
-      else{disable(i);
+      temp = 0;
-        temp=0;
       switch (i) {
-          case 0:{ 
+        case 0:
-        temp=down(i)+right(i);
-          if (!temp){temp=SIZE;}
-          act=tab[i+l].active+tab[i+1].active;  
-          }break;
-          case l-1:{
-        temp=up(i)+right(i)
-          if (!temp){temp=SIZE;}
-          act=tab[i+l].active+tab[i-1].active;  
-          }break;
-          case tab.length-l:{
-        temp=down(i)+left(i);
-          if (!temp){temp=SIZE;}
-          act=tab[i-l].active+tab[i+1].active;  
-          }break;
-          case tab.length-1:{
-        temp=up(i)+left(i);
-          if (!temp){temp=SIZE;}
-            
-          }
-          }
-        if (temp){
-          if(CLAMPED){
-            temp=SIZE;
-          }
-          else{
-            temp=temp*(rigi-1)/(act*rigi)+(tab[i].z)*1/rigi;
-          }
-        }
-        else {
-          if (((i%l)-l+1)===0&&i){
-            temp=up(i)+right(i)+left(i);
-            act=tab[i+l].active+tab[i-l].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
-          +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
-          +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}
-          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++)
           {
-      tab[i].z=tabuffer[i].z
+            temp = down(i) + right(i);
+            if (!temp) {
+              temp = SIZE;
+            }
+            act = tab[i + l].active + tab[i + 1].active;
+          }
+          break;
+        case l - 1:
+          {
+            temp = up(i) + right(i);
+            if (!temp) {
+              temp = SIZE;
+            }
+            act = tab[i + l].active + tab[i - 1].active;
+          }
+          break;
+        case tab.length - l:
+          {
+            temp = down(i) + left(i);
+            if (!temp) {
+              temp = SIZE;
+            }
+            act = tab[i - l].active + tab[i + 1].active;
+          }
+          break;
+        case tab.length - 1: {
+          temp = up(i) + left(i);
+          if (!temp) {
+            temp = SIZE;
+          }
+        }
+      }
+      if (temp) {
+        if (CLAMPED) {
+          temp = SIZE;
+        } else {
+          temp = (temp * (rigi - 1)) / (act * rigi) + (tab[i].z * 1) / rigi;
+        }
+      } else {
+        if ((i % l) - l + 1 === 0 && i) {
+          temp = up(i) + right(i) + left(i);
+          act = tab[i + l].active + tab[i - l].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 + 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 + 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;
+        }
+        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++) {
+    tab[i].z = tabuffer[i].z;
   }
 }
-function down(i){
+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;}
-function left(i){
-  return tab[i-l].z*tab[i-l].active;}
-function right(i){
-  return tab[i+l].z*tab[i+l].active;}
-function disable(a){
-  tab[a].active=0;
 }
-function unable(a){
+function up(i) {
-  tab[a].active=1;
+  return tab[i - 1].z * tab[i - 1].active;
 }
-function toggle(a){
+function left(i) {
-  tab[a].active ? tab[a].active=0:tab[a].active=1;
+  return tab[i - l].z * tab[i - l].active;
 }
-function makeWave(e){
+function right(i) {
-  if (press){
+  return tab[i + l].z * tab[i + l].active;
+}
+function disable(a) {
+  tab[a].active = 0;
+}
+function unable(a) {
+  tab[a].active = 1;
+}
+function toggle(a) {
+  tab[a].active ? (tab[a].active = 0) : (tab[a].active = 1);
+}
+function makeWave(e) {
+  if (press) {
     var x = event.pageX - elemLeft,
       y = event.pageY - elemTop;
     console.log("i move in make wave");
-      if (ielement(x,y)!=b){
+    if (ielement(x, y) != b) {
-         wave(x,y)}
+      wave(x, y);
-      b=ielement(x,y);
+    }
+    b = ielement(x, y);
   }
 }
-function wave(x,y){
+function wave(x, y) {
-  tab[ielement(x,y)].v+=-SPEED;
+  tab[ielement(x, y)].v += -SPEED;
 }
-function clear(){
+function clear() {
   removeMicro();
-  tabsin=[];
+  tabsin = [];
 }
 
-
-
 ////////////CLICK////////////////////
 
 var elemLeft = canvas.offsetLeft,
   elemTop = canvas.offsetTop,
-    context = canvas.getContext('2d'),
+  context = canvas.getContext("2d"),
   elements = [];
 
-onmousemove = function(e){
+onmousemove = function (e) {
-  switch (radioval){
+  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) {
+//onmousemove = wallMaker(e);
-  press=0;
+damping.oninput = function () {
-  firstmic=0;
+  DAMP = this.value;
-}, false);  
+};
-canvas.addEventListener('mousedown', function(event) {
+canvas.addEventListener(
+  "mouseup",
+  function (event) {
+    press = 0;
+    firstmic = 0;
+  },
+  false
+);
+canvas.addEventListener(
+  "mousedown",
+  function (event) {
     console.log("click");
-    press=1;
+    press = 1;
-    var temp=0;
+    var temp = 0;
     var x = event.pageX - elemLeft,
       y = event.pageY - elemTop;
     //switch ()
-  for(i=0;i<radio.length;i++){
+    for (i = 0; i < radio.length; i++) {
-    if (radio[i].checked){
+      if (radio[i].checked) {
-      temp=radio[i].value;
+        temp = radio[i].value;
       }
-    radioval=temp;
+      radioval = temp;
-    switch (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":
-        case "Sin":{
+          {
-          addSin(ielement(x,y));
+          }
+          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");
-function startMachine(){
+btn.addEventListener("click", getSound);
-  start ? start=0 : start=1;
+clr.addEventListener("click", clear);
-  if (start){getSound}
+function startMachine() {
-  
+  start ? (start = 0) : (start = 1);
-  
+  if (start) {
+    getSound;
+  }
 }
-function toggleSend(){
+function toggleSend() {
-  send ? send=0 : send=1;
+  send ? (send = 0) : (send = 1);
-  
 }
 
 ////////////////WALLS////////////////////////
-function wallMaker(event){
+function wallMaker(event) {
-  if (press){
+  if (press) {
     var x = event.pageX - elemLeft,
       y = event.pageY - elemTop;
-      if (ielement(x,y)!=b){
+    if (ielement(x, y) != b) {
-         makeWall(x,y)}
+      makeWall(x, y);
-      b=ielement(x,y);
+    }
+    b = ielement(x, y);
   }
 }
-function makeWall(x,y){
+function makeWall(x, y) {
-  toggle(ielement(x,y));
+  toggle(ielement(x, y));
   window.requestAnimationFrame(render);
-  console.log("i made a wall",ielement(x,y) );
+  console.log("i made a wall", ielement(x, y));
 }
-function 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){
+  if (temp < tab.length && temp > 0) {
     return temp;
+  } else {
+    return midl;
   }
-  else {return midl};
 }
 
 ////////////RENDER///////////////////
-function 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++){
+  for (i = 0; i < tab.length; i++) {
-    
+    if (i) {
-    if(i){
       ctx.beginPath();
-      up=tab[i-1];
+      up = tab[i - 1];
-      right=tab[i+l];
+      right = tab[i + l];
-      diag=tab[i-1+l];
+      diag = tab[i - 1 + l];
-      
-      
     }
-    if(tab[i].active){
+    if (tab[i].active) {
-      if(tab[i].z<=0){//downhill value
+      if (tab[i].z <= 0) {
+        //downhill value
 
-        
+        b = 126;
-        b=126;
+        r = 0;
-        r=0;
+        g = (-256 * tab[i].z) / 200;
-        g=-256*tab[i].z/200;
+        if (g < 0) {
-        if (g<0){g*=-1;}
+          g *= -1;
-        ctx.fillStyle='rgb(' +  r +', ' + g + ',' + b + ','+ 0.95 + ')';
+        }
-        xsize=SIZE;
+        ctx.fillStyle = "rgb(" + r + ", " + g + "," + b + "," + 0.95 + ")";
-        ysize=SIZE;
+        xsize = SIZE;
-        ctx.moveTo(tab[i].x , tab[i].y-tab[i].z/2);
+        ysize = SIZE;
-      ctx.lineTo(up.x, up.y-up.z/2);
+        ctx.moveTo(tab[i].x, tab[i].y - tab[i].z / 2);
-      ctx.lineTo(diag.x, diag.y-diag.z/2);
+        ctx.lineTo(up.x, up.y - up.z / 2);
-      ctx.lineTo(right.x, right.y-right.z/2);
+        ctx.lineTo(diag.x, diag.y - diag.z / 2);
+        ctx.lineTo(right.x, right.y - right.z / 2);
         ctx.closePath();
         ctx.fill();
+      } else {
+        //uphill value
+        avr = tab[i].z + up.z + diag.z + right.z;
+        avr *= 1 / 4;
+        b = 125;
+        r = (256 * avr) / 100;
+        g = 0;
 
+        if (g < 0) {
+          g *= -1;
         }
+        ctx.fillStyle = "rgb(" + r + ", " + g + "," + b + "," + 1 + ")";
+        xsize = SIZE;
+        ysize = SIZE;
 
-      else{//uphill value
+        ctx.moveTo(tab[i].x - xsize / 4, tab[i].y - tab[i].z / 2);
-        avr=tab[i].z+up.z+diag.z+right.z;
+        ctx.lineTo(up.x, up.y - up.z / 2);
-        avr*=1/4;
+        ctx.lineTo(diag.x, diag.y - diag.z / 2);
-        b=125;
+        ctx.lineTo(right.x, right.y - right.z / 2);
-        r=256*avr/100;
-        g=0;
-        
-        
-        
-        if (g<0){g*=-1;}
-        ctx.fillStyle='rgb(' +  r +', ' 
-                         + g + ',' + b + ','+1 +')';
-      xsize=SIZE;
-      ysize=SIZE;
-
-      ctx.moveTo(tab[i].x-xsize/4 , tab[i].y-tab[i].z/2);
-      ctx.lineTo(up.x, up.y-up.z/2);
-      ctx.lineTo(diag.x, diag.y-diag.z/2);
-      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();
   //ctx.fill();
 }
 ////////////MAIN/////////////////////
-function main(){
+function main() {
-  f=1;
+  f = 1;
-  v=1;
+  v = 1;
 
-  send=0;
+  send = 0;
   console.log("main");
   initialisation();
 }
 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})
-  .then(function(flux) {
 
+function getSound() {
+  if (navigator.getUserMedia) {
+    navigator.mediaDevices
+      .getUserMedia({ audio: true })
+      .then(function (flux) {
         audioContext = new AudioContext();
         analyseur = audioContext.createAnalyser();
         microphone = audioContext.createMediaStreamSource(flux);
@@ -416,17 +484,17 @@ function getSound(){
         microphone.connect(analyseur);
         analyseur.connect(javascriptNode);
         javascriptNode.connect(audioContext.destination);
-    javascriptNode.onaudioprocess = function() {
+        javascriptNode.onaudioprocess = function () {
           var tab = new Uint8Array(analyseur.frequencyBinCount);
           analyseur.getByteFrequencyData(tab);
           var values = 0;
 
           for (var i = 0; i < tab.length; i++) {
-          values += (tab[i]);
+            values += tab[i];
           }
           average = values / tab.length;
           setAverage(average);
-        if (firstMic){
+          if (firstMic) {
             engine();
           }
           /*
@@ -439,106 +507,114 @@ function getSound(){
         if (send){
           state.set(values / tab.length);
         }*/
-
+        };
-    }
       })
-    .catch(function(err) {
+      .catch(function (err) {
         console.log("The following error occured: " + err.name);
       });
   }
 }
 /////////////FIREBASE////////////
-var tabPersonne = firebase.database().ref('tabPersonne');
+var tabPersonne = firebase.database().ref("tabPersonne");
 
-
+function addPersonneOnline(personne) {
-function addPersonneOnline(personne){
   myId = tabPersonne.push(personne);
 }
-function addMicroOnline(micro){
+function addMicroOnline(micro) {
   var tabMicro = firebase.database().ref(myId);
   micro.id = tabMicro.push(micro);
 }
-function removeMicroOnline(){
+function removeMicroOnline() {
   var p = firebase.database().ref(myId);
   p.remove();
 }
-function setAverage(data){
+function setAverage(data) {
   var fb = firebase.database().ref(myId);
-  fb.once('value', function(snapshot) {
+  fb.once("value", function (snapshot) {
-  snapshot.forEach(function(child) {
+    snapshot.forEach(function (child) {
       //child.forEach(function(sousChild){
       child.ref.update({
-        average : data
+        average: data,
       });
       // });
     });
-});
+  });
-  
 }
-function clearAll(){}
+function clearAll() {}
 //Quitte la page
 /*
 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){
+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) {
-    snapshot.forEach(function(child) {
+      child.forEach(function (sousChild) {
-      child.forEach(function(sousChild){
         var content = sousChild.val();
-        setMic(content.i,content.average);
+        setMic(content.i, content.average);
       });
       // });
     });
-});
+  });
 
-  engine();
+  //engine();
 }
 ///////////FONCTION ADD MAP
 
-function addMicro(x,y){
+function addMicro(x, y) {
   var monMicro = new Object();
   monMicro.x = x;
   monMicro.y = y;
-  monMicro.i=ielement(x,y);
+  monMicro.i = ielement(x, y);
   monMicro.average = 0;
-    if(firstMic === 0){
+  if (firstMic === 0) {
     addMicroLocal(monMicro);
-    }else{
+  } else {
     addPersonne(monMicro);
   }
-  }
+}
-function removeMicro(){
+function removeMicro() {
-  for(var i = 0; i < nbMicro; ++i){
+  for (var i = 0; i < nbMicro; ++i) {
     maPersonne[i] = null;
     nbMicro = 0;
     firstMic = 1;
     removeMicroOnline();
   }
-  }
+}
 var maPersonne = new Array();
-function addPersonne(micro){
+function addPersonne(micro) {
   maPersonne.push(micro);
   ++nbMicro;
   firstMic = 0;
   addPersonneOnline(maPersonne);
 }
-function addMicroLocal(micro){
+function addMicroLocal(micro) {
   maPersonne[nbMicro] = micro;
   ++nbMicro;
   addMicroOnline(micro);
 }
-function removeAllLocal(){
+function removeAllLocal() {
-  for(var i = 0; i < nbMicro;++i){
+  for (var i = 0; i < nbMicro; ++i) {
     maPersonne[i] = null;
     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);
+}
+*/