circle tracing

[Jean Pierre Daviau]

Hi gurus,

I am trying to create a circle with different images.

var j = 0;
var degree30 = Math.PI/6;
var r_angle = 0;

function rotate(idy){
var x = parseInt(Math.cos(r_angle)*100);
var y = parseInt(Math.sin(r_angle)*100);

document.getElementById(idy).style.left = (x + 300);
document.getElementById(idy).style.top = (y + 186);
j++;
(r_angle < degree30 * 11) ? r_angle = degree30 * j : r_angle = 0;

( j < 12) ? setTimeout("rotate('reduit'+ j)", 400) : stop();
}

Here is my ... attempt:
http://www.jeanpierredaviau.com/sgagnon/oeil3.html


Thanks for your attention.

Jean Pierre Daviau
--
Easyphp1.8
Apache1.3.24
DEVC++, borland 5.5
windows Xp
asus p4 s533/333/133
Intel(R) Celeron (R) CPU 2.00 GHz
http://www.jeanpierredaviau.com

 

[Lee]

Jean Pierre Daviau said:

Hi gurus,

I am trying to create a circle with different images.

var j = 0;
var degree30 = Math.PI/6;
var r_angle = 0;

function rotate(idy){
var x = parseInt(Math.cos(r_angle)*100);
var y = parseInt(Math.sin(r_angle)*100);

Don't use parseInt() with numeric arguments. It operates on
strings, so it converts your number to a string, then parses
out the integer value, then converts it back to a number.
Use Math.floor() or better, Math.round().

document.getElementById(idy).style.left = (x + 300);
document.getElementById(idy).style.top = (y + 186);

left and top values need units. Append "px" to your values.

 

[Lasse Reichstein Nielsen]

I am trying to create a circle with different images.

You seem to be trying to place image elements at positions in a circle
with center 300,186 and radius 100. I assume those are pixels.

First of all, you are using "position:relative" on the images.
That means that they do take up space in the page flow, they are
just offset by the given values from their actual position.

For this to work, they should, preferably, all be offset from the
same point, so using "position:absolute" would probably be better.
Otherwise you have to compensate from the offset caused by the
earlier images.

If you do this, the script will "work", although it expects a browser
in quirks mode.

Here are some suggestions:

var j = 0;
var degree30 = Math.PI/6;
var r_angle = 0;

function rotate(idy){
var x = parseInt(Math.cos(r_angle)*100);
var y = parseInt(Math.sin(r_angle)*100);

Don't use parseInt for converting a potentially non-integer number
value to an integer. It involves converting the number to a string and
then parsing the string again. Just use Math.floor or Math.round:
var x = Math.round(Math.cos(r_angle)*100);
var y = Math.round(Math.sin(r_angle)*100);

document.getElementById(idy).style.left = (x + 300);
document.getElementById(idy).style.top = (y + 186);

The CSS properties "left" and "top" must have a unit on their values.
I assume pixels.
You could also store the img element reference in a variable instead
of looking it up twice, and you could use the "images" collection
that is more widely supported that getElementById:

var img = document.images[idy];
img.style.left = (x + 300) + "px";
img.style.top = (y + 186) + "px";

j++;
(r_angle < degree30 * 11) ? r_angle = degree30 * j : r_angle = 0;

Here I would prefer either an if-statment instead of a ?: expression:

if (r_angle < degree30 * 11) {
r_angle = degree * j;
} else {
r_angle = 0;
}

or moving the condition to the right side of the assignment:

r_angle = (r_angle < degree30 * 11) ? degree30*j : 0;

or just doing something arithmetically (not the same as your code, but
I can't see what the purpose of the code is):

r_angle = degree30 * (j % 12);

( j < 12) ? setTimeout("rotate('reduit'+ j)", 400) : stop();

Again, an if would be easier to read:

if (j < 12) {
setTimeout("rotate('reduit'+j)", 400);
} else {
stop();
}



Good luck
/L

 

[Evertjan.]

Jean Pierre Daviau wrote on 25 feb 2006 in comp.lang.javascript:

var j = 0;
var degree30 = Math.PI/6;
var r_angle = 0;

function rotate(idy){
var x = parseInt(Math.cos(r_angle)*100);
var y = parseInt(Math.sin(r_angle)*100);

document.getElementById(idy).style.left = (x + 300);
document.getElementById(idy).style.top = (y + 186);
j++;
(r_angle < degree30 * 11) ? r_angle = degree30 * j : r_angle = 0;

( j < 12) ? setTimeout("rotate('reduit'+ j)", 400) : stop();
}

Try this in an empty file:

<script type='text/javascript'>

for (var x=0;x<12;x++)
document.write('<div id=reduit'+x+'>'+(+1+x)+'</div>')

var j = 0;
var degree30 = Math.PI/6;
var r_angle = -2*degree30;

function rotate(){
var x = parseInt(Math.cos(r_angle)*100);
var y = parseInt(Math.sin(r_angle)*100);
var idy = 'reduit'+ j
var d = document.getElementById(idy)
d.style.position='absolute'
d.style.left = x + 300;
d.style.top = y + 186;
r_angle += degree30
if (++j<12) setTimeout("rotate()", 400);
}

rotate()

</script>

 

[Jean Pierre Daviau]

Lee I am the only one having problem with this
Lassy Absolutely ... amazing.
Evertjan Symply astonished.

Thanks to all of you. May celestial flowers rain upon your heads.

n.b: it does not hurt ;-) ha!

 

[Jean Pierre Daviau]

I made the thing going fast for you to see the result of our work. See it
there for a while :

http://www.jeanpierredaviau.com/sgagnon/oeil4.html

 

[RobG]

I made the thing going fast for you to see the result of our work. See it
there for a while :

http://www.jeanpierredaviau.com/sgagnon/oeil4.html

All I see in Firefox is the images pile one on top of another.

Top and left should be given units - e.g. px.

 

[Jean Pierre Daviau]

All I see in Firefox is the images pile one on top of another.
Mozilla too.

Top and left should be given units - e.g. px.

Done

Firefox and Mozilla does not play the code of Evertjan too

IE and Opera read it right.

 

[cwdjrxyz]

Done

Firefox and Mozilla does not play the code of Evertjan too

IE and Opera read it right.

You must have changed some code, as the most recent Mozilla family
browsers (Firefox, Netscape, and Mozilla) are now showing your effect
nearly right. The only problem is that the tiny image that appears in
the center of the circle for a brief time is not displayed on these
browsers.

By the way, Opera supports some Microsoftese code, while the Mozilla
family browsers do not. When both IE6 and Opera display a page
correctly and Mozilla family browsers do not, the first thing to do is
to see if any Microsoftese code is used that is not part of official
code.

 

[Jean Pierre Daviau]

The only problem is that the tiny image that appears in

the center of the circle for a brief time is not displayed on these
browsers.

yes indeed. The eye of the magnifyng glass is not there. humm.....

OEIL4 is still there for you to see the magnifyind design idee.
Ha! No genius but interesting.

 

[Jean Pierre Daviau]

I found it.

The tiny image had a z-index of -10