Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function (window, document, undefined) {
- "use strict";
- /**
- * The Universe object
- *
- * @constructor
- */
- function Universe() {
- this.loaded = false;
- this.header = document.querySelector("header");
- this.initialWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
- this.cvs = document.createElement("canvas");
- this.ctx = this.cvs.getContext("2d");
- }
- Universe.prototype = {
- constructor : Universe,
- /**
- * Intializes the instance
- *
- * @function
- */
- init : function () {
- this.box = this.header.getBoundingClientRect();
- this.w = this.box.width;
- this.h = this.box.height;
- this.numDotsOrig = 150;
- this.size = 1.6;
- if (this.w > 700) {
- this.size = 2;
- }
- if (this.w > 1300 && this.w < 1600) {
- this.numDotsOrig = 200;
- } else if (this.w > 1600 && this.w < 2000) {
- this.numDotsOrig = 250;
- } else if (this.w > 2000) {
- this.numDotsOrig = 300;
- }
- this.numDots = this.numDotsOrig;
- this.currDot;
- this.maxRad = this.w / 1.2;
- this.minRad = this.w / 2.5;
- if (this.w > 500 && this.w < 800) {
- this.maxRad = this.w / 1.5;
- this.minRad = this.w / 3;
- } else if (this.w > 800 && this.w < 1000) {
- this.maxRad = this.w / 1.8;
- this.minRad = this.w / 6;
- } else if (this.w > 1000 && this.w < 1600) {
- this.maxRad = this.w / 2;
- this.minRad = this.w / 6;
- } else if (this.w > 1600) {
- this.maxRad = this.w / 2.3;
- this.minRad = this.w / 8;
- }
- this.radDiff = this.maxRad - this.minRad;
- this.dots = [];
- this.centerPt = {x:0, y:0};
- this.prevFrameTime = 0;
- while(this.numDots--) {
- this.currDot = {};
- this.currDot.radius = this.minRad + Math.random() * this.radDiff;
- this.currDot.ang = (1 - Math.random() * 2) * Math.PI;
- this.currDot.speed = (1 - Math.random() * 2) * 0.005;
- this.currDot.intensity = Math.round(Math.random() * 255);
- this.currDot.fillColor = "rgb(" + this.currDot.intensity * 255 + "," + this.currDot.intensity + "," + this.currDot.intensity + ")";
- this.dots.push(this.currDot);
- }
- this._centerPt = this.centerPt;
- this._context = this.ctx;
- this.dX = 0;
- this.dY = 0;
- this.prevFrameTime = 0;
- this.cvs.width = this.w;
- this.cvs.height = this.h;
- this.centerPt.x = Math.round(this.w / 2);
- this.centerPt.y = Math.round(this.h / 2);
- if (!this.loaded) {
- this.generateDomStructure();
- this.initThrottle();
- this.requestUpdate();
- this.loaded = true;
- }
- },
- /**
- * Updates universe when needed
- *
- * @function
- * @private
- */
- requestUpdate : function (elapsedTime) {
- var timeSinceLastFrame = elapsedTime - (this.prevFrameTime || 0);
- // queue up an rAF draw call
- if (window.matchMedia) {
- if (!window.matchMedia('(prefers-reduced-motion)').matches) {
- requestAnimFrame(util.bind(this.requestUpdate, this));
- }
- } else {
- requestAnimFrame(util.bind(this.requestUpdate, this));
- }
- // if we *don't* already have a first frame, and the
- // delta is less than 33ms (30fps in this case) then
- // don't do anything and return
- if (timeSinceLastFrame < 30 && this.prevFrameTime) {
- return;
- }
- // else we have a frame we want to draw at 30fps...
- // capture the last frame draw time so we can work out
- // a delta next time.
- this.prevFrameTime = elapsedTime;
- var n = this.numDotsOrig;
- this._context.clearRect(0, 0, this.cvs.width, this.cvs.height);
- while(n--) {
- this.currDot = this.dots[n];
- this.dX = this._centerPt.x + Math.sin(this.currDot.ang) * this.currDot.radius;
- this.dY = this._centerPt.y + Math.cos(this.currDot.ang) * this.currDot.radius;
- this.currDot.ang += this.currDot.speed;
- this._context.fillStyle = this.currDot.fillColor;
- this._context.fillRect(this.dX, this.dY, this.size, this.size);
- }
- },
- /**
- * Resizes the instance
- *
- * @function
- * @private
- */
- resize : function () {
- this.currWidth = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
- if (this.currWidth !== this.initialWidth) {
- this.initialWidth = this.currWidth;
- cancelAnimFrame(util.bind(this.update, this));
- this.init();
- }
- },
- /**
- * Generates the DOM structure
- *
- * @function
- * @private
- */
- generateDomStructure : function () {
- this.remove = document.querySelector("canvas");
- if (this.remove) {
- this.remove.parentNode.removeChild(this.remove);
- }
- this.cvs.classList.add("canvas--hidden");
- this.header.appendChild(this.cvs);
- this.cvs.classList.add("canvas--active");
- },
- /**
- * Initialize throttled update
- *
- * @function
- * @private
- */
- initThrottle : function () {
- this.throttledUpdate = util.onResizeEnd(this.resize, 100, this);
- util.addListener(window, "resize", this.throttledUpdate, false);
- }
- };
- /**
- * Expose a public-facing API
- *
- * @param {String} CSS selector for target elements
- * @param {Object} the options
- */
- function expose() {
- var uni = new Universe();
- uni.init();
- return uni;
- }
- window.universe = expose;
- }(window, document));
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement