SitePoint Sponsor 

User Tag List
Results 1 to 11 of 11
Thread: picture rotating function?

Oct 19, 2002, 13:14 #1
 Join Date
 Sep 2002
 Location
 Bournemouth, South UK
 Posts
 1,551
 Mentioned
 1 Post(s)
 Tagged
 0 Thread(s)
picture rotating function?
does anyone know if there is a way of turning an image with javascript?
so far I haven't used wysiwyg's, but I have a picture I want to rotate in a circular motion. As a single frame the picture is 6k, as a rotating .gif its about 32k, but flash can do it using only 7k. I would rather not have Flash do it as unless I do the whole site in flash I cannot use the layer elsewhere as it is to be transparente.LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if

Oct 19, 2002, 15:44 #2
 Join Date
 Mar 2002
 Location
 Svíþjóð
 Posts
 4,080
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Moving the image around in a circle or really _rotating_ the image?
The Rotation property of the BasicImage filter can only be used for 90degree increments
What type of image is it?

Oct 19, 2002, 16:14 #3
 Join Date
 Jul 2002
 Location
 Dallas, TX
 Posts
 2,900
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Well, 32k isn't TOO bad, but you can use IE's matrix filter. However, you will find that it's rotation is not what you'd expect to see, because the current top and left position are obeyed, so the image doesn't rotate around it's center...

Oct 20, 2002, 00:33 #4
 Join Date
 Sep 2002
 Location
 Bournemouth, South UK
 Posts
 1,551
 Mentioned
 1 Post(s)
 Tagged
 0 Thread(s)
cheers friends
Only just found the microsoft help page today, then get pointed to another good page from it by beetle.
As its a symetrical pattern I could just use 1 quater of the animated gif then turn it using the 'oDiv.style.filter'
4 times. This would lower the file size but still require .gif animation
Beetle, could I rectify the problem using a sine wave maths equation? How would I use sin,cos,tan in javascript?LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if

Oct 20, 2002, 00:36 #5
 Join Date
 Jul 2002
 Location
 Dallas, TX
 Posts
 2,900
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Math.sin(angle)
Math.cos(angle)
Math.tan(angle)
Not bad, eh? Let me know if you efforts work....been a while since I had to do that kind of geometry...

Oct 23, 2002, 12:12 #6
 Join Date
 Mar 2002
 Location
 Svíþjóð
 Posts
 4,080
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Originally posted by beetle
...you can use IE's matrix filter. However, you will find that it's rotation is not what you'd expect to see, because the current top and left position are obeyed, so the image doesn't rotate around it's center...
var x11 = 0;
var y11 = h;
var x12 = w;
var y12 = h;
var x21 = 0;
var y21 = 0;
var x22 = w;
var y22 = 0;
var x11p = x11 * cos_th  y11 * sin_th;
var y11p = x11 * sin_th + y11 * cos_th;
var x12p = x12 * cos_th  y12 * sin_th;
var y12p = x12 * sin_th + y12 * cos_th;
var x21p = 0; // always 0!
var y21p = 0;
var x22p = x22 * cos_th  y22 * sin_th;
var y22p = x22 * sin_th + y22 * cos_th;
var wp = Math.max(Math.abs(x12p  x21p), Math.abs(x22p  x11p));
var hp = Math.max(Math.abs(y12p  y21p), Math.abs(y22p  y11p));
div.style.left = l  (wp  w) / 2;
div.style.top = t  (hp  h) / 2;
where w, h, l, t are the original values of width, height, left & top, and sin_th and cos_th are the same sin and cos values you use for the matrix rotation
BTW, I think the rotation is exactly what you expect to see
The box is rotated around the origin (or the zaxis), i.e. (left, top)
If you want the box rotated around its center; first move it to (width/2, height/2), then rotate
Basic linear algebra
(And remember that the yaxis on the screen has the direction top>bottom)
What you don't expect to see is that the default sizing method is 'clip to original', so the move first, then rotate method cannot be usedLast edited by jofa; Oct 23, 2002 at 12:30.

