SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
Thread: fun script...any takers?
-
Dec 3, 2002, 03:01 #1
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
fun script...any takers?
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>
Spartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Dec 3, 2002, 09:18 #2
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'd rather watch paint dry.
No offense, I just don't find anything fun about JS...
Aaron
-
Dec 3, 2002, 09:45 #3
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Dec 3, 2002, 09:48 #4
- Join Date
- Jun 2001
- Location
- Before These Crowded Streets
- Posts
- 9,446
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ooooh fun fun!
-
Dec 4, 2002, 00:29 #5
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Dec 4, 2002, 00:34 #6
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
PS
Beetle... at a glance... any big things you can tell me to change to make this browser independent?
thanxSpartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Dec 5, 2002, 02:25 #7
- Join Date
- Jul 2002
- Location
- Dallas, TX
- Posts
- 2,900
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
-
Dec 5, 2002, 02:49 #8
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?Spartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
-
Dec 5, 2002, 03:07 #9
-
Dec 5, 2002, 03:11 #10
- Join Date
- Apr 2002
- Location
- Cape Town, South Africa
- Posts
- 343
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
shot alot.
will do.Spartan
---------------------
It's like our sergeant told us before one trip into the jungle. Men! Fifty of you are leaving on a mission. Twenty-five of you ain't coming back.
-Mr.Payne
Bookmarks