App - The Party Van

[jasonw22]

It isn’t Helvetica. But it’s something similar.

[Rodrigo]

@jasonw22 So with regards to separating color/sections/functionality, what would you recommend? I’d like to have different colors for each section of the karma core modules, but at the same time, I want to have a global/primary pink/grey thing going. Then there’s going to be different subsections of the patch too (fx modules, I/O, some other esoteric bits). Plus there are the transport buttons, which I don’t know if I should go with kind of standardish colors there (a red-ish for record, green-ish for play, etc…)

Should I use different shades/tins of similar palettes in multiple places, or reserve certain colors just for certain areas/modules?

This is tougher to try to gleam inspiration from other bits of software as the scope of TPV2 is really big, whereas most things tend to do one or two things, so color separation can be more drastic within a smaller area.

Really I’m just worried about “blowing my color wad” on a karma core, then being fucked and having to start over once I start adding fx modules and other sections. So I want to have some kind of “color overview” of the whole patch.

[jasonw22]

Hmm, I was kind of imagining that in different sections you would use another color instead of the pink. If you want to use it in addition to the pink, then you’ll want one or the other of the two colors to be more visually dominant (probably by choosing a less bright or less saturated color for the less dominant features).

You’re asking a lot of very good questions, but I want to make sure I’m visualizing the app correctly before I answer. I’m gathering that the most recent image you posted isn’t the entire UI? It’s what you are calling a “karma core”? There will be multiple of those? And then another section or sections that have effects, I/O, and misc other stuff? (Starting to sound really wide if this is all going into M4L side by side, might want to think about ways of compressing things horizontally).

I agree about pacing yourself with color, and that it helps to tackle the problem holistically if possible. If I can get a better image in my head of what the basic areas are, I’d be happy to do a few versions of a mockup for discussion. One way you could communicate how the app as a whole might be laid out (assuming you haven’t coded it all up yet) would be to make a simple wireframe. No need to draw every detail of every module/section, would be sufficient to just label the sections and show how they relate to each other spatially. I can use the karma core image you already posted and extrapolate from there to make a more realistic mockup based on your wireframe.

Does that make sense?

EDIT: alternatively, if you do have the UI coded already, I could simply edit it. It’s definitely a task that’s easier for me to do than to explain, although I am generally able to back into an explanation after I’ve done it.

[Rodrigo]

You’re asking a lot of very good questions, but I want to make sure I’m visualizing the app correctly before I answer.

I’ve not made a mockup of the whole thing, but it would probably be something along the lines of this:

So the “core” modules will be on the left (similar to TPV1), and there will be four of them. On the right will be a few subsections, but quite different from the current TPV layout in that the input/output fx won’t be visible by default. The main reason for this is I’m completely revamping that section, so each individual input will have a separate/custom dsp chain before going to an assignable core module. So there will be an input and output section that will have DAW style slots for fx modules, then some other bits in the middle, like a dedicated Combine module, and the big/new/scripting/form module. That may be more or less it, but as I said, I’ve not pictured what that will look like. Less “total” sections since many of the sections in the old TPV are getting folded into one (chocolate grinder and cocolase modules are kind of built in to the karma cores etc…)

For the most part, I may keep things about a M4L height, so they can all stack nicely in the UI, and then be ported over to M4L easily too. Including the fx modules, so when you open up an fx slot, it would look similar to above (in terms of weight/size), but have different contents.

instead of the pink.

Hmm, interesting. Yeah this is exactly the kind of input that’s super useful, as you (obviously!) have a much clearer idea of how these kinds of pieces go together. Much more how ‘functional’ colors work within that (transport stuff, and even meters, for example, the ‘gain’ knob will have a built in meter):

Even the global layout, I’m not really sure about. The sketch is literally just taking what I had before and making horizontal “cores” instead of vertical ones (and leaving out the middle column). I’ve not put any thought into what a top-level UI structure would be, or look like. But it should at least give an idea of the amount of areas/sections in play.

Below is the code for just the UI elements of a karma core:

