Declarative Digital Instrument GUIs with Lua in Audulus

Audulus_Mark

DEVLOG 1: Declarative Digital Instrument GUIs with Lua in Audulus part 1: Grid Controller

⭐ the Audulus-Canvas repo here

I'm building a library of Lua functions that you can copy and paste into the Audulus Canvas node to quickly build complex UIs and visualizers for your Audulus patches. I'll post updates to my devlog here as I build it out. Feel free to ask questions as well!

Here is the code discussed in this post:

-- Inputs
-- tX tY t x1y1 x2y1 x3y1 x4y1 x1y2 x2y2 x3y2 x4y2 x1y3 x2y3 x3y3 x4y3 x1y4 x2y4 x3y4 x4y4

tX = tX * canvas_width
tY = tY * canvas_height

grid = {
    x1y1, x2y1, x3y1, x4y1,
    x1y2, x2y2, x3y2, x4y2,
    x1y3, x2y3, x3y3, x4y3,
    x1y4, x2y4, x3y4, x4y4
}

function btn(x, y, size, options)
    local options = options or {}
    local id = options.id or 0
    local pad = options.pad or 0
    local c = options.color or {1, 1, 1, 1}

    local x1 = x + pad
    local y1 = y + pad
    local x2 = x + size - pad
    local y2 = y + size - pad
    local pA = { x1, y1 }
    local pB = { x2, y2 }

    local function tIsInside()
        return tX >= x1 and tX <= x2 and tY >= y1 and tY <= y2 and t > 0
    end

    local function drawButton()
        local br = tIsInside() and 1 or 0
        local st = grid[id] * 0.5
        local f = math.max(0, math.min(br + st, 1))
        local paint = color_paint({c[1] * f , c[2] * f, c[3] * f, c[4]})
        fill_rect(pA, pB, 0, paint)
    end

    drawButton()
end


function tileFn(func, r, c)
    return function(x, y, s, o)
        for i = 0, c - 1 do
            for j = 0, r - 1 do
                idx = j * c + i + 1
                local options = {id = idx, pad = o.pad, color = o.color}
                func(x + i * s, y + j * s, s, options)
            end
        end
    end
end


tileBtn = tileFn(btn, 4, 4)
tileBtn(0, 0, 50, {pad=3, color=theme.azureHighlight})

garden

Fascinating.

Audulus_Mark

@garden said:
Fascinating.

Thanks! Just did a big refactor today that lets you shrink the button size on press, add borders, as well as some nice error handling

Audulus_Mark

Progress!

You can see the source code here:

https://github.com/markalanboyd/Audulus-Canvas/blob/main/library.lua

garden

I’ve cloned the repo so I can follow along.

zqekdnxebq

Audulus looks interesting, use of lua is great. Subscription model makes it a no go for me personally, will check back in here and there to see if it eventually gets around to providing a purchase option. Maybe consider using the Working Copy git client purchase and upgrade model.

ronnieb

Learning Lua is going to be a new year’s goal of mine. Very interested as you can also use Lua scripts in TouchOSC and Falcon too. Can anyone recommend any good resources to get into Lua scripting? Most of the course I’ve seen online are more geared towards Roblox integration.

Audulus_Mark

@garden said:
I’ve cloned the repo so I can follow along.

Thank you!

@zqekdnxebq said:
Audulus looks interesting, use of lua is great. Subscription model makes it a no go for me personally, will check back in here and there to see if it eventually gets around to providing a purchase option. Maybe consider using the Working Copy git client purchase and upgrade model.

All I can say to this is if I had to pay for Audulus, I would. I was a big fan of it before I worked for them, and it's actually the thing that, in a roundabout way, led me to learning programming. I understand it's not for everyone, but it's a pretty amazing app and I'm not sure there is an equivalent that can do everything it can on iPadOS.

@ronnieb said:
Learning Lua is going to be a new year’s goal of mine. Very interested as you can also use Lua scripts in TouchOSC and Falcon too. Can anyone recommend any good resources to get into Lua scripting? Most of the course I’ve seen online are more geared towards Roblox integration.

You don't really need to learn Lua specifically. If you do any course that teaches you Python, you'll learn the programming concepts you need to know to use Lua. Lua is interesting because it's got some unique concepts like its tables function as arrays when they don't have keys and dictionaries (maps) when they do. You can also declare variables as local which puts them in an array (making them faster to look up) when they don't need to be global.

All of this would make sense if you knew a little general programming first. Other than its few peculiarities around those things and indexes starting from 1, you don't need to specifically learn Lua. I'd even say it's more simple than Python.

If you do know programming, the most useful thing I've found is to have ChatGPT to ask it like "How do I do X thing I know how to do in Python in Lua." Like I'm constantly forgetting how to do an enumerated for loop, and it helps me remember.

Once I get the library to a 1.0 version, I will make a tutorial on how to use it so that anyone without any knowledge of programming would still be able to make use of it.

garden

Oh, wait. You’re biminiroad. Cool.

u0421793

By the way over over on the fediverse we celebrated #bonksmas, for all those who create #bonkwave and also #notbonkwave

Audulus_Mark

@garden said:
Oh, wait. You’re biminiroad. Cool.

Yeah! I used to do everything associated with my music page but now I'm trying to develop a presence more around my name to help get a programming job

Today I added the ability to shift and show the origin point and a way to make layers and shift their order programmatically. Will add transparency controls as well as a way to group shapes together. This is the fundamental stuff needed to create dropdown menus, for instance - something that doesn't exist natively in Audulus but would be a cool feature add.

You create the shape and then use layer:add(shape) to associate the shape with that layer. When you create the layer you can specify a z-index (drawing order) or you can just declare them in order like i've done and they'll be layered in that order.

Audulus_Mark

Some new developments - fleshed out the Vec2 class pretty well. You'll be able to call Class.docs() on any class and get this documentation that you see below that explains all of its parameters and methods.

Also have a cool line drawing function where you can draw lines using a single character. You can optionally set a separate character for the verticies as well.

Because of how this drawing stuff works, by the way, it's almost 0 cost to your CPU overhead to add this library and draw these complex shapes and lines.

Patch is attached for people who have Audulus