SHARE
TWEET

Untitled

a guest May 19th, 2017 39 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function (window, document, undefined) {
  2.   "use strict";
  3.  
  4.   /**
  5.    * The Universe object
  6.    *
  7.    * @constructor
  8.    */
  9.   function Universe() {
  10.     this.loaded = false;
  11.     this.header = document.querySelector("header");
  12.     this.initialWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
  13.     this.cvs = document.createElement("canvas");
  14.     this.ctx = this.cvs.getContext("2d");
  15.   }
  16.  
  17.   Universe.prototype = {
  18.     constructor : Universe,
  19.  
  20.     /**
  21.      * Intializes the instance
  22.      *
  23.      * @function
  24.      */
  25.     init : function () {
  26.       this.box = this.header.getBoundingClientRect();
  27.       this.w = this.box.width;
  28.       this.h = this.box.height;
  29.  
  30.       this.numDotsOrig = 150;
  31.  
  32.       this.size = 1.6;
  33.  
  34.       if (this.w > 700) {
  35.         this.size = 2;
  36.       }
  37.  
  38.       if (this.w > 1300 && this.w < 1600) {
  39.         this.numDotsOrig = 200;
  40.       } else if (this.w > 1600 && this.w < 2000) {
  41.         this.numDotsOrig = 250;
  42.       } else if (this.w > 2000) {
  43.         this.numDotsOrig = 300;
  44.       }
  45.  
  46.       this.numDots = this.numDotsOrig;
  47.  
  48.       this.currDot;
  49.  
  50.       this.maxRad = this.w / 1.2;
  51.       this.minRad = this.w / 2.5;
  52.  
  53.       if (this.w > 500 && this.w < 800) {
  54.         this.maxRad = this.w / 1.5;
  55.         this.minRad = this.w / 3;
  56.       } else if (this.w > 800 && this.w < 1000) {
  57.         this.maxRad = this.w / 1.8;
  58.         this.minRad = this.w / 6;
  59.       } else if (this.w > 1000 && this.w < 1600) {
  60.         this.maxRad = this.w / 2;
  61.         this.minRad = this.w / 6;
  62.       } else if (this.w > 1600) {
  63.         this.maxRad = this.w / 2.3;
  64.         this.minRad = this.w / 8;
  65.       }
  66.  
  67.       this.radDiff = this.maxRad - this.minRad;
  68.       this.dots = [];
  69.       this.centerPt = {x:0, y:0};
  70.       this.prevFrameTime = 0;
  71.  
  72.       while(this.numDots--) {
  73.         this.currDot = {};
  74.         this.currDot.radius = this.minRad + Math.random() * this.radDiff;
  75.         this.currDot.ang = (1 - Math.random() * 2) * Math.PI;
  76.         this.currDot.speed = (1 - Math.random() * 2) * 0.005;
  77.         this.currDot.intensity = Math.round(Math.random() * 255);
  78.         this.currDot.fillColor = "rgb(" + this.currDot.intensity * 255 + "," + this.currDot.intensity + "," + this.currDot.intensity + ")";
  79.         this.dots.push(this.currDot);
  80.       }
  81.  
  82.       this._centerPt = this.centerPt;
  83.       this._context = this.ctx;
  84.       this.dX = 0;
  85.       this.dY = 0;
  86.  
  87.       this.prevFrameTime = 0;
  88.  
  89.       this.cvs.width = this.w;
  90.       this.cvs.height = this.h;
  91.       this.centerPt.x = Math.round(this.w / 2);
  92.       this.centerPt.y = Math.round(this.h / 2);
  93.  
  94.       if (!this.loaded) {
  95.         this.generateDomStructure();
  96.         this.initThrottle();
  97.         this.requestUpdate();
  98.         this.loaded = true;
  99.       }
  100.     },
  101.  
  102.     /**
  103.      * Updates universe when needed
  104.      *
  105.      * @function
  106.      * @private
  107.      */
  108.     requestUpdate : function (elapsedTime) {
  109.       var timeSinceLastFrame = elapsedTime - (this.prevFrameTime || 0);
  110.  
  111.       // queue up an rAF draw call
  112.       if (window.matchMedia) {
  113.         if (!window.matchMedia('(prefers-reduced-motion)').matches) {
  114.           requestAnimFrame(util.bind(this.requestUpdate, this));
  115.         }
  116.       } else {
  117.         requestAnimFrame(util.bind(this.requestUpdate, this));
  118.       }
  119.  
  120.       // if we *don't* already have a first frame, and the
  121.       // delta is less than 33ms (30fps in this case) then
  122.       // don't do anything and return
  123.       if (timeSinceLastFrame < 30 && this.prevFrameTime) {
  124.         return;
  125.       }
  126.  
  127.       // else we have a frame we want to draw at 30fps...
  128.  
  129.       // capture the last frame draw time so we can work out
  130.       // a delta next time.
  131.       this.prevFrameTime = elapsedTime;
  132.  
  133.       var n = this.numDotsOrig;
  134.  
  135.       this._context.clearRect(0, 0, this.cvs.width, this.cvs.height);
  136.  
  137.       while(n--) {
  138.         this.currDot = this.dots[n];
  139.         this.dX = this._centerPt.x + Math.sin(this.currDot.ang) * this.currDot.radius;
  140.         this.dY = this._centerPt.y + Math.cos(this.currDot.ang) * this.currDot.radius;
  141.         this.currDot.ang += this.currDot.speed;
  142.         this._context.fillStyle = this.currDot.fillColor;
  143.         this._context.fillRect(this.dX, this.dY, this.size, this.size);
  144.       }
  145.     },
  146.  
  147.     /**
  148.      * Resizes the instance
  149.      *
  150.      * @function
  151.      * @private
  152.      */
  153.     resize : function () {
  154.       this.currWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
  155.  
  156.       if (this.currWidth !== this.initialWidth) {
  157.         this.initialWidth = this.currWidth;
  158.         cancelAnimFrame(util.bind(this.update, this));
  159.         this.init();
  160.       }
  161.     },
  162.  
  163.     /**
  164.      * Generates the DOM structure
  165.      *
  166.      * @function
  167.      * @private
  168.      */
  169.     generateDomStructure : function () {
  170.       this.remove = document.querySelector("canvas");
  171.       if (this.remove) {
  172.         this.remove.parentNode.removeChild(this.remove);
  173.       }
  174.       this.cvs.classList.add("canvas--hidden");
  175.       this.header.appendChild(this.cvs);
  176.       this.cvs.classList.add("canvas--active");
  177.     },
  178.  
  179.     /**
  180.      * Initialize throttled update
  181.      *
  182.      * @function
  183.      * @private
  184.      */
  185.     initThrottle : function () {
  186.       this.throttledUpdate = util.onResizeEnd(this.resize, 100, this);
  187.       util.addListener(window, "resize", this.throttledUpdate, false);
  188.     }
  189.  
  190.   };
  191.  
  192.   /**
  193.    * Expose a public-facing API
  194.    *
  195.    * @param  {String} CSS selector for target elements
  196.    * @param  {Object} the options
  197.    */
  198.   function expose() {
  199.     var uni = new Universe();
  200.     uni.init();
  201.     return uni;
  202.   }
  203.   window.universe = expose;
  204.  
  205. }(window, document));
RAW Paste Data
Top