Modified Delaunay

canvas-fx.min.js

(function(){function r(e){var n=this,r=!1;if(!t)return;$(this).one(t,function(){r=!0});var i=function(){r||$(n).trigger(t)};setTimeout(i,e+13)}jQuery.getVendorStyle=function(e){var t=["Moz","Webkit","O","ms"],n=document.createElement("div").style,r=e.charAt(0).toUpperCase()+e.slice(1),i,s=t.length;while(s--)t[s]+r in n&&(i=t[s]);return!i&&e in n?(i=e,perf):i?i+r:""};var e={WebkitTransition:"webkitTransitionEnd",MozTransition:"transitionend",OTransition:"oTransitionEnd otransitionend",msTransition:"MSTransitionEnd",transition:"transitionend"},t=e[$.getVendorStyle("transition")],n={duration:400,easing:"cubic-bezier(0.250, 0.460, 0.450, 0.940)"};$.fn.transition=function(e,i){if(typeof Modernizr!="undefined"&&!Modernizr.csstransitions)return;i=$.extend({},n,i);var s=$.getVendorStyle("transition");if(!s)return;e[s]="all "+i.duration+"ms "+i.easing,$(this).one(t,i.complete||$.noop),r.bind(this)(i.duration),$(this).css(e)}})(),$(function(){function e(){var e=window.innerHeight,t=document.compatMode;if(t||!$.support.boxModel)e=t=="CSS1Compat"?document.documentElement.clientHeight:document.body.clientHeight;return e}$(window).on("scroll",function(){var t=e(),n=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop,r=[];$.each($.cache,function(){this.events&&this.events.inview&&r.push(this.handle.elem)}),r.length&&$(r).each(function(){var e=$(this),r=e.offset().top,i=e.height(),s=e.data("inview")||!1;n>r+i||n+t<r?s&&(e.data("inview",!1),e.trigger("inview",[!1])):n<r+i&&(s||(e.data("inview",!0),e.trigger("inview",[!0])))})}),$(window).scroll()}),function(){function e(){typeof this.timeout=="undefined"&&(this.timeout=null);var e=$(this),t=e.attr("data-delay"),n=t||$.mousestopDelay;e.bind("mousemove.mousestop",function(){clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.trigger("mousestop"),e.unbind("mousemove.mousestop")},n)})}function t(){var e=$(this);e.unbind("mousemove.mousestop"),clearTimeout(this.timeout)}$.mousestopDelay=280,$.event.special.mousestop={setup:function(n){$(this).data("mousestop",{delay:n}).bind("mouseenter.mousestop",e).bind("mouseleave.mousestop",t)},teardown:function(){$(this).removeData("mousestop").unbind(".mousestop")}},$.fn.mousestop=function(e,t){return t==null&&(t=e,e=null),arguments.length>0?this.bind("mousestop",e,t):this.trigger("mousestop")}}(),function(global,undefined){"use strict";function hasMicrosoftImplementation(){return!!global.msSetImmediate&&!!global.msClearImmediate}function canUseMessageChannel(){return!!global.MessageChannel}function canUsePostMessage(){if(!global.postMessage||global.importScripts)return!1;var e=!0,t=global.onmessage;return global.onmessage=function(){e=!1},global.postMessage("","*"),global.onmessage=t,e}function canUseReadyStateChange(){return"document"in global&&"onreadystatechange"in global.document.createElement("script")}function aliasMicrosoftImplementation(e){e.setImmediate=global.msSetImmediate,e.clearImmediate=global.msClearImmediate}function installMessageChannelImplementation(e){e.setImmediate=function(){var e=tasks.addFromSetImmediateArguments(arguments),t=new global.MessageChannel;return t.port1.onmessage=function(){tasks.runIfPresent(e)},t.port2.postMessage(null),e}}function installPostMessageImplementation(e){function n(e,t){return typeof e=="string"&&e.substring(0,t.length)===t}function r(e){if(e.source===global&&n(e.data,t)){var r=e.data.substring(t.length);tasks.runIfPresent(r)}}var t="com.bn.NobleJS.setImmediate"+Math.random();global.addEventListener?global.addEventListener("message",r,!1):global.attachEvent("onmessage",r),e.setImmediate=function(){var e=tasks.addFromSetImmediateArguments(arguments);return global.postMessage(t+e,"*"),e}}function installReadyStateChangeImplementation(e){e.setImmediate=function(){var e=tasks.addFromSetImmediateArguments(arguments),t=document.createElement("script");return t.onreadystatechange=function(){tasks.runIfPresent(e),t.onreadystatechange=null,t.parentNode.removeChild(t),t=null},document.documentElement.appendChild(t),e}}function installSetTimeoutImplementation(e){e.setImmediate=function(){var e=tasks.addFromSetImmediateArguments(arguments);return global.setTimeout(function(){tasks.runIfPresent(e)},0),e}}var tasks=function(){function Task(e,t){this.handler=e,this.args=Array.prototype.slice.call(t)}Task.prototype.run=function(){if(typeof this.handler=="function")this.handler.apply(undefined,this.args);else{var scriptSource=""+this.handler;eval(scriptSource)}};var nextHandle=1,tasksByHandle={},currentlyRunningATask=!1;return{addFromSetImmediateArguments:function(e){var t=e[0],n=Array.prototype.slice.call(e,1),r=new Task(t,n),i=nextHandle++;return tasksByHandle[i]=r,i},runIfPresent:function(e){if(!currentlyRunningATask){var t=tasksByHandle[e];if(t){currentlyRunningATask=!0;try{t.run()}finally{delete tasksByHandle[e],currentlyRunningATask=!1}}}else global.setTimeout(function(){tasks.runIfPresent(e)},0)},remove:function(e){delete tasksByHandle[e]}}}();if(!global.setImmediate){var attachTo=typeof Object.getPrototypeOf=="function"&&"setTimeout"in Object.getPrototypeOf(global)?Object.getPrototypeOf(global):global;hasMicrosoftImplementation()?aliasMicrosoftImplementation(attachTo):(canUsePostMessage()?installPostMessageImplementation(attachTo):canUseReadyStateChange()?installReadyStateChangeImplementation(attachTo):installSetTimeoutImplementation(attachTo),attachTo.clearImmediate=tasks.remove)}}(this),function(e,t,n,r,i,s){function l(e){var t,n=e.length,i=this,s=0,o=i.i=i.j=0,u=i.S=[];n||(e=[n++]);while(s<r)u[s]=s++;for(s=0;s<r;s++)u[s]=u[o=f&o+e[s%n]+(t=u[s])],u[o]=t;(i.g=function(e){var t,n=0,s=i.i,o=i.j,u=i.S;while(e--)t=u[s=f&s+1],n=n*r+u[f&(u[s]=u[o=f&o+t])+(u[o]=t)];return i.i=s,i.j=o,n})(r)}function c(e,t){var n=[],r=(typeof e)[0],i;if(t&&r=="o")for(i in e)try{n.push(c(e[i],t-1))}catch(s){}return n.length?n:r=="s"?e:e+"\0"}function h(e,t){var n=e+"",r,i=0;while(i<n.length)t[f&i]=f&(r^=t[f&i]*19)+n.charCodeAt(i++);return d(t)}function p
(n){try{return e.crypto.getRandomValues(n=new Uint8Array(r)),d(n)}catch(i){return[+(new Date),e,e.navigator.plugins,e.screen,d(t)]}}function d(e){return String.fromCharCode.apply(0,e)}var o=n.pow(r,i),u=n.pow(2,s),a=u*2,f=r-1;n.seedrandom=function(e,s){var f=[],v=h(c(s?[e,d(t)]:0 in arguments?e:p(),3),f),m=new l(f);return h(d(m.S),t),n.random=function(){var e=m.g(i),t=o,n=0;while(e<u)e=(e+n)*r,t*=r,n=m.g(1);while(e>=a)e/=2,t/=2,n>>>=1;return(e+n)/t},v},h(n.random(),t)}(this,[],Math,256,6,52),function(){function t(t,r,i,s,o,u){e.push({x:t,y:r});if(e.length==s){e.sort(function(e,t){return i==0?e.x-t.x:t.x-e.x});var a=n(e),f=0;function l(){var t=a.triangles[f],n=e[t.p1].x,r=e[t.p1].y,i=e[t.p2].x,s=e[t.p2].y,c=e[t.p3].x,h=e[t.p3].y;u.beginPath(),u.moveTo(n+.5,r),u.lineTo(i+.5,s),u.lineTo(c+.5,h);var p=Math.min(n,i,c),d=Math.max(n,i,c),v=Math.min(r,s,h),m=Math.max(r,s,h),g=u.getImageData(p,v,d-p,m-v),y=g.data,b=0,w=[0,0,0];for(var E=0;E<y.length;E+=4){if(y[E+4]==0)continue;w[0]+=y[E],w[1]+=y[E+1],w[2]+=y[E+2],b++}var S=Math.ceil(w[0]/b),x=Math.ceil(w[1]/b),T=Math.ceil(w[2]/b),N=Math.max(S,x,T);o.fillStyle="rgb("+S+","+x+","+T+")",o.strokeStyle="rgba("+N+","+N+","+N+",0.97)",o.lineWidth=1,o.beginPath(),o.moveTo(n+.5,r),o.lineTo(i+.5,s),o.lineTo(c+.5,h),o.stroke(),o.fill(),f<a.n&&setImmediate(l),f++}l()}}function n(e){function I(e,n,r,i,s,o,u,a,f){var l,c,h,p,d,v,m,g,y,b,w,E,S;return Math.abs(i-o)<t&&Math.abs(o-a)<t?!1:(Math.abs(o-i)<t?(c=-(u-s)/(a-o),p=(s+u)/2,v=(o+a)/2,w=(s+r)/2,E=c*(w-p)+v):Math.abs(a-o)<t?(l=-(s-r)/(o-i),h=(r+s)/2,d=(i+o)/2,w=(u+s)/2,E=l*(w-h)+d):(l=-(s-r)/(o-i),c=-(u-s)/(a-o),h=(r+s)/2,p=(s+u)/2,d=(i+o)/2,v=(o+a)/2,w=(l*h-c*p+v-d)/(l-c),E=l*(w-h)+d),m=s-w,g=o-E,y=m*m+g*g,S=Math.sqrt(y),m=e-w,g=n-E,b=m*m+g*g,f.x=w,f.y=E,f.z=S,b<=y?!0:!1)}var t=1e-10,n=e,r=n.length;for(var i=0;i<3;i++)n[r+i]={x:null,y:null,z:null};var s=new Array(r*3);for(var i=0;i<s.length;i++)s[i]={p1:null,p2:null,p3:null};var o=[],u=[],a=0,f,l=3,c,h,p,d,v,m,g,y,b,w,E,S,x,T,N,C,k,L,A,O,M,_=0;f=4*r;for(var D=0;D<f;D++)o[D]=!1;for(var P=0;P<l;P++)u[P]={p1:-1,p2:-1};x=n[0].x,N=n[0].y,T=x,C=N;for(var i=1;i<r;i++)n[i].x<x&&(x=n[i].x),n[i].x>T&&(T=n[i].x),n[i].y<N&&(N=n[i].y),n[i].y>C&&(C=n[i].y);A=T-x,O=C-N,M=A>O?A:O,k=(T+x)/2,L=(C+N)/2,n[r+0].x=k-2*M,n[r+0].y=L-M,n[r+0].z=0,n[r+1].x=k,n[r+1].y=L+2*M,n[r+1].z=0,n[r+2].x=k+2*M,n[r+2].y=L-M,n[r+2].z=0,s[0].p1=r,s[0].p2=r+1,s[0].p3=r+2,o[0]=!1,_=1;for(var i=0;i<r;i++){h=n[i].x,p=n[i].y,a=0;var H={x:null,y:null,z:null};for(var B=0;B<_;B++){if(o[B])continue;d=n[s[B].p1].x,v=n[s[B].p1].y,m=n[s[B].p2].x,g=n[s[B].p2].y,y=n[s[B].p3].x,b=n[s[B].p3].y,c=I(h,p,d,v,m,g,y,b,H),w=H.x,E=H.y,S=H.z,w+S<h&&(o[B]=!0);if(c){if(a+3>=l){l+=3;var j=[];for(var P=0;P<l;P++)u[P]?j[P]=u[P]:j[P]={p1:-1,p2:-1};u=j}u[a].p1=s[B].p1,u[a].p2=s[B].p2,u[a+1].p1=s[B].p2,u[a+1].p2=s[B].p3,u[a+2].p1=s[B].p3,u[a+2].p2=s[B].p1,a+=3,s[B].p1=s[_-1].p1,s[B].p2=s[_-1].p2,s[B].p3=s[_-1].p3,o[B]=o[_-1],_--,B--}}for(var B=0;B<a-1;B++)for(var F=B+1;F<a;F++)u[B].p1==u[F].p2&&u[B].p2==u[F].p1&&(u[B].p1=-1,u[B].p2=-1,u[F].p1=-1,u[F].p2=-1),u[B].p1==u[F].p1&&u[B].p2==u[F].p2&&(u[B].p1=-1,u[B].p2=-1,u[F].p1=-1,u[F].p2=-1);for(var B=0;B<a;B++){if(u[B].p1==-1||u[B].p2==-1)continue;if(_>=f)return-1;s[_].p1=u[B].p1,s[_].p2=u[B].p2,s[_].p3=i,o[_]=!1,_++}}for(var i=0;i<_;i++)if(s[i].p1>=r||s[i].p2>=r||s[i].p3>=r)s[i]=s[_-1],_--,i--;return{n:_,triangles:s}}var e=[];window.modifiedDelaunay=t}();

