SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Rehab is for quiters! spartan's Avatar
    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">&nbsp;</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

  2. #2
    Prolific Blogger silver trophy Technosailor's Avatar
    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
    Aaron Brazell
    Technosailor



  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    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

    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ooooh fun fun!
    Aaron Brazell
    Technosailor



  5. #5
    Rehab is for quiters! spartan's Avatar
    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

  6. #6
    Rehab is for quiters! spartan's Avatar
    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?

    thanx
    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

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    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;
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    Rehab is for quiters! spartan's Avatar
    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

  9. #9
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should browse around in the Gecko and xBrowser links in my sig
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  10. #10
    Rehab is for quiters! spartan's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •