Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / [SOLVED] How to draw filled circle sector

Author
Message
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 16th Dec 2018 19:56
I need an algorithm to draw filled circle sector for one of my projects. I found an algorithm from QB64 wiki to do exact what I needed (https://qb64.org/wiki/Alternative_circle_routine). However the performance is not that good in AGK. Would there be a better way to achieve the same with better performance? The DrawLine method seem to be a bit slow especially in HTML5 where the framerate drops to ~14 with one full circle.

I tried to play with shaders for some time but didn't get the results wanted (I was able to get circles but no clue how to make a circle sector).

I attached the code here if this will be helpful for someone... Function can draw circle, ellipse, arc and sector outlined or filled.


The author of this post has marked a post as an answer.

Go to answer

puzzler2018
User Banned
Posted: 16th Dec 2018 20:07
DrawEllipse (x, y, radius, radius, color, color, 1)

1 = filled
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 16th Dec 2018 20:16
@puzzler2018: DrawEllipse draws an ellipse, not a circle sector (https://en.m.wikipedia.org/wiki/Circular_sector). Or then I don’t know how to use it.
puzzler2018
User Banned
Posted: 16th Dec 2018 20:17
Got ya - bear with me
puzzler2018
User Banned
Posted: 16th Dec 2018 20:24 Edited at: 16th Dec 2018 20:27
Any faster

fubarpk
Retired Moderator
19
Years of Service
User Offline
Joined: 11th Jan 2005
Playing: AGK is my friend
Posted: 16th Dec 2018 22:00
Quote: "DrawEllipse draws an ellipse, not a circle"

A Circle is an Ellipse with the same radius value for the x radius as they y radius

but as you are after a sector of a circle you need to draw the circle yourself from
a start location to end location

To draw a circle it is a matter of plotting 2Pi * radius (ie circumferance = 2PiR)
there are various methods to plot a circle one is a for next loop stepping from 0 to 2Pi
and plotting sin against cosine like in the below pseudocode

by calculating the position on the circumferance you can change the for/next loop
to work for a sector

There are several other methods of doing this and if i get a chance il have a look at
other methods
fubar
Jack
19
Years of Service
User Offline
Joined: 4th Oct 2004
Location: [Germany]
Posted: 17th Dec 2018 11:55 Edited at: 17th Dec 2018 11:58
Use my circle shader from the community shader thread for maximal performance.
https://forum.thegamecreators.com/thread/214598?page=3#msg2604433
You can remove the outline code to get even faster, but It should already be peak performance if compared to the agk draw commands.

[/url]
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 18th Dec 2018 05:52
Thanks for all the suggestions guys!

puzzler2018's algorithm is close to the example I included in my first post but not as efficient (on my computer I get ~50 FPS drawing one full circle with puzzler2018's algorithm with resolution 1024x768 compared to ~99 FPS with the original algorithm from QB64 Wiki). Both also need the extra DrawLine calls to make sure that the circle is filled completely. This might have something to do on how AppGameKit renders because the same algorithm works without issues on same resolution in QB64 and Game Maker Studio (scaling down stepp value doesn't seem to help much on fixing this without going to insanely small values).

@Jack: As mentioned I have played with shaders and I was able to get a full circle drawn. However as mentioned I don't have a clue how to code a shader to draw a sector with given two angles. Any idea?

Jack
19
Years of Service
User Offline
Joined: 4th Oct 2004
Location: [Germany]
Posted: 18th Dec 2018 10:44 Edited at: 18th Dec 2018 10:44
Quote: "draw a sector with given two angles. Any idea?
"

You mean some sort of pizza slice of the circle with Angle Size and Angle Rotation?
As long as you do not want to rotate a texture according to the rotation, you could use the progress shader to get inspiration how to
just render a slice of your circle:
https://forum.thegamecreators.com/thread/214598?page=3#msg2604492
The first(green) one is your shader of interest.

[/url]
TomToad
6
Years of Service
User Offline
Joined: 6th Jan 2018
Location:
Posted: 18th Dec 2018 13:07
I almost have something. With shader

and AppGameKit code

It works well and quick up to 180 degrees. For some reason, it wont render above that.
TomToad
6
Years of Service
User Offline
Joined: 6th Jan 2018
Location:
Posted: 18th Dec 2018 13:22
Now have something that works, but only if the start angle is 0. Anything else and it renders improperly.
Shader

AGK
Bengismo
6
Years of Service
User Offline
Joined: 20th Nov 2017
Location: Yorkshire, England
Posted: 18th Dec 2018 13:25
This post has been marked by the post author as the answer.
This works fine for me

AGK Code



And the CircleSegment.ps shader file to go with it



With this you can draw from any angle -180 to 180. Zero is straight up (unless you rotate the sprite) and you can also set an outer radius (0.5 normally) and also an inner radius (0 to 0.5) so that you can draw a band sort of like the progress shader. You can assign an image to it too so that the image is drawn rather than a solid colour
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 18th Dec 2018 13:37
Thanks Jack! This is the best solution so far! Attached a GIF animation (there's some issues in my mask still).

Maybe some shader guru could do the same without the mask as well. There's actually pretty similar example available here which can be easily changed to draw a full circle. However I don't have a clue how to make it show color without gradient and how to make it to scale to sprite dimensions in AppGameKit (it works only in full screen).

Attachments

Login to view attachments
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 18th Dec 2018 13:39
Thanks @TomToad and @Bengismo!! You posted while I was writing reply to Jack I will test your solutions next!
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 18th Dec 2018 14:03
@Bengismo: Your code does exactly what I was trying to get done Super thanks!!
Rich Dersheimer
AGK Developer
14
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 18th Dec 2018 22:16
@Bengismo - I'm curious how this could be used to draw a pie chart. What values would be used to set the circle to show 3/4, 10%, etc.? When I put in different values for Angle#, there doesn't seem to be a straightforward relationship to how much of the circle is shown, i.e. -180 shows none of it, but 0.0 does not show half, and 180.0 does not show all of it.
Rich Dersheimer
AGK Developer
14
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 18th Dec 2018 22:40
@w0rm, this is from another thread about partial discs. Although Bengismo has solved your question, this might also be useful.

TomToad
6
Years of Service
User Offline
Joined: 6th Jan 2018
Location:
Posted: 19th Dec 2018 13:04
@Bengismo, Your solution suffers from the same problems that mine does. StartAngle must be in the range of -180 <= StartAngle <= 180, and EndAngle must be in the range of StartAngle <= EndAngle <= 180. That means you can't have an arc that crosses the -180/180 seam.
Phaelax
DBPro Master
21
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 19th Dec 2018 13:11
That's easily worked around by rotating the sprite itself.
Tiled TMX Importer V.2
XML Parser V.2
Base64 Encoder/Decoder
Purple Token - Free online hi-score database
Legend of Zelda

"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
Bengismo
6
Years of Service
User Offline
Joined: 20th Nov 2017
Location: Yorkshire, England
Posted: 19th Dec 2018 13:18
Phealax spotted it ^^ You just rotate the sprite

An example


Rich wrote: "@Bengismo - I'm curious how this could be used to draw a pie chart. What values would be used to set the circle to show 3/4, 10%, etc.? When I put in different values for Angle#, there doesn't seem to be a straightforward relationship to how much of the circle is shown, i.e. -180 shows none of it, but 0.0 does not show half, and 180.0 does not show all of it."


As the example shows... you use values between -180 to 180. A value of 0 does indeed show half the "pie" - -90 will give you a quarter etc.... Not sure why you didnt think it would??




TomToad
6
Years of Service
User Offline
Joined: 6th Jan 2018
Location:
Posted: 19th Dec 2018 14:31
Quote: "Phealax spotted it ^^ You just rotate the sprite
"


That's fine for a static arc, but if the arc changes throughout the program, then you would need to figure out the angle to rotate the sprite and adjust the angles accordingly which can get quite complicated. I think it would be better to fix the problem in the shader itself rather than go through mental gymnastics to make things work.

Here is your shader, modified to work across the seam and also will work with ranges outside of -180 to 180.

And here is the original code posted by w0rm, but modified a bit to work with the shader, also added the ability to change the start angle by pressing the mouse button.

This will always draw an arc from the start angle to the end angle in a clockwise direction.
Bengismo
6
Years of Service
User Offline
Joined: 20th Nov 2017
Location: Yorkshire, England
Posted: 19th Dec 2018 16:32
I dont think it was complicated really? lol

Just rotate the sprite to align with a start angle then draw to the (end-start) angle. Easy really.

The shader you posted is much more complex and now not so intuitive, not to mention that you do realise the shader is run for every single pixel right?... It just makes it much slower performing the range calculations over and over again when it can be done outside the shader. Id minimise the work done in the shader rather than over complicate it and add to it when its very simple already.

Besides...the ops question was answered anf we are now debating something thats personal preferance. Whatever makes you happy.
Rich Dersheimer
AGK Developer
14
Years of Service
User Offline
Joined: 1st Jul 2009
Location: Inside the box
Posted: 19th Dec 2018 20:26
Quote: "As the example shows... you use values between -180 to 180. A value of 0 does indeed show half the "pie" - -90 will give you a quarter etc.... Not sure why you didnt think it would??"


Got it! I was leaving the -170 in the call to the shader, so I never got the full range. Thanks
w0rm
5
Years of Service
User Offline
Joined: 9th Nov 2018
Location:
Posted: 21st Dec 2018 17:19
Great work guys! I would not have believed how much effort you put into this. Highly appreciated!!

I have to agree that TomToad's latest solution is more elegant. However I noticed two annoyances in that: 1) I was not able to achieve a full circle, and 2) the provided shader doesn't work when exporting to HTML5 but complains that while loops are not supported (at least in Edge browser).

To overcome the annoyances noted in rotation and angles with Bengismo's solution I used the following:

1. To provide angles in range 0...360 one needs to subtract 180 from those to get them between needed range of -180...180
2. Setting sprite rotation to 180 moves angle 0 (in range 0...360) to north - and also enables clockwise calculation of start and end angles
3. If needed, setting horizontal sprite flip to 1 allows using counter clockwise angles (when rotation set to 180)
TomToad
6
Years of Service
User Offline
Joined: 6th Jan 2018
Location:
Posted: 21st Dec 2018 18:58
Seems WebGL doesn't like while loops. You can just remove them, you only need to make sure the angles are within -180/180 in your app to avoid unexpected results. This will also have the benefit of allowing full circles by having startAngle less than -180 and endAngle greater than 180.

Login to post a reply

Server time is: 2024-04-25 12:04:35
Your offset time is: 2024-04-25 12:04:35