-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpoints.js
More file actions
150 lines (128 loc) · 13.1 KB
/
points.js
File metadata and controls
150 lines (128 loc) · 13.1 KB
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
probArray = [[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,0,0,0,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,0,0,13,13,13,13,22,22,22,22,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,0,13,13,22,22,28,28,28,28,28,28,28,22,22,22,13,13,0,0,0,0,0,0,13,13,13,13,13,13,0,0,0,0,0,0,0,156,231,255,255,239,182,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[0,13,13,22,106,144,144,145,145,145,145,145,145,144,144,143,143,142,142,13,0,0,13,13,22,22,22,22,22,22,13,13,13,0,0,0,0,182,255,255,255,255,222,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,13,22,79,247,255,255,255,255,255,255,255,255,255,255,255,255,255,255,142,22,22,22,28,34,34,38,38,34,34,28,22,22,13,13,0,0,182,255,255,255,255,222,13,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,22,28,144,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,143,28,28,34,38,145,223,223,223,223,145,38,34,28,22,13,13,13,182,255,255,255,255,223,22,22,22,22,22,22,22,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,22,28,145,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,127,34,34,38,42,185,255,255,255,255,185,46,42,34,28,22,22,13,182,255,255,255,255,223,38,38,38,38,34,34,28,28,22,13,13,0,0,0,0,0,0,0,0,0,13,13,22,22,22,22,22,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,22,28,144,255,255,255,255,255,149,56,53,46,42,42,38,34,34,34,34,34,34,42,46,185,255,255,255,255,186,53,46,42,38,34,28,22,182,255,255,255,255,223,50,50,50,50,46,42,42,34,34,28,22,13,0,0,0,0,0,0,13,22,22,28,34,34,34,34,34,28,22,22,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,13,22,144,255,255,255,255,255,149,56,50,46,42,38,34,34,34,28,28,28,34,38,50,185,255,255,255,255,186,59,53,46,42,38,34,34,183,255,255,255,255,224,59,61,61,61,148,148,113,46,42,34,28,22,13,0,0,0,0,13,22,34,38,42,129,146,146,130,46,42,38,34,22,13,0,0,0,0,0,0,0,0,0,0,0,13,22,22,22,142,142,104,0,0,0,0,0,0,0],[13,13,22,143,255,255,255,255,255,149,56,50,42,38,38,34,34,34,34,28,34,159,223,223,240,255,255,255,255,240,224,224,223,223,85,42,38,184,255,255,255,255,224,66,151,216,255,255,255,255,248,206,110,38,34,22,13,0,0,13,28,159,205,240,255,255,255,255,255,255,240,205,109,34,28,13,0,0,0,0,156,231,255,247,213,22,28,171,214,255,255,255,255,247,203,102,0,0,0,0],[13,13,22,143,255,255,255,255,255,150,59,50,42,42,38,38,34,34,34,34,34,183,255,255,255,255,255,255,255,255,255,255,255,255,146,46,46,185,255,255,255,255,233,225,255,255,255,255,255,255,255,255,248,130,38,34,22,13,13,126,240,255,255,255,255,255,255,255,255,255,255,255,255,173,34,28,13,0,0,0,182,255,255,255,255,108,223,255,255,255,255,255,255,255,255,247,125,0,0,0],[13,13,22,144,255,255,255,255,255,152,61,56,50,46,42,38,38,38,34,34,34,184,255,255,255,255,255,255,255,255,255,255,255,255,147,50,53,185,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,248,86,38,28,22,22,183,255,255,255,255,255,255,255,255,255,255,255,255,255,255,145,34,22,0,0,0,182,255,255,255,255,248,255,255,255,255,255,255,255,255,255,255,247,75,0,0],[13,22,22,144,255,255,255,255,255,233,224,224,224,223,223,223,223,184,38,38,38,109,185,186,224,255,255,255,255,223,184,184,184,185,50,53,56,186,255,255,255,255,255,255,255,207,188,189,241,255,255,255,255,255,185,46,34,34,34,184,255,255,215,173,112,46,50,53,148,233,255,255,255,255,215,38,28,13,0,0,182,255,255,255,255,255,255,255,206,185,186,240,255,255,255,255,255,182,0,0],[13,22,22,144,255,255,255,255,255,255,255,255,255,255,255,255,255,232,38,38,42,46,53,61,187,255,255,255,255,184,38,34,34,38,42,50,56,186,255,255,255,255,255,233,134,59,61,66,101,241,255,255,255,255,215,50,42,38,42,86,185,92,59,53,50,46,46,50,59,151,255,255,255,255,240,42,34,22,0,0,182,255,255,255,255,255,232,132,50,50,53,92,240,255,255,255,255,214,13,0],[22,22,28,145,255,255,255,255,255,255,255,255,255,255,255,255,255,232,42,38,42,46,50,59,187,255,255,255,255,184,34,28,34,34,42,50,56,187,255,255,255,255,240,92,50,46,46,53,64,189,255,255,255,255,224,53,46,42,46,53,59,61,59,53,50,46,46,50,59,69,255,255,255,255,255,50,38,28,13,0,182,255,255,255,255,240,90,46,42,42,46,53,186,255,255,255,255,223,22,0],[22,22,28,145,255,255,255,255,255,209,189,187,186,185,185,185,185,160,42,42,42,42,50,56,186,255,255,255,255,184,34,28,28,34,38,46,56,187,255,255,255,255,224,46,38,34,34,42,53,151,255,255,255,255,224,53,50,46,50,56,61,64,61,56,147,146,173,185,186,188,255,255,255,255,255,53,42,28,13,13,183,255,255,255,255,224,46,38,34,34,38,46,148,255,255,255,255,223,28,13],[13,22,28,145,255,255,255,255,255,155,71,64,59,53,50,50,46,46,42,38,38,42,46,53,186,255,255,255,255,184,34,28,28,34,38,46,56,187,255,255,255,255,223,42,34,28,28,38,46,149,255,255,255,255,224,56,50,50,53,56,95,187,233,255,255,255,255,255,255,255,255,255,255,255,255,53,42,28,13,13,183,255,255,255,255,224,42,34,28,28,34,42,148,255,255,255,255,223,34,22],[13,22,28,145,255,255,255,255,255,153,66,59,53,50,46,46,42,42,42,38,38,38,42,53,186,255,255,255,255,184,34,28,28,34,38,46,56,187,255,255,255,255,223,34,28,28,28,28,42,148,255,255,255,255,224,53,50,50,53,132,248,255,255,255,255,255,255,255,255,255,255,255,255,255,255,56,42,28,13,13,183,255,255,255,255,223,38,28,28,28,28,38,147,255,255,255,255,223,38,22],[13,22,28,145,255,255,255,255,255,152,61,53,50,46,42,42,42,38,38,38,38,38,42,50,185,255,255,255,255,184,34,28,28,34,42,50,56,187,255,255,255,255,223,34,28,22,22,28,38,148,255,255,255,255,224,53,50,46,86,248,255,255,255,255,223,185,146,147,148,150,255,255,255,255,255,56,42,28,13,13,183,255,255,255,255,223,38,28,28,28,28,34,147,255,255,255,255,223,38,22],[13,22,28,144,255,255,255,255,255,152,61,53,46,42,42,42,38,38,38,34,34,38,42,46,185,255,255,255,255,184,34,34,34,34,42,50,56,186,255,255,255,255,223,28,22,22,22,22,34,147,255,255,255,255,224,50,46,46,185,255,255,255,255,215,53,50,46,46,53,61,255,255,255,255,255,53,42,28,13,13,183,255,255,255,255,223,38,28,28,28,28,34,147,255,255,255,255,223,38,22],[13,22,22,144,255,255,255,255,255,152,61,53,46,42,42,38,38,38,38,38,34,38,38,42,185,255,255,255,255,205,38,34,34,38,42,50,53,185,255,255,255,255,223,28,22,22,22,22,34,146,255,255,255,255,224,46,42,38,184,255,255,255,255,186,56,50,46,46,53,92,255,255,255,255,255,50,38,28,13,13,183,255,255,255,255,223,38,28,28,28,28,34,147,255,255,255,255,223,34,22],[13,13,22,144,255,255,255,255,255,207,187,186,185,185,184,184,184,184,184,83,34,34,34,38,184,255,255,255,255,255,172,145,145,184,85,46,50,185,255,255,255,255,223,28,22,22,22,22,28,145,255,255,255,255,223,42,34,34,184,255,255,255,255,224,56,50,50,50,148,232,255,255,255,255,255,42,34,22,0,13,183,255,255,255,255,223,38,28,28,28,28,38,147,255,255,255,255,223,28,13],[13,13,22,143,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,159,28,28,28,34,128,255,255,255,255,255,255,255,255,255,145,42,42,184,255,255,255,255,223,22,22,13,13,22,28,145,255,255,255,255,223,34,22,22,106,255,255,255,255,255,240,196,185,232,255,255,255,255,255,255,255,34,28,13,0,0,182,255,255,255,255,223,38,28,28,28,28,38,146,255,255,255,255,223,22,0],[13,13,22,143,255,255,255,255,255,255,255,255,255,255,255,255,255,255,255,182,22,22,22,22,28,205,255,255,255,255,255,255,255,255,144,28,28,183,255,255,255,255,223,22,13,13,13,13,22,144,255,255,255,255,223,22,13,0,22,171,255,255,255,255,255,255,255,255,255,255,214,255,255,255,255,22,13,0,0,0,182,255,255,255,255,223,34,28,28,22,28,34,145,255,255,255,255,223,13,0],[0,13,13,22,223,255,255,255,255,255,255,255,255,255,255,255,255,255,255,125,13,13,13,22,22,22,183,247,255,255,255,255,255,231,77,22,13,170,255,255,255,255,194,13,13,13,13,13,22,126,255,255,255,255,214,13,0,0,13,13,157,232,255,255,255,255,255,255,214,144,127,255,255,255,247,13,0,0,0,0,170,255,255,255,255,194,28,22,22,22,22,28,127,255,255,255,255,214,0,0],[0,0,13,13,13,22,22,22,22,22,22,22,22,22,22,22,13,13,13,13,0,13,13,13,13,22,22,22,126,142,142,142,104,13,13,13,0,0,13,13,13,13,13,13,13,13,13,13,13,22,22,22,22,22,13,0,0,0,0,0,13,13,105,142,157,157,142,77,22,22,22,22,13,13,13,0,0,0,0,0,0,0,13,13,13,13,13,13,13,13,13,22,22,22,22,22,13,13,0,0],[0,0,0,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,0,0,0,0,0,13,13,13,13,13,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,13,13,13,13,13,13,13,13,13,0,0,0,0,0,0,0,13,13,13,13,13,13,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,13,13,13,13,13,13,13,13,13,13,13,13,0,0,0,0],[0,0,0,0,0,0,0,13,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,13,13,13,13,13,13,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,13,13,13,13,13,13,13,0,0,0,0,0,0],[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
probWidth = 100.0;
probHeight = 30.0;
numberBacteria = 1000;
animating = true;
mousePos = [0,0];
initHeader();
function initHeader() {
canvas = document.getElementById('bubbly');
ctx = canvas.getContext('2d');
profile = document.getElementById('profile');
headerOffset = profile.offsetTop;
profile.style.position = "absolute";
resize();
parallax();
addListeners();
initAnimation();
}
function Bacteria(initPosition=[0,0]){
this.offset = [0,0];
this.position = initPosition;
this.origin = initPosition;
this.origPosition = initPosition;
this.velocity = [0,0];
this.mouseTime = 0;
this.amount = 1;
this.opacity = 0;
this.particlePos = initPosition;
this.update = function(){
if(this.amount >= 1.0){
this.amount = 0.0;
this.origin = this.position;
this.offset[0] = Math.random()*20 - 10;
this.offset[1] = Math.random()*20 - 10;
}
var expectedPos = canvasPos(this.position);
var distanceFromMouseX = expectedPos[0]-mousePos[0];
var distanceFromMouseY = expectedPos[1]-mousePos[1];
var distanceFromMouseX_real = this.particlePos[0]-mousePos[0];
var distanceFromMouseY_real = this.particlePos[1]-mousePos[1];
var mouseDistance = Math.sqrt(distanceFromMouseX*distanceFromMouseX + distanceFromMouseY*distanceFromMouseY);
var maxDistance = 10*scaleFactor;
if(mouseDistance < maxDistance){
this.velocity[0] = (distanceFromMouseX_real)*0.001;
this.velocity[1] = (distanceFromMouseY_real)*0.001;
this.mouseTime++;
}else{
this.mouseTime = 0;
}
this.opacity = getProb(this.position[0],this.position[1])/256.0;
var xDistance = this.offset[0]*this.amount;
var yDistance = this.offset[1]*this.amount;
this.position = [xDistance+this.origin[0], yDistance+this.origin[1]];
this.amount += 0.01*Math.random();
var mouseMovement = [this.velocity[0]*this.mouseTime, this.velocity[1]*this.mouseTime];
this.particlePos = canvasPos([this.position[0]+mouseMovement[0], this.position[1]+mouseMovement[1]]);
ctx.beginPath();
ctx.arc(this.particlePos[0],this.particlePos[1],arcSize,0,2*Math.PI);
ctx.strokeStyle = 'rgba(255,255,255,' + this.opacity + ')';
//var radius = arcSize/2.0+Math.random()*8.0;
ctx.stroke();
}
}
function canvasPos(position = [0,0]){
var x = position[0]*scaleFactor+((width/2)-(probWidth*scaleFactor/2));
var y = position[1]*scaleFactor+(height/2)-(probHeight*scaleFactor/2);
return [x,y];
}
function initBacteria(){
var xPos = Math.random()*probWidth;
var yPos = Math.random()*probHeight;
return new Bacteria([xPos, yPos]);
}
function initAnimation() {
points = [];
for (var i=0; i<numberBacteria; i++){
points[i] = initBacteria();
}
animate();
}
function animate(){
if(animating){
ctx.clearRect(0, 0, width, height); //clear window
for(var i=0; i<points.length; i++){
points[i].update();
if(points[i].opacity <0.1){
points[i] = initBacteria();
}
}
window.requestAnimationFrame(animate);
}
}
function getProb(x,y){
var xPos = Math.max(Math.min(Math.floor(x), (probWidth-1)), 0);
var yPos = Math.max(Math.min(Math.floor(y), (probHeight-1)), 0);
return probArray[yPos][xPos]/2.0;
}
function addListeners() {
window.addEventListener('resize', resize);
window.addEventListener('scroll', function(){
requestAnimationFrame(parallax)
}, false);
}
function resize() {
var header = document.getElementById('header');
width = header.clientWidth;
height = header.clientHeight;
canvas.width = width;
canvas.height = height;
scaleFactor = Math.min(Math.max((width *10.0 / 1600.0), 4), 8);
arcSize = scaleFactor*0.5;
scrollFactor = 0;
}
function parallax(){
scrolltop = window.pageYOffset;
if(scrolltop > (height/2)){
animating = false;
}else if(!animating){
animating = true;
animate();
}
profile.style.top = headerOffset-scrolltop*.5+'px';
}
function handleMouseMove(event) {
var e = e || window.event;
mousePos = [e.clientX,e.clientY];
}
document.onmousemove = handleMouseMove;