Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- const PageTransition = new (function () {
- const pixelSpeed = 150; // speed at which pixels are drawn
- const pixelW = 10;
- const pixelH = 10;
- const colCount = CANVAS_WIDTH / pixelW; // 80
- const rowCount = CANVAS_HEIGHT / pixelH; // 60
- const pixelCount = colCount * rowCount;
- const colorArray = ["#ff3377", "#ee00aa", "#7744cc", "#4466cc", "#88bbdd"];
- let pixelArr = new Array(pixelCount).fill(false);
- let numberArray = Array.apply(null, {length: pixelCount}).map(Number.call, Number)
- this.draw = function () {
- // if (!transitioning) return;
- // console.log('draw!');
- this.pixelate(pixelSpeed, colorArray);
- }
- this.getGridPos = function (arrayPosition,factor) {
- return arrayPosition % factor;
- }
- /**
- * Add color(s) to random positions
- */
- this.pixelate = function (amount,colors) {
- if (numberArray.length > 0) {
- for (var i=0; i<amount; i++) {
- let color = colors[Math.floor(Math.random()*colors.length)];
- var x = numberArray.splice(Math.floor(Math.random()*numberArray.length),1);
- pixelArr[x] = color;
- }
- } else {
- this.end();
- }
- this.render();
- }
- /**
- * Render pixels
- */
- this.render = function () {
- for (let i=0;i<pixelArr.length;i++) {
- if (pixelArr[i]) {
- colorRect(
- this.getGridPos(i,colCount)*pixelW,
- Math.floor((i/colCount))*pixelH,
- pixelW,
- pixelH,
- pixelArr[i]
- );
- }
- }
- }
- this.end = function () {
- pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0)");
- }
- // create pixels randomly on the screen to create flimmer effect
- this.flimmer = function () {
- pixelArr.map((val, i) => pixelArr[i] = "rgba(225,225,225,0.2)");
- for (j=0;j<pixelArr.length;j++) {
- var row = Math.floor(j / (CANVAS_WIDTH/pixelW));
- if (j % 80 == 0) {
- colorRect(pixelW*(Math.floor(Math.random()*80)),row*pixelH, pixelW,pixelH, pixelArr[j]);
- }
- }
- }
- this.heaveryFlimmer = function () {
- for (j=0;j<pixelArr.length;j++) {
- let col = Math.floor(Math.random()*80);
- let row = Math.floor(j/(CANVAS_WIDTH/pixelW));
- colorRect(col*pixelW,row*pixelH, pixelW,pixelH, pixelArr[j]);
- }
- }
- })();
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement