JAVASCRIPT 9
Background.js Guest on 6th April 2021 03:15:54 AM
  1. Background.LastColorA = '#FF0000';
  2. Background.LastColorB = '#0000FF';
  3.  
  4. function Background(options) {
  5.  
  6.     this.symbols = options.symbols;
  7.     this.regions = options.regions;
  8.    
  9.     this.width = 1280;
  10.     this.height = 800;
  11.     this.symbolWidth = 200;
  12.  
  13.     this.el = svg.create();
  14.  
  15.     this.defs = svg.createElement('defs');
  16.     this.el.appendChild(this.defs);
  17.     this.uses = [];
  18.  
  19.     _.each(options.symbols, function(d) {
  20.         this.defs.appendChild(d)
  21.  
  22.         var g = svg.createElement('g');
  23.         var u = svg.createUse(d.id);
  24.         g.style.webkitTransition = 'all 3s cubic-bezier(0,1.4,0,1)';
  25.         u.setAttribute('width', this.symbolWidth);
  26.         u.setAttribute('height', this.symbolWidth);
  27.         u.$transformOrigin(this.symbolWidth/2, this.symbolWidth/2);
  28.         g.appendChild(u);
  29.  
  30.         this.uses.push(g);
  31.         this.uses.push(g.cloneNode(true));
  32.  
  33.     }, this);
  34.  
  35.     _.each(this.uses, function(u) {
  36.         this.el.appendChild(u);
  37.     }, this);
  38.  
  39.     this.el.setAttribute('viewBox', '0 0 '+this.width+' '+this.height);
  40.  
  41.     this.lastPosition = 0;
  42.    
  43.     this.scatter();
  44.     this.applyRegion(this.regions[0]);
  45.  
  46.  
  47. }
  48.  
  49. Background.prototype.scatter = function() {
  50.  
  51.     this.uses = _.shuffle(this.uses);
  52.  
  53.     _.each(this.uses, function(u) {
  54.         var s = Math.map(Math.pow(Math.random(), 3), 0, 1, 1, 7);
  55.         u.style.webkitTransitionDuration = Math.random(1) + 's';
  56.         u.$transform(Math.random(-200, this.width), Math.random(-200, this.height), 0, s, s, Math.randomRange(Math.PI/4));
  57.  
  58.     }, this);
  59.  
  60. };
  61.  
  62. Background.prototype.setColor = function(a, b) {
  63.  
  64.     var _this = this;
  65.  
  66.     recurse(this.defs);
  67.  
  68.     function recurse(d) {
  69.         _.each(d.childNodes, recurse);
  70.  
  71.         if (!d.getAttribute) return;
  72.  
  73.  
  74.         if (d.getAttribute('fill') == Background.LastColorA ||
  75.             d.getAttribute('fill') == Background.LastColorA.toLowerCase()) {
  76.             d.setAttribute('fill', a);
  77.         } else if (d.getAttribute('fill') == Background.LastColorB ||
  78.             d.getAttribute('fill') == Background.LastColorB.toLowerCase()) {
  79.             d.setAttribute('fill', b);
  80.         }
  81.  
  82.         if (d.getAttribute('stroke') == Background.LastColorA ||
  83.             d.getAttribute('stroke') == Background.LastColorA.toLowerCase()) {
  84.             d.setAttribute('stroke', a);
  85.         } else if (d.getAttribute('stroke') == Background.LastColorB ||
  86.             d.getAttribute('stroke') == Background.LastColorB.toLowerCase()) {
  87.             d.setAttribute('stroke', b);
  88.         }
  89.     }
  90.  
  91.     Background.LastColorA = a;
  92.     Background.LastColorB = b;
  93.  
  94. };
  95.  
  96. Background.prototype.update = function(position) {
  97.     var r1 = this.getRegion(position);
  98.     var r2 = this.getRegion(this.lastPosition);
  99.     this.lastPosition = position;
  100.     if (r1 != r2) {
  101.         this.scatter();
  102.         this.applyRegion(r1);
  103.     }
  104.  
  105. };
  106.  
  107. Background.prototype.getRegion = function(position) {
  108.     for (var i = 1, l = this.regions.length; i < l; i++) {
  109.         if (position < this.regions[i][0]) {
  110.             return this.regions[i-1];
  111.         }
  112.     }
  113.     return this.regions[this.regions.length-1];
  114. }
  115.  
  116. Background.prototype.applyRegion = function(region) {
  117.     stage.style.background = region[1];
  118.     this.setColor(region[1], region[2]);
  119. }

Paste-bin is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.