How To Make Circle Progress Bar

Monkey Forums/Monkey Programming/How To Make Circle Progress Bar

Alex	(Posted 2015) [#1]

Hello, has anyone made a circle progress bar?
Like this.

If so, please, share your method here.
Thanks!

Derron

(Posted 2015) [#2]

Most common approach is to have two images: the empty circle, and the full circle.
Next step is to get a "draw textured poly" from somewhere (if not available in mojo...).
Then just draw the portions according to "simple" calculations (percentage of a circle).

The text of course is just drawn "centered" to the center of the circle.

bye
Ron

Nobuyuki

(Posted 2015) [#3]

Check circularprogressbar.monkey from SimpleUI... It's an image-based solution which doesn't rely on drawing a textured poly or any specific shapes or graphical extensions to work, since it uses the default scissor rectangles and tricky rotating to do its job.

Derron

(Posted 2015) [#4]

Before going asleep I thought about using viewports and a "quarter circle" approach too. But without knowing much about matrix operations (and available commands in Monkey-X) I only was able to code something for repeatable things because I was not able to imagine a way to rotate a quarter circle around the center point with keeping pixels at their desired spots.
Seems your solution solved what my mind was to sleepy for :p. Will have to check that out for "BlitzMax" (of course the matrix stuff is not abstracted that nicely there) somewhen. Thanks for pointing to your nifty solution.

bye
Ron

Gerry Quinn

(Posted 2015) [#5]

Two semicircles, one empty and one filled, combined with image rotation should do it, Whichever one is larger will be drawn twice to cover the appropriate arc.

Derron

(Posted 2015) [#6]

@gerry
When doing "overdrawing" you will have alpha'd pixels drawn overlayed - which makes them more opaque (especially for things containing semitransparency - like "glass bulbs" for health/mana).

In all cases you should avoid drawing things overlayed .... Or did I misunderstood things?

bye
Ron

Alex	(Posted 2015) [#7]

Thank you guys!

2 Nobuyuki
Many thanks! Cool idea, works for me like a charm!

Cheers!

Gerry Quinn

(Posted 2015) [#8]

You are right about the alpha pixels, I guess. The poly solution would be better but anyway it seems you have a better answer.

zoqfotpik

(Posted 2015) [#9]

I probably would have done it with trig functions and some sort of drawpoly, or even a thick drawline as shown elsewhere on this site (the very early Asteroids demo had it.)

SLotman

(Posted 2015) [#10]

What about drawline and sin/cos?

To replicate the graphic above, you draw a blue circle, then a smaller black circle.
Then you draw lines in a loop from circle center to radius + cos(0 to angle), sin(0 to angle)
Draw again a blue circle, and a smaller black one - and thats it.

SLotman

(Posted 2015) [#11]

Here, just did it as an exercise:

Import mojo

Class Game Extends App
	Field angle:Float
	
	Method OnCreate()
		SetUpdateRate 60
		angle = 0
	End Method
	
	Method OnRender()
		SetBlend AlphaBlend
		SetColor 0,64,255
		DrawCircle 100,100,53
		SetColor 0,0,128
		DrawCircle 100,100,51
		
		SetColor 0,0,255
		If angle > 360 Then angle=360
		For Local a:Float = 0 To angle Step .5
			DrawLine 100,100, 100 + 50*Cos(a-90), 100 + 50*Sin(a-90)
		Next
		
		SetColor 0,64,255
		DrawCircle 100,100,40
		SetColor 0,0,128
		DrawCircle 100,100,38
		
		Local str:String = String(Int((angle / 360.0) * 100)) + "%"
		SetColor 255,255,255
		DrawText str, 103 - (TextWidth(str)/2.0), 94

	End Method
	
	Method OnUpdate()
		angle += 1
	End Method
End Class

Function Main()
	New Game()
End Function

Derron

(Posted 2015) [#12]

i think most people will more enjoy creating two image assets (empty and full) and use an image based approach than drawing multiple small lines (I think they might even be "slower" than blitting the image textures). Also I doubt that "lines" are that smooth (round + anti-aliased) as the images are (except you draw a line for nearly each pixel ...and even then you will have some "jiggering").

Nice to have simple examples, but the "rotation + scissor + image" will certainly fit the best in _most_ cases.

bye
Ron

Gerry Quinn

(Posted 2015) [#13]

The lines of a polygon can be generated automatically according to a fairly simple formula, and the numbers won't be too great so long as the circular 'walls' are thick enough that each line segment is a few pixels long.

SLotman

(Posted 2015) [#14]

You guys know that lines in Monkey (maybe not in HTML5, but on every other target) are just empty polygons, right?

You can indeed optimize this by just using drawpoly - but since drawpoly uses triangles, it will be a little more complicated than that example I've made in 5 minutes.

DruggedBunny

(Posted 2015) [#15]

Nice one, SLotman!