Share Your Code

Bezier Curve for Corona SDK

Posted by neostar20, Posted on August 21, 2012, Last updated March 22, 2013

GitHub URL: 
https://github.com/neostar20/Bezier-Curve-for-Corona-SDK

Bezier Curve for Corona SDK

A Bézier curve is a parametric curve frequently used in computer graphics and related fields. Generalizations of Bézier curves to higher dimensions are called Bézier surfaces, of which the Bézier triangle is a special case.

In vector graphics, Bézier curves are used to model smooth curves that can be scaled indefinitely. "Paths," as they are commonly referred to in image manipulation programs,[note 1] are combinations of linked Bézier curves. Paths are not bound by the limits of rasterized images and are intuitive to modify. Bézier curves are also used in animation as a tool to control motion.

From: http://en.wikipedia.org/wiki/B%C3%A9zier_curve

Forget the Bezier Curve function Carlos created (http://www.carlosicaza.com/2011/01/03/bezier-curve-fitting-in-corona-sdk/) which only accepts two control points.

I have created a Bezier Curve function which accepts unlimited number of control points, which allows you do get any type of curve you dreamed of.

Below is the simple Module of Bezier Curve:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
module(...,package.seeall)
-------------------------------------------------
-- bezier.lua
-- Version: 1.0
-- Author: Rajendra Pondel
-- Email: neostar20@gmail.com
 
-- Copyright: 2012 Rajendra Pondel <neostar20@gmail.com>
 
-- Permission is hereby granted, free of charge, to any person obtaining a copy of 
-- this software and associated documentation files (the "Software"), to deal in the 
-- Software without restriction, including without limitation the rights to use, copy, 
-- modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, 
-- and to permit persons to whom the Software is furnished to do so, subject to the 
-- following conditions:
-- 
-- The above copyright notice and this permission notice shall be included in all copies 
-- or substantial portions of the Software.
-- 
-- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
-- INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR 
-- PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE 
-- FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
-- OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
-- DEALINGS IN THE SOFTWARE.
 
 
local bezier = {}
 
function bezier:curve(xv, yv)
        local reductor = {__index = function(self, ind)
                return setmetatable({tree = self, level = ind}, {__index = function(curves, ind)
                        return function(t)
                                local x1, y1 = curves.tree[curves.level-1][ind](t)
                                local x2, y2 = curves.tree[curves.level-1][ind+1](t)
                                return x1 + (x2 - x1) * t, y1 + (y2 - y1) * t
                                end
                        end})
                end
        }
        local points = {}
        for i = 1, #xv do
                        points[i] = function(t) return xv[i], yv[i] end
        end
        return setmetatable({points}, reductor)[#points][1]
end
 
return bezier

And below is how to use the beizer curve module:

Remember, first and the last points are initial and ending points respectively when you pass parameter to the bezier:curve() function.

For example:

1
2
        local curve = bezier:curve({xInitial, xControlPoint1, xControlPoint2, xControlPoint3}, {yInitial, yControlPoint1, yControlPoint2, yControlPoint3})
        

Now, "curve" is a local variable, which is a function, so you can pass the granularity to it, for example:

1
2
3
4
5
--note that you need to iterate through 0 to 1.
for i=0, 1, 0.1 do
        local x, y = curve(i)
        print(i, 'X: ' .. x, 'Y: ' .. y)
end

So, this is how you really use it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
display.setStatusBar( display.HiddenStatusBar )
 
-- main.lua
 
local bezier = require('bezier')
 
local curve = bezier:curve({10, 20, 30}, {10, 20, 30})
 
print('curve is a ' .. type(curve))
 
-- see the terminal for the output of the function
 
for i=0.01, 1, 0.1 do
        local x, y = curve(i)
        print(i, 'X: ' .. x, 'Y: ' .. y)
end

Public Repository at: https://github.com/neostar20/Bezier-Curve-for-Corona-SDK

If you want to play with control points and want to quickly draw curves you can try this tool to do so at http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm

Update: Now you can use Level Director from http://www.retrofitproductions.com/ to draw and get points for Bezier curve. This is great tool which simplifies complex task.

Watch Bezier Curve in Action at http://www.youtube.com/watch?v=k_AgDNarbvs


Replies

Caleb P
User offline. Last seen 2 hours 34 min ago. Offline
Joined: 5 May 2012

Pretty cool!
One tip: You do not need module(..., package.seeall) if you have the table approach.

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@quinc, yeah i know that, its not necessary to have module(..., package.seeall) , but i stricts acces of local variable outside of the module access so it prevents memory leaks.

Beloudest
User offline. Last seen 1 day 12 hours ago. Offline
Joined: 15 Jan 2012

what log is this based around, is it "least squares best line fitting"? Just absorbing all the finer parts of coding over the last few days. Cheers.

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@Beloudest, The code you see above is all have to do something with bezier curve.

So, as name implies it gives you points on coordinates for the initial, ending and control poins.

so, if you define your control points such a way then its possible to get square points.

Just try to explore some bezier curve with different control points, you can have better idea of it.

http://www.math.ucla.edu/~baker/java/hoefer/Bezier.htm

Cheers.

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Hello,

I'm not too familiar with bezier curves and can't seem to get the curve that I want. Could you see the image from the link and describe me if something like that can be done with this bezier code?

http://bittinikkari.com/beziercurves.png

I don't understand how to use parameters to control the curve. There are 3 different color curves in that image just as an example of what I'm trying to do.

So basically I need some bezier-curve-for-dummies-type-of-help :)

I'm using portrait landscape (320x480).

Thank you.

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi hytka81,

From what i see you want from http://bittinikkari.com/beziercurves.png

to achieve this you simply need the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
display.setStatusBar( display.HiddenStatusBar )
 
-- main.lua
 
local bezier = require('bezier')
 
local curve1 =  bezier:curve({0, 160, 320}, {0, 480*1.5, 0})
local x1, y1 = curve1(0.01)
local line1 = display.newLine(x1, y1, x1+1, y1+1)
line1:setColor( 255, 0, 0, 255 )
line1.width = 3
 
for i=0.02, 1, 0.01 do
        local x, y = curve1(i)
        line1:append(x, y)
end
 
 
local curve2 =  bezier:curve({0, 100, 240, 0}, {0, 10, 100, 400})
local x1, y1 = curve2(0.01)
local line2 = display.newLine(x1, y1, x1+1, y1+1)
line2:setColor(0, 255, 0, 255 )
line2.width = 3
 
for i=0.02, 1.01, 0.01 do
        local x, y = curve2(i)
        line2:append(x, y)
        print(i, x, y)
end
 
 
local curve3 =  bezier:curve({320, 240, 100, 320}, {0, 10, 100, 400})
local x1, y1 = curve3(0.01)
local line3 = display.newLine(x1, y1, x1+1, y1+1)
line3:setColor(0, 0, 255, 255 )
line3.width = 3
 
for i=0.02, 1.01, 0.01 do
        local x, y = curve3(i)
        line3:append(x, y)
        print(i, x, y)
end

and this is ur config.lua file

1
2
3
4
5
6
7
8
9
application =
{
        content =
        {
                width = 320,
                height = 480,
                scale = "zoomEven"
        },
}

let me know if this works for you. :)

