Bezier function

Bugs
1

image
image797Ă—708 36.3 KB

the function bezier draws a spike on the inside of the curve when it creates an infinitesimally small loop.

note: this spike is also on the outside of the loop if lineJoin(MITER) but this is expected.

2

@Amber Welcome to the forum. It’s good to have more users finding things wrong in the new version so they can be corrected.

1 Like
3

Thought I’d try the bezier function. I was able to get the spike inside and outside just using the bezier function, no lineJoin. Not sure what lineJoin does.

image
image1668Ă—2224 78.4 KB

4

Hmmm, interesting. This is probably due to some kind of precision issue / singularity with this specific edge case. What does the code look like for this?

5

@John Here’s the code I used for mine. Just touch a circle to move it.

viewer.mode=FULLSCREEN

function setup()
    tab={100,100,100,200,200,100,200,200}
end

function draw()
    background(0)
    style.noFill()
    style.stroke(255)
    style.strokeWidth(4)
    bezier(tab[1],tab[2],tab[3],tab[4],tab[5],tab[6],tab[7],tab[8])
    for z=1,8,2 do
        ellipse(tab[z],tab[z+1],20)
    end
end

function touched(t)
    for z=1,8,2 do
        if t.x>tab[z]-20 and t.x<tab[z]+20 and t.y>tab[z+1]-20 and t.y<tab[z+1]+20 then
            tab[z]=t.x
            tab[z+1]=t.y
        end
    end
end
1 Like
6

my code is similar, just more complicated hahah
lineJoin() is a new style setting that sets how polylines corners look.
it seems MITER is the default setting for it.

1 Like
7

This is cool to have an integrated bezier curves in Codea, must be better than my lua only version.

image
image1536Ă—2048 152 KB

8

It would be nice to have a version that compute instead of just drawing it. It will allow us to make something follow the path.

I did something that do it by compute and cache the segments (like Godot).

Path.zip (2.3 KB)

9

While we’re on the subject of bezier, I just put this together. It draws a Bézier curve using any number of points that you want to enter in the tables px and py. Tap on a point to move it. If you want the point values that make up the curve, they’re in the table tab. This is for the Legacy 3.x code.

PS. I modified the code to calculate 12 pairs of random points. You get a different curve each time it’s run. You can change the 12 in the for loop to whatever number you want to try.

viewer.mode=FULLSCREEN

function setup()
    px,py={},{}
    for z=1,12 do
        table.insert(px,math.random(WIDTH))
        table.insert(py,math.random(HEIGHT))
    end
    step=.01
    n=#px-1
    bez()
end

function bez()
    tab={}
    for r=0,1,step do
        pX,pY=0,0
        for i=0,n do
            pX=pX+calc1(n,i,px[i+1],r)
            pY=pY+calc1(n,i,py[i+1],r)
        end
        table.insert(tab,vec2(pX,pY))
    end
    table.insert(tab,vec2(px[#px],py[#py]))
end

function draw()
    background(31, 59, 60)
    stroke(255)
    strokeWidth(4)
    fill(255)
    for z=2,#tab do
        line(tab[z-1].x,tab[z-1].y,tab[z].x,tab[z].y)
    end 
    stroke(0,255,0) 
    fill(0,255,0)
    for z=2,#px-1 do
        ellipse(px[z],py[z],15)
    end
    stroke(0,0,255) 
    fill(0,0,255)
    ellipse(px[1],py[1],15)
    ellipse(px[#px],py[#py],15)
    stroke(255,0,0)
    strokeWidth(1)
    for z=2,#px do
        line(px[z-1],py[z-1],px[z],py[z])
    end
end

function calc1(n,i,p,t)
     return(fac(n)/(fac(i)*fac(n-i))*(1-t)^(n-i)*t^i*p)
end

function fac(n)
    return n > 0 and n * fac(n-1) or 1
end

function touched(t)
    if t.state==BEGAN then
        offset=0
        for z=1,#px do
            if math.abs(t.x-px[z])<30 and math.abs(t.y-py[z])<30 then
                offset=z
            end
        end
    elseif t.state==CHANGED then
        px[offset]=t.x
        py[offset]=t.y
        bez()
    end
end
10

Here’s my bézier code (for Codea 3) which includes evaluation routines (and tangent, and splitting, amongst others). It uses a mesh to render the curve, which provides for a smoother render than line segments.

(Incidentally, @dave1707, there are much more efficient ways to compute the coefficients of Pascal’s triangle than using factorials)

11

@LoopSpace Thanks. When I wrote the code, I didn’t realize that part was calculating the coefficients of Pascal’s triangle. I was just using a Bezier formula I found on the internet and converted it to run in Codea. I originally wrote code long ago that used 4 points for the Bézier curve, but I wanted to use a varying number of points.

I found this site that gave a formula and explained it a little.

https://www.freecodecamp.org/news/nerding-out-with-bezier-curves-6e3c0bc48e2f/

12

Apart from the initial bit about “math anxiety”, that’s actually not a bad article.

13

I thought this was a pretty good video on splines

3 Likes
14

@sim Looks like an interesting video. Watched a few minutes. Will watch more of it when I have time.

1 Like
15

A slightly different approach using Catmull-Rom splines so that the curve passes through known control points. You can move the control points and then save the required path data for use in other programs.

Spline.zip (2.5 KB)

2 Likes
16

@timber Interesting program. Thanks for posting it.

17

There’s also a nice algorithm due to someone called John Hobby (who worked with Don Knuth on font design, I believe) that produces a sequence of cubic bézier curves passing through a sequence of points that is designed to be “nice” at the joins. There’s an implementation of it in my bézier code (core function starts on line 371). I also modified it to something I call a “Quick Hobby” algorithm which is also in that library.

2 Likes