Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat
Just another "Circle" - Gideros Forum

#### Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

#### Top Posters

• ar2rsawseen 6991
• SinisterSoft 3377
• OZApps 1983
• hgy29 1811
• antix 1761
• totebo 1752
• keszegh 1726
• hgvyas123 1412
• techdojo 1321
• phongtt 1029
• Mells 1024
• MikeHart 1020
• john26 995
• GregBUG 962
• pie 946
• Scouser 898
• talis 882
• oleg 775
• jdbc 734
• unlying 653

# Just another "Circle"

edited March 26
I wanted to create my own circle class but I thought it would be cool to extend a little bit to have an extra feature I can play with.
Maybe someone else find it useful

I used method that has been shown on the forum to fake anti-aliasing
its not perfect yet, I couldn't find easy way of calculating normal offsets as this is not in my domain

 ```Circle = Core.class(Mesh)   function Circle:init(__, r, COLOR, STEPs, PULL, CUT) local r1 = r -- h radius local r2 = r -- v radius local STEPS = STEPs or math.floor((math.pi/4)*r) local COLOR = COLOR or 0 local PULL = PULL or 0 local cut = CUT or 2 if STEPS < 3 then STEPS = 3 end if PULL > r then PULL = 0 elseif PULL > 0 then if CUT then while STEPS%cut ~= 0 do STEPS+=1 end elseif STEPS%2 ~= 0 then STEPS+=1 end end   local c = {} local v = {} local ind = {} local _i = 0 local _l = 0 local ou = 2 local step = math.pi/(STEPS/2) local pull = 0   v[#v+1] = 0; v[#v+1] = 0 c[#c+1]= COLOR; c[#c+1]= 1   --for i=step,PI*2, step do -- buggy cuz of infinite PI for i=1, STEPS do _l+=1 if _l%cut==0 then pull = PULL else pull = 0 end   v[#v+1] = (r1-pull)*math.cos(i*step) v[#v+1] = (r2-pull)*math.sin(i*step)   v[#v+1] = (r1-pull+ou)*math.cos(i*step) v[#v+1] = (r2-pull+ou)*math.sin(i*step) -- c[#c+1]= COLOR c[#c+1]= 1   c[#c+1]= COLOR c[#c+1]= 0.0 -- ind[#ind+1] = _i+3 ind[#ind+1] = _i+5 ind[#ind+1] = _i+4   ind[#ind+1] = _i+4 ind[#ind+1] = _i+3 ind[#ind+1] = _i+2   ind[#ind+1] = _i+4 ind[#ind+1] = _i+2 ind[#ind+1] = 1   _i = _i+2 end ind[#ind-7]=2 ind[#ind-6]=3 ind[#ind-5]=2 ind[#ind-2]=2   self:setVertexArray( v ) self:setIndexArray( ind ) self:setColorArray( c ) end```

