In an app I'm giving a new makeover I wanted to be able to display a radial progress timer that counts down the number of days, hours, minutes and seconds to the next action the user can take and found this site that creates 100's of images depending on the number of bars, i.e. an image for each percentage/degree of the bar and then the same again for each colour bar etc.
http://hmaidasani.github.io/RadialChartImageGenerator/
This seemed like a good option but it meant editing 100's of images to get rid of background colours and it wasn't always possible to remove it completely so I thought I'd have a look at creating one sprite (a circle) and using a for next loop to create that single sprite 360 times around the perimeter of the circle and have each sprite switch between visible and invisible based on the number of seconds passed etc.
Here's the code to do this using the mathematical functions sin and cos
// set window properties
SetWindowTitle( "Radial Timer" )
SetWindowSize( 1024, 768, 0 )
// set display properties
SetVirtualResolution( 1024, 768 ) // doesn't have to match the window
SetSyncRate( 60, 0 ) // 30fps instead of 60 to save battery
imgCircle = LoadImage("Circle.png")
spritesHH as integer[360]
spritesMM as integer[360]
spritesSS as integer[360]
sprite as integer
for a = 0 to 359
spritesHH[a] = CreateSprite(imgCircle)
spritesMM[a] = CreateSprite(imgCircle)
spritesSS[a] = CreateSprite(imgCircle)
SetSpriteSize(spritesHH[a], 10, 10)
SetSpriteSize(spritesMM[a], 10, 10)
SetSpriteSize(spritesSS[a], 10, 10)
SetSpriteOffset(spritesHH[a], 5, 5)
SetSpriteOffset(spritesMM[a], 5, 5)
SetSpriteOffset(spritesSS[a], 5, 5)
SetSpriteColor(spritesHH[a], 197, 166, 51, 255)
SetSpriteColor(spritesMM[a], 186, 75, 54, 255)
SetSpriteColor(spritesSS[a], 111, 202, 120, 255)
SetSpritePositionByOffset(spritesHH[a], 60 * cos(a - 90) + 512, 60 * sin(a - 90) + 384)
SetSpritePositionByOffset(spritesMM[a], 80 * cos(a - 90) + 512, 80 * sin(a - 90) + 384)
SetSpritePositionByOffset(spritesSS[a], 100 * cos(a - 90) + 512, 100 * sin(a - 90) + 384)
next
do
for a = 0 to 359
if ((360 / 24) * GetHoursFromUnix(GetUnixTime()) > a)
SetSpriteVisible(spritesHH[a], 1)
else
SetSpriteVisible(spritesHH[a], 0)
endif
if ((360 / 60) * GetMinutesFromUnix(GetUnixTime()) > a)
SetSpriteVisible(spritesMM[a], 1)
else
SetSpriteVisible(spritesMM[a], 0)
endif
if ((360 / 60) * GetSecondsFromUnix(GetUnixTime()) > a)
SetSpriteVisible(spritesSS[a], 1)
else
SetSpriteVisible(spritesSS[a], 0)
endif
next
Sync()
loop
This is how a user from another forum and development tool explains how to constrain a sprite around a perimeter
Constrain its X position to AAA*sin(Timer()*BBB)+CCC
Constrain its Y position to AAA*cos(Timer()*BBB)+CCC
AAA = radius of circle
BBB = speed of movement
CCC = centre point of the circle
This will have one sprite moving around a circle perimeter at whatever speed you set (BBB). I used this to position the 360 sprites around the perimeter.
I've attached a circle image I created quickly in Pixelmator but because the edge is faded it may be noticeable when they are overlapped, especially if the sprites are large so I'd recommend creating your own version
Here's a screenshot of the output
