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,387

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

-- Main
function setup()
    iparameter( "NumPoints", 2, 20, 5 )
    parameter( "InnerRadius", 30, 300, 100 )
    parameter( "OuterRadius", 100, 300, 200 )
end
 
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
    star:draw()
end

StarMesh

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
        else
            rad1 = innerRad
            rad2 = outerRad
        end
 
        table.insert( tris, p1 * rad1 )
        table.insert( tris, p2 * rad2 )
        table.insert( tris, vec2(0,0) ) -- center
    end    
 
    self.mesh.vertices = tris
end
 
function StarMesh:draw()
    pushStyle()
    pushMatrix()
 
    translate(self.position.x,self.position.y)
 
    fill(self.color)
    self.mesh:draw()
 
    popMatrix()
    popStyle()
end
Tagged:

Comments

  • 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

    Cheers,

    Xavier

  • 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,387

    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,387

    @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()?
    image

  • SimeonSimeon Admin Mod
    Posts: 5,387

    @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
    

    image
    worked :)

    And I'm using this animation with a tweener:

    -- animation
        tween(1,self.data,
            {
            innerRad  = self.data.innerRad-33*heightRatio,
            outerRad  = self.data.outerRad+33*widthRatio
    --  numPoints = self.data.numPoints/6 --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.