----------begin_max5_patcher----------
3944.3oc6cs0aaajE943eEBZe0kcNy8YeyMqapQcRLbBZQgQP.sEkManoLnn
RR2ht+12YFdWhh5hotXIFfXSyKRCOmuy8yLyeexq5e6nu6Mteu+cua58pW82
m7pWYOk4DuJ8ueU+Gc+9cAtis2V+.+u54DN4QyccZx0+paTn6idSe4a.9mxt
kQShC7hi+qm7R9t52+zd8GFLxMteuOkdOCGc2jw2NJZfWzciBFEkbmHGzole
.JNRZORHoDvdT9i9ja7cO3Gd+mi7tKN44XLvgq+GleZOfhcTTECSOsGga9.A
Vomd3nv3gt2YGZnzyUy3vLBD1gPcGU7w4OvRIFc6e9CbT+7QXjlDE6E8YuP2
aCreWP50h89dbkuILQgAt4SEynJD1dT5qMT5ax8tXM4916q7vhrmX1CJdRMG
xOTyQFWdbXnC4LxewK3qdw92416cdS75co+8OD2u3oSXn1GGmd1wte0avmci
ii7ucRrWwQiSgSo3ICfIXh2ngYmN67koRAiBuuVPEVkAppb+ieXTTb8nPn1G
HCKhp4ZOpQ7VBiScWcRne733+JkGlb8+4jSJ9k8m+yImtjRTO4F5EzuIjrrD
Rl3PzHYPi4vIHYt9hLFVTK9ij84FMZR3.uAkg34uC862DpnJyN6gebzfJxKt
g2m7ggEHmbgnpHSIGKnLCPTJPLoL4nYg0OEM5IM2zeTn8avgnVCppEBD3G50
.kkhTVRnD4vTDLxLNPTyoX0KOSoqBoZcG0Ko1UzNT6JUR05lXXPYPfTGJAwM
XRBXInjEnc0btw9+W64jNsqNWhpSmaaqyUdnoy8tQO9nWXNw0fFrme7SdZkj
Mf6ExBbOEz3dtVYrF2iS0EWOtG2HturBlbGFVRsyqI9YczMMv2MXtZblRaSs
pLPEjNlVKqRf0GhYNDy+vkNrVUuPSh0YjxPM6KvqhroxHCSOMQUGj9i7ugYI
ylWMsYiJeFbFRY03XrCyEIGkXLCVjDdUBOLk8Sb8lJwJiJYy2CQ+MinIGoOU
lp4001hEoOOKKlKdCzrYkBdr4tSLQ2+pKO6OlQV5Ce78W0eAVeZR+Nr.SPTt
ihKEFdf1CIAmn3ZPDQS7PL6YWEoQdcRiX4ZYJAcZoerXaG4r0YOZ1GNgnuVt
UsIr+j8FUYHAke4mRbaiYu5eAewM5Q2O+favvkzXUIYgZMSgWYyTdZpTprhd
7CF4E8uw8SjWedlrVVwW5ZH+d84u98W+elQBt5o2Dxvf1MRXyJCq5jgeoHCW
BEK9zJHDeC9SubjimmqmWc1G+34W+t9KmzBE6f0dkHz9HPY056Yi9Yhg11Oy
dWD6F3eW+cQnvX7tLTXNncWCzdhnYBZWXQJB17X6AgBqvcgB21gByOzBEdUj
yH6zTNIbRz8seIjAHnSJqskxDGMIbxfJaBzySA8HrFzqXDxo8vj1IYS.hb.m
sIRJgS6zjfojFepW1bMAHVWxlddIaZd38H23Fw65n.mEuSaK7t7vEuy3NLIS
QjqIjG5xuZaje0ETwQl1UEUVLbbVQYGoZmavRsqMys1iL7Ft1iySj0RJa5Uh
4XG2fTl+9PPsjHKd+Uh0xu0TrIy0sYyEuAVPvo033bMTYNhn8NDjlhMUlPyv
F8kHqSirEPsKQWEKkKqQ9KWFgZYWTeHHd49dWSlMY63KaB2mtrdxZucxJmHq
Rop5C+5OXSU0au35ydy4li9fBgrm4pWysG76e7pyZurQuDf+1.6yzJGYDA0j
rqV.6S6v9aIrOd6g8+0yt9smYfSu4xK93q+EyQW99e9BK3+xqM+52t3c+wkl
C93YWc91rhLp0nfLmc0Um+tYKHS0SuAJHiB6XMkS4FDqz7DDkiBwSLv+bMmi
E7tpw7BrZLrC1pwrrUUEVqpp9ame8GNulxpV47aPwXI2gHjDAtsEiYchwu.E
ioG8hwn0PL9WN6xedFY3xmbCJ.y4NLNELYAqcEfocBvu.EfIG6BvxWHMmXl7
Kl6nHLNo08iF2I+9BT9EN1keEufZNwLYXjvAv.QoZaYXnSF9EnLL5vVFdgSY
NYQArnP1r3n4oMGly2Q0tZQymGFQ+5vHI0uBQbPDfwzGSDISLvUPHGP0JkyO
bmQOLBJsxe.ygmphjQc3LqJxripGQzUt41nbyK4TEUsC6aOtFbHIDBPRZaYF
UKvskmG9XpnqG8Z6dzCerMQ74XbEjb1RJwRLQ7wLzQ6Lwed1lu20OrIps1fJ
WHPbC0FwbvxDSy3VyzLCNXMMyQZEsxTnJt.pRsZwoySMIizYU94YU9Yy2fBP
ulugnDMEPyw.mjlCK8f54dzcH2qvBLFosZlXpjvvJ5gVO7wIXGPRvRUhY.Zp
rkUKSOw7DsXMpZ44POqwnPhaSIJs4aJ5fVorxXOTjPGxVWZzFBojzIu47Pp7
sIw3OmLN1enVSclgLZKQkdtwOoDNLjllY6YWyraIMDJ8KbZHToGUOQTrmJtq
uJbXslHrNyo5W+929SW7tYq9+TmeCOqpQh71neMSdoFiV27GE0k7xWdIuTbX
m6xkLaHrcX1PHRjCMKgiRvtvYgH6ESjQLpKIIscRRfilUNqH2vdO4qw6M3wH
QTB7yj4qdVTnclsH3C3I3EQvKncBXUW9rvHUWn8asDtq1WrvXlGVYSIq8AKL
zNKLssEFQ2ZyXlFRZAvubbO31x5B63v5BnrSeXAdULuv6Lur0LurKWW0IDkS
RRDDRGEUaaQrkKlKnXcVQZYqHGcKp5DJOCFqbHzDWjVhB4pwlcExcJCyeyOr
2BVGaHZqGTddWiwELrwlBk1R0xEThCWayXyr3xFxbATs4B4BJYm43cZgbKC3
qloiEVGWPo5pi6VnNtDlvQoshaWVAzNyHoYaADMUGWD5PqNtDr1eeACYqgsl
NHzfHEaopiawRe2wbcbIXyJ.ZlvNMegYcIqiKB2UG2sXvSxcXvS5W8ccvSRR
WvSscJ33GaQOgUh0K5IorK5ooaC1H2EG+DVvJLwTJ.JFzVAPIUGrAPgEhUO.
JTW.T6z.nvlLRutAPAcAPsMBfBQW8.n.E9PK.JrDVy.n.EoK.JirN9YD.Enn
cAP0NMB6n6MNMM2Vg0d4aZZS.XgwM8LZqUMQ0AvTE2z28.NeFmBIbNXN5a3K
0RN2JvcpswNWDXZEu8McyfNEmbgsCZYfQ62MniFNzD5sQmzFbC1YXjm2BJRA
oPMDfJV0GZoFH.3h87Uy3E2I7j0nS3ey0mcw6lgcT4ra.0EFu9UkZC9m4Z3g
pdNZ2Bg2Kv1fm00F7eegaTfazDgZVFmQJURnC6WMoHf6xPZqmgT5Q7tlErK2
0rvfvgpCP0FW9dlfFzMeSZcAMxwrf1tbafDa1FNAfZhoauSPi2In01BZ3ik1
t2K7qMk6SSK7kA6K0z8s1dTGPObqKkYdukQ6ViltGftsotM01TmmVow8Mg6M
Zz07tjE+vR3dYasW0c.WOV.6HvXhcurZsv83Nb+yC2OQaPzjdt4wDu0M7diK
SY+17e+vRr0GbCGXRaaYpUcw4q8JRxzzbiXhjTd+giXpmibprvUQBn4BEVcm
RB4P0r.KEgqn.HOMOISyonXzVTcwnvwdwMQFjT8qtxvEqLyzZocIO1gqMRCk
ipUDfVSajrtFgeKzI.TjxRgP37zryRNA2Q.HjjTqDdAyYCsr.uBU0DuippIl
xcTbgcK9.jh73FWPUMoptpZNmpZhOppp4CtACazOUkiVfDgIUM.m1rlsPiCR
2iWyMlu68e0KZbi8zCh3PjozMFunsAwsFciuuWL3kRuIrOn2joJZ9rEn2Tzo
2bN5MgiJ8lQ5.XVu.WZK4exgf7+tQ3GDbm7EQsk2mIbmre8x9GhB9KSbKLfj
tCVrhQtPgsQjKKpuiE3Rc3zJ9Bf1CdA.hVLd0G6X4dvXWJmIhWAqg8.G.K1F
i5krRovtr2eXLGAJU6MG1QyCRLpqlnscMQgis4AIvwkfx3UZpPBc6HHy5Sdb
ilKnk1rtvEt80Z6HHzC2EQF6FUPFsihWxoAY21Ax1Y8kGuFcU+Gt7hWe90yt
w1V4zahXunfCKalYtg5qdFuqs5e40V83t1p+62rKWb44DpiQrTRcjZ8uRsmk
fpw1ODuEZ+PgZSHLONve5wVmu4y22b1J5ZNtk8L2W6YtwClL8TYjz8kdGdWN
YXXZ4UR59J39knKuSzc2K5ROFEcaZsF8G+wF21Hg7c9PIQKWkHL0Vyg284ov
67nYOMZbyzLFSsQoY7C3vpKELDEVskoFb2xTy1n4z.SVuXjjo.GGVxkoF7A2
xTSkRZqoCqvxTCl0sL0XJWU15Hl9fUbMpAy6ViZdtB6eS6t0vQQO9+V.O7zF
OHvebb0jpc6jgC8JBKP69VtAl.2a8Bp.NqAWnHNVU8B6tCNU+tx31E1bpxQo
j.QVGjH205rWq0J2RyB.7uObjdrE3e2WlaaMjsiNN1Si1LRYU+t0vXok2I0e
y3Dd2rdTeej+fJOGQvoBK+kjCZoM0B97rfxzl2+REpbzjfTA85gWUhvXcwSK
p5NJbBeMI5rD9psf0L5z70ZB2hki1m8n4zgJEqFXkJIDzJ0DpP0IrnpDM2ZD
srILsUpQzhXNRgMUWDUd7xo0eG3pxcay7BRO+GPsJryUWeq6ce4dK6nLwqsK
Y2Jvd.GBSInP6VGOsOQJJThOYuSqk8wIe1YrMKuv5pQEl23QShtKSOb972oW
gskAZ0p9g41zuoTSY0qXb8f+fAdgkIDC7GaLSNXZO7SFftO8joUdS+PsCFMN
5OSHHhSs+oeXxeZMUY58W+r6O4LtQZvUrFYMIJgA9cYB62xDhBm3mFTqF8dR
JidJhRtwiylLvezGhcimL9yu0KbRBVP+xOzcRPbUR1s2OzOHHm8UNeAY1z5m
b0z.t6OkI1j44jV.S6PBNwXq9.FqDYO8Yf7YIUd5Un4HEszCgQpnnN8wvKi4
7xoDn1ZMWmFg76eR7n6ibG3aBbMiCmmxfSSQbQ5qNs7U+G0DT+rmorhkblwW
Rxzzua3tMwHltDJPUesZkwRn22z38eJXh2O.MMVbu6N8WPU6pfwvps.n4bOU
ps1Ve.FM5agq7HrXbwDlD3cZIuAZ6Q3q+K2Ue.hvJcX5VCVBBAaIlRL.lLdz
1Cv2D44sFiPK0yNQ1rVk3FM4s+f6O7BBF8slGckSniVh.qidVgPxRIgclQuD
y.KQUHAYhK9LMEm0pu.Sd7Vun2LJXvJSbMPQjk8yTXfYGoPY0Wsx.LJQciYD
tjZazRNTNmnRgiBQBvTS3Tjo6Z3M8Kj9Y9mS9+XA.c.O
-----------end_max5_patcher-----------