updated:
-added setColor function
-new parameters are needed:
r1,r2 so you can make oval shape, wid,hid are going to resize it in between corners, if u still want just circle they need to be zeros

 ```Circle = Core.class(Mesh)   function Circle:init(__, r1,r2, WID, HID, COLOR, ALPHA, STEPs, PULL, CUT) local STEPS = STEPs or (r*2)/3 local COLOR = COLOR or 0 local PULL = PULL or 0 local cut = CUT or 2 if STEPS < 3 then STEPS = 3 end if PULL > r1 then PULL = 0 elseif PULL > 0 then while STEPS%cut ~= 0 do STEPS+=1 end end   self.c = {} local v = {} local ind = {} local _i = 0 local _l = 0 local ou = 1 local step = math.pi/(STEPS/2) local pull = 0 local xpull = 0 local ypull = 0 local widen = WID or 0 local heden = HID or 0   v[#v+1] = 0; v[#v+1] = 0 self.c[#self.c+1]= COLOR; self.c[#self.c+1]= ALPHA   for i=1, STEPS do _l+=1 if _l%cut==0 then pull = PULL else pull = 0 end   local COS = math.cos(i*step) local SIN = math.sin(i*step)   if COS > 0 then xpull = widen/2 elseif COS < 0 then xpull = -widen/2 else xpull = 0 end   if SIN > 0 then ypull = heden/2 elseif SIN < 0 then ypull = -heden/2 else ypull = 0 end   v[#v+1] = (r1-pull)* COS +xpull v[#v+1] = (r2-pull)* SIN +ypull   v[#v+1] = (r1-pull+ou)* COS +xpull v[#v+1] = (r2-pull+ou)* SIN +ypull -- self.c[#self.c+1]= COLOR self.c[#self.c+1]= ALPHA   self.c[#self.c+1]= 0--0xaa0055 self.c[#self.c+1]= 0 -- ind[#ind+1] = _i+3 ind[#ind+1] = _i+5 ind[#ind+1] = _i+4   ind[#ind+1] = _i+4 ind[#ind+1] = _i+3 ind[#ind+1] = _i+2   ind[#ind+1] = _i+4 ind[#ind+1] = _i+2 ind[#ind+1] = 1   _i = _i+2 end   ind[#ind-7]=2 ind[#ind-6]=3 ind[#ind-5]=2 ind[#ind-2]=2   self:setVertexArray( v ) self:setIndexArray( ind ) self:setColorArray( self.c ) end     function Circle:setColor(c,a) local a = a or 1 self.c = c; self.c = a for i=3, #self.c, 4 do self.c[i+0] = c self.c[i+1] = a end self:setColorArray( self.c ) end```

usage example:
 ```--star local c = Circle.new(false, 80, 0xffaa55,9,50) c:setPosition(100,100) stage:addChild(c)   --circle local c2 = Circle.new(false, 80, 0xffaa55) c2:setPosition(300,100) stage:addChild(c2)   --flower local c1 = Circle.new(false, 80, 0xffaa55,80,10,8) c1:setPosition(100,300) stage:addChild(c1)   local c1 = Circle.new(false, 80, 0xffaa55,100,5) c1:setPosition(300,300) stage:addChild(c1)``` +1 -1 (+7 / -0 ) Share on Facebook

## Comments

• btw, if you draw too big or too small circle you may want to control "steps" on your own, cause my formula is super bad
• @gemboy100 really interesting, thank you! did you try using gideros Path2d?

http://docs.giderosmobile.com/reference/gideros/Path2D#Path2D
• @gemboy100 super!!
I do not understand English
I am writing with the help of a google translator

my blog: https://simartinfo.blogspot.com
my games:
https://play.google.com/store/apps/developer?id=AndroidMobileGame+(indie)
Слава Україні
• edited February 23
@pie Yes, sort of, but I would need to dig too deep, I think, to understand how svg path works. The great thing is that we can use InkScape to export svg paths. Also it seam that only if you draw path2d with outlines enabled, you can get clear antialiased shape.
Also I like the fact that meshes can be extended to support gradients

testing speed performance
200 circles using this method vs. 200 path2d circles is around the same ~50 fps on sony m4 aqua
[EDIT] Actually increasing number of copies to 500 caused path2d to drop to 13 fps on mobile, 60 fps on my old pc
And mesh circle stays at 50 fps mobile, 250 old pc
I think path2d creates too many segments to achieve smoothness even for small objects

btw.
Is there a way to render mesh or path2d into Bitmaps to achieve best speed performance( or create effects for bacground)?

