How to create a circle with soft edges

[zandegran]

How can i create circle with soft edges like this one??
I believe that I should use Moaishader

[pygy79]

Why don't you simply use an image?

[zandegran]

I need to resize it set alpha, set texure, change colors etc so I need it to be dynamic

[dnhkng]

Seems pretty straightforward.
Ain't it just a just a bit of trigonometry, with the alpha channel a sigmoidal function of distance from the center point, all set with MOAIImage.setRGBA?
-Dave

[zandegran]

I'm drawing with MOAIDraw.fillCircle()..How can I use MOAIImage.setRGBA..
I see the technique behind your idea...But How can I apply it for thangs that are drawn using MOAIDraw.fillCircle()..

Simply Put, How can I access (and control) the attributes every pixel in the shapes that are drawn using MOAIDraw

[nosheet]

How can I access (and control) the attributes every pixel in the shapes that are drawn using MOAIDraw

I don't think you can, unfortunately. MOAIDraw is quite basic in this respect.

I think the most efficient way to do this would be making a custom fragment shader.
If you're not comfortable with that, the advice of @dnhkng was quite solid too, create texture on the fly using trigonometry (shader approach would pretty much be the same though).

[dnhkng]

but shaders are scarier than trigonometry

[nosheet]

it's getting even worse, because shaders will also include trigonometry
but it will execute super fast, and you can change it in runtime

[adam]

You could pull it off with a shader, I'm not sure how much faster it would be though, as doing that much in a nearly full screen fragment shader is very expensive.

Personally, I'd use a large texture, mipmapping should make it scale down well. You can still set the alpha and color of it from the color attribute of a prop.

[zandegran]

Thank you so much Guys The following code works, which can be extended to create a circle with soft edges but I need it to be applied for all the shapes like rectangle, regular polygon etc

Code: Select all

1. texture = MOAIImageTexture.new ()


2. texture:init ( 124, 124 )


3. for i = 1,122 do texture:setRGBA ( i, 0, 1, 1, 0, .5 ) texture:setRGBA ( i, 123, 1, 1, 0, 1 ) end


4. for i = 1,122 do texture:setRGBA ( 0, i, 1, 1, 0, .5 ) texture:setRGBA ( 123, i, 1, 1, 0, 1 ) end


5.  


6. for i = 1,122 do


7.     for j = 0,122 do


8.         texture:setRGBA ( i, j, 1,  1, 0, math.sin(i) )


9.     end


10. end


11. gfxQuad = MOAIGfxQuad2D.new ()


12. gfxQuad:setTexture ( texture )


13. gfxQuad:setRect ( -64, -64, 64, 64 )


14. gfxQuad:setUVRect ( 0, 0, 1, 1 )


15.  


16. prop = MOAIProp2D.new ()


17. prop:setBlendMode(1)


18. prop:setDeck ( gfxQuad )


19. layer:insertProp ( prop )


20.  


21. prop:moveRot ( 360, 5 )


22.  

http://getmoai.com/forums/textureimage-for-regular-polygon-t1068/ see this. The last step would be applying this texture to rounded squares and rects created like this http://getmoai.com/forums/creating-rounded-square-t1004/

[derickdong]

For a quick and dirty method, if you want arbitrary shapes, you could do something like this:

1. Render the base shape to the texture
2. Loop through all the pixels:
a. Get the color value of each of the surrounding pixels
b. Sum the nine values, and divide by 9
c. Set the current pixel to this value

You'd probably want to run step 2 a couple times to increase the size and amount of blur. You may also want to play around with how you're sampling the texture (steps 2a and 2b) and calculating the pixel value.

[sgeos]

You could create objects that return an alpha value for an X, Y pair. Then you could loop through all the pixels. It doesn't feel very efficient but it should work.

Code: Select all

1. -- create a new object


2. function new ( pParams )


3.   local result = {}


4.   result.init = function ( self, pParams )


5.     -- initialize object and return self


6.     return self


7.   end


8.   result.getAlpha = function ( self, pX, pY )


9.     local result


10.     -- set result using a calculation based on pX and pY


11.     -- the object state, such as bounding box or radius may factor into the calculation


12.     return result


13.   end


14.   -- return object


15.   return result:init ( pParams )


16. end