[jasonw22]

When used with M4L, do you anticipate folks would use multiple karma cores per track? If not, then I don’t need to worry about things getting too wide, your layout is going to work as-is. But if you want to use multiple karma cores in one Live track, then I might want to give the layout a bit of a think in addition to the colors.

Gonna do some mockups now (er, after I put dinner together in the slow cooker, that is).

EDIT: and if you don’t have a preference, I’m going to just do some mockups for now. Still kinda new to Max UI, so it’ll be faster for me to make a picture of the thing than to make the thing itself. But you could easily twist my arm to do it the other way if you’d rather.

[Rodrigo]

If people do use more than one karma core per M4L track that’ll kind of be their problem, hehe. Or rather, I can probably shrink the width some, but not by any significant margin.

If you’re more comfortable doing an image mockup, go for it. Messing with that UI (at the moment) is really faffy, as there’s lots of layers at play to make those “Madroknobs”.

Can’t wait!

[jasonw22]

What’s the difference between “REVERSE” and “HALF” in the transport, vs in the SLICER?

[Rodrigo]

the reverse/half in the transport effect playback whereas in the slicer it means that some slices can be reversed and some can be half speed, but it doesn’t effect the global playback.

[jasonw22]

What determines slice size? I assume there are multiple slices? What determines which slice is impacted by reverse and half in the slicer?

