Closed Thread Icon

Preserved Topic: Circle function (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=18279" title="Pages that link to Preserved Topic: Circle function (Page 1 of 1)" rel="nofollow" >Preserved Topic: Circle function <span class="small">(Page 1 of 1)</span>\
 
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-11-2001 04:09

Well i'm trying to learn all that i can, but is hard sometimes..... so, there we go:
I know that if i want to make some object to move in circle i have to change everytime xpos and ypos but i dunno the cos and sin functions to make it happen....

And what about making not only one, but several objects?
You know, moving in circle like one of the docs scripts....
~searching for the Doc's site~
i don't find it....

But well, i think that he call them 'Jewel' some of them follow the mouse, but there's one that doesn't follow the mouse, it just goes around a pretty (e?)sphere....


.-rotate script by Mr.Max
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-11-2001 04:32

http://www.dansteinman.com/dynduo/en/geometric-circle.html

This helped me a lot, but i still have doubts about make several objects going around, not only one ball...


.-rotate script by Mr.Max
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 09-11-2001 04:58

A looooong time ago I posted an answer to an identical questoin at the Gurus Network, but it seems to have been deleted. I'll say later, I'm real busy now...
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-11-2001 05:00

~gets some pop corns, coffee and sits down waiting for Slime~
Dark
Neurotic (0) Inmate
Newly admitted 		posted posted 09-11-2001 05:39

milk, cream, or sugar wakkos? *sits down waits and drinks his irish creme coffee*
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 09-11-2001 08:19

Wakkos,

The link you posted should allow you to have multiple circles on one page. Notice how he creates an object called mlayer. All you need to do is create more objects with different names, for example mlayer2, mlayer3, etc. Everything that's on that page for mlayer, do for the other objects you create.
Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

 posted posted 09-11-2001 11:11

Here's how i'd make div animate in a circular motion.

Oh, this is striaght from memory as I can't find my old copy of this but it should work. Unless there are typo's, and there always are...

<HTML>
<HEAD>
<SCRIPT>

var radius;
var angle;
var ctrX;
var ctrY;
var pID;

function layerPos(layerId, pX, pY) {
document.all[layerId].style.left = pX;
document.all[layerId].style.top = pY;
}

function circle(layerId) {
var cX = ctrX+radius*Math.cos(angle*Math.PI/180);
var cY = ctrY+radius*Math.cos(angle*Math.PI/180);
layerPos(layerId, cX, cY);
angle++;
}

function do_onload() {
centreX = self.document.body.clientWidth/2;
centreY = self.document.body.clientHeight/2;
radius = 100;
angle = 0;
pID = setInterval("circle('image')",10);
}

</SCRIPT>

<style>
#image { position:absolute; top:100px; left:100px; )
</style>

</HEAD>
<BODY>

<div id="image">Testing Circle Loop</div>

</BODY>
</HTML>


This should work. The logic seem fine. Just remember, the trigonomectic functions in JS (sic, cos, tan etc...) expect values in radians, not degrees, thus the angle * Math.PI / 180 is esentualy converting from a possible 360 dergrees to a possible 2 * pi radians, the ammount of radians in a circle.

And, no, i didn't work this out myself, I picked it up somewhere about a year back and have beed studying it ever since. I only figured it out about 3 months ago myself.

If it doesnt work I'll fix it tommorow. I'm tired and need sleep. Or maybe Slime can offer a better solution.
lallous
Paranoid (IV) Inmate

From: Lebanon
Insane since: May 2001

 posted posted 09-11-2001 11:48

There was also not a very old post like this one and user RoyV or RoyW posted a very nice and small code for it, so for more info check back two or three weeks..


What i would like to care about moving in cirlce is the math explanation behind the use of cos() and sin()...

It studied that in my final school year...but damn...i forgot them all...I'll get back to my books soon if i don't find an explanation...
mr.maX
Maniac (V) Mad Scientist

From: Belgrade, Serbia
Insane since: Sep 2000

 posted posted 09-11-2001 14:13

You can find the old topic, where RoyW posted his code here: http://www.ozoneasylum.com/Forum2/HTML/000939.html

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

 posted posted 09-11-2001 14:54

Well, that sure made my code look like crap. heh. At least I know how to do it better now though.
RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

 posted posted 09-11-2001 14:58

Hi Wakkos,
That link you posted requires the dynApi to run.
As there seems to be some interest in moving objects in a circle I have modified the original to be cross browser and allow multiple objects. See what you think.

code:
<HTML>

<HEAD>

	<title>Circle</title>

</HEAD>



<BODY BGCOLOR="black" TEXT="white" ALINK="yellow" VLINK="yellow" LINK="yellow" onLoad="start()">

<SCRIPT>



/**

 * Constructor for a cross browser CircelObj

 */

function CircleObj(id, cx, cy, r, start_angle)

{

	if(document.getElementById)

		this.obj = document.getElementById(id).style;

	else if(document.all)

		this.obj = document.all[id].style;

	else

		this.obj = document.layers[id];



	this.cx = cx;

	this.cy = cy;

	this.r = r;

	this.a = start_angle * Math.PI / 180;

}

CircleObj.prototype.moveTo = function(x,y)

{

	this.obj.left = x;

	this.obj.top  = y;

}

CircleObj.prototype.animate = function()

{

	this.a = this.a + 0.05;

	var x = this.cx + this.r * Math.sin(this.a);

	var y = this.cy + this.r * Math.cos(this.a);

	this.moveTo(x, y);

}



/**

 *Use a single animate routine so all the objects are synchronised.

 */

function animate()

{

	setTimeout("animate()", 40);



	myObj1.animate();

	myObj2.animate();

	myObj3.animate();

	myObj4.animate();

	myObj5.animate();

}

/**

 * Set up the parameters as global variables

 */

var Radius = 100;

var CenterX = 200;

var CenterY = 200;



function start()

{

	myObj1 = new CircleObj("c1", CenterX, CenterY, Radius,  0);

	myObj2 = new CircleObj("c2", CenterX, CenterY, Radius, 90);

	myObj3 = new CircleObj("c3", CenterX, CenterY, Radius,180);

	myObj4 = new CircleObj("c4", CenterX, CenterY, Radius,270);



	myObj5 = new CircleObj("c5", 300, 100, 80, 0);



	animate();

}



</SCRIPT>

<DIV id="c1" style="position:absolute">CIRCLE</DIV>

<DIV id="c2" style="position:absolute">CIRCLE</DIV>

<DIV id="c3" style="position:absolute">CIRCLE</DIV>

<DIV id="c4" style="position:absolute">CIRCLE</DIV>



<DIV id="c5" style="position:absolute">OTHER CIRCLE</DIV>

</BODY>

</HTML>


Let me know if you have any questions.
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-11-2001 15:12

This one looks easyer to play with than the Docs one (i was calculating the diameter to set the distance between the balls!!!)
Let me play with this One RoyW.... Thanks
lallous
Paranoid (IV) Inmate

From: Lebanon
Insane since: May 2001

 posted posted 09-11-2001 15:15

RoyW, I have a question!

can you explain the math behind it?
Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

 posted posted 09-11-2001 19:37

I'm going to attempt to, very simply, explain the math behind the cosine and sine functions. Most likely you've heard of them as "opposite over hypotenuse" or something like that, I'll show you why that's the case, but I think it's better to explain it like this.

Consider a circle of radius 1 around the origin.

Alright. Put an imaginary object at the rightmost point of the circle. That will be at the coordinate (1,0).

Now imagine moving that object around the circle counterclockwise. We'll call the angle formed by that object, the origin, and the point (1,0) "theta" (a greek letter which i can't type easily). Note that theta starts at zero when the object is at (1,0) and increases to 360 degrees as the object performs a full revolution.

