Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Star Mesh

SimeonSimeon Admin Mod
edited October 2012 in Examples Posts: 5,714

I wrote this as a mesh example for @bee, but it's a pretty handy class so I decided to give it its own thread. It just generates a star mesh. Setting up texture coordinates is left as an exercise for the reader.

Star Mesh

Edit: Because it's a mesh you can very easily do things like set the colour of the central vertices, giving it a gradient look:

Star Mesh Gradient


-- Main
function setup()
    iparameter( "NumPoints", 2, 20, 5 )
    parameter( "InnerRadius", 30, 300, 100 )
    parameter( "OuterRadius", 100, 300, 200 )
function draw()
    -- Normally we'd only create the star once
    -- This lets us parameterise it for the sake of explanation
    star = StarMesh( NumPoints, InnerRadius, OuterRadius )    
    star.position = vec2(WIDTH/2,HEIGHT/2)
    -- This sets a dark background color 
    background(40, 40, 50)
    -- Do your drawing here


StarMesh = class()
function StarMesh:init(numPoints, outerRad, innerRad)
    self.mesh = mesh()
    self.color = color(241, 208, 20, 255)
    self.position = vec2(0,0)
    -- Convenience
    innerRad = innerRad or outerRad * 0.5
    local tris = {}
    local totalPoints = numPoints*2
    for i=1,totalPoints do
        local i1 = i-1
        local i2 = i
        local r1 = i1/totalPoints * math.pi * 2
        local r2 = i2/totalPoints * math.pi * 2
        local p1 = vec2( math.cos(r1), math.sin(r1) )
        local p2 = vec2( math.cos(r2), math.sin(r2) )
        local rad1, rad2
        if i1%2 == 0 then
            rad1 = outerRad
            rad2 = innerRad
            rad1 = innerRad
            rad2 = outerRad
        table.insert( tris, p1 * rad1 )
        table.insert( tris, p2 * rad2 )
        table.insert( tris, vec2(0,0) ) -- center
    self.mesh.vertices = tris
function StarMesh:draw()


  • Posts: 196

    @Simeon - This is a nice little example that should probably be in the default package.

    If I may make a quick suggestion, It might be nice to split the built-in Codea examples into different sections (like drawing, physics, games, sounds, etc...). This would allow the addition of lots of example code without overloading the home screen, and I truly believe example codes really help understanding the API better



  • beebee
    Posts: 381

    Thank you, @simeon. I'll try it out after I got back my iPad, currently being used by my kid. :) It seems pretty simple, though I don't see the use of triangulate() function. ;)

    For a complete newbie in visual programming, I agree with @xavier's suggestion. Provide section/folder for examples with each section contains sample codes from easy/trivial to advance/complex program. It'll be very helpful to beginners.

  • beebee
    Posts: 381

    Is Codea's triangle mesh working like the explanation here? :)

  • SimeonSimeon Admin Mod
    Posts: 5,714

    As I was writing the code I found I didn't need the triangulate() function — the star polygon is simple enough that I create the necessary triangles as I iterate through the outside points.

    It behaves very similarly to that Wikipedia article. Codea's meshes are limited to triangles only (this is a fundamental limitation of OpenGL on iOS devices).

  • Posts: 2,161

    Codea's meshes are limited to triangles only (this is a fundamental limitation of OpenGL on iOS devices).

    Why is this a limitation?

  • Posts: 196

    Well basically openGL ES (for Embedded Systems) was made to be lightweight and fast, so It removed all the bloated functions from regular openGL, direct mode, etc...

    For example, you can't have quads in openGL ES (although internally, even for regular opengl, quads are just two triangles).

    It's really not an issue, since you can represent just about anything with triangles

  • Posts: 2,161

    It's really not an issue, since you can represent just about anything with triangles

    That's what I mean.

  • Posts: 196

    @Andrew_Stacey - hahaha sorry, I misunderstood you ^^

  • SimeonSimeon Admin Mod
    Posts: 5,714

    @Andrew because most desktop implementations allow for arbitrary quads and polygons. It's a limitation in terms of convenience. Though most games on desktop PCs will use triangles only as well.

  • edited August 2013 Posts: 437

    And now, if you want to apply a shader,...after

    self.mesh.vertices = tris

    self.mesh.shader = shader("Effects:Ripple")
    self.mesh.shader.freq  = 3*math.pi/4
    self.mesh.shader.time = ElapsedTime 

    and in the draw loop update the time too:

    self.mesh.shader.time = ElapsedTime

    but the screen is black, do you need to set up a rect? , why?

    And how are you doing that effect with mesh:setColors()?

  • SimeonSimeon Admin Mod
    Posts: 5,714

    @juaxix the Ripple shader will not have an effect because that shader applies to the texture of a mesh. The star mesh in my example has no texture (or texture coordinates). It only uses vertex colours.

    To get the above gradient effect simply set all the center vertices to white, and every other vertex to yellow. OpenGL linearly interpolates the resulting colours across the mesh resulting in the above image.

  • edited August 2013 Posts: 437

    Ah, I understand it better now, thanks.
    I was doing this:

    self.mesh:color(3, color(255))

    but what is working is to store a table of colors like this:

    table.insert( cols, self.color)
    table.insert( cols, self.color)
    table.insert( cols, color(255)) -- center

    in the for of the mesh triangles creation, and then:

    self.mesh.colors = cols

    worked :)

    And I'm using this animation with a tweener:

    -- animation
            innerRad  =*heightRatio,
            outerRad  =*widthRatio
    --  numPoints = --optional
        {tween.easing.elasticOutIn, loop = tween.loop.pingpong}
  • Posts: 2,820

    @juaxix - Really nice. I'm really looking forward to this game.

Sign In or Register to comment.