• sure, use rendertarget to render to bitmap
+1 -1 (+2 / -0 ) Share on Facebook
• Very nice. • Just extended it a bit more to be useful for buttons and stuff

 ```Circle = Core.class(Mesh)   function Circle:init(__, r1,r2, WID, HID, COLOR, ALPHA, STEPs, PULL, CUT) local STEPS = STEPs or math.floor((math.pi/4)*r1) local COLOR = COLOR or 0 local PULL = PULL or 0 local cut = CUT or 2 if STEPS < 3 then STEPS = 3 end if PULL > r1 then PULL = 0 elseif PULL > 0 then while STEPS%cut ~= 0 do STEPS+=1 end end   local c = {} local v = {} local ind = {} local _i = 0 local _l = 0 local ou = 2 local step = math.pi/(STEPS/2) local pull = 0 local xpull = 0 local ypull = 0 local widen = WID or 0 local heden = HID or 0   v[#v+1] = 0; v[#v+1] = 0 c[#c+1]= COLOR; c[#c+1]= ALPHA   for i=1, STEPS do _l+=1 if _l%cut==0 then pull = PULL else pull = 0 end   local COS = math.cos(i*step) local SIN = math.sin(i*step)   if COS > 0 then xpull = widen/2 elseif COS < 0 then xpull = -widen/2 else xpull = 0 end   if SIN > 0 then ypull = heden/2 elseif SIN < 0 then ypull = -heden/2 else ypull = 0 end   v[#v+1] = (r1-pull)* COS +xpull v[#v+1] = (r2-pull)* SIN +ypull   v[#v+1] = (r1-pull+ou)* COS +xpull v[#v+1] = (r2-pull+ou)* SIN +ypull -- c[#c+1]= COLOR c[#c+1]= ALPHA   c[#c+1]= 0--0xaa0055 c[#c+1]= 0 -- ind[#ind+1] = _i+3 ind[#ind+1] = _i+5 ind[#ind+1] = _i+4   ind[#ind+1] = _i+4 ind[#ind+1] = _i+3 ind[#ind+1] = _i+2   ind[#ind+1] = _i+4 ind[#ind+1] = _i+2 ind[#ind+1] = 1   _i = _i+2 end   ind[#ind-7]=2 ind[#ind-6]=3 ind[#ind-5]=2 ind[#ind-2]=2   self:setVertexArray( v ) self:setIndexArray( ind ) self:setColorArray( c ) end```
 ```--button local c1 = Circle.new(false, 15,15,200,100, 0xffaa55,1,80) local c1bg = Circle.new(false, 20,20,200,100, 0x885522,0.7,80) c1bg:setPosition(150,100) c1:setPosition(150,100) stage:addChild(c1bg) stage:addChild(c1) --   --button2 local c2 = Circle.new(false, 40,40,150,100, 0xffaa55,1,80) local c2bg = Circle.new(false, 20,20,200,150, 0x885522,0.7,80) c2bg:setPosition(150,300) c2:setPosition(150,300) stage:addChild(c2bg) stage:addChild(c2) --   --button3 local c3 = Circle.new(false, 55,55,100,0, 0xffaa55,1,80) local c3bg = Circle.new(false, 60,60,100,0, 0x885522,0.7,80) c3bg:setPosition(450,100) c3:setPosition(450,100) stage:addChild(c3bg) stage:addChild(c3) --```
new parameters are needed
r1,r2 so you can make oval shape, wid,hid are going to resize it in between corners, if u still want just circle they need to be zeros Likes: keszegh, oleg, pie, totebo, antix

+1 -1 (+5 / -0 ) Share on Facebook
• edited February 23 load the class on github

so much more comfortable
https://github.com/razorback456/gideros_tools/blob/master/Button.lua
I do not understand English
I am writing with the help of a google translator

my blog: https://simartinfo.blogspot.com
my games:
https://play.google.com/store/apps/developer?id=AndroidMobileGame+(indie)
Слава Україні
• It would be great if you have function setColor after the Color object is created
Thanks for sharing!
Coming soon
• That could be possible - as would 'shading'.
+1 -1 (+1 / -0 ) Share on Facebook
• @vitalitymobile
Added update to first post
+1 -1 (+2 / -0 ) Share on Facebook
• @gemboy100 Thank so much for this useful function!
Coming soon
Sign In or Register to comment.