SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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

  2. #2
    Sultan of Ping jofa's Avatar
    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 90-degree increments

    What type of image is it?

  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)
    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...
    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
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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

  5. #5
    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)
    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...
    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




  6. #6
    Sultan of Ping jofa's Avatar
    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...
    Solution; first rotate the div (or img or whatever) with the matrix filter (SizingMethod='auto expand'), then calculate the new width and height and change left and top...
    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 z-axis), 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 y-axis 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 used
    Last edited by jofa; Oct 23, 2002 at 13:30.

  7. #7
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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=0-position }
    document.all.oDiv.style.top=100-position
    document.all.oDiv.style.left=100-position

    as the pic was 150px square, the 62 was calculated as..
    (square-root 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

  8. #8
    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)
    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
    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




  9. #9
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    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?
    Cheers
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  10. #10
    Sultan of Ping jofa's Avatar
    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=0-position }
    document.all.oDiv.style.top=100-position
    document.all.oDiv.style.left=100-position
    as the pic was 150px square, the 62 was calculated as..
    (square-root of (picsize*picsize)+(picsize*picsize))-(picsize/2)
    I guess it does only work if the picture is a square?

    Hmmm, (square-root 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...

  11. #11
    Sultan of Ping jofa's Avatar
    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

Posting Permissions

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