Difference between revisions of "Team:Evry Paris-Saclay/Template:Script"

Latest revision as of 17:12, 18 December 2017

(function(){

   //New version        
   //var img = document.getElementById("goldMedal");

   var Color = function(r, g, b){
       this.r = r;
       this.g = g;
       this.b = b;
       
       this.toString = function(){
           return this.r + ", " + this.g + ", " + this.b;
       }
   };
   
   var jaune = new Color(96, 233, 3);
   var bleu = new Color(15, 255, 255);
   var vert = new Color(54, 255, 175);
   var blanc = new Color(255, 255, 255);
   var rouge = new Color(227, 18, 21);
       
   var genericColors = [jaune, bleu, vert, blanc];
   
   var maxOpacity = 2,
       pasOpacity = 0.005,
       sphSize = 34, sphGap = 72;   
   
   var canvas = document.getElementById('canvas');
   var context = canvas.getContext('2d');
   var alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
   
   //Test taille de fenetre
   if(window.innerWidth >= 1900) {        
       sphSize = 50;
       sphGap = 105;
       //img.style.marginTop = "760px";
       //img.style.marginLeft = "70px";
   } else if(window.innerWidth >= 800 && window.innerWidth < 1900) {   
       sphSize = 34;
       sphGap = 72;
       canvas.width = 1080;
       canvas.height = 720;
       /*img.style.marginTop = "-420px";
       img.style.marginLeft = "960px";
       img.style.height = "90px";
       img.style.width = "90px";*/
   } else {
       sphSize = 15;
       sphGap = 35;
       canvas.width = 420;
       canvas.height = 300;
       /*img.style.marginTop = "-420px";
       img.style.marginLeft = "960px";
       img.style.height = "90px";
       img.style.width = "90px";*/
   }

console.log(sphSize+ ' ' + sphGap + ' ' + window.innerWidth);

   var Circle = function(indiceX, indiceY){
       this.indiceX = indiceX;
       this.indiceY = indiceY;
       this.x = (sphSize + (indiceX * sphGap));
       this.y = (sphSize + (indiceY * sphGap));
       this.color = genericColors[3];
       this.active = "false";
       this.opacity = 0;
       
       this.activate = function(){
           if(this.active === "false"){
               var rand1 = Math.floor((Math.random() * 12));
               var rand2 = Math.floor((Math.random() * 8));
               var rand3 = Math.floor((Math.random() * 12)) + Math.floor((Math.random() * 8) + 1); 
               
               this.active = "true";  
               
               if(rand1 === this.indiceX && rand2 === this.indiceY && rand3 === (this.indiceX + this.indiceY)){
                   this.color = rouge; // genericColors[Math.floor((Math.random() * (genericColors.length - 1)) + 1)];    
               } else {
                   this.color = genericColors[3]; 
                   this.active = "false";
               }         
           } 
       };
       
       this.changeColor = function(){
           if(this.opacity >= maxOpacity && this.active === "false"){
               this.color = blanc; //genericColors[Math.floor((Math.random() * 3) + 1)];
           }
       };
   };
   
   var circles = [];
   
   var cpt = 0;
   
   //Création des cercles
   for(var i = 0; i < 12; i++){
       for(var j = 0; j < 8; j++){
           var c =  new Circle(i,j);
           
           circles[cpt] = c;
           cpt++;
       }
   }
   
   function activate(){
       for(var i = 0; i < circles.length; i++){
           circles[i].activate();
       }
   }
   
   var fontSize = 60;
   
   context.font = "bold " + fontSize + "px 'Barlow Semi Condensed'";
   
   var title = document.getElementById('canvas').getAttribute('name');
   var posXTitle = ((sphSize + (12 * sphGap)) / 2) - (context.measureText(title).width/2), 
       posYtitle = ((sphSize + (8 * sphGap)) / 2);
   
   function drawText() {        
       context.fillStyle = "white";
       context.fillText(title, posXTitle, posYtitle);
   }
   
   function draw(){
       context.clearRect(0, 0, canvas.width, canvas.height);
       
       for(var i = 0; i < circles.length; i++) {            
           context.beginPath();
           context.lineWidth = '2';
           context.arc(circles[i].x, circles[i].y, sphSize, 0, 2 * Math.PI);
           
           circles[i].activate();
           
           var opacity = circles[i].opacity;
           
           if(circles[i].opacity >= maxOpacity){
                   circles[i].active = "false";
                   circles[i].opacity = 0;
                   circles[i].changeColor(); 
           }
           
           if(circles[i].active === "true"){                
               if(circles[i].opacity > 1){
                   opacity = 2 - circles[i].opacity;
               }

               circles[i].opacity += pasOpacity;
               context.fillStyle = "rgba(" + circles[i].color.toString() + ", " + opacity + ")";   
               context.fill(); 
           } else {
               context.fillStyle = "rgba(" + circles[i].color.toString() + ", " + opacity + ")";
           } 
       
           context.stroke();        
       }  
       
           drawText();  
   }
   
   activate();
   draw();
   
   var activateIntervalID = window.setInterval(activate, 500);
   var drawIntervalID = window.setInterval(draw, 20);

})();