Skip to content

Commit a6fb8a6

Browse files
aayushahujaaayushahuja
committed
second commit
1 parent 19595f4 commit a6fb8a6

1 file changed

Lines changed: 109 additions & 64 deletions

File tree

‎animatedBanner/js/banner.js‎

Lines changed: 109 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
//no of circles
1+
//number of circles
22
var number=35;
33
var widthBanner = 1000;
44
var heightBanner = 100;
5-
//Raphael Object
5+
//Raphael object
66
var paper= Raphael('banner',0,widthBanner, 800, 200);
7-
//Styles for circles and line joining their center
7+
//Styles for circles and the line joining them
88
var filler = {
99
fill:'gray',
1010
opacity:'0.1'
1111
};
1212
var filler2 = {
1313
fill:'black',
14-
opacity:'0.3'
15-
};
16-
17-
//2-D array containing the line objects between any 2 circles
14+
opacity:'0.4'
15+
};
16+
//2D array for lines between any two pair(inefficient now as less than half are used)
1817
var lines = new Array(number);
1918
for (var i = 0; i < number; i++) {
2019
lines[i] = new Array(number);
2120
for(var j=0;j<number;j++){
2221
lines[i][j] =null;
2322
}
2423
}
25-
//circle object
24+
//circle object
2625
var x,y,velX,velY,colour;
2726
function ball(a,b,c,d,e){
2827
this.x=a;
@@ -31,11 +30,15 @@
3130
this.velY=d;
3231
this.colour=e;
3332
}
33+
//initialisation of various things
3434
var a=false;
35-
36-
//initialising objects
3735
var arrShape=new Array();
3836
var arrPos=new Array();
37+
var colour1 = new Array();
38+
var numColour1=0,numColour2=0,numColour3=0,numColour4=0;
39+
var colour2 = new Array();
40+
var colour3 = new Array();
41+
var colour4 = new Array();
3942
var colours=new Array();
4043
colours[0]='yellow';
4144
colours[1]='black';
@@ -56,82 +59,125 @@
5659
temp1=(temp1+1)%4;
5760
rad=iniAng*(Math.PI/180);
5861
arrPos[i]=new ball(iniX,iniY,Math.cos(rad)*.55,Math.sin(rad)*.55,colours[temp1]);
59-
if(temp1==0){//arrShape[i].node.class="colour1";
60-
arrShape[i].node.setAttribute('class', 'colour1');}
61-
if(temp1==1){//arrShape[i].node.class="colour2";
62-
arrShape[i].node.setAttribute('class', 'colour2');}
63-
if(temp1==2){//arrShape[i].node.class="colour3";
64-
arrShape[i].node.setAttribute('class', 'colour3');}
65-
if(temp1==3){//arrShape[i].node.class="colour4";
66-
arrShape[i].node.setAttribute('class', 'colour4');}
62+
if(temp1==0){
63+
arrShape[i].node.setAttribute('class', 'colour1');
64+
colour1.push(i);numColour1++;
6765
}
68-
69-
//mouse functionality
70-
$(".colour1").mouseover(function(){
71-
72-
for(var i=0;i<number;i++){
73-
if(arrShape[i].node.class=="colour1"){
74-
arrShape[i].attr("opacity",.8);
66+
if(temp1==1){
67+
arrShape[i].node.setAttribute('class', 'colour2');
68+
colour2.push(i);numColour2++
69+
}
70+
if(temp1==2){
71+
arrShape[i].node.setAttribute('class', 'colour3');
72+
colour3.push(i);numColour3++;
73+
}
74+
if(temp1==3){
75+
arrShape[i].node.setAttribute('class', 'colour4');
76+
colour4.push(i);numColour4++;
77+
}
78+
}
79+
var mouseOverOpacity=.3;
80+
var time;
81+
//MOUSE Functionality
82+
$(".colour1").mouseover(function(e){
83+
for(var i=0;i<numColour1;i++){
84+
if(colour1[i]!=""){
85+
arrShape[colour1[i]].attr("opacity",mouseOverOpacity);
86+
arrShape[colour1[i]].attr("cx", arrPos[colour1[i]].x);
87+
arrShape[colour1[i]].attr("cy", arrPos[colour1[i]].y);
7588
}
7689
}
77-
78-
});
79-
$(".colour2").mouseover(function(){
80-
81-
for(var i=0;i<number;i++){
82-
if(arrShape[i].node.class=="colour2"){
83-
arrShape[i].attr("opacity",.8);
90+
clearTimeout(time);
91+
});
92+
$(".colour1").mouseout(function(){
93+
for(var i=0;i<numColour1;i++){
94+
if(colour1[i]!=""){
95+
arrShape[colour1[i]].attr("opacity",.1);
96+
}
97+
}
98+
animate();
99+
});
100+
$(".colour2").mouseover(function(e){
101+
for(var i=0;i<numColour2;i++){
102+
if(colour2[i]!=""){
103+
arrShape[colour2[i]].attr("opacity",mouseOverOpacity);
104+
arrShape[colour2[i]].attr("cx", arrPos[colour2[i]].x);
105+
arrShape[colour2[i]].attr("cy", arrPos[colour2[i]].y);
84106
}
85107
}
86-
87-
});
88-
$(".colour3").mouseover(function(){
89-
90-
for(var i=0;i<number;i++){
91-
if(arrShape[i].node.class=="colour3"){
92-
arrShape[i].attr("opacity",.9);
108+
clearTimeout(time);
109+
});
110+
$(".colour2").mouseout(function(){
111+
for(var i=0;i<numColour2;i++){
112+
if(colour2[i]!=""){
113+
arrShape[colour2[i]].attr("opacity",.1);
114+
}
115+
}
116+
animate();
117+
});
118+
$(".colour3").mouseover(function(e){
119+
for(var i=0;i<numColour3;i++){
120+
if(colour3[i]!=""){
121+
arrShape[colour3[i]].attr("opacity",mouseOverOpacity);
122+
arrShape[colour3[i]].attr("cx", arrPos[colour3[i]].x);
123+
arrShape[colour3[i]].attr("cy", arrPos[colour3[i]].y);
93124
}
94125
}
95-
96-
});
97-
$(".colour4").mouseover(function(){
98-
99-
for(var i=0;i<number;i++){
100-
if(arrShape[i].node.class=="colour4"){
101-
arrShape[i].attr("opacity",.8);
126+
clearTimeout(time);
127+
});
128+
$(".colour3").mouseout(function(){
129+
for(var i=0;i<numColour3;i++){
130+
if(colour3[i]!=""){
131+
arrShape[colour3[i]].attr("opacity",.1);
132+
}
133+
}
134+
animate();
135+
});
136+
137+
$(".colour4").mouseover(function(e){
138+
for(var i=0;i<numColour4;i++){
139+
if(colour4[i]!=""){
140+
arrShape[colour4[i]].attr("opacity",mouseOverOpacity);
141+
arrShape[colour4[i]].attr("cx", arrPos[colour4[i]].x);
142+
arrShape[colour4[i]].attr("cy", arrPos[colour4[i]].y);
102143
}
103144
}
104-
105-
});
106-
107-
//delay
145+
clearTimeout(time);
146+
});
147+
$(".colour4").mouseout(function(){
148+
for(var i=0;i<numColour4;i++){
149+
if(colour4[i]!=""){
150+
arrShape[colour4[i]].attr("opacity",.1);
151+
}
152+
}
153+
animate();
154+
});
155+
156+
//delay between animation frames
108157
var delay=50;
109-
var time ;
110-
111158
function distance(x1,y1,x2,y2){
112159
return Math.sqrt(((x2-x1)*(x2-x1))+((y2-y1)*(y2-y1)));
113160
}
114-
115161
var closeness=50;
116162
var ij=0;
117-
118-
//main animation function that calls itself
163+
//Main Animation function that calls itself
119164
function animate(){
120-
121165
for(var i=0;i<number;i++){
122166
var a=arrPos[i].x;
123167
var b=arrPos[i].y;
124-
//bouncing condition
168+
169+
//Bouncing off the walls condition
125170
if(arrPos[i].x<=0 || arrPos[i].x>=widthBanner){arrPos[i].velX=(-1*arrPos[i].velX);}
126171
if(arrPos[i].y<=0 || arrPos[i].y>=heightBanner){arrPos[i].velY=(-1*arrPos[i].velY);}
127-
128-
//line joining the center code
129172
if(ij%40==0){
173+
174+
//Lines between circles
130175
for(var ii=0;ii<number;ii++){
131176
for(var j=ii+1;j<number;j++){
132177
var c=arrPos[j].x;
133178
var d=arrPos[j].y;
134179
if((Math.abs(arrPos[ii].x - arrPos[j].x) <= closeness) && (Math.abs(arrPos[ii].y - arrPos[j].y) <= closeness)) {
180+
135181
if(lines[ii][j]!=null){
136182
lines[ii][j].attr("path","M" + arrPos[ii].x + " " + arrPos[ii].y + " L" + arrPos[j].x + " " + arrPos[j].y);
137183
lines[ii][j].attr(filler2);
@@ -141,6 +187,8 @@
141187
lines[ii][j] =paper.path("M" + arrPos[ii].x + " " + arrPos[ii].y + " L" + arrPos[j].x + " " + arrPos[j].y);
142188
lines[ii][j].attr(filler2);
143189
}
190+
191+
144192
}
145193
else{
146194
if(lines[ii][j]!=null){
@@ -150,21 +198,18 @@
150198
}
151199
}}
152200
ij++;
153-
//updating positions
201+
//Updating positions
154202
arrPos[i].x=arrPos[i].x+arrPos[i].velX;
155203
arrPos[i].y=arrPos[i].y+arrPos[i].velY;
156-
157204
arrShape[i].attr("cx",arrPos[i].x);
158205
arrShape[i].attr("cy",arrPos[i].y);
159206
// arrShape[i].glow({width:1.3,opacity:.1});
160207

161208
}
162-
163-
209+
// clearTimeout(time)
164210
time=setTimeout("animate()", delay);
165211
}
166212

167-
//entry point
168213
$(document).ready(function(){
169214
animate();
170215
});

0 commit comments

Comments
 (0)