Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

JavaScript Forum


You are currently viewing our JavaScript Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > JavaScript Forum > onclick or href for "moving" object?

Reply
onclick or href for "moving" object?
Old 05-07-2009, 03:42 PM onclick or href for "moving" object?
Sleeping Troll's Avatar
Ultra Talker

Posts: 351
Name: Butch Begy
Trades: 0
Talkupation: Sleeping Troll will become famous soon enough
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?

Code:
 
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;
}
__________________
Sleeping Troll, EMUSE, Mind Expansion...Truly serendipity!
Sleeping Troll is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 05-07-2009, 03:56 PM Re: onclick or href for "moving" object?
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Talkupation: wayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond repute
that screen is coming up blank for me, but Firebug tells me that the variable "ballimg" is not defined, much less an object.
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 05-07-2009, 07:01 PM Re: onclick or href for "moving" object?
Sleeping Troll's Avatar
Ultra Talker

Posts: 351
Name: Butch Begy
Trades: 0
Talkupation: Sleeping Troll will become famous soon enough
Sorry about that, I was playing, please, please, please try again.
__________________
Sleeping Troll, EMUSE, Mind Expansion...Truly serendipity!
Sleeping Troll is offline
Reply With Quote
View Public Profile
 
Old 05-07-2009, 08:52 PM Re: onclick or href for "moving" object?
wayfarer07's Avatar
Poo on You

Latest Blog Post:
Introducing WowWindow
Posts: 3,985
Name: Abel Mohler
Location: Asheville, North Carolina USA
Trades: 0
Talkupation: wayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond reputewayfarer07 has a reputation beyond repute
Same thing. You need to define "ballimg" as an object with the earlier variable declarations.
__________________
Join me on
Please login or register to view this content. Registration is FREE
wayfarer07 is offline
Reply With Quote
View Public Profile Visit wayfarer07's homepage!
 
Old 05-07-2009, 10:01 PM Re: onclick or href for "moving" object?
Sleeping Troll's Avatar
Ultra Talker

Posts: 351
Name: Butch Begy
Trades: 0
Talkupation: Sleeping Troll will become famous soon enough
Yeah, browser specific issue, will tackle that later, works in IE.
__________________
Sleeping Troll, EMUSE, Mind Expansion...Truly serendipity!
Sleeping Troll is offline
Reply With Quote
View Public Profile
 
Old 05-08-2009, 05:12 PM Re: onclick or href for "moving" object?
Sleeping Troll's Avatar
Ultra Talker

Posts: 351
Name: Butch Begy
Trades: 0
Talkupation: Sleeping Troll will become famous soon enough
Hey, got it working, z-index prob.
__________________
Sleeping Troll, EMUSE, Mind Expansion...Truly serendipity!
Sleeping Troll is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to onclick or href for "moving" object?
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > JavaScript Forum > onclick or href for "moving" object?

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.23256 seconds with 12 queries