LazyGUI

GUI for Processing 3+ with all the basic control elements for floats, colors, vectors, strings and booleans

Who should use this?

Any creative coders using Processing looking to

get values from their GUI using a few simple but powerful functions
change sketch code and re-run it without losing the gui state
make tools for non-programmers with user-friendly controls

Main ideas:

absolutely minimal boilerplate in setup()
lazy initialization when a value is requested
control elements have unique string paths

Other features:

infinite sliders with variable precision
keyboard input for text and slider values
copy / paste any value or whole folders
undo / redo any change
load / save your gui state to disk as json
autosave on program exit
reload shaders at runtime
configurable look and feel
- pre-made and custom color themes
- custom fonts (JetBrains Mono by default)
- background dot grid for windows to snap to
- context guide lines between a child folder and its parent
- individual windows have resizable width

How do I run this?

First get the jar from releases and then drag & drop it into your Processing editor window. If you are using a full IDE like IntelliJ, import the jar as a standard java library just like you imported Processing.

Initialize the GUI

make a global LazyGui variable outside of any function: LazyGui gui;
then initialize it inside setup() after calling size() or fullScreen() with P2D or P3D:
- gui = new LazyGui(this);

Runnable basic example:

LazyGui gui;

void setup(){
    size(800,800,P2D);
    gui = new LazyGui(this);
}

void draw(){
    background(16);
}

The gui displays itself at the end of draw() and by default it shows the root window with an "options" folder for tweaking the various gui settings.

A sketch with the above code should look like this:

Get values from the GUI

Slider

float x = gui.slider("x");

mouse wheel changes the selected precision when mouse is over the slider
click and drag mouse horizontally - change value by (pixels * precision)
supports keyboard input with mouse over the slider - tries to parse the string as Float or Int
there is a sliderInt() variant that returns int

Plot

PVector pos = gui.plotXY("position");

drag the grid with your mouse to change both X and Y at the same time
keyboard input for both values with mouse over the grid
change both of their precisions at the same time with the mouse wheel over the grid
- change just one of their precisions with mouse over one of the x,y sliders
there is a plotXYZ() variant with an extra Z slider (not connected to the grid)

Button

if(gui.button("do the thing!")){
    println("it is done");
}

is only true once after being clicked (returning true switches the value back to false)

Toggle

if(gui.toggle("spam every frame")){
    println("I'm trapped in a string factory");
}

click to flip the boolean state

Text input

String userInput = gui.text("text header", "this default text can be edited");

type with mouse over the text field
ENTER - insert new line
DELETE - delete the whole text
BACKSPACE - delete the last character

Radio

String mode = gui.radio("mode", new String[]{"square", "circle"});
if (mode.equals("square")) {
    rect(175, 175, 50, 50);
} else {
    ellipse(200, 200, 50, 50);
}

opens a window of toggles where setting one to true sets all others to false
returns the selected option as a string

Color picker

int pickedColor = gui.colorPicker("color name").hex;
background(pickedColor);

HSBA color picker with a hex string display
you can copy and paste using the hex field

Gradient picker

PGraphics gradient = gui.gradient("gradient name");
image(gradient, 0, 0);

allows you to set the position and value of individual colors or disable them entirely
blend type supports three color mixing algorithms (mix, rgb, hsv - see gradient.glsl)

Path

The path is the first string parameter to every control element function and it must be unique. It exists only in memory to inform the GUI - it's not a directory structure in any file storage. The forward slash / is a reserved character used to make folders, but it can be escaped with \\ like this: \\/ which won't separate folders.

Keep the sliders called "x" and "y" in a folder called "pos"

float x = gui.slider("pos/x");
float y = gui.slider("pos/y");

Make a toggle that says "off/on"

boolean state = gui.toggle("off\\/on");

Global path prefix stack

Repeating the whole path in every control element call can get tiresome, especially with multiple nested levels. Which is why there is a helpful path stack that you can interact with using pushFolder() and popFolder().

Just like using pushMatrix() and popMatrix() in Processing, you can change your "current directory" by pushing a new folder name to a stack with gui.pushFolder("folder name") and have every control element called after that be placed into that folder automatically

as if the contents of the whole current stack got prefixed to the path parameter in every control element call.

popFolder() doesn't have a parameter - it just goes up by one level

You can nest a pushFolder() inside another pushFolder() - your path stack can be many levels deep. Just remember to call popFolder() the same number of times when done!

Keep the sliders called "x" and "y" in a folder called "pos" by using the stack

gui.pushFolder("pos");
float x = gui.slider("x");
float y = gui.slider("y");
gui.popFolder();

More example code:

processing examples
pure java examples for use in a proper IDE like IntelliJ IDEA
bigger sketches using this GUI in my other repo: LazySketches

wrightwriter / LazyGui