Drawing Smooth Curves

[benhumphreys]

I'm fascinated by the curving trails in this JS demo and I'm wondering if it's possible in Löve.

However I don't really have a clue how to approach this. I'm only used to drawing PNGs. Is reproducing this effect only possible with shaders? What is the simplest and most efficient way?
I found an existing post on Bezier cuves, but the effect is very aliased.

Looking at the source code for the Javascript, it is achieved very concisely using a function that draws a curve through a given set of points. Is this kind of thing possible with shaders?

[micha]

There is no direct love function for drawing curves (even the circle is made of straight line segments). Try putting together the curve by drawing many short straight line segments. If you use a high enough resolution (enought nodes in between) this should look round enough.

[benhumphreys]

If you use a high enough resolution (enought nodes in between) this should look round enough.

Thanks for the reply! I thought about that, but I had the impression from my limited use and reading the forums, that the line-drawing and more "low-level" operations in Löve are not very efficient. If the curve shape is changing every frame then I couldn't use a canvas to save the results, either. So making a huge number of calls to love.graphics.line would be very slow.

Or maybe I'm wrong?

[micha]

So making a huge number of calls to

Code: Select all

love.graphics.line

would be very slow.

Or maybe I'm wrong?

Yes you are correct. The line function worked quiet slow for me.

[vrld]

Have a look at this topic. The demo works, but you have to remove line 247 in main.lua, since love.graphics.newFont(number) is not supported in 0.8 anymore. Naturally the frame rate decreases with the number of points, but is still in the acceptable range.
The trick is to call love.graphics.line() with all the points of the line instead of several love.graphics.line() calls for every segment of the curve. To further improve performance you can disable smooth line drawing.

[Ref]

Have played with curve fitting and found that Bezier fits are hard to control because the final curve does not go through the control points.
My preference (at this time) are Cubic-splines (if this is the correct term?) that do go through all control points.
They do have some quirks though.
Try playing with the attached demo.
Haven't been able to find out what's wrong with the path between the last two control points (the slope goes wierd).
Best

[benhumphreys]

Ref, that code is superb! I didn't realise you could throw so many points at love.graphics.line and it still work so nicely. Thanks!

[Jasoco]

Löve is really good at drawing hundreds to thousands of objects at once. The bottleneck comes when you're doing a lot of calculations and nested loops. A curve is a simple table of points which is really easy to loop through.

[Przemator]

When I decided to draw a bezier curve in Love, at some point the game started lagging. This was because I was drawing each segment separately in a for loop. Drawing as little as a few hundred segments already seemed a problem. Then I discovered you could put many points inside the love.graphics.line which helped me for a bit, until I saw an error saying that the function can only take a limited number of arguments. The ultimate solution was storing the curve coords in a table and then just drawing the table with love.graphics.line(table).

Question: Do you have a suggestion on how to draw a dashed line? Drawing segments is ineffective. I think it would be great if love.graphics.line allowed to interrupt the line flow with nil values. What I mean is, we define a table:

curve = {1, 1, 2, 2, nil, nil, 4, 4, 5, 5}
love.graphics.line(curve)

This example above should draw two segments, but with only 1 call of the line function (potentially making it faster than drawing each segment separately).

[Ref]

pattern, repeat = love.graphics.getLineStipple( )
Depreciated in Love 8.0!
Bummer.