Here's a quick explanation of what a "radian" is: Instead of using degrees, we're going to use the amount of distance that the object has covered as it travels in a circle. Since a circle of radius one has a circumference of 2*pi, 2*pi radians corresponds to 360 degrees. Halfway around the circle, at the point(-1,0), the object has traveled half the circumference, or pi radians (equal to 180 degrees). 1/4 of the way around at (0,1) is pi/2 radians (90 degrees). Pi/3 radians would be 60 degrees. You get the idea.

So, what about the sine and cosine functions (abbreviated sin and cos)? At any given angle theta, so that the object is "theta" radians from its original position at (1,0), it's x and y coordinates are given by cos(theta) and sin(theta), respectively. So, cos(pi/2) is zero - the X coordinate of the object when it has rotated 90 degrees and is in the highest point of the circle. sin(pi/2) is 1, for the same reason.

So, you may wonder how this is helpful since it only applies to a circle of radius one. Especially if you're working with pixels, a one pixel radius circle is pretty useless. The neat thing is you can merely multiply the return value of sin() and cos() by the radius of the circle you want. For a circle of radius 3, use 3*sin(theta) and 3*cos(theta).

AAAUGH i gg, will finish later
RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

 posted posted 09-12-2001 15:51

It is difficult to explain without diagrams. Do a Lycos search for "Trig Functions". One link I came up with was http://math.usask.ca/readin/trfn.html
If you look at the second triangle you can see they have derived that
sin(a) = y/r (Opposite/Hypotenuse)
cos(a) = x/r (Adjacent/Hypotenuse)
However - we know 'a' and 'r' and want x and y. If you multiply both sides by 'r' you get
r*sin(a) = y
r*cos(a) = x

