Spinning an Image with acceleration - LiveCode

Question

I've been working with LiveCode for a couple of days, but I found a problem and have been stuck for a whole day.

My project is a Roulette/Wheel of Fortune game, in which a circular image spins for a random amount of degrees and a static needle in the center/north marks the current section under it.

To make the image spin, I use this code on a button:

on mouseUp
  put random(360) into i
  repeat with x=0 to i
     set the angle of image "ruleta.png" to the angle of image "ruleta.png" + 1
     wait for 10 milliseconds
  end repeat
end mouseUp

The problem is, I can make the image spin, but only up to a certain speed, and does not looks smooth at all. Is there any way to increase the frames per second? I would be great if it could have a natural spin acceleration/deacceleration.

Increasing the amount of degrees it spins on each frame makes it look faster, but very choppy.

Also, the RunDev forums give me redirect loops and 404's on Chrome, Firefox and Safari, closing access to most of the information google gives me. Does this happen to everyone?

score 5 · Answer 1 · answered Jul 17 '14 at 16:57

When I try that code on an image on my mac it's nice and smooth. I'm going to assume you are working on a mobile app.

First thing to say is that the image rotation is calculated on the fly. That means that every time you set the able of the image, LiveCode is recalculating all the pixels of the image which is quite expensive. On desktops, you have a pretty powerful CPU so spinning an image is fairly easily handled and looks smooth, but mobile devices have less powerful CPUs and struggle with this operation.

POSSIBLE SOLUTION 1 - LiveCode takes into account the "resizeQuality" property of the image. You can set this to "normal", "good" and "best", the fastest being "normal" which produces a blocky image and the slowest being "best" which has a much higher quality. If you are working with the higher quality settings you can improve performance by temporarily reducing the quality while the rotation is taking place.

on mouseUp
   put random(360) into i
   set the resizeQuality of image 1 to "normal"
   repeat with x=0 to i
      set the angle of image 1 to the angle of image 1 + 1
      wait for 10 milliseconds
   end repeat

   lock screen
   set the resizeQuality of image 1 to "best"
   set the angle of image 1 to the angle of image 1 + 1
   set the angle of image 1 to the angle of image 1 - 1
   unlock screen
end mouseUp

Notice that to get the image to redraw in high quality I've altered the angle again.

POSSIBLE SOLUTION 2 - If you can't get enough performance from that, the best thing to do would be to generate images for your wheel at all 360 positions. You can then set the filename properly of the image to the correct one.

local tImagesPath
set the itemdel to "/"
put item 1 to -2 of the filename of this stack & slash & "wheel_images" & slash into tImagesPath

set the resizeQuality of image 1 to "best"

repeat with x=0 to 359
   set the angle of image 1 to x
   export snapshot from image 1 to file tImagesPath & x & ".png" as png
   wait 1 millisecond with messages
end repeat

That script generates high quality images of the wheel in 359 positions.

To get good performance on mobile, when you open the app, repeat through all the images of the wheel in 359 positions and call:

prepare image

That will cause LiveCode to preload the image into memory making it possible to render some really smooth animations.

Thanks! The first solution makes it go about the same speed, I'm not building for any movile device, and I'm using OSX with 1gb video card and 16g of RAM, so that can't be the problem, can it? The second solution gives me an error (Can't open file (or mark file) near [Path of image]. This code goes into the button, right? — TianRB, Jul 17 '14 at 20:22
Ah, that will be because it can't find the folder.. I created it manually next to my LiveCode stack file. — Benjamin Beaumont, Jul 17 '14 at 22:39

score 2 · Accepted Answer · answered Jul 18 '14 at 22:22

Using the code provided by user Benjamin Beaumont (Thanks again!), I got it running like I wanted. To give it smooth movement and deceleration, I used the following code:

on mouseUp
  put randomInRange(15,45) into i
  set the resizeQuality of image 1 to "normal"
  put 0 into mi
  repeat with x=0 to i
     set the angle of image 1 to the angle of image 1 + (i - mi)
     put mi+1 into mi
     wait for 10 milliseconds
  end repeat
  lock screen
  set the resizeQuality of image 1 to "best"
  set the angle of image 1 to the angle of image 1 + 1
  set the angle of image 1 to the angle of image 1 - 1
  unlock screen
end mouseUp

The deceleration is completely lineal, but looks just fine, note that randomInRange is not a LiveCode function, if anyone wants it, here it is:

function randomInRange lowerLimit,upperLimit
     return random(upperLimit - lowerLimit + 1) + lowerLimit - 1
end randomInRange

Spinning an Image with acceleration - LiveCode

2 Answers2