1(function() { 2 3 var width, outerWidth, vScrollBarWidth, height, largeHeader, canvas, canvas2, ctx, grad, points, target, animateHeader = true; 4 5 // Main 6 initHeader(); 7 initAnimation(); 8 addListeners(); 9 10 function initHeader() { 11 width = window.innerWidth; 12 outerWidth = window.innerWidth; 13 vScrollBarWidth = outerWidth - width; 14 height = window.innerHeight; 15 target = {x: width/1, y: height/1}; 16 17 largeHeader = document.getElementById('large-header'); 18 largeHeader.style.height = height+'px'; 19 20 canvas = document.getElementById('canvas'); 21 canvas2 = document.getElementById('canvas2'); 22 canvas.width = width; 23 canvas.height = height; 24 canvas2.width = width; 25 canvas2.height = height; 26 ctx = canvas.getContext('2d'); 27 ctx2 = canvas2.getContext('2d'); 28 drawOther(outerWidth, height, vScrollBarWidth); 29 30 // create points 31 points = []; 32 for(var x = 0; x < width; x = x + width/15) { 33 for(var y = 0; y < height; y = y + height/5) { 34 var px = x + Math.random()*width/5; 35 var py = y + Math.random()*height/5; 36 var p = {x: px, originX: px, y: py, originY: py }; 37 points.push(p); 38 } 39 } 40 41 // for each point find the 'numPoints' closest points 42 var numPoints = 4; 43 for(var i = 0; i < points.length; i++) { 44 var closest = []; 45 var p1 = points[i]; 46 for(var j = 0; j < points.length; j++) { 47 var p2 = points[j] 48 if(!(p1 == p2)) { 49 var placed = false; 50 for(var k = 0; k < numPoints; k++) { 51 if(!placed) { 52 if(closest[k] == undefined) { 53 closest[k] = p2; 54 placed = true; 55 } 56 } 57 } 58 59 for(var k = 0; k < numPoints; k++) { 60 if(!placed) { 61 if(getDistance(p1, p2) < getDistance(p1, closest[k])) { 62 closest[k] = p2; 63 placed = true; 64 } 65 } 66 } 67 } 68 } 69 p1.closest = closest; 70 } 71 72 // assign a circle to each point 73 for(var i in points) { 74 var c = new Circle(points[i], 2+Math.random()*2, 'rgba(255,255,255,0.3)'); 75 points[i].circle = c; 76 } 77 } 78 79 // Event handling 80 function addListeners() { 81 if(!('ontouchstart' in window)) { 82 window.addEventListener('mousemove', mouseMove); 83 } 84 window.addEventListener('scroll', scrollCheck); 85 window.addEventListener('resize', resize); 86 } 87 88 function mouseMove(e) { 89 var posx = posy = 0; 90 if (e.pageX || e.pageY) { 91 posx = e.pageX; 92 posy = e.pageY; 93 } 94 else if (e.clientX || e.clientY) { 95 posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 96 posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 97 } 98 target.x = posx; 99 target.y = posy; 100 } 101 102 function scrollCheck() { 103 if(document.body.scrollTop > height) animateHeader = false;
104 else animateHeader = true; 105 } 106 107 function resize() { 108 width = window.innerWidth; 109 outerWidth = window.innerWidth; 110 vScrollBarWidth = outerWidth - width; 111 height = window.innerHeight; 112 largeHeader.style.height = height+'px'; 113 canvas.width = width; 114 canvas.height = height; 115 canvas2.width = width; 116 canvas2.height = height; 117 drawOther(outerWidth, height, vScrollBarWidth); 118 } 119 120 function drawOther(w, h, vBarWidth) { 121 //Add a placeholder function for browsers that don't have setLineDash() 122 if (!ctx2.setLineDash) { 123 ctx2.setLineDash = function () {} 124 } 125 126 // Anti aliasing fix 127 ctx2.translate(1.5, 1.5); 128 129 ctx2.lineWidth = 2; 130 131 // linear gradient from start to end of line 132 grad = ctx2.createLinearGradient(0, h/2, w, h/2); 133 grad.addColorStop(0, "#D94D4D"); 134 grad.addColorStop(0.5, "#EBA538"); 135 grad.addColorStop(1, "#4BB3D2"); 136 137 ctx2.strokeStyle = grad; 138 ctx2.setLineDash([5]); 139 ctx2.beginPath(); 140 ctx2.moveTo((w*0.025)+vBarWidth,(h*(1-0.40))-1); 141 //ctx2.lineTo((w*0.95)-vBarWidth-50,h*(1-0.13)); 142 ctx2.lineTo((w*0.95)-vBarWidth,h*(1-0.13)); 143 ctx2.lineTo((w*0.975)-vBarWidth,(h*(1-0.40))-1); 144 //ctx2.closePath(); 145 ctx2.fillStyle = 'rgba(67,68,68,0.43)'; 146 ctx2.fill(); 147 ctx2.stroke(); 148 149 ctx2.translate(0.5, 0.5); 150 ctx2.lineWidth = 1; 151 ctx2.setLineDash([5,0]); 152 ctx2.strokeStyle = 'rgb(165, 166, 166)'; 153 ctx2.beginPath(); 154 ctx2.moveTo((w*0)+vBarWidth,(h*(1-0.13))-1); 155 ctx2.lineTo((w*0.1)-vBarWidth,(h*(1-0.23))-1); 156 ctx2.stroke(); 157 158 // ctx2.setLineDash([5,0]); 159 ctx2.beginPath(); 160 ctx2.moveTo((w*0.1)-vBarWidth,((h*(1-0.23))-1)-16); 161 ctx2.lineTo((w*0.1)-vBarWidth,((h*(1-0.23))-1)+16); 162 ctx2.stroke(); 163 164 //ctx2.setLineDash([5,0]); 165 ctx2.beginPath(); 166 ctx2.moveTo((w*0.24)+vBarWidth,(h*(1-0.13))-1); 167 ctx2.lineTo((w*0.28)-vBarWidth,(h*(1-0.18))-1); 168 ctx2.stroke(); 169 170 ctx2.beginPath(); 171 ctx2.moveTo((w*0.28)-vBarWidth,((h*(1-0.18))-1)-16); 172 ctx2.lineTo((w*0.28)-vBarWidth,((h*(1-0.18))-1)+16); 173 ctx2.stroke(); 174 175 // ctx2.font = "12px DIN, Sans-Serif"; 176 // ctx2.fillStyle = "rgb(255, 255, 255)"; 177 // ctx2.fillText("Life began", ((w*0.3)+6-vBarWidth),((h*(1-0.16))-1)); 178 // ctx2.fillText("4.6 Billion Years ago", ((w*0.3)+6-vBarWidth),((h*(1-0.16))-17)); 179 180 } 181 182 // animation 183 function initAnimation() { 184 animate(); 185 for(var i in points) { 186 shiftPoint(points[i]); 187 } 188 } 189 190 function animate() { 191 if(animateHeader) { 192 ctx.clearRect(0,0,width,height); 193 for(var i in points) { 194 // detect points in range 195 if(Math.abs(getDistance(target, points[i])) < 4000) { 196 points[i].active = 0.08; 197 points[i].circle.active = 0.08; 198 } else if(Math.abs(getDistance(target, points[i])) < 40000) { 199 points[i].active = 0.04; 200 points[i].circle.active = 0.04; 201 } else if(Math.abs(getDistance(target, points[i])) > 39999) { 202 points[i].active = 0.04; 203 points[i].circle.active = 0.04; 204 } else { 205 points[i].active = 0; 206 points[i].circle.active = 0; 207 } 208 209 drawLines(points[i]); 210 points[i].circle.draw(); 211 } 212 } 213 requestAnimationFrame(animate); 214 } 215 216 function shiftPoint(p) { 217 TweenLite.to(p, 4+1*Math.random(), {x:p.originX-50+Math.random()*100, 218 y: p.originY-50+Math.random()*100, ease:Circ.easeInOut, 219 onComplete: function() { 220 shiftPoint(p); 221 }}); 222 } 223 224 // Canvas manipulation 225 function drawLines(p) { 226 if(!p.active) return; 227 for(var i in p.closest) { 228 ctx.beginPath(); 229 ctx.moveTo(p.x, p.y); 230 ctx.lineTo(p.closest[i].x, p.closest[i].y); 231 ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')'; 232 ctx.stroke(); 233 } 234 } 235 236 function Circle(pos,rad,color) { 237 var _this = this; 238 239 // constructor 240 (function() { 241 _this.pos = pos || null; 242 _this.radius = rad || null; 243 _this.color = color || null; 244 })(); 245 246 this.draw = function() { 247 if(!_this.active) return; 248 ctx.beginPath(); 249 ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false); 250 ctx.fillStyle = 'rgba(156,217,249,'+ _this.active+')'; 251 ctx.fill(); 252 }; 253 } 254 255 // Util 256 function getDistance(p1, p2) { 257 return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2); 258 } 259 260})();
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.