https://fmintegracao.com.br/app/includes/js/main.js

1$(document).ready(function() {
2
3  // set up the canvas  
4  setDimensions();
5  //get a reference to the canvas 
6  context = $('#canvas')[0].getContext("2d");
7
8  // set up useful variables
9  musicIterator=0;
10  numCircles=100;
11  drawIterator=0;
12  mode=0;
13  musicPlaying=true;
14  playlistOpen=false;
15  
16  //set up visualization
17  makeCircles();
18  
19  // start visualization
20  setInterval(draw, 1000/60);
21  setInterval(changeMode, 5000);
22
23});  
24
25function changeMode(){
26
27  for(var i=0;i<numCircles;i++){
28    if(mode%10==0){
29      circlesDX[i]=5;
30    }
31    else if(mode%10==1){
32      circlesDX[i]=0;
33    }
34    else if(mode%10==2){
35      circlesDX[i]=-5;
36    }
37    else if(mode%10==3){
38      circlesDX[i]=Math.floor(Math.random()*7);
39    }
40    else if(mode%10==4){
41      circlesDY[i]=0;
42      circlesDX[i]=0;
43    }
44    else if(mode%10==5){
45      circlesDX[i]=-5;
46    }
47    else if(mode%10==6){
48      circlesDX[i]=Math.floor(Math.random()*7);
49    }
50    else if(mode%10==7){
51      circlesDX[i]=0;
52    }
53    else if(mode%10==8){
54      circlesDY[i]=Math.floor(Math.random()*7);
55    }
56    else if(mode%10==9){
57      circlesDY[i]=Math.floor(Math.random()*-7);
58    } 
59    if(mode%20==19){
60      circlesDX[i]=-Math.floor((circlesX[i]-stageWidth/2)/(stageWidth/8));
61      circlesDY[i]=-Math.floor((circlesY[i]-stageHeight/2)/(stageHeight/8));
62    }
63    if(mode%40==30){
64      var diffX = circlesX[i]-stageWidth/12;
65      var diffY = circlesY[i]-stageHeight/12;
66      if(diffX<=0&&diffY<=0){
67        circlesDX[i]=-diffX/(stageWidth/18);
68        circlesDY[i]=diffY/(stageHeight/18);
69      }
70      else if(diffX<=0&&diffY>=0){
71        circlesDX[i]=diffX/(stageWidth/8);
72        circlesDY[i]=diffY/(stageHeight/8);
73      }
74      else if(diffX>=0&&diffY>=0){
75        circlesDX[i]=diffX/(stageWidth/8);
76        circlesDY[i]=-diffY/(stageHeight/8);
77      }
78      else if(diffX>=0&&diffY<=0){
79        circlesDX[i]=-diffX/(stageWidth/8);
80        circlesDY[i]=-diffY/(stageHeight/8);
81      }
82    }
83  }
84  mode=mode+1;
85  
86}
87
88function setDimensions(){
89  stageWidth=$(document).width();
90  //stageHeight=$(document).height()-$('div#content-header').height()-$('div#seperator').height();
91  stageHeight=$(document).height();
92  $('canvas').attr("width",String(stageWidth));
93  $('canvas').attr("height",String(stageHeight));
94}
95
96function makeCircles(){
97  circlesX=[];
98  circlesY=[];
99  circlesDX=[];
100  circlesDY=[];
101  circlesRed=[];
102  circlesGreen=[];
103  circlesBlue=[];
104  circlesR=[];
105  circlesDR=[];
106  circlesTimer=[];
107  for(var i=0;i<numCircles;i++){
108    circlesX.push( Math.floor(Math.random()*(stageWidth+1)) );
109    //circlesY.push( Math.floor(Math.random()*(stageHeight+1)) );
110    circlesY.push( stageHeight/2 );
111    //circlesDX.push( Math.floor(Math.random()*6)-3 );
112    //circlesDY.push( Math.floor(Math.random()*6)-3 );
113    circlesDX.push( 0 );
114    circlesDY.push( 0 );
115    circlesRed.push( Math.floor(Math.random()*256) );
116    circlesGreen.push( Math.floor(Math.random()*256) );
117    circlesBlue.push( Math.floor(Math.random()*256) );
118    //circlesR.push( Math.floor(Math.random()*11) );
119    circlesR.push( Math.floor(Math.random()*11) );
120    circlesDR.push( -.25 );
121    circlesTimer.push( Math.floor(Math.random()*101) );
122  }
123}
124
125function draw() {
126  context.clearRect(0,0,stageWidth,stageHeight);
127
128  for(var j=0;j<numCircles;j++){
129  
130    // spatial boundary testing
131    if(circlesX[j]<0)
132      circlesX[j]=stageWidth;
133    else if(circlesX[j]>stageWidth)
134      circlesX[j]=0;
135    if(circlesY[j]<0)
136      circlesY[j]=stageHeight;
137    else if(circlesY[j]>stageHeight)
138      circlesY[j]=0;
139      
140    // radial boundary testing
141    if(circlesR[j]>Math.floor(Math.random()*6)+25){
142      circlesDR[j]=-1;
143      circlesTimer[j]=100;
144    }
145    else if( circlesR[j]<Math.floor(Math.random()*4)+3 && circlesTimer[j]>0 ){
146      circlesDR[j]=0;
147      circlesTimer[j]=circlesTimer[j]-1;
148    }
149    else if( circlesR[j]<Math.floor(Math.random()*4)+3 && circlesTimer[j]<=0 ){
150      circlesDR[j]=10;
151    }
152  
153    var tmp_gradient = context.createRadialGradient(circlesX[j], circlesY[j], 0, circlesX[j], circlesY[j], circlesR[j]);
154    tmp_gradient.addColorStop(0, "rgba("+circlesRed[j]+","+circlesGreen[j]+","+circlesBlue[j]+","+1+")" );
155    tmp_gradient.addColorStop(1, "rgba("+circlesRed[j]+","+circlesGreen[j]+","+circlesBlue[j]+","+0+")" );
156    context.fillStyle = tmp_gradient;
157    
158    context.beginPath();
159    //console.log(j+" "+circlesX.length+" "+circlesY.length+" "+circlesR.length);
160    context.arc(circlesX[j], circlesY[j], circlesR[j], 0,Math.PI*2,true);
161    context.closePath();
162    context.fill();
163
164    
165    // changing variables
166    circlesX[j]=circlesX[j]+circlesDX[j];
167    circlesY[j]=circlesY[j]+circlesDY[j];
168    circlesR[j]=circlesR[j]+circlesDR[j];      
169
170  }
171  drawIterator=drawIterator+1;
172}