so
x = r * sin(a)
y = r * cos(a)

Which also means I got it wrong in the script! (Should've checked my Trig before posting)
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-12-2001 16:04

Wait!! the function that you gave me was right!!!
it can work but now i have problems with another script, i mean, it works alone, but if i add another sript i have, down't....

i'll keep checking..
Wakkos
Maniac (V) Mad Scientist

From: Azylum's Secret Lab
Insane since: Oct 2000

 posted posted 09-12-2001 18:17

I worked with the Doc's code, but i want to add more, i did it, but it's out of place
I think that the problem is here:
Xorigin = 204;
Yorigin = 147;
OrbitSize = 150;
Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );
Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );
Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );

Based in what did the Doc that division? 5.67 the max number?? Why? so i will divide 5.67/numbers off balls that i want...
any way, here's the complete script:

<SCRIPT LANGUAGE="JavaScript">
<!--
// DocOzone's Javascript code, all rights reserved.
// Copyright © 1995,1996,1997,1998,1999,2000 and 2001.
// You may this code to help learn how to use Javascript.
// Feel free to use bits and pieces of it in your own work,
// but please remember to credit me properly! Redistributing
// my code and claiming it as your own is frowned upon.
//
// Your pal, -Dr. Thaddeus Ozone-
// http://www.ozones.com/

window.onerror = null;

window.defaultStatus ="";
// that sets the status bar to " "

NS = (document.layers) ? 1:0
IE = (document.all) ? 1:0
gecko = (document.getElementById) ? 1:0
loaded=0;
layerstart = "";
layerleft = "";
layertop = "";
layerstyle = "";
if (NS) {
layerstart = "document.";
layerleft = ".left";
layertop = ".top";
layerstyle = ""; }
if (gecko &#0124; &#0124; IE){
layerstart = "document.getElementById('";
layerleft = ".left";
layertop = ".top";
layerstyle = "').style"; }
if (IE && !gecko){
layerstart = "document.all.";
layerleft = ".left";
layertop = ".top";
layerstyle = ".style"; }

// end error trapping

if (NS) {
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove = MoveHandler; }
if (gecko &#0124; &#0124; IE){
document.onmousemove=MoveHandler; }


if (NS) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight; }
else if (IE) {
windowWidth=600;
windowHeight=400; }
gotthere = 0;
count = 0;

