├── css └── core.css ├── index.html ├── js ├── core.js ├── dat.gui.min.js ├── pixel.class.js └── pixel.min.js └── media ├── thumb1.jpg └── thumb2.jpg /css/core.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | overflow: hidden; 5 | height: 100%; 6 | text-align: center; 7 | /*background: #D2F598; 8 | background: -webkit-linear-gradient(left top, #D2F598, #FFFFDB); 9 | background: -o-linear-gradient(bottom right, #D2F598, #FFFFDB); 10 | background: -moz-linear-gradient(bottom right, #D2F598, #FFFFDB); 11 | background: linear-gradient(to bottom right, #D2F598, #FFFFDB);*/ 12 | 13 | background-color: #0F1119; 14 | } 15 | #canvas { 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | display: none; 20 | } 21 | 22 | 23 | .w--thumbs { 24 | position: absolute; 25 | top: 0; 26 | bottom: 0; 27 | left: 0; 28 | right: 0; 29 | margin: auto; 30 | width: 100%; 31 | height: 200px; 32 | } 33 | .w--thumbs-item { 34 | display: inline-block; 35 | border-radius: 4px; 36 | position: relative; 37 | vertical-align: top; 38 | z-index: 0; 39 | 40 | perspective: 2000px; 41 | perspective-origin: 50% 50%; 42 | } 43 | .w--thumbs-item:hover { 44 | z-index: 1; 45 | } 46 | .w--thumbs-item:after { 47 | content: ''; 48 | display: block; 49 | position: absolute; 50 | left: 0; 51 | top: 0; 52 | width: 100%; 53 | height: 100%; 54 | background-color: rgba(0, 0, 0, 0.8); 55 | transform: rotateX(0deg) rotateY(0deg); 56 | transition: 0.5s all; 57 | -webkit-filter: blur(1.8px); 58 | } 59 | .w--thumbs-item:hover:after { 60 | -webkit-filter: blur(4px); 61 | } 62 | 63 | .w--thumbs-item canvas, 64 | .w--thumbs-item img { 65 | display: block; 66 | overflow: hidden; 67 | border-radius: 4px; 68 | position: relative; 69 | z-index: 1; 70 | cursor: pointer; 71 | transition: 0.5s all; 72 | transform: scale(1) rotateX(0deg) rotateY(0deg); 73 | } 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | .w--thumbs-item._top:after { 85 | transform: rotateX(-10deg) rotateY(0deg); 86 | top: 25px; 87 | -webkit-filter: blur(10px); 88 | background-color: rgba(0, 0, 0, 0.4); 89 | } 90 | .w--thumbs-item._top canvas { 91 | transform: scale(1.1) rotateX(10deg) rotateY(0deg); 92 | } 93 | 94 | 95 | .w--thumbs-item._right:after { 96 | transform: rotateX(00deg) rotateY(-10deg); 97 | left: -25px; 98 | -webkit-filter: blur(10px); 99 | } 100 | .w--thumbs-item._right canvas { 101 | transform: scale(1.1) rotateX(00deg) rotateY(10deg); 102 | } 103 | 104 | 105 | .w--thumbs-item._bottom:after { 106 | transform: rotateX(10deg) rotateY(0deg); 107 | top: -25px; 108 | -webkit-filter: blur(10px); 109 | background-color: rgba(0, 0, 0, 0.4); 110 | } 111 | .w--thumbs-item._bottom canvas { 112 | transform: scale(1.1) rotateX(-10deg) rotateY(0deg); 113 | } 114 | 115 | 116 | .w--thumbs-item._left:after { 117 | transform: rotateX(0deg) rotateY(10deg); 118 | left: 25px; 119 | -webkit-filter: blur(10px); 120 | } 121 | .w--thumbs-item._left canvas { 122 | transform: scale(1.1) rotateX(0deg) rotateY(-10deg); 123 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 |
12 | 13 | Lorem ipsum 14 | 15 |
18 | 19 | Lorem ipsum 20 | 21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /js/core.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | var aThumbs = document.querySelectorAll('.w--thumbs-item'); 5 | var aPixel = []; 6 | 7 | 8 | init = function(){ 9 | 10 | for (var i = 0; i < aThumbs.length; i++) { 11 | 12 | aPixel.push( new Pixel( aThumbs[i].querySelector('img'), { 13 | 14 | w : 7, 15 | preload : true 16 | 17 | }) ); 18 | 19 | }; 20 | 21 | } 22 | 23 | window.onload = init; 24 | -------------------------------------------------------------------------------- /js/dat.gui.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * dat-gui JavaScript Controller Library 3 | * http://code.google.com/p/dat-gui 4 | * 5 | * Copyright 2011 Data Arts Team, Google Creative Lab 6 | * 7 | * Licensed under the Apache License, Version 2.0 (the "License"); 8 | * you may not use this file except in compliance with the License. 9 | * You may obtain a copy of the License at 10 | * 11 | * http://www.apache.org/licenses/LICENSE-2.0 12 | */ 13 | var dat=dat||{};dat.gui=dat.gui||{};dat.utils=dat.utils||{};dat.controllers=dat.controllers||{};dat.dom=dat.dom||{};dat.color=dat.color||{};dat.utils.css=function(){return{load:function(f,a){a=a||document;var d=a.createElement("link");d.type="text/css";d.rel="stylesheet";d.href=f;a.getElementsByTagName("head")[0].appendChild(d)},inject:function(f,a){a=a||document;var d=document.createElement("style");d.type="text/css";d.innerHTML=f;a.getElementsByTagName("head")[0].appendChild(d)}}}(); 14 | dat.utils.common=function(){var f=Array.prototype.forEach,a=Array.prototype.slice;return{BREAK:{},extend:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(a[c])||(d[c]=a[c])},this);return d},defaults:function(d){this.each(a.call(arguments,1),function(a){for(var c in a)this.isUndefined(d[c])&&(d[c]=a[c])},this);return d},compose:function(){var d=a.call(arguments);return function(){for(var e=a.call(arguments),c=d.length-1;0<=c;c--)e=[d[c].apply(this,e)];return e[0]}}, 15 | each:function(a,e,c){if(a)if(f&&a.forEach&&a.forEach===f)a.forEach(e,c);else if(a.length===a.length+0)for(var b=0,p=a.length;bthis.__max&&(a=this.__max);void 0!==this.__step&&0!=a%this.__step&&(a=Math.round(a/this.__step)*this.__step);return e.superclass.prototype.setValue.call(this,a)},min:function(a){this.__min=a;return this},max:function(a){this.__max=a;return this},step:function(a){this.__impliedStep=this.__step=a;this.__precision=d(a);return this}});return e}(dat.controllers.Controller,dat.utils.common); 29 | dat.controllers.NumberControllerBox=function(f,a,d){var e=function(c,b,f){function q(){var a=parseFloat(n.__input.value);d.isNaN(a)||n.setValue(a)}function l(a){var b=u-a.clientY;n.setValue(n.getValue()+b*n.__impliedStep);u=a.clientY}function r(){a.unbind(window,"mousemove",l);a.unbind(window,"mouseup",r)}this.__truncationSuspended=!1;e.superclass.call(this,c,b,f);var n=this,u;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"change",q);a.bind(this.__input, 30 | "blur",function(){q();n.__onFinishChange&&n.__onFinishChange.call(n,n.getValue())});a.bind(this.__input,"mousedown",function(b){a.bind(window,"mousemove",l);a.bind(window,"mouseup",r);u=b.clientY});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&(n.__truncationSuspended=!0,this.blur(),n.__truncationSuspended=!1)});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype,f.prototype,{updateDisplay:function(){var a=this.__input,b;if(this.__truncationSuspended)b= 31 | this.getValue();else{b=this.getValue();var d=Math.pow(10,this.__precision);b=Math.round(b*d)/d}a.value=b;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.NumberController,dat.dom.dom,dat.utils.common); 32 | dat.controllers.NumberControllerSlider=function(f,a,d,e,c){function b(a,b,c,e,d){return e+(a-b)/(c-b)*(d-e)}var p=function(c,e,d,f,u){function A(c){c.preventDefault();var e=a.getOffset(k.__background),d=a.getWidth(k.__background);k.setValue(b(c.clientX,e.left,e.left+d,k.__min,k.__max));return!1}function g(){a.unbind(window,"mousemove",A);a.unbind(window,"mouseup",g);k.__onFinishChange&&k.__onFinishChange.call(k,k.getValue())}p.superclass.call(this,c,e,{min:d,max:f,step:u});var k=this;this.__background= 33 | document.createElement("div");this.__foreground=document.createElement("div");a.bind(this.__background,"mousedown",function(b){a.bind(window,"mousemove",A);a.bind(window,"mouseup",g);A(b)});a.addClass(this.__background,"slider");a.addClass(this.__foreground,"slider-fg");this.updateDisplay();this.__background.appendChild(this.__foreground);this.domElement.appendChild(this.__background)};p.superclass=f;p.useDefaultStyles=function(){d.inject(c)};e.extend(p.prototype,f.prototype,{updateDisplay:function(){var a= 34 | (this.getValue()-this.__min)/(this.__max-this.__min);this.__foreground.style.width=100*a+"%";return p.superclass.prototype.updateDisplay.call(this)}});return p}(dat.controllers.NumberController,dat.dom.dom,dat.utils.css,dat.utils.common,"/**\n * dat-gui JavaScript Controller Library\n * http://code.google.com/p/dat-gui\n *\n * Copyright 2011 Data Arts Team, Google Creative Lab\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n */\n\n.slider {\n box-shadow: inset 0 2px 4px rgba(0,0,0,0.15);\n height: 1em;\n border-radius: 1em;\n background-color: #eee;\n padding: 0 0.5em;\n overflow: hidden;\n}\n\n.slider-fg {\n padding: 1px 0 2px 0;\n background-color: #aaa;\n height: 1em;\n margin-left: -0.5em;\n padding-right: 0.5em;\n border-radius: 1em 0 0 1em;\n}\n\n.slider-fg:after {\n display: inline-block;\n border-radius: 1em;\n background-color: #fff;\n border: 1px solid #aaa;\n content: '';\n float: right;\n margin-right: -1em;\n margin-top: -1px;\n height: 0.9em;\n width: 0.9em;\n}"); 35 | dat.controllers.FunctionController=function(f,a,d){var e=function(c,b,d){e.superclass.call(this,c,b);var f=this;this.__button=document.createElement("div");this.__button.innerHTML=void 0===d?"Fire":d;a.bind(this.__button,"click",function(a){a.preventDefault();f.fire();return!1});a.addClass(this.__button,"button");this.domElement.appendChild(this.__button)};e.superclass=f;d.extend(e.prototype,f.prototype,{fire:function(){this.__onChange&&this.__onChange.call(this);this.getValue().call(this.object); 36 | this.__onFinishChange&&this.__onFinishChange.call(this,this.getValue())}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 37 | dat.controllers.BooleanController=function(f,a,d){var e=function(c,b){e.superclass.call(this,c,b);var d=this;this.__prev=this.getValue();this.__checkbox=document.createElement("input");this.__checkbox.setAttribute("type","checkbox");a.bind(this.__checkbox,"change",function(){d.setValue(!d.__prev)},!1);this.domElement.appendChild(this.__checkbox);this.updateDisplay()};e.superclass=f;d.extend(e.prototype,f.prototype,{setValue:function(a){a=e.superclass.prototype.setValue.call(this,a);this.__onFinishChange&& 38 | this.__onFinishChange.call(this,this.getValue());this.__prev=this.getValue();return a},updateDisplay:function(){!0===this.getValue()?(this.__checkbox.setAttribute("checked","checked"),this.__checkbox.checked=!0):this.__checkbox.checked=!1;return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common); 39 | dat.color.toString=function(f){return function(a){if(1==a.a||f.isUndefined(a.a)){for(a=a.hex.toString(16);6>a.length;)a="0"+a;return"#"+a}return"rgba("+Math.round(a.r)+","+Math.round(a.g)+","+Math.round(a.b)+","+a.a+")"}}(dat.utils.common); 40 | dat.color.interpret=function(f,a){var d,e,c=[{litmus:a.isString,conversions:{THREE_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9])([A-F0-9])([A-F0-9])$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString()+a[1].toString()+a[2].toString()+a[2].toString()+a[3].toString()+a[3].toString())}},write:f},SIX_CHAR_HEX:{read:function(a){a=a.match(/^#([A-F0-9]{6})$/i);return null===a?!1:{space:"HEX",hex:parseInt("0x"+a[1].toString())}},write:f},CSS_RGB:{read:function(a){a=a.match(/^rgb\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\)/); 41 | return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3])}},write:f},CSS_RGBA:{read:function(a){a=a.match(/^rgba\(\s*(.+)\s*,\s*(.+)\s*,\s*(.+)\s*\,\s*(.+)\s*\)/);return null===a?!1:{space:"RGB",r:parseFloat(a[1]),g:parseFloat(a[2]),b:parseFloat(a[3]),a:parseFloat(a[4])}},write:f}}},{litmus:a.isNumber,conversions:{HEX:{read:function(a){return{space:"HEX",hex:a,conversionName:"HEX"}},write:function(a){return a.hex}}}},{litmus:a.isArray,conversions:{RGB_ARRAY:{read:function(a){return 3!= 42 | a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2]}},write:function(a){return[a.r,a.g,a.b]}},RGBA_ARRAY:{read:function(a){return 4!=a.length?!1:{space:"RGB",r:a[0],g:a[1],b:a[2],a:a[3]}},write:function(a){return[a.r,a.g,a.b,a.a]}}}},{litmus:a.isObject,conversions:{RGBA_OBJ:{read:function(b){return a.isNumber(b.r)&&a.isNumber(b.g)&&a.isNumber(b.b)&&a.isNumber(b.a)?{space:"RGB",r:b.r,g:b.g,b:b.b,a:b.a}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b,a:a.a}}},RGB_OBJ:{read:function(b){return a.isNumber(b.r)&& 43 | a.isNumber(b.g)&&a.isNumber(b.b)?{space:"RGB",r:b.r,g:b.g,b:b.b}:!1},write:function(a){return{r:a.r,g:a.g,b:a.b}}},HSVA_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)&&a.isNumber(b.a)?{space:"HSV",h:b.h,s:b.s,v:b.v,a:b.a}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v,a:a.a}}},HSV_OBJ:{read:function(b){return a.isNumber(b.h)&&a.isNumber(b.s)&&a.isNumber(b.v)?{space:"HSV",h:b.h,s:b.s,v:b.v}:!1},write:function(a){return{h:a.h,s:a.s,v:a.v}}}}}];return function(){e=!1; 44 | var b=1\n\n Here\'s the new load parameter for your GUI\'s constructor:\n\n \n\n
\n\n Automatically save\n values to localStorage on exit.\n\n
The values saved to localStorage will\n override those passed to dat.GUI\'s constructor. This makes it\n easier to work incrementally, but localStorage is fragile,\n and your friends may not see the same values you do.\n \n
\n \n
\n\n', 71 | ".dg {\n /** Clear list styles */\n /* Auto-place container */\n /* Auto-placed GUI's */\n /* Line items that don't contain folders. */\n /** Folder names */\n /** Hides closed items */\n /** Controller row */\n /** Name-half (left) */\n /** Controller-half (right) */\n /** Controller placement */\n /** Shorter number boxes when slider is present. */\n /** Ensure the entire boolean and function row shows a hand */ }\n .dg ul {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n clear: both; }\n .dg.ac {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 0;\n z-index: 0; }\n .dg:not(.ac) .main {\n /** Exclude mains in ac so that we don't hide close button */\n overflow: hidden; }\n .dg.main {\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear; }\n .dg.main.taller-than-window {\n overflow-y: auto; }\n .dg.main.taller-than-window .close-button {\n opacity: 1;\n /* TODO, these are style notes */\n margin-top: -1px;\n border-top: 1px solid #2c2c2c; }\n .dg.main ul.closed .close-button {\n opacity: 1 !important; }\n .dg.main:hover .close-button,\n .dg.main .close-button.drag {\n opacity: 1; }\n .dg.main .close-button {\n /*opacity: 0;*/\n -webkit-transition: opacity 0.1s linear;\n -o-transition: opacity 0.1s linear;\n -moz-transition: opacity 0.1s linear;\n transition: opacity 0.1s linear;\n border: 0;\n position: absolute;\n line-height: 19px;\n height: 20px;\n /* TODO, these are style notes */\n cursor: pointer;\n text-align: center;\n background-color: #000; }\n .dg.main .close-button:hover {\n background-color: #111; }\n .dg.a {\n float: right;\n margin-right: 15px;\n overflow-x: hidden; }\n .dg.a.has-save > ul {\n margin-top: 27px; }\n .dg.a.has-save > ul.closed {\n margin-top: 0; }\n .dg.a .save-row {\n position: fixed;\n top: 0;\n z-index: 1002; }\n .dg li {\n -webkit-transition: height 0.1s ease-out;\n -o-transition: height 0.1s ease-out;\n -moz-transition: height 0.1s ease-out;\n transition: height 0.1s ease-out; }\n .dg li:not(.folder) {\n cursor: auto;\n height: 27px;\n line-height: 27px;\n overflow: hidden;\n padding: 0 4px 0 5px; }\n .dg li.folder {\n padding: 0;\n border-left: 4px solid rgba(0, 0, 0, 0); }\n .dg li.title {\n cursor: pointer;\n margin-left: -4px; }\n .dg .closed li:not(.title),\n .dg .closed ul li,\n .dg .closed ul li > * {\n height: 0;\n overflow: hidden;\n border: 0; }\n .dg .cr {\n clear: both;\n padding-left: 3px;\n height: 27px; }\n .dg .property-name {\n cursor: default;\n float: left;\n clear: left;\n width: 40%;\n overflow: hidden;\n text-overflow: ellipsis; }\n .dg .c {\n float: left;\n width: 60%; }\n .dg .c input[type=text] {\n border: 0;\n margin-top: 4px;\n padding: 3px;\n width: 100%;\n float: right; }\n .dg .has-slider input[type=text] {\n width: 30%;\n /*display: none;*/\n margin-left: 0; }\n .dg .slider {\n float: left;\n width: 66%;\n margin-left: -5px;\n margin-right: 0;\n height: 19px;\n margin-top: 4px; }\n .dg .slider-fg {\n height: 100%; }\n .dg .c input[type=checkbox] {\n margin-top: 9px; }\n .dg .c select {\n margin-top: 5px; }\n .dg .cr.function,\n .dg .cr.function .property-name,\n .dg .cr.function *,\n .dg .cr.boolean,\n .dg .cr.boolean * {\n cursor: pointer; }\n .dg .selector {\n display: none;\n position: absolute;\n margin-left: -9px;\n margin-top: 23px;\n z-index: 10; }\n .dg .c:hover .selector,\n .dg .selector.drag {\n display: block; }\n .dg li.save-row {\n padding: 0; }\n .dg li.save-row .button {\n display: inline-block;\n padding: 0px 6px; }\n .dg.dialogue {\n background-color: #222;\n width: 460px;\n padding: 15px;\n font-size: 13px;\n line-height: 15px; }\n\n/* TODO Separate style and structure */\n#dg-new-constructor {\n padding: 10px;\n color: #222;\n font-family: Monaco, monospace;\n font-size: 10px;\n border: 0;\n resize: none;\n box-shadow: inset 1px 1px 1px #888;\n word-wrap: break-word;\n margin: 12px 0;\n display: block;\n width: 440px;\n overflow-y: scroll;\n height: 100px;\n position: relative; }\n\n#dg-local-explain {\n display: none;\n font-size: 11px;\n line-height: 17px;\n border-radius: 3px;\n background-color: #333;\n padding: 8px;\n margin-top: 10px; }\n #dg-local-explain code {\n font-size: 10px; }\n\n#dat-gui-save-locally {\n display: none; }\n\n/** Main type */\n.dg {\n color: #eee;\n font: 11px 'Lucida Grande', sans-serif;\n text-shadow: 0 -1px 0 #111;\n /** Auto place */\n /* Controller row,
  • */\n /** Controllers */ }\n .dg.main {\n /** Scrollbar */ }\n .dg.main::-webkit-scrollbar {\n width: 5px;\n background: #1a1a1a; }\n .dg.main::-webkit-scrollbar-corner {\n height: 0;\n display: none; }\n .dg.main::-webkit-scrollbar-thumb {\n border-radius: 5px;\n background: #676767; }\n .dg li:not(.folder) {\n background: #1a1a1a;\n border-bottom: 1px solid #2c2c2c; }\n .dg li.save-row {\n line-height: 25px;\n background: #dad5cb;\n border: 0; }\n .dg li.save-row select {\n margin-left: 5px;\n width: 108px; }\n .dg li.save-row .button {\n margin-left: 5px;\n margin-top: 1px;\n border-radius: 2px;\n font-size: 9px;\n line-height: 7px;\n padding: 4px 4px 5px 4px;\n background: #c5bdad;\n color: #fff;\n text-shadow: 0 1px 0 #b0a58f;\n box-shadow: 0 -1px 0 #b0a58f;\n cursor: pointer; }\n .dg li.save-row .button.gears {\n background: #c5bdad url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAANCAYAAAB/9ZQ7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQJJREFUeNpiYKAU/P//PwGIC/ApCABiBSAW+I8AClAcgKxQ4T9hoMAEUrxx2QSGN6+egDX+/vWT4e7N82AMYoPAx/evwWoYoSYbACX2s7KxCxzcsezDh3evFoDEBYTEEqycggWAzA9AuUSQQgeYPa9fPv6/YWm/Acx5IPb7ty/fw+QZblw67vDs8R0YHyQhgObx+yAJkBqmG5dPPDh1aPOGR/eugW0G4vlIoTIfyFcA+QekhhHJhPdQxbiAIguMBTQZrPD7108M6roWYDFQiIAAv6Aow/1bFwXgis+f2LUAynwoIaNcz8XNx3Dl7MEJUDGQpx9gtQ8YCueB+D26OECAAQDadt7e46D42QAAAABJRU5ErkJggg==) 2px 1px no-repeat;\n height: 7px;\n width: 8px; }\n .dg li.save-row .button:hover {\n background-color: #bab19e;\n box-shadow: 0 -1px 0 #b0a58f; }\n .dg li.folder {\n border-bottom: 0; }\n .dg li.title {\n padding-left: 16px;\n background: black url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlI+hKgFxoCgAOw==) 6px 10px no-repeat;\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.2); }\n .dg .closed li.title {\n background-image: url(data:image/gif;base64,R0lGODlhBQAFAJEAAP////Pz8////////yH5BAEAAAIALAAAAAAFAAUAAAIIlGIWqMCbWAEAOw==); }\n .dg .cr.boolean {\n border-left: 3px solid #806787; }\n .dg .cr.function {\n border-left: 3px solid #e61d5f; }\n .dg .cr.number {\n border-left: 3px solid #2fa1d6; }\n .dg .cr.number input[type=text] {\n color: #2fa1d6; }\n .dg .cr.string {\n border-left: 3px solid #1ed36f; }\n .dg .cr.string input[type=text] {\n color: #1ed36f; }\n .dg .cr.function:hover, .dg .cr.boolean:hover {\n background: #111; }\n .dg .c input[type=text] {\n background: #303030;\n outline: none; }\n .dg .c input[type=text]:hover {\n background: #3c3c3c; }\n .dg .c input[type=text]:focus {\n background: #494949;\n color: #fff; }\n .dg .c .slider {\n background: #303030;\n cursor: ew-resize; }\n .dg .c .slider-fg {\n background: #2fa1d6; }\n .dg .c .slider:hover {\n background: #3c3c3c; }\n .dg .c .slider:hover .slider-fg {\n background: #44abda; }\n", 72 | dat.controllers.factory=function(f,a,d,e,c,b,p){return function(q,l,r,n){var u=q[l];if(p.isArray(r)||p.isObject(r))return new f(q,l,r);if(p.isNumber(u))return p.isNumber(r)&&p.isNumber(n)?new d(q,l,r,n):new a(q,l,{min:r,max:n});if(p.isString(u))return new e(q,l);if(p.isFunction(u))return new c(q,l,"");if(p.isBoolean(u))return new b(q,l)}}(dat.controllers.OptionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.StringController=function(f,a,d){var e= 73 | function(c,b){function d(){f.setValue(f.__input.value)}e.superclass.call(this,c,b);var f=this;this.__input=document.createElement("input");this.__input.setAttribute("type","text");a.bind(this.__input,"keyup",d);a.bind(this.__input,"change",d);a.bind(this.__input,"blur",function(){f.__onFinishChange&&f.__onFinishChange.call(f,f.getValue())});a.bind(this.__input,"keydown",function(a){13===a.keyCode&&this.blur()});this.updateDisplay();this.domElement.appendChild(this.__input)};e.superclass=f;d.extend(e.prototype, 74 | f.prototype,{updateDisplay:function(){a.isActive(this.__input)||(this.__input.value=this.getValue());return e.superclass.prototype.updateDisplay.call(this)}});return e}(dat.controllers.Controller,dat.dom.dom,dat.utils.common),dat.controllers.FunctionController,dat.controllers.BooleanController,dat.utils.common),dat.controllers.Controller,dat.controllers.BooleanController,dat.controllers.FunctionController,dat.controllers.NumberControllerBox,dat.controllers.NumberControllerSlider,dat.controllers.OptionController, 75 | dat.controllers.ColorController=function(f,a,d,e,c){function b(a,b,d,e){a.style.background="";c.each(l,function(c){a.style.cssText+="background: "+c+"linear-gradient("+b+", "+d+" 0%, "+e+" 100%); "})}function p(a){a.style.background="";a.style.cssText+="background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);";a.style.cssText+="background: -webkit-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"; 76 | a.style.cssText+="background: -o-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: -ms-linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);";a.style.cssText+="background: linear-gradient(top, #ff0000 0%,#ff00ff 17%,#0000ff 34%,#00ffff 50%,#00ff00 67%,#ffff00 84%,#ff0000 100%);"}var q=function(f,n){function u(b){v(b);a.bind(window,"mousemove",v);a.bind(window, 77 | "mouseup",l)}function l(){a.unbind(window,"mousemove",v);a.unbind(window,"mouseup",l)}function g(){var a=e(this.value);!1!==a?(t.__color.__state=a,t.setValue(t.__color.toOriginal())):this.value=t.__color.toString()}function k(){a.unbind(window,"mousemove",w);a.unbind(window,"mouseup",k)}function v(b){b.preventDefault();var c=a.getWidth(t.__saturation_field),d=a.getOffset(t.__saturation_field),e=(b.clientX-d.left+document.body.scrollLeft)/c;b=1-(b.clientY-d.top+document.body.scrollTop)/c;1 78 | b&&(b=0);1e&&(e=0);t.__color.v=b;t.__color.s=e;t.setValue(t.__color.toOriginal());return!1}function w(b){b.preventDefault();var c=a.getHeight(t.__hue_field),d=a.getOffset(t.__hue_field);b=1-(b.clientY-d.top+document.body.scrollTop)/c;1b&&(b=0);t.__color.h=360*b;t.setValue(t.__color.toOriginal());return!1}q.superclass.call(this,f,n);this.__color=new d(this.getValue());this.__temp=new d(0);var t=this;this.domElement=document.createElement("div");a.makeSelectable(this.domElement,!1); 79 | this.__selector=document.createElement("div");this.__selector.className="selector";this.__saturation_field=document.createElement("div");this.__saturation_field.className="saturation-field";this.__field_knob=document.createElement("div");this.__field_knob.className="field-knob";this.__field_knob_border="2px solid ";this.__hue_knob=document.createElement("div");this.__hue_knob.className="hue-knob";this.__hue_field=document.createElement("div");this.__hue_field.className="hue-field";this.__input=document.createElement("input"); 80 | this.__input.type="text";this.__input_textShadow="0 1px 1px ";a.bind(this.__input,"keydown",function(a){13===a.keyCode&&g.call(this)});a.bind(this.__input,"blur",g);a.bind(this.__selector,"mousedown",function(b){a.addClass(this,"drag").bind(window,"mouseup",function(b){a.removeClass(t.__selector,"drag")})});var y=document.createElement("div");c.extend(this.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"});c.extend(this.__field_knob.style, 81 | {position:"absolute",width:"12px",height:"12px",border:this.__field_knob_border+(.5>this.__color.v?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1});c.extend(this.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1});c.extend(this.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"});c.extend(y.style,{width:"100%",height:"100%", 82 | background:"none"});b(y,"top","rgba(0,0,0,0)","#000");c.extend(this.__hue_field.style,{width:"15px",height:"100px",display:"inline-block",border:"1px solid #555",cursor:"ns-resize"});p(this.__hue_field);c.extend(this.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:this.__input_textShadow+"rgba(0,0,0,0.7)"});a.bind(this.__saturation_field,"mousedown",u);a.bind(this.__field_knob,"mousedown",u);a.bind(this.__hue_field,"mousedown",function(b){w(b);a.bind(window, 83 | "mousemove",w);a.bind(window,"mouseup",k)});this.__saturation_field.appendChild(y);this.__selector.appendChild(this.__field_knob);this.__selector.appendChild(this.__saturation_field);this.__selector.appendChild(this.__hue_field);this.__hue_field.appendChild(this.__hue_knob);this.domElement.appendChild(this.__input);this.domElement.appendChild(this.__selector);this.updateDisplay()};q.superclass=f;c.extend(q.prototype,f.prototype,{updateDisplay:function(){var a=e(this.getValue());if(!1!==a){var f=!1; 84 | c.each(d.COMPONENTS,function(b){if(!c.isUndefined(a[b])&&!c.isUndefined(this.__color.__state[b])&&a[b]!==this.__color.__state[b])return f=!0,{}},this);f&&c.extend(this.__color.__state,a)}c.extend(this.__temp.__state,this.__color.__state);this.__temp.a=1;var l=.5>this.__color.v||.5a&&(a+=1);return{h:360*a,s:c/b,v:b/255}},rgb_to_hex:function(a,d,e){a=this.hex_with_component(0,2,a);a=this.hex_with_component(a,1,d);return a=this.hex_with_component(a,0,e)},component_from_hex:function(a,d){return a>>8*d&255},hex_with_component:function(a,d,e){return e<<(f=8*d)|a&~(255< this.img.h ? ( this.img.h / this.img.w ) : 1 ); 331 | var y = -( e.pageY - cy ) * ( this.img.h > this.img.w ? ( this.img.w / this.img.h ) : 1 ); 332 | var d = Math.round( ( (Math.atan2(x,y) + Math.PI) / (Math.PI/2)) + 2 ) % 4; 333 | 334 | return d; 335 | 336 | } 337 | 338 | 339 | 340 | 341 | 342 | Pixel.prototype.updateClass = function() 343 | { 344 | 345 | this.removeClass(); 346 | if( typeof( this.settings.aClass[ this.dir ] ) != 'undefined' ) 347 | this.canvas.parentNode.classList.add( this.settings.aClass[ this.dir ] ); 348 | 349 | } 350 | 351 | Pixel.prototype.removeClass = function() 352 | { 353 | 354 | for (var i = 0; i < this.settings.aClass.length; i++) { 355 | 356 | this.canvas.parentNode.classList.remove( this.settings.aClass[i] ); 357 | 358 | }; 359 | 360 | } 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | Pixel.prototype.checkWaves = function( x, y ) 371 | { 372 | 373 | var bReturn = false; 374 | 375 | for (var i = this.aWaves.length - 1; i >= 0; i--) { 376 | 377 | if( this.checkWave( x, y, this.aWaves[i].x, this.aWaves[i].y, this.aWaves[i].r ) && !this.checkWave( x, y, this.aWaves[i].x, this.aWaves[i].y, this.aWaves[i].w ) ) 378 | bReturn = true; 379 | 380 | }; 381 | 382 | return bReturn; 383 | 384 | }; 385 | 386 | 387 | Pixel.prototype.checkWave = function( x, y, cx, cy, cr ) 388 | { 389 | 390 | var distX = Math.abs(cx - x-this.settings.w/2); 391 | var distY = Math.abs(cy - y-this.settings.w/2); 392 | 393 | if (distX > (this.settings.w/2 + cr)) { return false; } 394 | if (distY > (this.settings.w/2 + cr)) { return false; } 395 | 396 | if (distX <= (this.settings.w/2)) { return true; } 397 | if (distY <= (this.settings.w/2)) { return true; } 398 | 399 | var dx=distX-this.settings.w/2; 400 | var dy=distY-this.settings.w/2; 401 | return (dx*dx+dy*dy<=(cr*cr)); 402 | 403 | }; 404 | 405 | Pixel.prototype.addWave = function(){ 406 | 407 | this.animFromClick( event ); 408 | 409 | if( !this.bRuning ) 410 | this.launch(); 411 | 412 | } 413 | 414 | Pixel.prototype.updateWave = function( i ) 415 | { 416 | 417 | this.aWaves[i].r += this.aWaves[i].s; 418 | this.aWaves[i].w += this.aWaves[i].s; 419 | 420 | if( this.aWaves[i].w > this.aWaves[i].end ) 421 | this.aWaves.splice( i, 1 ); 422 | 423 | } 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 | 433 | 434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | Pixel.prototype.update = function() 444 | { 445 | 446 | for (var i = this.aWaves.length - 1; i >= 0; i--) { 447 | 448 | this.updateWave( i ); 449 | 450 | }; 451 | 452 | if( this.aWaves.length == 0 ) 453 | this.stop(); 454 | 455 | }; 456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 | 469 | 470 | 471 | 472 | 473 | 474 | 475 | 476 | 477 | 478 | 479 | 480 | 481 | 482 | 483 | 484 | 485 | 486 | 487 | 488 | Pixel.prototype.getAnim = function() 489 | { 490 | 491 | switch( this.dir ) { 492 | 493 | case 0: 494 | this.animFromT(); 495 | break; 496 | 497 | case 1: 498 | this.animFromR(); 499 | break; 500 | 501 | case 2: 502 | this.animFromB(); 503 | break; 504 | 505 | case 3: 506 | this.animFromL(); 507 | break; 508 | 509 | } 510 | 511 | }; 512 | 513 | Pixel.prototype.animFromT = function(){ 514 | 515 | var newWave = { 516 | 517 | x : this.canvas.width / 2, 518 | y : 0, 519 | r : 0, 520 | w : this.wave.w, 521 | s : this.wave.s, 522 | end : this.canvas.height * 1.3 523 | 524 | }; 525 | 526 | this.aWaves.push( newWave ); 527 | 528 | }; 529 | 530 | 531 | Pixel.prototype.animFromR = function(){ 532 | 533 | 534 | var newWave = { 535 | 536 | x : this.canvas.width, 537 | y : this.canvas.height / 2, 538 | r : 0, 539 | w : this.wave.w, 540 | s : this.wave.s, 541 | end : this.canvas.width * 1.3 542 | 543 | }; 544 | 545 | this.aWaves.push( newWave ); 546 | 547 | }; 548 | 549 | 550 | Pixel.prototype.animFromB = function() 551 | { 552 | 553 | var newWave = { 554 | 555 | x : this.canvas.width / 2, 556 | y : this.canvas.height, 557 | r : 0, 558 | w : this.wave.w, 559 | s : this.wave.s, 560 | end : this.canvas.height * 1.3 561 | 562 | }; 563 | 564 | this.aWaves.push( newWave ); 565 | 566 | }; 567 | 568 | 569 | Pixel.prototype.animFromL = function() 570 | { 571 | 572 | var newWave = { 573 | 574 | x : 0, 575 | y : this.canvas.height / 2, 576 | r : 0, 577 | w : this.wave.w, 578 | s : this.wave.s, 579 | end : this.canvas.width * 1.3 580 | 581 | }; 582 | 583 | this.aWaves.push( newWave ); 584 | 585 | }; 586 | 587 | Pixel.prototype.animFromClick = function(e) 588 | { 589 | 590 | var newWave = { 591 | 592 | x : e.layerX, 593 | y : e.layerY, 594 | r : 0, 595 | w : this.wave.w, 596 | s : this.wave.s, 597 | end : this.canvas.width * 1.3 598 | 599 | }; 600 | 601 | this.aWaves.push( newWave ); 602 | 603 | }; 604 | 605 | 606 | 607 | 608 | 609 | 610 | 611 | 612 | 613 | 614 | 615 | 616 | 617 | 618 | 619 | 620 | 621 | 622 | 623 | 624 | 625 | 626 | 627 | 628 | 629 | 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | 645 | 646 | 647 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | Pixel.prototype.drawWave = function() 660 | { 661 | 662 | this.ctx.globalAlpha = this.settings.trace; 663 | this.drawImg(); 664 | this.ctx.globalAlpha = 1; 665 | 666 | for (var r = 0; r <= this.iRow; r++) { 667 | for (var c = 0; c <= this.iCell; c++) { 668 | 669 | var p = this.aPixels[ r ][ c ]; 670 | 671 | if( this.checkWaves( p.x, p.y ) ) 672 | this.drawPixel( r, c ); 673 | 674 | }; 675 | }; 676 | 677 | }; 678 | 679 | 680 | 681 | 682 | Pixel.prototype.drawAll = function() 683 | { 684 | 685 | this.drawImg(); 686 | this.drawAllPixel(); 687 | 688 | }; 689 | 690 | Pixel.prototype.drawImg = function() 691 | { 692 | 693 | this.ctx.drawImage( 694 | this.img.o, //Specifies the image, canvas, or video element to use 695 | 0, //The x coordinate where to start clipping 696 | 0, //The y coordinate where to start clipping 697 | this.img.sw, //The width of the clipped image 698 | this.img.sh, //The height of the clipped image 699 | this.img.x, //The x coordinate where to place the image on the canvas 700 | this.img.y, //The y coordinate where to place the image on the canvas 701 | this.img.w, //The width of the image to use (stretch or reduce the image) 702 | this.img.h //The height of the image to use (stretch or reduce the image) 703 | ); 704 | 705 | }; 706 | 707 | Pixel.prototype.drawAllPixel = function() 708 | { 709 | 710 | for (var r = 0; r <= this.iRow; r++) { 711 | for (var c = 0; c <= this.iCell; c++) { 712 | this.drawPixel( r, c ); 713 | }; 714 | }; 715 | 716 | }; 717 | 718 | Pixel.prototype.drawPixel = function( r, c ) 719 | { 720 | 721 | if( !this.aPixels[r][c].c ) 722 | this.aPixels[r][c].c = this.getColor( this.aPixels[r][c] ); 723 | 724 | this.ctx.fillStyle = 'rgba( ' + this.aPixels[r][c].c.r + ', ' + this.aPixels[r][c].c.g + ', ' + this.aPixels[r][c].c.b + ', ' + this.aPixels[r][c].a + ' )'; 725 | this.ctx.fillRect( this.aPixels[r][c].x, this.aPixels[r][c].y, this.settings.w, this.settings.w ); 726 | 727 | }; 728 | 729 | this.init(); 730 | 731 | }; 732 | 733 | -------------------------------------------------------------------------------- /js/pixel.min.js: -------------------------------------------------------------------------------- 1 | var Pixel=function(t,i){this.settings={w:5,trace:.1,addClass:!0,aClass:["_top","_right","_bottom","_left"],wave:{w:10,speed:5},preload:!1},this.img={},this.canvas,this.ctx,this.aPixels=[],this.iCell=0,this.iRow=0,this.bRuning=!1,this.wave={x:0,y:0,r:0,w:0,s:0},this.aWaves=[],Pixel.prototype.init=function(){this.getSettings(),this.buildCanvas(),this.buildPixels(),this.drawImg(),this.settings.preload&&this.getColors(),this.img.o.style.display="none"},Pixel.prototype.getSettings=function(){for(var s in i)this.settings[s]=i[s];this.img={o:t,sw:t.naturalWidth,sh:t.naturalHeight,h:t.height,w:t.width,x:t.offsetLeft,y:t.offsetTop},this.wave.w=-this.settings.wave.w,this.wave.s=this.settings.wave.speed},Pixel.prototype.buildCanvas=function(){this.canvas=document.createElement("canvas"),this.canvas.width=this.img.w,this.canvas.height=this.img.h,this.ctx=this.canvas.getContext("2d"),this.img.o.parentNode.appendChild(this.canvas),this.bindEvent()},Pixel.prototype.buildPixels=function(){this.iCell=Math.floor(this.img.w/this.settings.w),this.iRow=Math.floor(this.img.h/this.settings.w),this.aPixels=[];for(var t=0;t<=this.iRow;t++){this.aPixels[t]=[];for(var i=0;i<=this.iCell;i++)this.aPixels[t][i]={x:i*this.settings.w,y:t*this.settings.w,c:!1,a:1}}},Pixel.prototype.getColors=function(){for(var t=0;t<=this.iRow;t++)for(var i=0;i<=this.iCell;i++)this.aPixels[t][i].c||(this.aPixels[t][i].c=this.getColor(this.aPixels[t][i]))},Pixel.prototype.getColor=function(t){for(var i=this.ctx.getImageData(t.x,t.y,this.settings.w,this.settings.w).data,s={r:0,g:0,b:0},e=0,a=0;(e+=4*this.settings.w)this.img.h?this.img.h/this.img.w:1),h=-(t.pageY-e)*(this.img.h>this.img.w?this.img.w/this.img.h:1),n=Math.round((Math.atan2(a,h)+Math.PI)/(Math.PI/2)+2)%4;return n},Pixel.prototype.updateClass=function(){this.removeClass(),"undefined"!=typeof this.settings.aClass[this.dir]&&this.canvas.parentNode.classList.add(this.settings.aClass[this.dir])},Pixel.prototype.removeClass=function(){for(var t=0;t=0;e--)this.checkWave(t,i,this.aWaves[e].x,this.aWaves[e].y,this.aWaves[e].r)&&!this.checkWave(t,i,this.aWaves[e].x,this.aWaves[e].y,this.aWaves[e].w)&&(s=!0);return s},Pixel.prototype.checkWave=function(t,i,s,e,a){var h=Math.abs(s-t-this.settings.w/2),n=Math.abs(e-i-this.settings.w/2);if(h>this.settings.w/2+a)return!1;if(n>this.settings.w/2+a)return!1;if(h<=this.settings.w/2)return!0;if(n<=this.settings.w/2)return!0;var o=h-this.settings.w/2,r=n-this.settings.w/2;return a*a>=o*o+r*r},Pixel.prototype.addWave=function(){this.animFromClick(event),this.bRuning||this.launch()},Pixel.prototype.updateWave=function(t){this.aWaves[t].r+=this.aWaves[t].s,this.aWaves[t].w+=this.aWaves[t].s,this.aWaves[t].w>this.aWaves[t].end&&this.aWaves.splice(t,1)},Pixel.prototype.update=function(){for(var t=this.aWaves.length-1;t>=0;t--)this.updateWave(t);0==this.aWaves.length&&this.stop()},Pixel.prototype.getAnim=function(){switch(this.dir){case 0:this.animFromT();break;case 1:this.animFromR();break;case 2:this.animFromB();break;case 3:this.animFromL()}},Pixel.prototype.animFromT=function(){var t={x:this.canvas.width/2,y:0,r:0,w:this.wave.w,s:this.wave.s,end:1.3*this.canvas.height};this.aWaves.push(t)},Pixel.prototype.animFromR=function(){var t={x:this.canvas.width,y:this.canvas.height/2,r:0,w:this.wave.w,s:this.wave.s,end:1.3*this.canvas.width};this.aWaves.push(t)},Pixel.prototype.animFromB=function(){var t={x:this.canvas.width/2,y:this.canvas.height,r:0,w:this.wave.w,s:this.wave.s,end:1.3*this.canvas.height};this.aWaves.push(t)},Pixel.prototype.animFromL=function(){var t={x:0,y:this.canvas.height/2,r:0,w:this.wave.w,s:this.wave.s,end:1.3*this.canvas.width};this.aWaves.push(t)},Pixel.prototype.animFromClick=function(t){var i={x:t.layerX,y:t.layerY,r:0,w:this.wave.w,s:this.wave.s,end:1.3*this.canvas.width};this.aWaves.push(i)},Pixel.prototype.drawWave=function(){this.ctx.globalAlpha=this.settings.trace,this.drawImg(),this.ctx.globalAlpha=1;for(var t=0;t<=this.iRow;t++)for(var i=0;i<=this.iCell;i++){var s=this.aPixels[t][i];this.checkWaves(s.x,s.y)&&this.drawPixel(t,i)}},Pixel.prototype.drawAll=function(){this.drawImg(),this.drawAllPixel()},Pixel.prototype.drawImg=function(){this.ctx.drawImage(this.img.o,0,0,this.img.sw,this.img.sh,this.img.x,this.img.y,this.img.w,this.img.h)},Pixel.prototype.drawAllPixel=function(){for(var t=0;t<=this.iRow;t++)for(var i=0;i<=this.iCell;i++)this.drawPixel(t,i)},Pixel.prototype.drawPixel=function(t,i){this.aPixels[t][i].c||(this.aPixels[t][i].c=this.getColor(this.aPixels[t][i])),this.ctx.fillStyle="rgba( "+this.aPixels[t][i].c.r+", "+this.aPixels[t][i].c.g+", "+this.aPixels[t][i].c.b+", "+this.aPixels[t][i].a+" )",this.ctx.fillRect(this.aPixels[t][i].x,this.aPixels[t][i].y,this.settings.w,this.settings.w)},this.init()}; -------------------------------------------------------------------------------- /media/thumb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/julien-amblard/pixel/bf2e960a27e892a3d5c398d097ae4850ae315d36/media/thumb1.jpg -------------------------------------------------------------------------------- /media/thumb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/julien-amblard/pixel/bf2e960a27e892a3d5c398d097ae4850ae315d36/media/thumb2.jpg --------------------------------------------------------------------------------