Regards.

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Hi neostar20,

It works perfectly, thank you very much :)

Br,

Kalle

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@hytka81, Your welcome, vote for it if it worked for you.

Thanks, :)

Regards,
Rajendra

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Vote button does not work for some reason, I get an error message :( I will try it again at some point using another browser (using Chrome now).

I'm now trying to make objects follow those curves and rotate to face their current direction and it works quite well at the moment.

Wondering how hard it would be to somehow make object move with constant speed along the curve, now it slows down on tight curves (guess it's because there are more points there...)

Anyway, I can live with that if I can't come up with any solutions.

Br,

Kalle

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi hytka81,

Because i can't see code, how you are implementing the moving and rotating the object, i can't tell you right now what should you do. If you can pls paste your moving code i will consider and will be able to tell something.

Btw, its a normal tendency that if you move abject on curved path with only mathematical function then its normal for object to go slow curve. Hope you understand what i want to say.

Regards,

Rajendra

Antheor
User offline. Last seen 11 weeks 2 days ago. Offline
Joined: 22 Sep 2010

First, thx for your cool code.

One question :
Admitting I want to draw an arc from xy 10,30 stopping at xy 100,300, what could I code ? (I tried tons of samples like bezier:curve({10, ?, 100}, {30, ?, 300}) with no success.

Thx !

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi Antheor,

The poins are 10,30 and 100,300 are the initial and ending pints repectively.

So, to define Bezier curve, you also need to define your control points,

you can see some curves here to get idea of control points, http://processingjs.nihongoresources.com/bezierinfo/

Btw, you can try by placing some random control points to and follow try-and-error method to get desired points

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
display.setStatusBar( display.HiddenStatusBar )
 
-- main.lua
 
local bezier = require('bezier')
 
local curve = bezier:curve({10, 10, 30}, {100, 10, 300}) --this is just example,
 
-- you can also try different multiple control points like this
 
-- local curve = bezier:curve({10, 5, 10, 20,  30}, {100, 5, 10, 20, 300})
 
print('curve is a ' .. type(curve))
 
-- see the terminal for the output of the function
 
for i=1, 10, 0.1 do
        local x, y = curve(i)
        print(i, 'X: ' .. x, 'Y: ' .. y)
end

btw i haven't tried this by my self,

Its control points what shapes your curve.

Check out some control points here http://web.cs.wpi.edu/~matt/courses/cs563/talks/surface/bez_surf.html

Hope if it will be helpful.

Thanks.

Antheor
User offline. Last seen 11 weeks 2 days ago. Offline
Joined: 22 Sep 2010

Thank you so much for your answer. I understand that bezier needs some test to get good results, it's just that I'm not sure where to put initial and final coods.

Your code says :
local curve = bezier:curve({xInitial, xControlPoint1, xControlPoint2, xControlPoint3}, {yInitial, yControlPoint1, yControlPoint2, yControlPoint3})

For 10,30 and 100,300 , we should set
local curve = bezier:curve({10, xControlPoint1, 100}, {30, yControlPoint1, 300})
But you give local curve = bezier:curve({10, 10, 30}, {100, 10, 300}) ...

Using this code

1
2
3
4
5
6
7
8
local bezier = require('bezier')
 
local curve = bezier:curve({10, 10, 30}, {100, 10, 300})
 
for i=1, 10, 0.1 do
        local x, y = curve(i)
                local circle=display.newCircle(x,y,10)
end

I get this result :
https://dl.dropbox.com/u/67104046/bezier.tiff

What's wrong ?

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Oops my mistake, we have to iterate throught 0.01 to 1 instead of 1 to 10, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
display.setStatusBar( display.HiddenStatusBar )
 
-- main.lua
 
local bezier = require('bezier')
 
local curve = bezier:curve({10, 10, 30}, {100, 10, 300}) --this is just example,
 
-- you can also try different multiple control points like this
 
local curve = bezier:curve({10, 10, 30}, {100, 10, 300})
 
print('curve is a ' .. type(curve))
 
-- see the terminal for the output of the function
 
for i=0.01, 1, 0.1 do
        local x, y = curve(i)
        print(i, 'X: ' .. x, 'Y: ' .. y)
end

Let me know if this works?

Antheor
User offline. Last seen 11 weeks 2 days ago. Offline
Joined: 22 Sep 2010

It works indeed :) Thx !

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Your welcome :)

If anyone interested then you can contribute the Bezier Curves and control points to the repository i created at https://github.com/neostar20/Bezier-Curve-for-Corona-SDK

Regards.

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Hi neostar20!

I've been playing around with different kinds of curves but I still find it somewhat hard to produce the curves I want. Are there any software (I know Inkscape) that could be used to draw/modify curves and then somehow get the {xInitial, xControlP1, ..., xFinal} and {yInitial, yControlP1, ..., yFinal} from the drawed curve?

At least for me it's a lot of try and error to get the curve I want. Would it be possible to get a curve like "S" or "8" or something similar when using many control points?

Br,

Kalle

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi hytka81,

Did you have used something like photoshop?

Photoshop has one feature to draw curves (sorry i don't remember the name of feature) which uses bezier function to draw the curves, not all curves are drawn from bezier thought.

Btw you can try this tool to find the control points for you desired curve at http://jsdraw2d.jsfiction.com/demo/curvesbezier.htm

Just check there is a text area which gives you initial point, control points and ending points which you can use in the bezier curve module to draw the curves.

Note that the y-axis may be different, i haven't checked this by my self, i m too lazy to that :P

Let me know if you have anything else.

and if you make any curves and thinks that it can be helpfull to others then you can add it to example folder of this repository https://github.com/neostar20/Bezier-Curve-for-Corona-SDK

Regards,
Rajendra

thedavebaxter
User offline. Last seen 12 hours 37 min ago. Offline
Joined: 12 Jan 2012

Realised I hadn't posted on here to say thanks, using this in my latest game to move spaceships around the screen.

I would vote but that's broken.

Dave

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@thedavebaxter,

Really glad that it worked for you.

Its ok if that vote button didn't worked.

Wish others also find it usefull.

Regards.

Nerolyn
User offline. Last seen 5 weeks 1 day ago. Offline
Joined: 28 Apr 2011

Hi Rajendra,

I have been looking for a way to construct bezier curves for a while and your implementation is perfect for me. My question is; would it be possible to make the line to a physics body? For example making a ball roll along the bezier curve.

Thanks in advance.

Cheers,
Pierre

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@Pierre,

I am glad that you found the bezier curve module usefull.

However you cannot implement the line into the physics as it will cause some odd behaviour, inserting line into physics in corona is still not yet stable.

But you can move physics ball along the curve in enterFrame listener, and its super easy with this module.

Let me know if is there anything else i can help you with.

Regards.

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

Hi Rajendra,

Thanks for sharing the bezier module it is really useful, so much so in fact that I'm currently adding the ability to create bezier curves in my Level Director tool (www.retrofitproductions.com) and wondered if I could include you bezier module in one of my examples to show that the export is outputing the points correctly?

Thanks.
Jo

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi Jo,

I am glad that you are interested in the Bezier curve module, and its even interesting that you are interested in adding the bezier cureve module in Level Director tool.

Of course you can include the bezier curve module in your Level Director tool. Actually using this module is super easy, you just feed the points to the module, and it will give you back a function, which you can iterate from 0 to 1 to get the curve.

So actually it will be fairly easy to integrate the curve module.

Let me know if you need any help and let me know how can i help you with this. I would be interested in doing so.

You can connect me at "neostar20-nospam@gmail.com" (pls remove "-nospam")

Regards,
Rajendra

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

I am glad I found this! I am planning some updates on my first app (which not yet released) Anyway I am hoping to use this to move some enemies from outside the screen toward some target on the screen in an interesting way. I think Bezier is perfect and your lib is a God sent! Thank you for sharing.

I was wondering one thing, how fast is it? My app use Particle Candy and so is demanding on the CPU time. I may have maybe <10 enemies at the same on the screen that I want to move from outside the screen to inside the screen and collide with 2-3 targets inside the screen. I want them to move in no predictable manner (since the goal is to shot them before they collide with the friendly target)

I also assume that I will need to use enterFrame and iterate thru each data points given by curve(I)? Knowing that, what do you think will be best?

- use the lib as is or
- per-calculate the points for a bunch of different curve into a table (change the start/end points in real time of course)?

I would rather use the lib as is (real time) if it fast enough. I guess I could translate() to move my display object along each curve..

In any event thank so much for sharing. I am sure it was a lot work to put together.

Cheers.

Mo.

Ps: @thedavebaxter, what your experience so far? I too have a space theme app that I want to use Bezier with. Will love to get your take as we'll. Thanks!

thedavebaxter
User offline. Last seen 12 hours 37 min ago. Offline
Joined: 12 Jan 2012

I haven't noticed any speed problems. Am using 5 different curves and moving 5 alien craft along them curves.

The alien craft are physics objects but my game is a racing game, so they are not interacting with anything else on screen.

Dave

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@LairdGames

Glad that it was useful to you.

One of the greatest advantage of the module beside its simplicity of usage is that, it doesn't use much CPU. Actually its just a function which you can iterate to later on your convenient to draw the curve.

@Dave,

Thanks for letting us know that it is working great for you. Love to hear that.

Btw if anyone is interested in getting support, then i will be interested doing so. Just email me.

Regards,
Rajendra

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

Hi, thanks for getting back to me.

I'm almost complete with the ability to create the Bézier curves in level director but I'm not sure the best way to export them.

Level director will allow you to create an endless amount of curves but they can have a mix use I.e. some may want to display the curves and some just want the data(points).

I may add a property to the curve which allows you to specify the type of export, points only or display in which case the export will integrate the code to call your library.

I'll be interested to hear from the users on this forum to how they would like to use the curves and how they would want the data.

I'll post a beta version of level director here soon so you can take a look at what I've done so far and I'll be very interested in everyone's comments on how to make it better and useful to the masses.

Thanks
Jo

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi Jo,

Its interesting that there will be simple solution for the problems like getting the right curve.

Just can't wait to see it in action.

Just update us when you release the next version.

Regards,
Rajendra

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012
neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@ retrofitProductions

Awesome! Great work Jo.

I really appreciate your work for adding the Bezier Curve.

Regards,
Rajendra

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

Thanks!

So just out of interest taking the screenshot as an example how would you imagine the export to look like?
Internal to Level Director I store the points as
Start1
Control1
Control2
End1
Control3
Control4
End2
and so on...

In your module you draw each curve separately I suppose you would need the start point for each curve rather than a continuation.
Curve1 = {xStartPoint1, xControlPoint1, xControlPoint2, xEndPoint1}, {yStart, yControlPoint1, yControlPoint2, yEndPoint1}
Curve2 = {xEndPoint1, xControlPoint3, xControlPoint4, xEndPoint2}, {yEndPoint1, yControlPoint3, yControlPoint4, yEndPoint2}

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@retrofitProductions

yes, in the module, we draw each curve separately, but we need to feed it all the points, including End points.

So this may looks like when we try to create the bezier curve

1
2
3
local Curve1 = bezier:curve( {xStartPoint1, xControlPoint1, xControlPoint2, xEndPoint1}, {yStart, yControlPoint1, yControlPoint2, yEndPoint1})
 
local Curve2 = bezier:curve( {xEndPoint1, xControlPoint3, xControlPoint4, xEndPoint2}, {yEndPoint1, yControlPoint3, yControlPoint4, yEndPoint2}) --this curve may be not what you wanted, until it was intentional that "xEndPoint1" is really starting point for the curve

So the above code is valid, but you don't really need to create the second curve if it continues from the first curve, just add that points to the control points.

A basic idea of this is like this:

2. There would be Bezier curve option to drad-n-drop, which upon clicking brings the Bezier curve on screen, with two points, which are start and ending points, (says its xStartPoint, yStartPoint and xEndPoint, yEndPoint).

3. Now, users can add as many control points as they would like to get desired curve, (say its xControlPoint1, yControlPoint1, xControlPoint2, yControlPoint2 ... xControlPointN, yControlPointN).

so, to get the curve you can do this:

1
2
3
4
local curve1 = bezier:curve( {xStartPoint,xControlPoint1, xControlPoint2, ....., xControlPointN, xEndPoint }, {yStartPoint,yControlPoint1, yControlPoint2, ....., yControlPointN, yEndPoint})
 
 
--Now, curve1  is a function which we can iterate through 0 to 1 to get the curve

Let me know if you need anything else.

Regards,
Rajendra

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

Thanks Neostar20. I cannot wait to start working on my app version 1.1 using your code.

@Dave, it is fantastic to know that your not having speed issue. I am very interested on how you actually move the object which will follow the Bézier curve? Are you using the physics (set the x and y velocity) or doing inside an enterFrame?

Anyway, cannot wait to use this!

Thank you.

Mo

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@LairdGames

Nice, Love to see when your app is out.

Best of luck with your app.

Regards,
Rajendra

thedavebaxter
User offline. Last seen 12 hours 37 min ago. Offline
Joined: 12 Jan 2012

I am just moving the objects using x/y.

The bezier curve usually has (or maybe all the time) 99 points in the curve. So I call my move function 99 times on a delay.

1
redRunner = timer.performWithDelay( rnd, moveRedRunner, 99 )

The rnd is a random time (calculated by me) so all the objects go at different speeds.

Then this is the move code -

1
2
3
4
5
6
7
8
local function moveRedRunner(event)
     if redPosCount < 1.01 then
        redRunner.x, redRunner.y = redCurve(redPosCount)
        redPosCount = redPosCount + 0.01
     else
         timer.cancel(redRunner)
     end
end

This is how I draw the red curve -

1
2
3
4
5
6
7
8
9
10
redCurve =  beziercurve({80,0,0,200,200,435}, {100,mRan(200,400),320,280,40,40})
local x1, y1 = redCurve(0.01)
local redTrack = display.newLine(x1, y1, x1+1, y1+1)
redTrack:setColor( 255, 0, 0, 127 )
redTrack.width = 1
 
for i=0.02, 1, 0.01 do
        local x, y = redCurve(i)
        redTrack:append(x, y)
end

mRan(200,400) is just getting a random number between 200 and 400, just so each time the game is played the curve is a little different.

Dave

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

@Dave WOW! Fantastic share! Sorry I was pulling my hair to sent my current app (Space Command - Asteroid Killing Machine) to Apple for review before the cutoff date.

This is so nice of you to take the time. So if I understand correctly you pre-calculate Bézier curve (giving it some randomness) then draw a red curve and then move an object along the curve, correct? Am I to understand that you recalculate the curve for each new object created?

So for instance, in my case I have an enemy traveling from outside the screen to inside the screen attempting to crash into a fixed position planet. The enemy is created at random x,y outside the screen, so I will need to recalculate the trajectory (since I know the planets position on the screen in advance)? I guess this module could handle it in term of speed since to work just fine for you!

What if the end point need to change in realtime? Imagine instead of fix planets, friendly space shuttles traveling between planets (one of my futureupdates). In that case I cannot pre-.calculate the curve but need to call the Bézier function each time the shuttle moves (probably itself moving along it's own curve!) In this scenario, I would be concern about calling the function so often unless I call it every say 30 frames...

I simply cannot wait to play with this! I think it makes all games so much better in term moving avatars.

Again thank you so much for sharing your curve code. It is one thing to talk about but another thing look at actual lines of code!

Cheers.

Mo

thedavebaxter
User offline. Last seen 12 hours 37 min ago. Offline
Joined: 12 Jan 2012

Yeah that is exactly how I do it. I have 5 ships, so create five curves, as I have that Random bit in there the curves are slightly different but not massively. Its a race so didn't want the curves to be completely different.

Best thing to do is sit down with the demo supplied and play around with the numbers and see how the curves react. Then on the demo try adding a enterFrame function and see what it's like moving the curves around 60 times a second.

The hardest part for me was getting the curve to look the way I wanted, I started with the demo and used some of the example websites mentioned above to see what adding new points etc... did to the curve.

Dave

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

Thank you for the great suggestion. I think you are right, I need to find some time and build the demo and see how it looks like. Learning by doing, the best way!

Can't wait to start. I wish I was not bone tired right now or I will fire up my PC! No need to sleep:(

THANKS for all the info. I will keep you guys posted on my progress.

Mo

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@LairdGames,

Thanks for sharing the info and best of luck with your game!

Keep updating us regarding your game's process as we are interested.

Thanks.

Regards,
Rajendra

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Hello,

I'm using this in my game project too :)

If someone has good tools or other ways to "design" these curves (and maybe get needed point data) easily I would be more than interested :)

At the moment I've done transitions between bezier curve points to achieve more or less constant movement speed along the curve but I would also be interested in other techniques to achieve this.

I can create some video of my project that shows some bezier curves in action.

Br,
Kalle

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi Kalle

Nice to hear that.

I am really interested to see the video of the curve you have done.

Just update us when its available.

Regards,
Rajendra

hytka81
User offline. Last seen 19 weeks 5 days ago. Offline
Joined: 27 Apr 2011

Hello,

I just recorded a video using debug mode so it's a bit laggy but anyways should give you some idea about where I'm using bezier curves. These curves are not final and are going to change when I start creating actual waves... And for that some kind of tool would be nice to make it easier to design enemy movements.

Here's the video on youtube:
http://www.youtube.com/watch?v=k_AgDNarbvs

Br,
Kalle

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

That looks fantastic! AND exactly what I will attempt to do in my currently in review (on next version) I also noticed that using particle candy which I do to. Right now my enemies move in a straight line so no much fun. Bezier seems to rock in your game. And on top of that you seems to keep 60 fps! I realize it is on the simulator but still that's very good. Did you try it on real device? Can you keep up at 30 fps?

I am very curious how you move your enemies along the curve? Are you simply using enterFrame and enemy..x and enemy.y? I was told that it is expensive in term of CPU to move it that way and it was better to use something like translate. In my current game I simply use the the physics engine since my enemies move in straight line but I doubt you could use the physics engine with the Bezier curves to move your objects (setting the object speed x and y)

In any event thank you so much for sharing. I. Can see now that I can use particle candy and Bezier curve without much problem on CPU not being able to keep up. My game is set to 30 fps by the way.

Thanks!

Mo

Ps: how do you like widget candy but did not use it yet. Maybe my next game.

LairdGames
User offline. Last seen 15 hours 28 min ago. Offline
Joined: 28 Oct 2011

@hytka81

Sorry I should have read your post much more careful! it looks like you are using transitions. Are going thru your points wih a for loop or using eventTimer? I may suggest using translate instead, I have heard it is better but i do not recall why. Probably something to do with the fact that using transitions, you cannot really control the speed of the object. Please do not quote me on that but it may worth a try.

The game looks fantastic!

Mo

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

I'm pleased to announce Level Director 1.7 which includes Bezier Curves at www.retrofitproductions.com

1.7.0
• Newly added Text Objects are now positioned correctly when canvas scrolled.
• Updated config files in all examples so that the case of the image folders matched the actual folders.
o This resolves an issue where the examples did not run on a real device.
• Fixed issue with objects that are rotated and scaled.
• NEW : added ability to create Bezier curves.
o Each bezier has the option to export only data or data and display.
o Note: physics properties are not currently supported.
o Bezier points can be added, moved and deleted.
o Added new example project ‘Bezier’ to show it in action.

I would like to thank Rajendra for allowing the use of the bezier module in the examples.

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

Hi Kalle,

Amazing. This is one of the perfect example of how bezier curve can be used. Good work.

@LairdGames

If you are just doing x, y positioning in enterFrame then you don't have to worry about much CPU being used .

Regards,
Rajendra

neostar20
User offline. Last seen 49 weeks 2 days ago. Offline
Joined: 6 May 2012

@Jo

Thank you for your great work to help developer to get bezier curve. Now getting the points will be really easy.

Regards,
Rajendra

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

No problem and thanks for your help.

Please download the new version of level director and try it out.

As a special incentive for the guys who want export their curves and as it is nearly Christmas I have added a discount code 5OFFLD which will give $5 off for the month of december.

Thanks
Jo

retrofitProductions
User offline. Last seen 1 day 14 hours ago. Offline
Joined: 1 Sep 2012

For anyone interested I've included the example bezier project from Level Director.
http://www.retrofitproductions.com/wp-content/uploads/2012/12/Bezier.rar

This will give you an idea of how the Level Director export works and an example of how the bezier.lua module is used.