SHARE
TWEET

Untitled

a guest Jan 21st, 2019 66 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const PageTransition = new (function () {
  2.  
  3.     const pixelSpeed = 150; // speed at which pixels are drawn
  4.     const pixelW = 10;
  5.     const pixelH = 10;
  6.     const colCount = CANVAS_WIDTH / pixelW; // 80
  7.     const rowCount = CANVAS_HEIGHT / pixelH; // 60
  8.     const pixelCount = colCount * rowCount;
  9.     const colorArray = ["#ff3377", "#ee00aa", "#7744cc", "#4466cc", "#88bbdd"];
  10.  
  11.     let pixelArr = new Array(pixelCount).fill(false);
  12.     let numberArray = Array.apply(null, {length: pixelCount}).map(Number.call, Number)
  13.  
  14.     this.draw = function () {
  15.         // if (!transitioning) return;
  16.         // console.log('draw!');
  17.         this.pixelate(pixelSpeed, colorArray);
  18.     }
  19.  
  20.     this.getGridPos = function (arrayPosition,factor) {
  21.         return arrayPosition % factor;
  22.     }
  23.  
  24.     /**
  25.      * Add color(s) to random positions
  26.      */
  27.     this.pixelate = function (amount,colors) {
  28.  
  29.         if (numberArray.length > 0) {
  30.             for (var i=0; i<amount; i++) {
  31.                 let color = colors[Math.floor(Math.random()*colors.length)];
  32.                 var x = numberArray.splice(Math.floor(Math.random()*numberArray.length),1);
  33.                 pixelArr[x] = color;
  34.             }
  35.         } else {
  36.             this.end();
  37.         }
  38.  
  39.  
  40.         this.render();
  41.     }
  42.  
  43.     /**
  44.      * Render pixels
  45.      */
  46.     this.render = function () {
  47.         for (let i=0;i<pixelArr.length;i++) {
  48.             if (pixelArr[i]) {
  49.                 colorRect(
  50.                     this.getGridPos(i,colCount)*pixelW,
  51.                     Math.floor((i/colCount))*pixelH,
  52.                     pixelW,
  53.                     pixelH,
  54.                     pixelArr[i]
  55.                 );
  56.             }
  57.         }
  58.     }
  59.  
  60.     this.end = function () {
  61.         pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0)");
  62.     }
  63.  
  64.     // create pixels randomly on the screen to create flimmer effect
  65.     this.flimmer = function () {
  66.         pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0.2)");
  67.  
  68.         for (j=0;j<pixelArr.length;j++) {
  69.             var row = Math.floor(j / (CANVAS_WIDTH/pixelW));
  70.             if (j % 80 == 0) {
  71.                 colorRect(pixelW*(Math.floor(Math.random()*80)),row*pixelH, pixelW,pixelH, pixelArr[j]);
  72.             }
  73.         }
  74.     }
  75.  
  76.     this.heaveryFlimmer = function () {
  77.         for (j=0;j<pixelArr.length;j++) {
  78.             let col = Math.floor(Math.random()*80);
  79.             let row = Math.floor(j/(CANVAS_WIDTH/pixelW));
  80.             colorRect(col*pixelW,row*pixelH, pixelW,pixelH, pixelArr[j]);
  81.         }
  82.     }
  83.  
  84. })();
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top