Can somebody help me how to draw lines which are not jagged? I try to make a sort-of drawing app yet the quality of the lines made using moveto/lineto is much worse than i need. Thanks
Hello, unfortunately this is one of the most requested features, that is not yet implemented.
I have couple of "crazy" ideas, but I doubt they'll work good enough:
1) draw the shape 2 times or even 4 times bigger and then scale it down to original size 2) use multiple shape objects by drawing multiple line one over another using same color but only decreasing opacity 3) Use and bitmap image color pattern, draw the shape that is the size of a line and fill it with this color (maybe even transforming bitmap if needed)
I'm actually interested how hard that could be to implement anti-alising into Gideros using openGL ES?
If I look up for the answers then they vary from "it's impossible" to "it could be done by adding 4 lines of code".
I tried the 1st method, scaling down did not make any smoothing effect unfortunately. i also thought about the 2nd method as a possible workaround and it is indeed quite effective. using 3 lines with decreasing width and increasing opacity i could achieve a good level of smoothing. i did not try the 3rd method. so thanks for the ideas, i will accept the answer, although an api-level solution would be the best, i hope that it will come in the future.
@Drix, sounds like another creative solution. I needed variable width lines, so this would not work for me though. Actually finally i use meshes to draw the lines (each segment consists of two triangles). There (thanks also to @atilim for the hint) i added a 1-vertex wide (this part was important, maybe it works best if you don't do scaling of your project) border (quadrangular) mesh on each side that has 0 alpha on the outer vertices and 1 alpha on the inner vertices. This gave a quite good antialiasing effect. This way you need altogether 6 triangles per segment instead of 2, but it still performs quite well. you can check my app if you want to see how it looks: http://www.amazon.com/gp/product/B009IVLQ6Y
@keszegh, I still have not had the opportunity to work with meshes in Gideros (just recently I started studying this SDK), but I perfectly understood your solution. Very nice and consistent for the purposes of your app. Moreover, congratulations! Great app with really smooth lines.
@ar2rsawseen > I am wondering the other way around : what is available in the Shape Class that can't be done through Meshes?
We would need a wrapper in order to get similar setFillStyle access, and I don't see how to replicate a line style (create polygons with width=1px?) without getting something a bit complicated when setting vertices.
@DRS Here is an example that uses basic functionalities + combine texture mapping and color vertices for advanced effects.
So one could actually abstract meshes to Shape object's API (and even more) which would draw antialised meshes underneath?
Maybe we don't need Shape obejct at all?
I really need to wrap my head around the possibilities of meshes at least once
yes. here the most complicated thing can be triangulating (complex) polygons. And while talking with @Mells, we've decided to provide a triangulate function (but again I cannot give a time estimate)
Hi, after I released Point to Point some of my friends ask me that why lines are not good enough. So I go back this post: Currently I am using "Drix" comment on this post.
@emre that is something we are looking for good solution all the time.
Atilims solution was to instead of drawing simple 1px wide line, you draw a shape around it, to fill 1px wide shape of line. That was what the Clipper lib was for. Then use triangulation algorythm, to create Mesh representing that line And fill that Mesh with gradient from the line color to transparent (alpha 0), thus making it antialized.
While it probably would look good visually, I'd say it is an overkill, especially for fast redrawing shapes. And thus far I only ported Clipper to Gideros and was looking for better triangulaion algorythm implementations.
there, e.g., in my last comment there is another way of doing antialiased lines using meshes, it's like atilims example but as a function, on the other hand you first need to compute the many coordinates for it (the 4 vertices of the rectangle representing your segment, plus 4 more coordinates representing the vertices of the 'extended' segment, the one which is in gradient to achieve anti-aliasing effect), but this is not hard.
Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!). https://deluxepixel.com
Comments
unfortunately this is one of the most requested features, that is not yet implemented.
I have couple of "crazy" ideas, but I doubt they'll work good enough:
1) draw the shape 2 times or even 4 times bigger and then scale it down to original size
2) use multiple shape objects by drawing multiple line one over another using same color but only decreasing opacity
3) Use and bitmap image color pattern, draw the shape that is the size of a line and fill it with this color (maybe even transforming bitmap if needed)
I'm actually interested how hard that could be to implement anti-alising into Gideros using openGL ES?
If I look up for the answers then they vary from "it's impossible" to "it could be done by adding 4 lines of code".
http://stackoverflow.com/questions/1813035/opengl-es-iphone-drawing-anti-aliased-lines
Unfortunately can't test it and can't give any realistic feedback
Likes: jack0088
Also, I forgot to mention that my primary target is android.
In case it is much requested, is there any chance that it will be implemented sometime in the near future?
Fragmenter - animated loop machine and IKONOMIKON - the memory game
i also thought about the
2nd method as a possible workaround and it is indeed quite effective. using 3 lines with decreasing width and increasing opacity i could achieve a good level of smoothing.
i did not try the 3rd method.
so thanks for the ideas, i will accept the answer, although an api-level solution would be the best, i hope that it will come in the future.
Fragmenter - animated loop machine and IKONOMIKON - the memory game
http://www.giderosmobile.com/forum/discussion/484/anti-aliasing
There (thanks also to @atilim for the hint) i added a 1-vertex wide (this part was important, maybe it works best if you don't do scaling of your project) border (quadrangular) mesh on each side that has 0 alpha on the outer vertices and 1 alpha on the inner vertices. This gave a quite good antialiasing effect. This way you need altogether 6 triangles per segment instead of 2, but it still performs quite well.
you can check my app if you want to see how it looks:
http://www.amazon.com/gp/product/B009IVLQ6Y
Fragmenter - animated loop machine and IKONOMIKON - the memory game
Maybe we don't need Shape obejct at all?
I really need to wrap my head around the possibilities of meshes at least once
Are there some (beginners) samples on how to use mesh?
I can not find them on the internet..
We would need a wrapper in order to get similar setFillStyle access, and I don't see how to replicate a line style (create polygons with width=1px?) without getting something a bit complicated when setting vertices.
@DRS
Here is an example that uses basic functionalities + combine texture mapping and color vertices for advanced effects.
I did see your sample, but i don't understand it really hehe.
So that why i asked a beginners sample, so i understand how it works..
Thanks.
Likes: SimplesApps
So I go back this post:
Currently I am using "Drix" comment on this post.
Is there any update or progress about drawing antialiased lines?
Thanks.
that is something we are looking for good solution all the time.
Atilims solution was to instead of drawing simple 1px wide line, you draw a shape around it, to fill 1px wide shape of line. That was what the Clipper lib was for.
Then use triangulation algorythm, to create Mesh representing that line
And fill that Mesh with gradient from the line color to transparent (alpha 0), thus making it antialized.
While it probably would look good visually, I'd say it is an overkill, especially for fast redrawing shapes. And thus far I only ported Clipper to Gideros and was looking for better triangulaion algorythm implementations.
http://www.giderosmobile.com/forum/discussion/comment/27130#Comment_27130
there, e.g., in my last comment there is another way of doing antialiased lines using meshes, it's like atilims example but as a function, on the other hand you first need to compute the many coordinates for it (the 4 vertices of the rectangle representing your segment, plus 4 more coordinates representing the vertices of the 'extended' segment, the one which is in gradient to achieve anti-aliasing effect), but this is not hard.
Fragmenter - animated loop machine and IKONOMIKON - the memory game
with this class/function:
Fragmenter - animated loop machine and IKONOMIKON - the memory game
See the middle of this paper for code...
http://jcgt.org/published/0002/02/08/paper.pdf
https://deluxepixel.com