Drawing in a surface

Questions
1

I rewrote an earlier soft body dynamics experiment in Codea but i’m not sure how to fill the shapes. Basically i got an array of points representing a ball outline and I want to fill it with a color. I think I can do that with a mesh object but I can’t seem to work out how it works from the documentation alone.

2

Maybe you should post your code so sby can give you some hint. Your question is too vague just from text.

3

Sorry, the code is a bit long and not very relevant to my question. I’ll try to explain myself better. I want to draw a surface or a polygon between a ring of 10 points which form a circle (the outline of a ball. I position the points as follows:

step = 360/nrOfPnts
    angle = 0
    for i, v in pairs(blob.pnts) do
        blob.pnts[i].x = WIDTH/2 + math.cos( angle/180*math.pi ) * blob.radius
        blob.pnts[i].y = HEIGHT/2 + math.sin( angle/180*math.pi ) * blob.radius
        angle = angle+step
    end

I need to draw some kind of colored surface to fill the interior of the circle.

4

You could use the triangulate function on your polygon points and then create a mesh from the triangulate results. You could have that mesh colored however you want.

5

I got as far as figuring out I’ll be needing the mesh object, but I’m havimg trouble getting my head around it. I’ve been looking at the documentation and examples but I can’t make sense of it

Could you post an example of how to use the triangulate function and feed the results in a mesh?
I managed to draw a single triangle using the mesh object, but i’m at a loss of where to start with this array of points I have (shown in the code snippet above)

6

Try this example: http://twolivesleft.com/Codea/Talk/discussion/544/polygon-editing-example-with-physics

7

Thanks a lot John, that looks a whole lot easier to sift through! :slight_smile:

I’ll be trying to make sense of it, I may post back here with some more specific questions once I run into them. Thanks!

8

I’m still having trouble with this, I have isolated the relevant code bit in hope that somebody can spot the problem. I can draw a surface between a bunch of randomly placed points, but once I arange them in a circle, it fails…


function setup()
    fill( math.random(255), math.random(255), math.random(255) )
    myMesh = mesh()
    verts = {}
    
    step = 360/10
    angle = 0
    for i=1, 10 do
        xx = WIDTH/2 + math.cos(angle /180*math.pi) * 60
        yy = HEIGHT/2 + math.sin(angle /180*math.pi) * 60
        angle = angle + step
        table.insert( verts, vec2(xx, yy) )
      -- table.insert(verts, vec2( math.random(WIDTH), math.random(HEIGHT) ) )
    end
   
    myMesh.vertices = triangulate(verts)
end

function draw()
    background(40, 40, 50)

    -- add point
    if CurrentTouch.state == BEGAN then
        table.insert(verts, vec2(CurrentTouch.x, CurrentTouch.y))
        myMesh.vertices = triangulate(verts)
    end

    myMesh:draw()
    -- show vertices
    for i, v in pairs(verts) do
        ellipse(v.x, v.y, 5)
    end
end
9

Can you describe the failure a bit more detailed? Make sure that you always arrange the points counter-clockwise, its a limitation of the triangulation algorithm. See here:

https://bitbucket.org/TwoLivesLeft/codea/wiki/triangulate

10

Actually it looks like they need to be in clockwise order. Your vertices are already counter-clockwise. If you just reverse the vertices (I just used the reverse function from the wiki link above) before being passed to triangulate, it works.

11

To fix your problem, just change table.insert(verts, vec2(xx, yy) to table.insert(verts, 1, vec2(xx, yy). I had this same problem before (making my arc generator), and my solution works because the default for table.insert is to put the value at the end of the table, which if you think about it, or map it out on paper, puts the points counter-clockwise (@Codeslinger, other way around ;)), but if you put the new value at the beginning of the table, it is reversed.

12

In 1.5 (the next release of codea), triangulate will be winding order agnostic (works for both clockwise and anti-clockwise orderings). It will also support a much larger amount of vertices instead of the current limit of 256.

13

Thanks guys, it works! Because they’re softbodies without min/max constraints, they sometimes manage to flip inside out depending on how loose I set the physics. It runs much smoother then expected though even with a screen full of blobs! As expected though, they remain a bit blocky despite the nr subdivs, does Lua support bezier curves?

Sounds great John, looking forward to the next version!