toplocation = new Array( 0,30,57,80,101,125,80,80,101,125,80 );
temptoplocation = new Array( 50,100,100,150,150,200,200,100,150,150,200,200 );
leftlocation = new Array( 0,292,318,181,181,217,263,318,181,181,217,263 );
templeftlocation = new Array( 0,0,260,390,420,550,680,390,420,550,680 );
difftop = new Array( 0,0,0,0,0,0,0,0,0,0,0 );
diffleft = new Array( 0,0,0,0,0,0,0,0,0,0,0 );

if (NS) {
windowWidth = window.innerWidth;
windowHeight = window.innerHeight; }
else if (IE) {
windowWidth=600;
windowHeight=400; }
// end error trapping
Ypos2 = 72;
Xpos2 = 72;
function MoveHandler(e) {
if (NS &#0124; &#0124; IE &#0124; &#0124; gecko) {
Xpos2 = (IE)?event.x:e.pageX
Ypos2 = (IE)?event.y:e.pageY


}}

function setup() {
if (IE) {
windowWidth=document.body.clientWidth-12;
windowHeight=document.body.clientHeight-12;
}
else if (NS &#0124; &#0124; gecko) {
windowWidth = window.innerWidth-12;
windowHeight = window.innerHeight-12; }
Xorigin = 0;
Yorigin = 0;
spin();run(); }

count=1; delay=100; direction = -1;

Xorigin = 204;
Yorigin = 147;
OrbitSize = 150;
Count = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );
Xpoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );
Ypoint = new Array ( 0, .63, 1.26, 1.89, 2.52, 3.15, 3.78, 4.41, 5.04, 5.67, 6.3 );
speed = -0.012;
offset = 1

function spin() {
for ( j = 0 ; j <= 10 ; j++ ) {
Count[j] = Count[j] + (speed*direction);
Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset));
Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j])); }
setTimeout('spin()',1); }

function run() {
count++;
for ( j = 0 ; j <= 10 ; j++ ) {
difftop[j] = Ypoint[j] - temptoplocation[j];
diffleft[j] = Xpoint[j] - templeftlocation[j];
temptoplocation[j] = temptoplocation[j] + difftop[j]/30;
templeftlocation[j] = templeftlocation[j] + diffleft[j]/30;
eval(layerstart+"a"+j+layerstyle+layerleft+" = templeftlocation["+j+"]");
eval(layerstart+"a"+j+layerstyle+layertop+" = temptoplocation["+j+"]"); }
setTimeout('run()', 10) }


//-- end script -->
</script>
RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

 posted posted 09-12-2001 23:01

Are you trying to combine the 2 scripts so you have a static circling object and a circling object that follows the mouse?
Or
are you just trying to add more circling objects to Doc's mouse trailer?
Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

 posted posted 09-13-2001 09:51

The cool thing about Doc's code is it's speed. All my circle code calculates the positions on the fly as does yours, RoyW. I find that on most of the newer machines this is not as much of a problem as it used to be.
RoyW
Bipolar (III) Inmate

From:
Insane since: Aug 2001

 posted posted 09-13-2001 15:42

Huh?

code:
Count[j] = Count[j] + (speed*direction); 

    Xpoint[j] = Xorigin + ((OrbitSize*Math.sin(Count[j])*offset)); 

    Ypoint[j] = Yorigin + (OrbitSize*Math.cos(Count[j]));



Isn't this on the fly?

Also, how can

code:
eval(layerstart+"a"+j+layerstyle+layerleft+" = templeftlocation["+j+"]");

eval(layerstart+"a"+j+layerstyle+layertop+" = temptoplocation["+j+"]");


be faster than

code:
this.obj.left = x;

	this.obj.top  = y;



SetTimeout("run()", 10) will execute at 100 times a second (*See Note)
SetTimeout("spin()", 1) will execute at 1000 times a second (*See Note)

I don't know about you but my monitor only displays (at most) 30 frames per second.

(*)NOTE: on most systems a SetTimeout delay below a minimum value (I think it's 53ms) is ignored and the the value is set to the miniumum value.

« Backwards — Onwards »

Show Forum Drop Down Menu
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail