Howdy, Stranger!

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

Number Spinner

edited December 2012 in Code Sharing Posts: 371

I was playing around on my other apps, when i noticed a number spinner/counter thingie (keeping track of distance), and I noticed it looked like it was using clip() or some similiar function, and I didnt like the look of it, so I made a decagonal prism mesh, and applied a number texture to it, and I quite like the resulting effect when you rotate it... Check it out:

function setup()
    numbers = image(640, 64)
    setContext(numbers)
    textMode(CORNER)
        font("Inconsolata")
        fontSize(64)
        background(255, 255, 255, 0)
        fill(0, 0, 0, 255)
        text("0 1 2 3 4 5 6 7 8 9", 16, 0)
    setContext()
    numberSpinner = mesh()

    local v = {}
    local t = {}
    for i = 1, 10 do
        table.insert(v, vec3(-32, math.cos(2 * math.pi / 10 * (i - 1)) * 32, math.sin(2 * math.pi / 10 * (i - 1)) * 32))
        table.insert(v, vec3(-32, math.cos(2 * math.pi / 10 * i) * 32, math.sin(2 * math.pi / 10 * i) * 32))
        table.insert(v, vec3(32, math.cos(2 * math.pi / 10 * i) * 32, math.sin(2 * math.pi / 10 * i) * 32))
        table.insert(v, vec3(-32, math.cos(2 * math.pi / 10 * (i - 1)) * 32, math.sin(2 * math.pi / 10 * (i - 1)) * 32))
        table.insert(v, vec3(32, math.cos(2 * math.pi / 10 * (i - 1)) * 32, math.sin(2 * math.pi / 10 * (i - 1)) * 32))
        table.insert(v, vec3(32, math.cos(2 * math.pi / 10 * i) * 32, math.sin(2 * math.pi / 10 * i) * 32))
        table.insert(t, vec2(i / 10 - 0.1, 1))
        table.insert(t, vec2(i / 10 - 0.1, 0))
        table.insert(t, vec2(i / 10, 0))
        table.insert(t, vec2(i / 10 - 0.1, 1))
        table.insert(t, vec2(i / 10, 1))
        table.insert(t, vec2(i / 10, 0))
    end
    numberSpinner.vertices = v
    numberSpinner:setColors(255, 255, 255)
    numberSpinner.texture = numbers
    numberSpinner.texCoords = t
    r = 0
    s = 0
end

function draw()
    r = (r + s) % 360
    background(0, 0, 0, 255)
    camera(0, 0, 100, 0, 0, 0)
    ortho(0, WIDTH, 0, HEIGHT,  -100, 100)
    --sprite(numbers, WIDTH / 2, HEIGHT / 2)
    translate(WIDTH / 2, HEIGHT / 2)
    rotate(r, 1, 0, 0)
    numberSpinner:draw()
    s = s * .9
    if math.abs(s) < 1 then
        s = 0
        --r = r - r % 36
    end
end

function touched(touch)
    s = s - touch.deltaY
end

Jordan

Tagged:

Comments

  • Jmv38Jmv38 Mod
    edited December 2012 Posts: 3,297

    Nice! I've added scale(2,3,3) after rotate. Back spin does not work.

  • Posts: 666

    I haven't looked at it in action, but it's pretty cool and inventive solution to the problem! Nice thinking!

  • dave1707dave1707 Mod
    Posts: 8,625

    Hi @Jordan I tried your spinner and for me it works in both directions. The problem I have is the numbers go from 0 to 7 with a blank area where the 8 and 9 should be. I haven't looked at the code yet to see why I'm missing 8 and 9.

  • Posts: 371

    It works fine for me @Dave1707...

  • Posts: 371

    Maybe this is a problem with 1.5?

  • Posts: 371

    Oh, @Dave1707, I realized the bug you have only happens in potrait

  • Posts: 371

    Found it, it's from setContext not drawing past the boundaries of the viewer, because the width of the viewer in portrait is less than the width of the image (640), just run it in landscape

  • Posts: 371

    Oh, and @Jmv38, that is from the if s < 1 then, and negative values, fixing that with a ,if math.abs(s) < 1 then

Sign In or Register to comment.