-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.js
163 lines (116 loc) · 9.86 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
var jsonMap = [{"cx":102,"cy":252},{"cx":335,"cy":243},{"cx":595,"cy":209},{"cx":452,"cy":617},{"cx":487,"cy":593},{"cx":440,"cy":564},{"cx":516,"cy":544},{"cx":428,"cy":524},{"cx":388,"cy":341},{"cx":344,"cy":329},{"cx":419,"cy":296},{"cx":335,"cy":371},{"cx":274,"cy":360},{"cx":261,"cy":320},{"cx":329,"cy":296},{"cx":271,"cy":284},{"cx":302,"cy":224},{"cx":399,"cy":273},{"cx":385,"cy":305},{"cx":368,"cy":281},{"cx":344,"cy":270},{"cx":362,"cy":206},{"cx":319,"cy":187},{"cx":274,"cy":184},{"cx":223,"cy":249},{"cx":258,"cy":229},{"cx":223,"cy":204},{"cx":170,"cy":215},{"cx":135,"cy":192},{"cx":71,"cy":175},{"cx":89,"cy":195},{"cx":71,"cy":209},{"cx":89,"cy":221},{"cx":80,"cy":243},{"cx":77,"cy":284},{"cx":114,"cy":264},{"cx":149,"cy":246},{"cx":181,"cy":261},{"cx":206,"cy":293},{"cx":226,"cy":329},{"cx":229,"cy":374},{"cx":261,"cy":400},{"cx":293,"cy":442},{"cx":382,"cy":538},{"cx":392,"cy":567},{"cx":422,"cy":596},{"cx":416,"cy":648},{"cx":405,"cy":699},{"cx":401,"cy":738},{"cx":446,"cy":769},{"cx":428,"cy":755},{"cx":428,"cy":735},{"cx":431,"cy":710},{"cx":452,"cy":676},{"cx":464,"cy":654},{"cx":481,"cy":657},{"cx":500,"cy":635},{"cx":500,"cy":617},{"cx":524,"cy":607},{"cx":538,"cy":570},{"cx":561,"cy":538},{"cx":494,"cy":518},{"cx":458,"cy":494},{"cx":419,"cy":479},{"cx":398,"cy":497},{"cx":376,"cy":485},{"cx":356,"cy":464},{"cx":362,"cy":442},{"cx":335,"cy":451},{"cx":319,"cy":430},{"cx":332,"cy":409},{"cx":362,"cy":403},{"cx":385,"cy":427},{"cx":379,"cy":400},{"cx":402,"cy":383},{"cx":419,"cy":357},{"cx":452,"cy":335},{"cx":431,"cy":320},{"cx":475,"cy":299},{"cx":455,"cy":254},{"cx":428,"cy":261},{"cx":395,"cy":235},{"cx":408,"cy":200},{"cx":440,"cy":201},{"cx":379,"cy":164},{"cx":425,"cy":161},{"cx":353,"cy":178},{"cx":299,"cy":128},{"cx":277,"cy":148},{"cx":322,"cy":148},{"cx":232,"cy":164},{"cx":164,"cy":164},{"cx":108,"cy":148},{"cx":720,"cy":264},{"cx":802,"cy":593},{"cx":769,"cy":448},{"cx":1319,"cy":243},{"cx":1316,"cy":212},{"cx":1330,"cy":198},{"cx":1359,"cy":215},{"cx":1368,"cy":198},{"cx":1327,"cy":164},{"cx":1297,"cy":173},{"cx":1262,"cy":161},{"cx":1233,"cy":151},{"cx":1197,"cy":131},{"cx":1191,"cy":145},{"cx":1155,"cy":151},{"cx":1146,"cy":125},{"cx":1104,"cy":128},{"cx":1057,"cy":131},{"cx":1093,"cy":96},{"cx":1071,"cy":75},{"cx":1022,"cy":85},{"cx":998,"cy":115},{"cx":973,"cy":118},{"cx":979,"cy":158},{"cx":949,"cy":178},{"cx":933,"cy":128},{"cx":902,"cy":164},{"cx":796,"cy":558},{"cx":756,"cy":617},{"cx":756,"cy":548},{"cx":785,"cy":512},{"cx":762,"cy":485},{"cx":723,"cy":470},{"cx":735,"cy":436},{"cx":692,"cy":454},{"cx":664,"cy":433},{"cx":660,"cy":397},{"cx":685,"cy":392},{"cx":708,"cy":383},{"cx":720,"cy":400},{"cx":756,"cy":397},{"cx":785,"cy":405},{"cx":802,"cy":424},{"cx":815,"cy":457},{"cx":833,"cy":485},{"cx":865,"cy":482},{"cx":849,"cy":512},{"cx":822,"cy":541},{"cx":874,"cy":604},{"cx":855,"cy":617},{"cx":871,"cy":582},{"cx":822,"cy":576},{"cx":805,"cy":610},{"cx":796,"cy":632},{"cx":772,"cy":657},{"cx":746,"cy":657},{"cx":732,"cy":625},{"cx":720,"cy":590},{"cx":729,"cy":561},{"cx":711,"cy":530},{"cx":711,"cy":506},{"cx":692,"cy":500},{"cx":651,"cy":506},{"cx":623,"cy":497},{"cx":617,"cy":464},{"cx":617,"cy":442},{"cx":632,"cy":415},{"cx":743,"cy":290},{"cx":772,"cy":261},{"cx":788,"cy":240},{"cx":737,"cy":227},{"cx":762,"cy":201},{"cx":865,"cy":178},{"cx":812,"cy":218},{"cx":796,"cy":189},{"cx":830,"cy":187},{"cx":799,"cy":167},{"cx":772,"cy":148},{"cx":740,"cy":170},{"cx":720,"cy":209},{"cx":695,"cy":232},{"cx":836,"cy":273},{"cx":723,"cy":338},{"cx":737,"cy":371},{"cx":711,"cy":344},{"cx":692,"cy":350},{"cx":676,"cy":374},{"cx":660,"cy":377},{"cx":645,"cy":374},{"cx":645,"cy":347},{"cx":673,"cy":347},{"cx":676,"cy":332},{"cx":667,"cy":323},{"cx":705,"cy":296},{"cx":657,"cy":305},{"cx":676,"cy":288},{"cx":667,"cy":260},{"cx":629,"cy":290},{"cx":635,"cy":276},{"cx":521,"cy":137},{"cx":521,"cy":167},{"cx":580,"cy":134},{"cx":583,"cy":158},{"cx":546,"cy":184},{"cx":521,"cy":212},{"cx":513,"cy":246},{"cx":490,"cy":215},{"cx":487,"cy":178},{"cx":478,"cy":145},{"cx":614,"cy":215},{"cx":620,"cy":195},{"cx":917,"cy":427},{"cx":943,"cy":439},{"cx":937,"cy":476},{"cx":958,"cy":506},{"cx":979,"cy":473},{"cx":995,"cy":442},{"cx":1016,"cy":442},{"cx":1046,"cy":473},{"cx":1063,"cy":488},{"cx":1078,"cy":476},{"cx":1060,"cy":454},{"cx":1081,"cy":442},{"cx":1113,"cy":424},{"cx":1110,"cy":394},{"cx":1107,"cy":371},{"cx":1121,"cy":360},{"cx":1140,"cy":383},{"cx":1143,"cy":363},{"cx":1179,"cy":400},{"cx":1206,"cy":389},{"cx":1221,"cy":357},{"cx":1161,"cy":347},{"cx":1188,"cy":317},{"cx":1170,"cy":281},{"cx":1203,"cy":252},{"cx":1250,"cy":237},{"cx":1244,"cy":289},{"cx":1262,"cy":293},{"cx":1280,"cy":249},{"cx":1224,"cy":670},{"cx":1200,"cy":676},{"cx":1173,"cy":660},{"cx":1158,"cy":641},{"cx":1130,"cy":651},{"cx":1096,"cy":654},{"cx":1093,"cy":632},{"cx":1093,"cy":604},{"cx":1124,"cy":587},{"cx":1149,"cy":579},{"cx":1155,"cy":564},{"cx":1176,"cy":567},{"cx":1170,"cy":579},{"cx":1191,"cy":590},{"cx":1197,"cy":564},{"cx":1075,"cy":535},{"cx":1113,"cy":554},{"cx":1063,"cy":544},{"cx":1030,"cy":506},{"cx":815,"cy":415},{"cx":836,"cy":451},{"cx":868,"cy":461},{"cx":892,"cy":448},{"cx":865,"cy":433},{"cx":855,"cy":406},{"cx":1253,"cy":186},{"cx":1179,"cy":181},{"cx":1099,"cy":175},{"cx":1019,"cy":170},{"cx":976,"cy":218},{"cx":880,"cy":224},{"cx":836,"cy":235},{"cx":830,"cy":348},{"cx":1033,"cy":347},{"cx":1054,"cy":402},{"cx":961,"cy":412},{"cx":899,"cy":380},{"cx":794,"cy":299},{"cx":812,"cy":389},{"cx":791,"cy":374},{"cx":775,"cy":354},{"cx":759,"cy":377},{"cx":750,"cy":350},{"cx":756,"cy":320},{"cx":717,"cy":314},{"cx":1309,"cy":702},{"cx":1306,"cy":688},{"cx":1283,"cy":710},{"cx":1333,"cy":676},{"cx":1218,"cy":599},{"cx":1241,"cy":620},{"cx":1233,"cy":648},{"cx":1203,"cy":635},{"cx":1167,"cy":610},{"cx":1127,"cy":622},{"cx":992,"cy":371},{"cx":839,"cy":320},{"cx":1143,"cy":311},{"cx":943,"cy":366},{"cx":1004,"cy":287},{"cx":874,"cy":299},{"cx":880,"cy":335},{"cx":905,"cy":299},{"cx":1093,"cy":302},{"cx":940,"cy":284},{"cx":1063,"cy":224},{"cx":1133,"cy":246},{"cx":1188,"cy":227},{"cx":1218,"cy":206},{"cx":665,"cy":476},{"cx":749,"cy":521},{"cx":908,"cy":254},{"cx":930,"cy":224},{"cx":1133,"cy":203},{"cx":1027,"cy":257},{"cx":1043,"cy":302},{"cx":1084,"cy":264},{"cx":1057,"cy":183},{"cx":947,"cy":338},{"cx":970,"cy":308},{"cx":984,"cy":258},{"cx":1007,"cy":228},{"cx":1043,"cy":375},{"cx":1066,"cy":345}];
/* ---- PARAMS ---- */
var numberParticlesStart = jsonMap.length,
distanceLinkMax = 70,
linkMax = 8,
particleSize = 1,
particleZone = 11,
particleSpeed = 0.04,
velocity = 2.5,
x = 0,
y = 0,
particleFillColor = '#fff',
particleStrokeColor = '#fff',
particleLinkColor = '#fff',
showZone = false;
/* ---- INIT ---- */
var particles = [];
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.id="canvas-map"; // ratio 16:9
canvas.width = 1440;
canvas.height = 810;
var container = document.getElementById('js-map-canvas');
if (container !== null)
container.appendChild(canvas);
/* ---- CLASS ---- */
function Particle (x, y) {
this.x = this.centerX = x;
this.y = this.centerY = y;
this.velX = _.random(-velocity, velocity);
this.velY = _.random(-velocity, velocity);
this.nbrOfLinks = 0;
this.particles; //receive the table of particles
}
Particle.prototype.render = function() {
context.beginPath();
context.fillStyle = particleFillColor;
context.strokeStyle = particleStrokeColor;
context.lineWidth = 0.25;
context.arc(this.x,this.y,particleSize*2,0,Math.PI*2);
context.fill();
context.stroke();
};
Particle.prototype.renderZone = function(){
context.beginPath();
context.fillStyle = "#ff0000";
context.arc(this.centerX,this.centerY,particleSize/5,0,Math.PI*2);
context.fill();
context.beginPath();
context.strokeStyle = "#ff0000";
context.arc(this.centerX,this.centerY,particleZone,0,Math.PI*2);
context.stroke();
}
Particle.prototype.update = function(){
var posRelativeToCenter = {
x : this.x - this.centerX,
y : this.y - this.centerY
};
var distance = Math.sqrt( Math.pow(posRelativeToCenter.x,2) + Math.pow(posRelativeToCenter.y,2) );
if(distance > particleZone){
var force = (particleZone - distance) / particleZone;
var forceDirection = {
x : (posRelativeToCenter.x / distance) * force,
y : (posRelativeToCenter.y / distance) * force
};
this.velX += forceDirection.x;
this.velY += forceDirection.y;
}
this.x += this.velX*particleSpeed;
this.y += this.velY*particleSpeed;
this.nbrOfLinks = 0;
}
Particle.prototype.renderLinks = function(particles) {
var that = this;
_.each(particles, function(p){
var distance = Math.sqrt( Math.pow(that.x - p.x, 2) + Math.pow(that.y - p.y, 2));
if(that.nbrOfLinks > linkMax)
return;
if(distance < distanceLinkMax && that.nbrOfLinks < linkMax && p.nbrOfLinks < linkMax){
context.beginPath();
context.moveTo(p.x, p.y);
context.lineTo(that.x, that.y);
context.strokeStyle = particleLinkColor;
context.stroke();
that.nbrOfLinks++;
p.addLink();
}
});
}
Particle.prototype.addLink = function(){
this.nbrOfLinks++;
}
/* ---- Functions ----*/
function loop(){
context.clearRect(0,0, canvas.width, canvas.height);
_.chain(particles).each(function(p, index){
p.update();
});
_.chain(particles).each(function(p, index){
p.renderLinks(_.without(particles, p) );
});
_.chain(particles).each(function(p, index){
p.render();
if(showZone){
p.renderZone();
}
});
requestAnimationFrame(loop);
}
/* ---- START ---- */
for (var i = 0; i < numberParticlesStart; i++) {
var x = jsonMap[i].cx,
y = jsonMap[i].cy;
particles.push(new Particle( x, y ));
}
loop();