|
|
| Line 2: |
Line 2: |
| | | | |
| | <html> | | <html> |
| − |
| |
| − | <script>
| |
| − | // shim layer with setTimeout fallback
| |
| − | window.requestAnimFrame = (function(){
| |
| − | return window.requestAnimationFrame ||
| |
| − | window.webkitRequestAnimationFrame ||
| |
| − | window.mozRequestAnimationFrame ||
| |
| − | function( callback ){
| |
| − | window.setTimeout(callback, 1000 / 23);
| |
| − | };
| |
| − | })();
| |
| − |
| |
| − |
| |
| − | $(function(){
| |
| − | $(window).resize(function(){
| |
| − | $("#playArea").attr({
| |
| − | 'width': $('body').width(),
| |
| − | 'height': $('body').height()
| |
| − | });
| |
| − |
| |
| − | width = $('body').width();
| |
| − | height = $('body').height();
| |
| − |
| |
| − | });
| |
| − | $(window).resize();
| |
| − | });
| |
| − |
| |
| − | var Point = function(){
| |
| − | this._size = 0.5;
| |
| − | this._x = 0;
| |
| − | this._y = 0;
| |
| − | this._direction = 0;
| |
| − | this._velocity = 0;
| |
| − | this._distances = [];
| |
| − | this._neighboors = [];
| |
| − | this._randomization = 0;
| |
| − |
| |
| − | this.__collection = null;
| |
| − |
| |
| − |
| |
| − | this._step = function(aCollection){
| |
| − |
| |
| − | var modifiedVelocity = this._velocity*1 * ((Math.random() * this._randomization+1)/10);
| |
| − | var direction = (Math.random()*2%2 >1)?-1:1;
| |
| − |
| |
| − | this._direction = this._direction*1 + ((Math.random() * this._randomization) * direction);
| |
| − | var radianAngle = this._direction * Math.PI / 180;
| |
| − |
| |
| − |
| |
| − | this._x = (this._x * 1) + (modifiedVelocity * Math.cos(radianAngle) * 1);
| |
| − | this._y = (this._y * 1) + (modifiedVelocity * Math.sin(radianAngle) * 1);
| |
| − |
| |
| − | if(this._x > width) this._x = 0;
| |
| − | if(this._x < 0) this._x = width;
| |
| − | if(this._y > height) this._y = 0;
| |
| − | if(this._y < 0) this._y = height;
| |
| − |
| |
| − | this.__collection = aCollection;
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | this._computeNeighboors = function() {
| |
| − | if(this.__collection == null) return;
| |
| − |
| |
| − | aCollection = this.__collection;
| |
| − | //compute the closest neighboor
| |
| − | this._distances = [];
| |
| − | for(i=0; i < aCollection.length; i++){
| |
| − |
| |
| − | if(aCollection[i]._x != this._x &&
| |
| − | aCollection[i]._y != this._y){
| |
| − |
| |
| − |
| |
| − | this._distances.push({
| |
| − | pointIndex: i,
| |
| − | pointObj: aCollection[i],
| |
| − | distance: Math.sqrt(
| |
| − | Math.pow((this._x - aCollection[i]._x), 2) +
| |
| − | Math.pow((this._y - aCollection[i]._y), 2)
| |
| − | )
| |
| − | });
| |
| − | }
| |
| − | }
| |
| − | this._distances.sort(function(a,b){
| |
| − | defaultReturn = 0;
| |
| − | if(a.distance < b.distance) defaultReturn = -1;
| |
| − | if(a.distance > b.distance) defaultReturn = 1;
| |
| − | return defaultReturn
| |
| − |
| |
| − | });
| |
| − |
| |
| − | this._neighboors = this._distances.slice(0,3);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | this.draw = function(context){
| |
| − | this._computeNeighboors();
| |
| − |
| |
| − | //draw connection lines
| |
| − |
| |
| − | context.lineWidth = 0.25;
| |
| − | context.strokeStyle = '#666';
| |
| − |
| |
| − | context.beginPath();
| |
| − | for(i=0; i<this._neighboors.length; i++) {
| |
| − |
| |
| − | context.moveTo(this._x, this._y);
| |
| − | context.lineTo(this._neighboors[i].pointObj._x, this._neighboors[i].pointObj._y);
| |
| − |
| |
| − | context.lineWidth = 0.10 + 5 / this._neighboors[i].distance;
| |
| − | }
| |
| − | context.closePath();
| |
| − |
| |
| − | context.stroke();
| |
| − |
| |
| − | context.beginPath();
| |
| − | context.arc(this._x, this._y, this._size*this._velocity, 0, 2 * Math.PI, false);
| |
| − | context.fillStyle = '#999';
| |
| − | context.strokeStyle = '#666';
| |
| − | context.lineWidth = 0.5;
| |
| − | context.fill();
| |
| − | context.stroke();
| |
| − |
| |
| − | context.beginPath();
| |
| − | context.arc(this._x, this._y, this._size, 0, 2 * Math.PI, false);
| |
| − | context.fillStyle = '#666';
| |
| − | context.fill();
| |
| − |
| |
| − | // ctx.fillText(this._direction.toFixed(2), this._x, this._y);
| |
| − |
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | var aPoints = [];
| |
| − | var can, ctx, interval, width, height;
| |
| − | var numPoints = 50;
| |
| − | /* var distanceTreshold = 100; */
| |
| − |
| |
| − | function init() {
| |
| − | can = document.getElementById("playArea");
| |
| − | ctx = can.getContext("2d");
| |
| − | width = $('body').width();
| |
| − | height = $('body').height();
| |
| − |
| |
| − | for(x=0; x<numPoints; x++){
| |
| − | var newPoint = new Point();
| |
| − | newPoint._size = (Math.random() * (3 - 0.5) + 0.5).toFixed(2);
| |
| − | newPoint._x = (Math.random() * width).toFixed(0);
| |
| − | newPoint._y = (Math.random() * height).toFixed(0);
| |
| − | newPoint._direction = (Math.random() * 360).toFixed(2);
| |
| − | newPoint._velocity = (Math.random() * (4 - 0.1) + 0.2).toFixed(2);
| |
| − | newPoint._randomization = (Math.random() * (10 - 0) + 0).toFixed(2);
| |
| − | aPoints.push(newPoint);
| |
| − | }
| |
| − |
| |
| − | animate();
| |
| − | }
| |
| − |
| |
| − | function animate(){
| |
| − | for(x=0; x<numPoints; x++){
| |
| − | aPoints[x]._step(aPoints);
| |
| − | }
| |
| − | requestAnimFrame( animate );
| |
| − | draw();
| |
| − | }
| |
| − |
| |
| − | function draw(){
| |
| − | ctx.save();
| |
| − |
| |
| − | ctx.clearRect(0,0,width,height);
| |
| − |
| |
| − | for(x=0; x<numPoints; x++){
| |
| − | aPoints[x].draw(ctx);
| |
| − | }
| |
| − |
| |
| − | ctx.restore();
| |
| − | }
| |
| − |
| |
| − | init();
| |
| − | </script>
| |
| | | | |
| | <style> | | <style> |
| Line 195: |
Line 13: |
| | display: flex; | | display: flex; |
| | background-color: #282828; | | background-color: #282828; |
| | + | background-image: url("https://giphy.com/embed/9N2UvCx7wXLnG"); |
| | } | | } |
| | | | |
| Line 202: |
Line 21: |
| | object-fit:cover; | | object-fit:cover; |
| | width:55%; | | width:55%; |
| − | }
| |
| − |
| |
| − | #playArea {
| |
| − | background: #999;
| |
| | } | | } |
| | | | |
| Line 218: |
Line 33: |
| | </div> | | </div> |
| | | | |
| − | <canvas id="playArea"></canvas> | + | <div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/9N2UvCx7wXLnG" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/harvard-brain-neuron-9N2UvCx7wXLnG">via GIPHY</a></p> |
| − | | + | |
| | | | |
| | <div id="footer"> | | <div id="footer"> |