index.html

<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="canvas-fx.min.js"></script>
</head>
<body>
<div class='container'></div>

<script type="text/javascript">


(function() {

    var     img1 = new Image()
        ,   canvas1
        ,   cw
        ,   ch
        ,   vertices = 4800;

    img1.src = './ladygaga.jpg';

    img1.id = "image1"

    var display1, source1;

    function init() {
        var c1 = document.createElement('canvas');
        var c2 = document.createElement('canvas');
        cw = c1.width = c2.width = 510;
        ch = c1.height = c2.height = 700;
        c1.style.float = 'left'
        c2.style.display = 'none'
        display1 = c1.getContext('2d');
        source1 = c2.getContext('2d');
        display1.drawImage(img1, 0, 0, cw, ch);
        source1.drawImage(img1, 0, 0, cw, ch);
        canvas1 = $(c1).appendTo('.container');
        canvas1[0].style.cursor = "pointer"
        canvas1[0].id = "canvas1"

        setTimeout(function() {

            //Math.seedrandom('Count De Money vs Count Delaunay .!@$^!#@*#&(#&^^');

            for (var i = 0; i < vertices; i++) {
                modifiedDelaunay(Math.random() * cw, Math.random() * ch, 1, vertices, display1, source1)
            }
        }, 100)
    }

    $(window).load(init)


})()



</script>
</body>
</html>

ladygaga.jpg