Number Spinner

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

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

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

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.

It works fine for me @Dave1707

Maybe this is a problem with 1.5?

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

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

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