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!

# Just another "Circle"

Member
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:
-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[1] = c; self.c[2] = 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

• Member
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
• Member
@gemboy100 really interesting, thank you! did you try using gideros Path2d?

http://docs.giderosmobile.com/reference/gideros/Path2D#Path2D
• Member

@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:
Слава Україні
• Member
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)?

• Member
sure, use rendertarget to render to bitmap
+1 -1 (+2 / -0 ) Share on Facebook
• Maintainer
• Member
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
• Member
edited February 23

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:
Слава Україні
• Member
It would be great if you have function setColor after the Color object is created
Thanks for sharing!
Coming soon
• Maintainer
That could be possible - as would 'shading'.
+1 -1 (+1 / -0 ) Share on Facebook
• Member
@vitalitymobile