What does rand do? What does onset, retrig and env do?

(I’m probably going to ask similar questions about everything)

[jasonw22]

Busy day on the farm, but I did manage to find time for this:

[jasonw22]

Still not entirely satisfied with contrast and legibility. I’ll take another swipe at it after some feedback.

Definitely be sure to look at it at 100% scale.

[markthepoet]

Tight! Very nice indeed!

[markthepoet]

Insert “ooooooo” emoji here

[Rodrigo]

Ah nice!

So quite a lot of color range in these modules. I quite like the green and orange, and blue even. The purple sits a bit weird for me, especially relative to the pink, but it’s tough to gauge without more stuff in place.

The waveform area feels a bit washed out, though I suppose a dark on light is better than light on dark there. You’d go with the non-radiused edge-to-edge waveform display there?

The larger pos/win controls make sense too, though I’m thinking they might be better served towards the top of that area once the waveform is cut in half (like on blockparty/cutglove where you only see the top half of the waveform), as it might just cover the ending of the waveform, especially if it’s quiet.

[glia]

is there any thinking behind

. pink being removed almost entirely?

. speed being rendered differently on each module?

it would make for a different kind of legibility to have functional association with specific controls rather than modular uniformity

[jasonw22]

Thanks for the feedback. Will do a couple more versions.

