Image Quality degrades on rotation

[Simon Knight]

I am playing with Livecode and basic animation. One of the things I wish to create is a one handed clock so I need to be able to rotate a hand. As an experiment I used an image of a JAS39 and duplicated it three times. I created two routines to rotate a .png image.

Image problems caused by rotating an image

JAS39 image corruption.png (54.67 KiB) Viewed 4560 times

Looking at the attached png file the image on the left is the original, the one in the middle has been rotated using the set angle command and the last image has been rotated using the built in rotate command. Both the routines use timers to re-call themselves and both move their image by 10 degrees. Both methods cause problems: the set angle causes some jagged edges to appear while the rotate command causes the image to break up. My button code is posted below:

Code: Select all

on mouseUp
    if the flag of me is empty then set the flag of me to false
   set the flag of me to not the flag of me  --toggle the boolean flag which is a custom property
   
   If the flag of me then
      Rotatehand
      RotatehandB
   end if
   
end mouseUp

On rotatehand
   set the angle of image"JAS39" to the angle of image"JAS39"+10
if the flag of me then
   send rotatehand to me in 500 millisecs
   end if
end rotatehand

On rotatehandB
   rotate image"JAS39B" by 10
if the flag of me then
   send rotatehandB to me in 500 millisecs
   end if
end rotatehandB

I have three questions: 1) Why does the rotate command cause such a problem? 2) Is there a better way of rotating an image? 3) Is it possible to rotate a graphic e.g. an arrow drawn in Livecode?

best wishes
Simon

[bn]

Hi Simon,

Image Quality degrades on rotation

That is a nice way of putting it.

Just don't do rotation with images unless it is 90,180,270 degrees. Especially if you rotate repeatedly you will get what you saw. If you would go on the the whole image looks like it exploded.

If you want a clock that moves you could go for graphics instead of images.

If you just need a clock with a hand look at an oval graphic and change the startAngle and the acrAngle (arcAngle to 1, linesize to 4-5) startAngle turns it.

I append a little stack that shows that, it is a manual clock, you have to advance it with a slider... To build in the mechanics is up to the watchmaker...

Kind regards

Bernd

[Simon Knight]

Thanks Bernd, I left my code running while I took the dog for a walk. After 40 minutes it looks like this:

JAS39 image corruption2.png (191.77 KiB) Viewed 4555 times

In fact it has bled all over the card - yikes.
best wishes
Simon

[Simon Knight]

Bernd,

Thanks for the demo stack. I take that it is only possible to do this kind of rotation with an oval.

[dunbarx]

Hi.

The rotate command will distort an image: From the docs:

To rotate an image in a reversible way, or to do repeated rotations without progressive distortion of the image, set its angle property instead of using the rotate command. Unlike the rotate command, the angle property affects only the screen display of the image, not the actual picture data in it, so setting it repeatedly does not introduce distortion.

[Simon Knight]

Yes I discovered the "small print" after my picture fell apart. I'm sure there is a use for this method - it just escapes me at present.