how to Cloth Simulation in html5 canvas + jquery

Question

i have found the source of an cloth simulation. Here is JSFIDDLE.NET

<canvas id="c" height="500" width="500"></canvas>

JS

 $(document).ready(function () {
            xyz();
        });
        function xyz() 
        {
             a = "d#ocumt;c#.getElemtById('c'Ub=c.getContext('2d'Uf=10;c.wid=g=c.height=j=500;k=[Ml=[Mq=hH;r=o=1;D_5V<fV++,y_8Qz=[MDiH,_5J<fJ++,x_8Qz]={x:x,y:y:1,k:x,j:y}h>0Qpush([h,h])}(i>0?push([h,h]):0)@k[0][0]S=k[0][9]SH;nAclearRect(0,0,g,jUKffp=z]pwi(pQnx*1~-k*~;ny*1~-j*~+(_0125*rUk=x;j=y;nx;ny@@K2lga=lMs01t23dtW-sW`tZ-sZ`e#x+dy`i=(de-_064)/((de+_064)*(sS+tS))ssW+#i;sZ+#i}i&ttWNi;tZNi@}Olga=lMbeginPa(Us01t23!To(sW*g,sZ*jUlineTo(tW*g,tZ*jUstro()@;setInterval(n,35UFdownAw=f;Kffp=zMdxLX/g-pW`yLY/j-pZ;nw#x+dynw<wQw=nw=p@}F!AqW=q.kLX/gZ=q.jLY/jSH};FupAF!=nullS=o};}`.onydownAi&e.yCode==71Qr=(r=H)?1:0}oH}`.onyupAo=1}";
            for (b in c = "VGO;qkeyNxN]MJG-1l.J&x=+=y=en!moveS!HQb.,i[ithKDhHV<]]K=kK~.99`;d@}}&f(#=d_.0zk[h]Z.yW.xV;hU);S.iQ){ODiHJ<N*dM];L=e.pageK[a[J;iH=0G++){Fd.onmouseDfor(A=function(e){".split(""))
                a = a.replace(RegExp(c[b][0], "g"), c[b].slice(1));
            eval(a)
        }

but code looks alien to me. i want to fill the rect with my image how to do it? how to fill those box with image or any tutorial on this type of cloth simulation. give me some direction

Answer 1

What you have is a physical cloth simulation with some controls, draws only edges of cloth mesh. You need a triangle drawer, so you can assign coordinates of your image into this mesh. You can use WebGL which does this job cool or to code triangle drawer on 2d context by yourself. Take a look at this demo I found few years ago which demonstrate 3d cloth simulation on 2d context. Also, check a code which draws triangles (it's here ), so you can use it on your own. Good luck!