Star Mesh

[sim]

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.

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:

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

```

[Xavier]

@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

[bee]

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.

[bee]

Is Codea’s triangle mesh working like the explanation here?

[sim]

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).

[Andrew_Stacey]

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

Why is this a limitation?

[Xavier]

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

[Andrew_Stacey]

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

That’s what I mean.

[Xavier]

@Andrew_Stacey - hahaha sorry, I misunderstood you ^^

[sim]

@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.

[juaxix]

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

[sim]

@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.

[juaxix]

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
    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}
    )

[Zoyt]

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