« »

This code makes the 3D heart. Also with the points, this code generate a heart which 'be breathing'. Beside, these hearts can be revolved depend on drag & drop status of users.

Label: 3D, rotating, beating, heart, rotate, point, drag, drop

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">.f{position:absolute;z-index:0;}</style>

Copy All x2

<script language="JavaScript">q=Math;var n4=document.layers?1:0;var e4=document.all?1:0;
function P3(x,y,z){t=this;t.x=x;t.y=y;t.z=z;t.w=1;}function M(){t=this;t.a01=t.a02=t.a03=0;t.a10=t.a12=t.a13=0;t.a20=t.a21=t.a23=0;t.a30=t.a31=t.a32=0;t.a00=t.a11=t.a22=t.a33=1;}function RX(v)
{t=this;t.a00=1;t.a01=t.a02= t.a03=0;t.a10=0;t.a11=q.cos(v);t.a12=-q.sin(v);t.a13=0;t.a20=0;t.a21=q.sin(v);t.a22=q.cos(v);t.a23=0;t.a30=t.a31=t.a32=0;t.a33=1;}function RY(v){t=this;t.a00=q.cos(v);
t.a01=0;t.a02=q.sin(v);t.a03=0;t.a10=t.a13=t.a12=0;t.a11=1;t.a20=-q.sin(v);t.a21=0;t.a22=q.cos(v);t.a23=0;t.a30=t.a31=t.a32=0;t.a33=1;}function MS(sx,sy,sz){t=this;t.a00=sx;t.a01=t.a02=t.a03=0;
t.a10=0;t.a11=sy;t.a12=t.a13=0;t.a20=t.a21=0;t.a22=sz;t.a23=0;t.a30=t.a31=t.a32=0;t.a33=1;}function MT(dx,dy,dz){t=this;t.a00=1;t.a01=t.a02=0;t.a03=dx;t.a10=0;t.a11=1;t.a12=0;t.a13=dy;t.a20=t.a21=0;
t.a22=1;t.a23=dz;t.a30=t.a31=t.a32=0;t.a33=1;}function tP(p,l){r=new Object();r.x=p.x*l.a00+p.y*l.a01+p.z*l.a02+p.w*l.a03;r.y=p.x*l.a10+p.y*l.a11+p.z*l.a12+p.w*l.a13;r.z=p.x*l.a20+p.y*l.a21+p.z*l.a22
+p.w*l.a23;r.w=p.x*l.a30+p.y*l.a31+p.z*l.a32+p.w*l.a33;return r;}function hg(p){if(p.w!=1){p.x/=p.w;p.y/=p.w;p.z/=p.w;p.w=1;}}function cM(m1,m2){var r,c;var mL=new Object;for(r=0;r<4;r++)for(c=0;c<4;
c++) mL["a"+r+c]=m1["a"+r+"0"]*m2["a0"+c]+m1["a"+r+"1"]*m2["a1"+c]+ m1["a"+r+"2"]*m2["a2"+c]+m1["a"+r+"3"]*m2["a3"+c];return mL;}function tM(l,m){var t=new Array(m.length);for(i=0;i<m.length;i++)
{t[i]=tP(m[i],l);hg(t[i]);}return t;}function wP(mM,pre){for(i=0;i<mM.length;i++){document.write('<div id="point'+pre+i+'" class="f"><img src="s.gif" width="5" height="5"></div>');}}var minCI=255;
var maxCI=0;var cT=new Array(),cT2=new Array(),cn="0123456789abcdef";for(i=15;i>=0;i--){for(j=15;j>=0;j--){cv=cn.charAt(i)+cn.charAt(j);cT[cT.length]="#ff"+cv+cv;cT2[cT2.length]="#"+cv+cv+"ff";}}
function dp(m,pre){e=pre=="s";for(i=0;i<m.length;i++){obj=(e4)?eval("document.all.point"+pre+i+".style"):eval("document.point"+pre+i);obj.left=m[i].x+300;obj.top=m[i].y+200;obj.zIndex=m[i].z+150;
z=(obj.zIndex-150);Amin=-170;Amax=170;iy=e?45:10;ix=e?60:253;ci=q.max(q.min(q.round(((ix-iy)/(Amax-Amin)) *(z-Amin)+iy),255),0);iy=1;ix=20;size=q.max(q.round(((ix-iy)/(Amax-Amin))*
(z-Amin)+iy),0);obj.height=obj.width=size;col=e?cT2[ci]:cT[ci];obj.bgColor=col;obj.backgroundColor=col;}}document.onmousemove=mmH;document.onmousedown=mdH;document.onmouseup=muH;if(n4)
document.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP);var oldX=0;var oldY=0;var oldX2=0;var oldY2=0;var q1=false;function mmH(e){if(q1){if(n4 || e4){mx=(n4)?e.pageX:event.x;
my=(n4)?e.pageY:event.y;}var q2=((mx-oldX)/20);var q3=((oldY-my)/20);setTimeout("nd("+q2+","+q3+")",1);oldX2=oldX;oldY2=oldY;oldX=mx;oldY=my;}return !e4;}function mdH(e){if(n4 || e4){mx=(n4)?e.pageX:
event.x;my=(n4)?e.pageY:event.y;}tt=0;oldX=mx;oldY=my;q1=true;}function muH(e){var q2=((oldX-oldX2)/20);var q3=((oldY2-oldY)/20);tt=100;tdx=q2;tdy=q3;oldX=mx;oldY=my;q1=false;}var tt=0;var tdx=0;var
tdy=0;function nd(q2,q3){rn=cM(new RX(q3),rn);rn=cM(new RY(q2),rn);}var k=new Array();var t=0;for(i=0;i<100;i++){k[i]=(q.sin(t)+2.0)*0.6;t+=0.251;}var fr=0;var dq=10;function an(){fr=(fr<99)?fr+1:0;
div=k[fr];if(tt> 1){tt*=0.9;tdx*=0.9;tdy*=0.9;nd(tdx,tdy);}m=tM(rn,b);m=tM(new MS(div,div,div),m);sh=m;sh=tM(rm,sh);dp(sh,"s");dp(m,"h");setTimeout("an()",dq);}</script>

Copy All x2

<script language="JavaScript">var m=tM(new MS(20,-20,10),new
Array(new P3(0,3,1),new P3(1,4,1),new P3(2.4,4.2,1.5),new P3(3.75,3.5,2),new P3(3.7,1.5,2),new P3(2,-2,1.5),new P3(0,-4,.5),new P3(0,3,1),new P3(-1,4,1),new P3(-2.4,4.2,1.5),new P3(-3.75,3.5,2),new
P3(-3.7,1.5,2),new P3(-2,-2,1.5),new P3(0,-4,.5),new P3(0,3,-1),new P3(1,4,-1),new P3(2.4,4.2,-1.5),new P3(3.75,3.5,-2),new P3(3.7,1.5,-2),new P3(2,-2,-1.5),new P3(0,-4,-.5),new P3(0,3,-1),new
P3(-1,4,-1),new P3(-2.4,4.2,-1.5),new P3(-3.75,3.5,-2),new P3(-3.7,1.5,-2),new P3(-2,-2,-1.5),new P3(0,-4,-.5)));var b=m;var rn=new M();var rm=new M();rm=cM(new MS(1,1,-1),new RX(q.PI));rm=cM(new
MT(0,300,0),rm);var sh=b;wP(m,"h");wP(sh,"s");an();</script>