onclick or href for "moving" object?

Discussion in 'JavaScript' started by Sleeping Troll, May 7, 2009.

  1. #1
    The following code is the javascript which moves the "orbs" around at this site...
    http://huduzu.trollnest.com
    I hope it loads for you, having some hosting issues.
    What I want to do is use the onclick event or href with the orbs, but can't seem to do it... is it a single thread issue?
    P.S. IE only right now.

    var numballs=50;       //number of balls
    var Gravity=0;         //strength of gravity
    var InitialVelocity=7;            //initial ball speed
    var BoxDepth;           //box depth
    var wallcollisions=0;    //wall collisions 1=on, 0=off
    var ballcollisions=1;    //ball collisions 1=on, 0=off
    var trails=0;         //length of ball trail
    var EyeDistance;           //perspective:distance of eye from box centre
    var ScreenDistance;           //perspective:distance of screen from box centre
    var EyeScreenDistance;
    var BoxWidth,BoxHeight,BoxDepth,cw,ch;
    var ballsize,ballsize2;
    var xmin,ymin,xmax,ymax,zmin,zmax;
    var i,im,theta; 
    var collisions=new Array();
    var collisioncollection= new Array();
    var VelocityX=new Array();
    var VelocityY=new Array();
    var VelocityZ=new Array();
    var PositionX=new Array();
    var PositionY=new Array();
    var PositionZ=new Array();
    var o=new Array();
    var cln=new Array();
    var twa;
    var eps=.01;
    function init(){
      cw=getClientWidth();
      ch=getClientHeight();
      BoxDepth=ch;
     EyeDistance=ch;
     ScreenDistance=ch/2;
     EyeScreenDistance=EyeDistance-ScreenDistance;
      ballsize=parseInt(ballimg.width)/2;
     if (ballsize<1)ballsize=1;
      ballsize2=4*ballsize*ballsize;
      for(i=0;i<numballs*2;i++)collisioncollection.push(new collision(container, ballcollisionimg.src));
    function getClientWidth() {
      return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
    }
    function getClientHeight() {
      return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
    }
      BoxWidth=cw;
      BoxHeight=ch/2;
      bgw=BoxWidth/2;
      bgh=BoxHeight;
      container.style.width=cw/2;
      container.style.height=ch/2;
     
     
      xmax=BoxWidth-ballsize;
      ymax=BoxWidth-ballsize;
      zmax=BoxDepth-ballsize;
      xmin=-xmax;
      ymin=-ymax;
      zmin=-zmax;
     
      resize();
     
      for(i=0;i<numballs;i++){
        cln[i]=new Array;
        for(j=0;j<numballs;j++)cln[i][j]=0;
        PositionX[i]=xmin;
        PositionY[i]=ymin;
        PositionZ[i]=zmin;
     
        theta=Math.random();
        BoxWidthi=Math.asin(Math.random());
        //if(Math.random()>0.5)BoxWidthi=-BoxWidthi;
        VelocityX[i]=InitialVelocity*Math.cos(theta)*Math.cos(BoxWidthi);
        VelocityY[i]=InitialVelocity*Math.sin(theta)*Math.cos(BoxWidthi);
        VelocityZ[i]=InitialVelocity*Math.sin(BoxWidthi);
     
        o[i]=new ball(ballsize,ballimg.src,container)
        o[i].move(PositionX[i],PositionY[i],PositionZ[i]);
      }
      document.body.onresize=resize;
      setInterval("anim();",50);
    }
     
    function anim(){
      var i;
      for(i in collisions)collisions[i].anim();
      recyclecollisions();
      updateballs();
    }
     
    function recyclecollisions(){
      //active collisions can finish in any order, so cannot just thwacEyeScreenDistanceool.push(collisions.shift())
      var j,i=0;
      var nl=collisions.length;
      while(i<nl){
        if(collisions[i].f<0){
          collisioncollection.push(collisions[i]);
          for(j=i;j<nl-1;j++)collisions[j]=collisions[j+1];
          nl--;
        }
        else{
          i++;
        }
      }
      j=collisions.length-nl;
      for(i=0;i<j;i++)collisions.pop();
    }
     
    function moveball(x,y,z){
      var i,j;
      var k=EyeScreenDistance/(EyeDistance-z);
      var bs=ballsize*k;
     if (bs<1)bs=1;
     
      this.is.width=2*bs;
      this.is.height=2*bs;
      this.is.left=bgw+k*x-bs;
      this.is.top=bgh+k*y-bs;
    }
    
    function ball(r,imgsrc,container){
      var i,b;
      this.trail=new Array();
      this.tpos=-1;
      b=document.createElement("<img src='"+(imgsrc)+"' style='position:absolute;left:-10000px;top:20px;width:"+(2*ballsize)+"px;height:"+(2*ballsize)+"px;' >");
      container.appendChild(b);
      this.is=b.style;
      this.move=moveball;
    }
     
    function collisioncollision(){
      this.f-=this.opdec;
      if(this.f<0){
        this.imf.enabled='false';
        if(this.type==1)this.immf.enabled='false';
        this.is.left=-10000;
      }
      else{
        this.imf.opacity=Math.floor(Math.max(0,this.f));
      }
    }
     
    function setcollision(x0,y0,z0,x1,y1,z1,v,img,maxopacity,opdec){
      var tx, ty, cp, psp, sp, sw, sq, sh;
      var k,ts,bs;
      var twk;
      var w=img.width;
      var h=img.height;
      var p=w/2;
      var q=h/2;
     
      if(collisioncollection.length>0){
        twk=collisioncollection.pop();
        twk.im.src=img.src;
        twk.opdec=opdec;
        twk.f=15+Math.min(maxopacity-15,Math.floor(maxopacity*v/InitialVelocity));
     
        tx=(x0+x1)/2;
        ty=(y0+y1)/2;
        tz=(z0+z1)/2;
        k=EyeScreenDistance/(EyeDistance-tz);
     
        angle=Math.atan2(y1-y0,x1-x0);
     
        cp=(z1-z0)/(2*ballsize);
        psp=Math.sqrt((x1-x0)*(x1-x0)+(y1-y0)*(y1-y0))/(2*ballsize);
        yf=Math.abs((EyeScreenDistance/2)*(((tx+cp)/(EyeDistance-tz-psp))-((tx-cp)/(EyeDistance-tz+psp))));
     
        st=Math.sin(angle);
        ct=Math.cos(angle);
        twk.immf.M11=ct*yf;
        twk.immf.M12=-st*k;
        twk.immf.M21=st*yf;
        twk.immf.M22=ct*k;
        sp=yf*p;
        sw=yf*w;
        sq=k*q;
        sh=k*h;
        twk.is.left=bgw+k*tx-(st*((st>0)?sh-sq:-sq)+ct*((ct>0)?sp:sp-sw));
        twk.is.top=bgh+k*ty-(st*((st>0)?sp:sp-sw)+ct*((ct>0)?sq:sq-sh));
        twk.is.zIndex=tz*100;
        twk.immf.enabled='true';
        twk.imf.enabled='true';
        twk.imf.opacity=twk.f;
        collisions.push(twk);
      }
    }
     
    function collision(ctnr, imgsrc){
      this.f=0;
      this.n=0;
      this.opdec=100;
      this.x=0;this.y=0;this.z=0;
      b=document.createElement("<img onclick='init()' src=\""+imgsrc+"\" style=\"border:0px solid red;position:absolute;left:-10000px;top:20px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50)progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')\" >");
      ctnr.appendChild(b);
      this.im=b;
      this.is=b.style;
      this.imf=b.filters.item(0);
      this.immf=b.filters.item(1);
      this.anim=collisioncollision;
    }
    function UpdateBall(){}
    function updateballs(){
    /////////////////////////////////////////////////////////////
    // Based on the fluid simulation by Peter Birtles          //
    // http://astronomy.swin.edu.au/pbourke/modelling/fluid/   //
    //                                                         //
    // Javascript conversion evolved January 2002              //
    // 3D conversion and 'energy leak' plugged 10/06/2004      //
    /////////////////////////////////////////////////////////////
      var a,b,d,VelocityXa,VelocityYa,VelocityZa,VelocityXb,VelocityYb,VelocityZb,nx,ny,nz,cdx,cdy,cdz,dd,m,cosam,cosamx,cosamy,cosamz,ddx,ddy,ddz;
      for(a=0; a<numballs; a++){
        for(b=(a+1); b<numballs; b++){  //Note:The original iterated both a and b from 1 to numballs, skipping the a=b case
          d = (PositionX[a]-PositionX[b])*(PositionX[a]-PositionX[b])+(PositionY[a]-PositionY[b])*(PositionY[a]-PositionY[b])+(PositionZ[a]-PositionZ[b])*(PositionZ[a]-PositionZ[b]);
          if (d < ballsize2){
            if(cln[a][b]==0){
              cln[a][b]=1;
              d = Math.sqrt(d);
              VelocityXa= VelocityX[a];VelocityYa=VelocityY[a];VelocityZa=VelocityZ[a];VelocityXb=VelocityX[b];VelocityYb=VelocityY[b];VelocityZb=VelocityZ[b];
              nx=PositionX[b]-PositionX[a];
              ny=PositionY[b]-PositionY[a];
              nz=PositionZ[b]-PositionZ[a];
              if (Math.abs(d)>0.0001){
                cdx=nx/d;cdy=ny/d;cdz=nz/d;
                m = Math.sqrt(VelocityXa*VelocityXa+VelocityYa*VelocityYa+VelocityZa*VelocityZa);
                if (Math.abs(m)>0.0001){
                  cosam = (cdx*VelocityXa+cdy*VelocityYa+cdz*VelocityZa);
                  cosamx=cosam*cdx;
                  cosamy=cosam*cdy;
                  cosamz=cosam*cdz;
                  VelocityXa -= cosamx;
                  VelocityYa -= cosamy;
                  VelocityZa -= cosamz;
                  VelocityXb += cosamx;
                  VelocityYb += cosamy;
                  VelocityZb += cosamz;
                }
                if(ballcollisions==1)setcollision(PositionX[a],PositionY[a],PositionZ[a],PositionX[b],PositionY[b],PositionZ[b],m*cosam, ballcollisionimg,100,20);
                m = Math.sqrt(VelocityX[b]*VelocityX[b]+VelocityY[b]*VelocityY[b]+VelocityZ[b]*VelocityZ[b]);
                if (Math.abs(m) >0.0001){
                  cosam = (cdx*VelocityX[b]+cdy*VelocityY[b]+cdz*VelocityZ[b]);
                  cosamx=cosam*cdx;
                  cosamy=cosam*cdy;
                  cosamz=cosam*cdz;
                  VelocityXa += cosamx;
                  VelocityYa += cosamy;
                  VelocityZa += cosamz;
                  VelocityXb -= cosamx;
                  VelocityYb -= cosamy;
                  VelocityZb -= cosamz;
                }
              }
            VelocityX[a]=VelocityXa;VelocityY[a]=VelocityYa;VelocityZ[a]=VelocityZa;VelocityX[b]=VelocityXb;VelocityY[b]=VelocityYb;VelocityZ[b]=VelocityZb;
            }
          }
          else{
            cln[a][b]=0;
          }
        }
      }
      //apply boundaries (update images here)
      for(a=0; a<numballs; a++){
        if (PositionX[a]<=xmin){
          PositionX[a]=2*xmin-PositionX[a];
          VelocityX[a] = -VelocityX[a];
          if(wallcollisions==1)setcollision(xmin,PositionY[a],PositionZ[a]-eps,xmin-2*ballsize,PositionY[a],PositionZ[a]-eps,Math.abs(VelocityX[a]),wallcollisionimg,30,4)
       UpdateBall(a)
        }
        if (PositionX[a]>= xmax){
          PositionX[a]=2*xmax-PositionX[a];
          VelocityX[a] = -VelocityX[a];
          if(wallcollisions==1)setcollision(xmax,PositionY[a],PositionZ[a]-eps,xmax+2*ballsize,PositionY[a],PositionZ[a]-eps,Math.abs(VelocityX[a]),wallcollisionimg,30,4)
       UpdateBall(a)
        }
        if (PositionZ[a]<= zmin){
          PositionZ[a]=2*zmin-PositionZ[a];
          VelocityZ[a] = -VelocityZ[a];
          if(wallcollisions==1)setcollision(PositionX[a],PositionY[a],zmin-eps,PositionX[a],PositionY[a],zmin-eps-2*ballsize,Math.abs(VelocityZ[a]),wallcollisionimg,30,4)
       UpdateBall(a)
        }
        if (PositionZ[a]>= zmax){
          PositionZ[a]=2*zmax-PositionZ[a];
          VelocityZ[a] = -VelocityZ[a];
          if(wallcollisions==1)setcollision(PositionX[a],PositionY[a],zmax+eps,PositionX[a],PositionY[a],zmax+eps+2*ballsize,Math.abs(VelocityZ[a]),wallcollisionimg,30,4)
       UpdateBall(a)
        }
      }
      //integrate accelerations and velocities
      for(a=0; a<numballs; a++){
        o[a].move(PositionX[a],PositionY[a],PositionZ[a]);
        orPositionY=PositionY[a];
        PositionX[a] += VelocityX[a];
        PositionY[a] += VelocityY[a]+ Gravity/2;
        PositionZ[a] += VelocityZ[a];
        orVelocityY=VelocityY[a];
        VelocityY[a] += Gravity;
        if (PositionY[a]<= ymin){
          if(Gravity>0.0000001){
            ti=(-orVelocityY-Math.sqrt(orVelocityY*orVelocityY-2*Gravity*(orPositionY-ymin)))/Gravity;
            vi=orVelocityY+Gravity*ti;
            PositionY[a]=ymin-vi*(1-ti)+0.5*Gravity*(1-ti)*(1-ti);
            VelocityY[a]=-vi+Gravity*(1-ti);
          }
          else{
            PositionY[a]=2*ymin-PositionY[a];
            VelocityY[a] = -VelocityY[a];    
          }
        if(wallcollisions==1)setcollision(PositionX[a],ymin,PositionZ[a]-eps,PositionX[a],ymin-2*ballsize,PositionZ[a]-eps, Math.abs(VelocityY[a]), wallcollisionimg,10,2);
        }
        if (PositionY[a]>= ymax){
          if(Gravity>0.0000001){
            ti=(-orVelocityY+Math.sqrt(orVelocityY*orVelocityY+2*Gravity*(ymax-orPositionY)))/Gravity;
            vi=orVelocityY+Gravity*ti;
            PositionY[a]=ymax-vi*(1-ti)+0.5*Gravity*(1-ti)*(1-ti);
            VelocityY[a]=-vi+Gravity*(1-ti);
          }
          else{
            PositionY[a]=2*ymax-PositionY[a];
            VelocityY[a] = -VelocityY[a];    
          }
        //if(wallcollisions==1)setcollision(PositionX[a],ymax,PositionZ[a]-eps,PositionX[a],ymax+2*ballsize,PositionZ[a]-eps, Math.abs(VelocityY[a]), wallcollisionimg,40,5);
        }
      }
    }
     
    function resize(){
      container.style.left=0;
      container.style.top=0;
    }
    Code (markup):

     
    Sleeping Troll, May 7, 2009 IP