@Rodrigo, if you want to tell me a bit about what kinds of controls you imagine will be in the right-hand modules, I can add them. It’s just a mockup, so no worries if your ideas aren’t totally solid yet. It’s more for getting a feel for the visual balance.

[Rodrigo]

Not sure of the specifics, but this gives a rough idea.

The top section will have some I/O things with some global buttons, and probably knob/gain things.

The preset/form section will have some kind of text thing along with probably a bunch of dropdown menus and/or small buttons to handle preset saving/storing/loading, and defining formal criteria for moving between sections.

The Combine module will probably look similar to a karma core module, but more parameters. Incidentally, each audio fx slot will probably look something like that too, but in a pop up window.

The bottom section will have output fx slots, and some kind of mixer section. Probably more than what you see, but this gives a rough idea of the types of interface elements that might be in play.

It’s funny, looking at a whole overview thing, there’s not a ton more to do. Rather, there is a ton more to do, but everything is quite compartmentalised, with the preset/formal stuff being the next big complicated thing.

[Leverkusen]

Wow, it looks good! Tidy and nicely composed - maybe it’s just me but, while seeing the color scheme in it I tend to get dazed and confused by too many colors as in the more colorful version above. Grey and magenta looks cool, neon green is a bit difficult with its contrast to gray, maybe working with distinctive grades of the same color spectre like adding purple to magenta? Or just two different colors alternating over the columns?

I am getting more and more excited about this but there is not much I can contribute I am afraid…

[Rodrigo]

I’m trying to think what to compare the scope of the program to, as most plugins are kind of unitaskers, whereas this goes much bigger/wider than that. Maybe having a color for ‘types’ of control, like what I think @glia is saying?

So all module on/off are a certain color, then volume/gain type parameters share a color, toggle parameters (rand/freeze) yet another color etc…

edit: Looking through all these DAW ones, it’s striking how many shades of grey/neutral colors there are, with those being the main sectional demarcations.

Digital Performer seems to be about grey + blue, with about 4ish shades of blue going on?

Bitwig is all about that orange and dark grey, with only one shade of orange(?).

Logic is similar to DP in that it’s grey + shades of blue.

[Rodrigo]

And for the sake of thoroughness, here are some images in my UI inspiration folder for TPV2.

The last couple were the starting point for the light grey + ascii-heavy layout, the latter of which I abandoned once I started moving towards a more Madrona-esque look. I do really like the severity of light grey + white-space geometry + accents of solid primary colors.