Rotate an Image 90° or 180° ?

[jscheuer1]

This might be adaptable:

http://cow.neondragon.net/stuff/reflection/

[BLiZZaRD]

Currently I am looking from scratch. I am thinking I can do some simple math here. maybe a bit of sin() and rounding to grab the current top/left x/y on click and on release use the math to change the bottom/right x/y co-ord to the new co-ords top/left. In essence this would just move the image up and over, but if I also set new x/y for the top/left to be bottom/right (swapping the co-ords in a sence) the image should "rotate"...

still working on the math at the moment though

[BYK]

You can use coordinate system transformation techniques for this I think.
If you calculate each pixel's distance from a defined origin (the simplest is sqrt(x^2 + y^2)), and get the angle of the line joining the pixel and the origin (the simplest would be arctan(y/x), and then add the rotation angle to this calculated angle and recalculate the new x&y coordinates by simply multiplying the distance of the pixel with sin(teta) for y and cos(teta) for x axis(where teta stands for the new angle we have just calculated), it should be done. Without any anti-aliasing and etc. of course

Edit: I found a library at http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm for purposes like these and also I have learnt a "canvas" tag for FF, digging it

[jscheuer1]

Zorn himself doesn't recommend using his method for rotating images.

[BYK]

May be it can be possible this canvas tag. The "image reflection" script seems good and now I'm examining it.

It uses IE's filters for the reflection effect but the canvas tag for Fx and others.

[BLiZZaRD]

well, the obvious answer is multiple images loaded onClick... but where is the fun in that?

[jscheuer1]

well, the obvious answer is multiple images loaded onClick... but where is the fun in that?

That's one of the first things I mentioned. That could be impractical if there are many images that need this treatment.

[BLiZZaRD]

Yes I noted that suggestion of yours, which spawned my interest in finding a way to do this. I am thinking. It is a fun little distraction project for me while I am here at work

[jscheuer1]

I got a Beta version working:

http://home.comcast.net/~jscheuer1/side/flip.htm

Opera appears to soften the image as well as flip it, FF seems to shift its vertical by 1px, cutting off a 1px piece when flipped. IE 7 and Safari 3 Win seem 'perfect'. IE 5.5 might have problems or throw an error.

Usage is simple:

onclick="flip(this);"

A unique id is required, and if you want to style the image, use the stylesheet so that the styles will carry over in non-IE browsers.

[BYK]

Seems good&working but unfortunately we cannot rotate to an arbitrary angle.
By the way were you aware of the "canvas" tag before? I saw it in that reflection script for the first time since I'm developing JS&DHTML codes for some time.