Oct 25, 2002, 13:13 #7
 Join Date
 Sep 2002
 Location
 Bournemouth, South UK
 Posts
 1,551
 Mentioned
 1 Post(s)
 Tagged
 0 Thread(s)
found this worked......
using the matrix, I added positioning like...
position=62*sintheta*costheta
if (position<0) { position=0position }
document.all.oDiv.style.top=100position
document.all.oDiv.style.left=100position
as the pic was 150px square, the 62 was calculated as..
(squareroot of (picsize*picsize)+(picsize*picsize))(picsize/2)
dont know the how to sqaure a number in javascript, or to get square root of....LiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if

Oct 25, 2002, 13:21 #8
 Join Date
 Jul 2002
 Location
 Dallas, TX
 Posts
 2,900
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Here's all the Math object methods that I'm familiar with...plus the two you talked about highlighted...
Code:Math.abs(a) // the absolute value of a Math.acos(a) // arc cosine of a Math.asin(a) // arc sine of a Math.atan(a) // arc tangent of a Math.atan2(a,b) // arc tangent of a/b Math.ceil(a) // integer closest to a and not less than a Math.cos(a) // cosine of a Math.exp(a) // exponent of a Math.floor(a) // integer closest to and not greater than a Math.log(a) // log of a base e Math.max(a,b) // the maximum of a and b Math.min(a,b) // the minimum of a and b Math.pow(a,b) // a to the power b Math.random() // pseudorandom number in the range 0 to 1 Math.round(a) // integer closest to a Math.sin(a) // sine of a Math.sqrt(a) // square root of a Math.tan(a) // tangent of a

Oct 25, 2002, 15:53 #9
 Join Date
 Sep 2002
 Location
 Bournemouth, South UK
 Posts
 1,551
 Mentioned
 1 Post(s)
 Tagged
 0 Thread(s)
Dont find that in the books!!!
nice one Beetle, the books I've got are of little help now, nothing like that in them!! The equation above was picsize not (picsize/2) its abit jumpy, but I think thats to do with it not being able to be placed at eg 3.7px?
CheersLiveScript: Putting the "Live" Back into JavaScript
if live output_as_javascript else output_as_html end if

Oct 25, 2002, 16:15 #10
 Join Date
 Mar 2002
 Location
 Svíþjóð
 Posts
 4,080
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
Re: found this worked......
Originally posted by Markdidj
using the matrix, I added positioning like...
position=62*sintheta*costheta
if (position<0) { position=0position }
document.all.oDiv.style.top=100position
document.all.oDiv.style.left=100position
as the pic was 150px square, the 62 was calculated as..
(squareroot of (picsize*picsize)+(picsize*picsize))(picsize/2)
Hmmm, (squareroot of (picsize*picsize)+(picsize*picsize))(picsize/2) isn't 62, it's 137
Isn't (Math.sqrt(2)  1) * picsize better?
A comment on using the pow() method; I think a*a is more efficient than Math.pow(a, 2) (but, of course, if b = 1000, it's better to use Math.pow(a, 1000) than a*a*a*...)
BTW, does anyone know of a Matrix object in javascript?
An object you could use like this...
var A = new Matrix(3, 3); // create a 3x3 matrix
A.value(2,1) = 100; // assign a value to row 2, col 1
C = A.multiply(B); // the matrix C is now AxB
var d = C.det(); // calculate the determinant of C
etc...

Oct 25, 2002, 16:20 #11
 Join Date
 Mar 2002
 Location
 Svíþjóð
 Posts
 4,080
 Mentioned
 0 Post(s)
 Tagged
 0 Thread(s)
One more thing, would be really cool if this Matrix object had a method called toForm()
A.toForm(); // write the rows and cols as form elements on an html page
Bookmarks