#### 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 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:

• 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!

• 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`