Last active
December 24, 2015 16:09
-
-
Save jh0ker/6825643 to your computer and use it in GitHub Desktop.
A more or less fast and easy way to create animated tile-based graphics using div-elements.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| How to use: | |
| - Import jQuery and Pixels.js | |
| - Create the graphics: | |
| logo = new Pixels(); | |
| logo.createNew(5,5); //5x5 tiles | |
| logo.def_fg = '#04B404'; //Set foreground color. Default is #000 | |
| logo.def_bg = '#111'; //Set background color. Default is #333 | |
| logo.width = 30; //Set tile-width in px. Default is 10 | |
| logo.height = 30; //Set tile-height in px. Default is 10 | |
| logo.paddingx = 5; //Set space between tiles in px. Default is 2 | |
| logo.paddingy = 5; //Set space between tiles in px. Default is 2 | |
| logo.id = 'logo'; //Set the id-attribute of the div. Change to create more than one graphics. Default is 'pixel' | |
| logo.print_inactive = true; //To print background-tiles, set this to true. Default is false (Performance) | |
| logo.setActive(0,0,3,3); //start and end indexes (x,y,endx,endy) | |
| logo.setActive(3,3,4,4,'#f00'); //To use a different color with the selected tile(s), put it at the end | |
| logo.setActive(4,4,7,7); | |
| logo.setActive(4,0); //To just activate one tile, omit the end-indexes | |
| logo.setActive(0,4); | |
| - Print the logo at the desired location and start the animation | |
| logo.print(); | |
| $(document).load(logo.showRandom(20, 200)); //First Number is the delay between the animation-starts, second is the duration of each animation |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function Pixels() { | |
| this.pixels = ''; | |
| this.height = 10; | |
| this.width = 10; | |
| this.paddingx = 2; | |
| this.paddingy = 2; | |
| this.def_bg = '#333'; | |
| this.def_fg = '#fff'; | |
| this.id = "pixel"; | |
| this.print_inactive = false; | |
| this.createNew = function (x, y) { | |
| this.pixels = new Array(x); | |
| for (var i = 0; i < x; i++) { | |
| this.pixels[i] = new Array(y); | |
| for (var k = 0; k < y; k++) { | |
| this.pixels[i][k] = ''; | |
| } | |
| } | |
| }; | |
| this.setActive = function (x, y, xend, yend, color) { | |
| xend = xend === undefined ? x + 1 : xend; | |
| yend = yend === undefined ? y + 1: yend; | |
| for (var i = x; i < xend; i++) | |
| for (var k = y; k < yend; k++) | |
| this.pixels[i][k] = color === undefined ? 'x' : color ; | |
| }; | |
| this.print = function () { | |
| document.write('<div id="' + this.id + '" class="pixels" style="position: relative; height: ' + (this.pixels[0].length * (this.height + this.paddingy) - this.paddingy) + 'px; width: ' + (this.pixels.length * (this.width + this.paddingx) - this.paddingx) + 'px;">'); | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| if(this.pixels[i][k] === '' && !this.print_inactive) continue; | |
| document.write('<div class="pixel ' + (this.pixels[i][k] === '' ? 'inactive' : 'active') + '" id="' + this.id + '_' + i + '-' + k + '" style="position: absolute; display: none; top: ' + k * (this.height + this.paddingy) + 'px; left: ' + i * (this.width + this.paddingx) +'px; height: ' + this.height + 'px; width: ' + this.width + 'px; background-color:' + this.getColor(i, k) + '"></div>'); | |
| } | |
| } | |
| document.write('</div>'); | |
| }; | |
| this.getColor = function (x, y) { | |
| return (this.pixels[x][y] == 'x' ? this.def_fg : (this.pixels[x][y] === '' ? this.def_bg : this.pixels[x][y])); | |
| }; | |
| this.toggleAll = function() { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).toggle(); | |
| } | |
| } | |
| }; | |
| this.showLeftRight = function(delay, duration) { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).delay(delay*i).fadeIn(duration); | |
| } | |
| } | |
| }; | |
| this.showTopBottom = function(delay, duration) { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).delay(delay*k).fadeIn(duration); | |
| } | |
| } | |
| }; | |
| this.showRightLeft = function(delay, duration) { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels.length - i)).fadeIn(duration); | |
| } | |
| } | |
| }; | |
| this.showBottomTop = function(delay, duration) { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels[i].length - k)).slideDown(duration); | |
| } | |
| } | |
| }; | |
| this.hintBottomTop = function(delay, duration) { | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| $('#' + this.id + '_' + i + '-' + k).delay(delay*(this.pixels[i].length - k)).slideDown(duration).slideUp(duration); | |
| } | |
| } | |
| }; | |
| this.showRandom = function(delay, duration) { | |
| var actives = []; | |
| var inactives = []; | |
| var index_act = 0; | |
| var index_inact = 0; | |
| for (var i = 0; i < this.pixels.length; i++) { | |
| for (var k = 0; k < this.pixels[i].length; k++) { | |
| if(this.pixels[i][k] === '') { | |
| inactives[index_inact] = new Array(2); | |
| inactives[index_inact][0] = i; | |
| inactives[index_inact][1] = k; | |
| index_inact++; | |
| } else { | |
| actives[index_act] = new Array(2); | |
| actives[index_act][0] = i; | |
| actives[index_act][1] = k; | |
| index_act++; | |
| } | |
| } | |
| } | |
| actives = shuffleArray(actives); | |
| for(i = 0; i < actives.length; i++) { | |
| $('#' + this.id + '_' + actives[i][0] + '-' + actives[i][1]).delay(delay*i).show(duration); | |
| } | |
| for(i = 0; i < inactives.length; i++) { | |
| $('#' + this.id + '_' + inactives[i][0] + '-' + inactives[i][1]).delay(delay * actives.length + 0.1 * delay * i + duration).fadeIn(duration); | |
| } | |
| }; | |
| } | |
| function shuffleArray(o){ //v1.0 | |
| for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x); | |
| return o; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 18(){3.4=\'\';3.m=10;3.l=10;3.q=2;3.t=2;3.I=\'#1g\';3.A=\'#1f\';3.8="F";3.G=1e;3.1c=9(x,y){3.4=p u(x);7(6 i=0;i<x;i++){3.4[i]=p u(y);7(6 k=0;k<y;k++){3.4[i][k]=\'\'}}};3.1a=9(x,y,a,b,c){a=a===w?x+1:a;b=b===w?y+1:b;7(6 i=x;i<a;i++)7(6 k=y;k<b;k++)3.4[i][k]=c===w?\'x\':c};3.19=9(){v.z(\'<s 8="\'+3.8+\'" C="4" D="B: 14; m: \'+(3.4[0].5*(3.m+3.t)-3.t)+\'n; l: \'+(3.4.5*(3.l+3.q)-3.q)+\'n;">\');7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){H(3.4[i][k]===\'\'&&!3.G)Z;v.z(\'<s C="F \'+(3.4[i][k]===\'\'?\'Y\':\'U\')+\'" 8="\'+3.8+\'g\'+i+\'-\'+k+\'" D="B: T; O: 13; P: \'+k*(3.m+3.t)+\'n; Q: \'+i*(3.l+3.q)+\'n; m: \'+3.m+\'n; l: \'+3.l+\'n; R-S:\'+3.M(i,k)+\'"></s>\')}}v.z(\'</s>\')};3.M=9(x,y){K(3.4[x][y]==\'x\'?3.A:(3.4[x][y]===\'\'?3.I:3.4[x][y]))};3.V=9(){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).W()}}};3.X=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*i).r(b)}}};3.11=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*k).r(b)}}};3.12=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4.5-i)).r(b)}}};3.N=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4[i].5-k)).E(b)}}};3.15=9(a,b){7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){$(\'#\'+3.8+\'g\'+i+\'-\'+k).h(a*(3.4[i].5-k)).E(b).16(b)}}};3.17=9(a,b){6 c=[];6 d=[];6 e=0;6 f=0;7(6 i=0;i<3.4.5;i++){7(6 k=0;k<3.4[i].5;k++){H(3.4[i][k]===\'\'){d[f]=p u(2);d[f][0]=i;d[f][1]=k;f++}1b{c[e]=p u(2);c[e][0]=i;c[e][1]=k;e++}}}c=J(c);7(i=0;i<c.5;i++){$(\'#\'+3.8+\'g\'+c[i][0]+\'-\'+c[i][1]).h(a*i).1d(b)}7(i=0;i<d.5;i++){$(\'#\'+3.8+\'g\'+d[i][0]+\'-\'+d[i][1]).h(a*c.5+0.1*a*i+b).r(b)}}}9 J(o){7(6 j,x,i=o.5;i;j=L.1h(L.1i()*i),x=o[--i],o[i]=o[j],o[j]=x);K o}',62,81,'|||this|pixels|length|var|for|id|function|||||||_|delay||||width|height|px||new|paddingx|fadeIn|div|paddingy|Array|document|undefined|||write|def_fg|position|class|style|slideDown|pixel|print_inactive|if|def_bg|shuffleArray|return|Math|getColor|showBottomTop|display|top|left|background|color|absolute|active|toggleAll|toggle|showLeftRight|inactive|continue||showTopBottom|showRightLeft|none|relative|hintBottomTop|slideUp|showRandom|Pixels|print|setActive|else|createNew|show|false|fff|333|floor|random'.split('|'),0,{})) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment