fun script...any takers?

**spartan** · Dec 3, 2002, 03:01

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">&nbsp;</div>
<div id="xbox" style="position:absolute;z-index:100;color:black"><b>x</div>

</BODY>
</HTML>

**Technosailor** · Dec 3, 2002, 09:18

I'd rather watch paint dry.

No offense, I just don't find anything fun about JS...

Aaron

**beetle** · Dec 3, 2002, 09:45

Sketch (Aaron)

I think this is more of a mathematical/physics curiosity than a javascript one. Javascript is just the delivery. But, since you stated so, I got you hooked up

**Technosailor** · Dec 3, 2002, 09:48

ooooh fun fun!

**spartan** · Dec 4, 2002, 00:29

LOL!!

jees, thanx for the enthusiasm guys!

yeah, I'd probably be using flash if I was at home, but since I'm doing this at work, I'm playing with javascript. Like you said beetle. its more about the math really.

I thought while I try to sort out my knowledge of vectors I may as well post this up here so long and see if anyone else finds it interesting or maybe someone can give me a push in the right direction...(off a cliff, if it was up to Sketch, I guess

)

I just like doing these little experiments. I suppose someday I'll use them for something... or not

*shrug*

anyway...
so nobody got any ideas?

**spartan** · Dec 4, 2002, 00:34

PS
Beetle... at a glance... any big things you can tell me to change to make this browser independent?

thanx

**beetle** · Dec 5, 2002, 02:25

Ya, one big thing I notice is event.srcElement. Gecko uses event.target. I usually have some code like this.

var o = (document.all) ? event.srcElement : event.target;

**spartan** · Dec 5, 2002, 02:49

cool thing
thanx man.

the one thing I cant quite figure out is getting the equivalent of clientX and clientY for non-IE browsers...

is there nothing that works across all browsers? and what are the correct properties to use for mozilla browsers? pageX and PageY?

**beetle** · Dec 5, 2002, 03:07

You should browse around in the Gecko and xBrowser links in my sig

**spartan** · Dec 5, 2002, 03:11

shot alot.
will do.

The SitePoint Forums have moved.

User Tag List

Thread: fun script...any takers?

Thread Tools

Display

fun script...any takers?

Bookmarks

Bookmarks

Posting Permissions