Hi all.
I was wondering if anyone was in the mood to play around a bit. just for fun. experimenting and stuff...
I've got this script I've been workin on when I'm bored. I kinda did what I originaly set out to do. which was to play around with elasticity. I wanted 'n object to be stuck to a point and when you pull it away from that point an let it go. it should shoot back to that point like 'n spring or piece of elastic.
I managed that. but now I want to add some more stuff. like I want to make it browser independant, since at the mo it will probably only work on IE6.
and then, most importantly, I want to be able to throw the object with the mouse... iow, when you're draggin the object, it needs to check the speed at which you're moving it and the direction.
then when you let go... it needs to carry on in that direction before the elasticity function starts pulling it back to the original starting point.
You'll get a better idea of what I'm talking about if you get the script running. I'll paste the whole thing below.
I was thinking we could have something like a Javascript tennis match. just not so competitive... no losers no winners. if anyone wants to play around with the script and add some functionality or make it browser independent... just post the code back here when you're done.
heres the code...
Code:<HTML> <HEAD> <TITLE>__(o)__ELASTICITY__(o)__</TITLE> <script language=javascript> function init(){ //-------------------------------------------------- //vars for hookes law and elasticity function xPoint = 500; yPoint = 300; velocityX = 0; velocityY = 0; RateOfChange = 0.2; damp = 0.9; //-------------------------------------------------- //initial placement of the 'X' and the elastic element document.getElementById("xbox").style.left = xPoint+8; document.getElementById("xbox").style.top = yPoint+5; document.getElementById("box1").style.left = xPoint; document.getElementById("box1").style.top = yPoint; //-------------------------------------------------- //its not being dragged yet... dragapproved=false; //-------------------------------------------------- } //as soon as we stop dragging...set dragging to false and start elasticity function function nodrag(){ dragapproved=false; elastic() } //elasticity function, a force pulling the element to a certain X and Y position function elastic(){ if(!dragapproved){ var el = document.getElementById("box1") elementX = el.style.posLeft; elementY = el.style.posTop; //Hooke's Law accelerationX = (xPoint-elementX)*RateOfChange; //the acceleration of the element is a fraction of the distance bewteen the destination x and y and the current x and y of the element accelerationY = (yPoint-elementY)*RateOfChange; velocityX += accelerationX; //add the the base speed to the acceleration velocityY += accelerationY; velocityX *= damp; //realisticaly, there is alway a drag or force, slowing the object down, or else it will just keep ons bouncing back and forth without ever stopping velocityY *= damp; newxPos = elementX+velocityX; newyPos = elementY+velocityY; el.style.posLeft = newxPos; //move the element to new position el.style.posTop = newyPos; setTimeout("elastic()", 20) //recursion } } function moveThis(){ if (dragapproved){ Xmovement = event.clientX-x; //current mouse position - mouse position when drag started = how far we moved... Ymovement = event.clientY-y; dragEl.style.pixelLeft = tempX+Xmovement; //add movement to position we started at... and thats where we are now dragEl.style.pixelTop = tempY+Ymovement; return false } } function dragThis(){ if (event.srcElement.className=="drag"){ //if you're clicking something that can drag... make it dragable dragapproved=true dragEl = event.srcElement; //the object to drag tempX = parseInt(dragEl.style.left); //get the current X and Y coords tempY = parseInt(dragEl.style.top); x = event.clientX; //get the mouse coords y = event.clientY; document.onmousemove = moveThis; //call the move function } } document.onmousedown= dragThis; document.onmouseup=nodrag; </script> <style> .drag{ position:relative; z-index:1000 } </style> </HEAD> <BODY onload="javascript:init()"> <div name=box1 class="drag" id="box1" style="position:absolute;z-index:10; border:5px double blue; padding:5px; color:white; background:white"> </div> <div id="xbox" style="position:absolute;z-index:100;color:black"><b>x</div> </BODY> </HTML>
Bookmarks