Based on the ‘learning’ from #25, let’s just make bigger buttons

Well then there now, I think the next thing to try on these buttons is just to make them a bit larger. To do that, I’ll begin by giving each one a radius rather than the literal 50. I’ll spare you the old version, here’s the new:

-- Button
-- RJ 20200520

local Buttons = {}

function createButtons()
    local dx=50
    local dy=200
    local radius = 50
    table.insert(Buttons, {x=dx, y=dy, radius=radius, name="left"})
    table.insert(Buttons, {x=dy, y=dx, radius=radius, name="right"})
    table.insert(Buttons, {x=WIDTH-dx, y=dy, radius=radius, name="fire"})
    table.insert(Buttons, {x=WIDTH-dy, y=dx, radius=radius, name = "go"})
end

function checkButtons()
    U.button.left = false
    U.button.right = false
    U.button.go = false
    U.button.fire = false
    for id,touch in pairs(Touches) do
        for i,button in ipairs(Buttons) do
            if touch.pos:dist(vec2(button.x,button.y)) < button.radius then
                U.button[button.name]=true
            end
        end
    end
end

function drawButtons()
    pushStyle()
    ellipseMode(RADIUS)
    textMode(CENTER)
    stroke(255)
    strokeWidth(1)
    for i,b in ipairs(Buttons) do
        pushMatrix()
        pushStyle()
        translate(b.x,b.y)
        if U.button[b.name] then
            fill(128,0,0)
        else
            fill(128,128,128,128)
        end
        ellipse(0,0, b.radius)
        fill(255)
        fontSize(30)
        text(b.name,0,0)
        popStyle()
        popMatrix()
    end
    popStyle()
end

I chose to make radius a local variable in each button’s table, because my original thought was to make left and right larger and leave go and fire alone. We’ll see about that real soon now. First let’s position left and right and make them larger:

function createButtons()
    local dx=50
    local dy=200
    local radius = 50
    table.insert(Buttons, {x=75, y=dy, radius=75, name="left"})
    table.insert(Buttons, {x=dy, y=75, radius=75, name="right"})
    table.insert(Buttons, {x=WIDTH-dx, y=dy, radius=radius, name="fire"})
    table.insert(Buttons, {x=WIDTH-dy, y=dx, radius=radius, name = "go"})
end

This looks better and works better:

big buttons

What I wonder about is, if this works reasonably well, why didn’t my experiment with the left-above right-below the center line feel good? Offhand, I don’t know, but I didn’t like it and I do like this reasonably well. I guess I’ll change the other two buttons to be symmetric and call it done. That results in:

function createButtons()
    local dx=75
    local dy=200
    table.insert(Buttons, {x=dx, y=dy, radius=dx, name="left"})
    table.insert(Buttons, {x=dy, y=dx, radius=dx, name="right"})
    table.insert(Buttons, {x=WIDTH-dx, y=dy, radius=dx, name="fire"})
    table.insert(Buttons, {x=WIDTH-dy, y=dx, radius=dx, name = "go"})
end

And it looks like this:

all big

That seems good enough to try for a while, so I’m going to commit this and go take a ride with my dear wife.

The learning? I guess it’s that sometimes you have to try a number of ideas and none of them turn out better than the older idea. I think you still have to try. And I’m really not sure at all why I didn’t like either the main diagonal approach or the vertical divider approach. You’d think one or the other of those would be finger-equivalent to this.

It’s a mystery, I guess.

Zipped Code