Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Circular Motion 1

Status
Not open for further replies.
sirlojik

sirlojik

Programmer
Mar 29, 2005
178
UG
hi all,
I am trying to achieve circular motion but my mathematics is really rusty and wrong. i do the animation by creating the path first. here is the code but the path coordinates seem wrong.

Code: 
<html>
<head>
<script language='javascript'>
PreloadImg = function (name)
    {
        var img = new Image();
        img.src = name;
        return img;
    }
var img_1 = PreloadImg('[URL unfurl="true"]http://www.adelaideunited.com.au/images/ball%20l.jpg');[/URL]

CreateImg = function (_parent,src)
    {
    var img = document.createElement('IMG');
        var wid = parseInt(bdy.clientWidth);
        img.src = src;
        img.style.position = 'absolute';
        img.style.left     = '600px';
        img.style.top      = '100px';
	img.style.width    = '20px';
	img.style.height   = '20px';
        _parent.appendChild(img);
    return img;
    }

var _Path_X = new Array(360);
var _Path_Y = new Array(360);
CreatePath = function (orgX,orgY)
	{
	var x       = parseInt(Floater.style.left);
	var y       = parseInt(Floater.style.top );
	var Hyp     = Math.sqrt(Math.pow((orgX-x),2)+Math.pow((orgY-y),2));
        var stAngle = Math.floor(Math.atan((orgY-y)/(orgX-x))*(180/Math.PI))-1;
        for (var n=0;n<=360;n++)
	    {
            stAngle++;
	    _Path_X[n]=x-(Math.cos((stAngle)*(Math.PI/180))*Hyp); 
            _Path_Y[n]=y+(Math.sin((stAngle)*(Math.PI/180))*Hyp); 
	    }
	}


</script>
</head>
<body onmousedown='MoveImg()'>
<script language='javascript'>
var bdy = document.getElementsByTagName('BODY')[0];
Floater = CreateImg(bdy,img_1.src);
var _Jump    = 2;
var IntVal   = 100;
var Timer_Id = 0;
var wid      = parseInt(bdy.clientWidth)-140;
var x        = parseInt(Floater.style.left); 
CreatePath(100,100);
var dt = -1;
MoveImg = function ()
    {
    dt++;
    if (dt<=360)
       {
	Floater.style.left = _Path_X[dt];
        Floater.style.top  = _Path_Y[dt];
        setTimeout(MoveImg,IntVal);
	}
    }

</script>
</body>
</html>


---------------------------
 
Sort by date Sort by votes
The orbit part can be modified like this.
[tt]
var _Path_X = new Array(360);
var _Path_Y = new Array(360);
CreatePath = function (orgX,orgY)
{
var x = parseInt(Floater.style.left);
var y = parseInt(Floater.style.top );
var Hyp = Math.sqrt(Math.pow((orgX-x),2)+Math.pow((orgY-y),2));
var stAngle = Math.floor(Math.atan((orgY-y)/(orgX-x))*(180/Math.PI));
var Angle; //added this for clarity
for (var n=0;n[red]<[/red]360;n++)
{
Angle=(stAngle+n)%360;
_Path_X[n]=orgX+(Math.cos((Angle)*(Math.PI/180))*Hyp);
_Path_Y[n]=orgY+(Math.sin((Angle)*(Math.PI/180))*Hyp);
}
}
[/tt]
The moving part can be slightly improved to avoid mismatch of indices.
[tt]
dt=-1;
MoveImg = function ()
{
dt++;
if (dt<=360)
{
Floater.style.left = _Path_X[dt%360];
Floater.style.top = _Path_Y[dt%360];
setTimeout(MoveImg,IntVal);
}
}
[/tt]
 
Upvote 0 Downvote
Thanx, here is the final example for all to view. this is what boredom can do

Code: 
<html>
<head>
<script language='javascript'>
PreloadImg = function (name)
    {
        var img = new Image();
        img.src = name;
        return img;
    }
var img_1 = PreloadImg('[URL unfurl="true"]http://www.school.pterosaur.co.uk/schools/novel/ball-1.gif');[/URL]

CreateImg = function (_parent,src,x,y,cx,cy)
    {
    var img = document.createElement('IMG');
        var wid = parseInt(bdy.clientWidth);
        img.src = src;
        img.style.position = 'absolute';
        img.style.left     = x;
        img.style.top      = y;
	img.style.width    = cx;
	img.style.height   = cy;
        _parent.appendChild(img);
    return img;
    }

CreatePath = function (o,orgX,orgY)
	{
	var _Path_X = new Array(360);
	var _Path_Y = new Array(360);
	var x       = parseInt(o.style.left);
	var y       = parseInt(o.style.top );
	var Hyp     = Math.sqrt(Math.pow((orgX-x),2)+Math.pow((orgY-y),2));
        var stAngle = Math.floor(Math.atan((orgY-y)/(orgX-x))*(180/Math.PI))-1;
	var Angle;    //added this for clarity
        for (var n=0;n<360;n++)
	    {
        Angle=(stAngle+n)%360;
        _Path_X[n]=orgX+(Math.cos((Angle)*(Math.PI/180))*Hyp); 
        _Path_Y[n]=orgY+(Math.sin((Angle)*(Math.PI/180))*Hyp); 
	    }
	return [_Path_X,_Path_Y];
	}


</script>
</head>
<body onmousedown='MoveImg()'>
<script language='javascript'>
var bdy = document.getElementsByTagName('BODY')[0];
Floater  = CreateImg(bdy,img_1.src,600,100,100,100);
Floater1 = CreateImg(bdy,img_1.src,600,150,60,60);
Floater2 = CreateImg(bdy,img_1.src,600,200,80,80);
var IntVal   = 1;
var a1 = CreatePath(Floater,500,100);
var a2 = CreatePath(Floater1,500,150);
var a3 = CreatePath(Floater2,500,250);
var dt = -1;
var dt1= 360;
MoveImg = function ()
    {
    dt++;
    dt1--;
    if ((dt<=360)&&(dt1>-1))
       {
	Floater.style.left  = a1[0][dt];
        Floater.style.top   = a1[1][dt];
	Floater1.style.left = a2[0][dt1];
        Floater1.style.top  = a2[1][dt1];
	Floater2.style.left = a3[0][dt1];
        Floater2.style.top  = a3[1][dt1];
        setTimeout(MoveImg,IntVal);
	}
    }

</script>
</body>
</html>

---------------------------
 
Upvote 0 Downvote
[tt]>var stAngle = Math.floor(Math.atan((orgY-y)/(orgX-x))*(180/Math.PI))[red]-1[/red][/tt]
I don't think you need -1 there, sirlojik. I'd corrected it. Or maybe you have also change some other place for that?
 
Upvote 0 Downvote
true, i had left that so as i could perform proper index looping in the original example. cheers for that matey,
Code: 
        [red]var stAngle = Math.floor(Math.atan((orgY-y)/(orgX-x))*(180/Math.PI))-1;[/red]
        for (var n=0;n<=360;n++)
        {
       [red]     stAngle++;[/red]

---------------------------
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

kallolb75
  • Locked
  • Question
Circular Text In Javascript -- s it possible ?
Replies
1
Views
54
adam0101
adam0101

Part and Inventory Search

Sponsor

Back
Top