p5.SimpleUI is a lightweight UI library for p5.js that provides easy-to-use UI elements for your p5.js sketches.
- Simple and intuitive API
- Customizable UI elements
- Easy integration with existing p5.js projects
- Includes various UI elements:
- Button
- Slider
- Radio Button
- Checkbox
- Text Area
- Input Box
- File Picker
- Color Picker
- Download the
p5.SimpleUI.js
file from this repository. - Include it in your HTML file after the p5.js script:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="path/to/p5.SimpleUI.js"></script>
Here's a basic example of how to use p5.SimpleUI in your p5.js sketch:
let ui;
let button;
let slider;
function setup() {
createCanvas(400, 400);
ui = createSimpleUI();
button = ui.Button(10, 10, 100, 30, "Click me");
button.setOnClick(() => console.log("Button clicked"));
slider = ui.Slider(10, 50, 200, 0, 100, 50);
slider.setOnChange(value => console.log("Slider value:", value));
}
function draw() {
background(220);
button.display();
slider.display();
}
function mousePressed() {
button.handleClick();
slider.handleMousePressed();
}
function mouseDragged() {
slider.handleDrag();
}
function mouseReleased() {
slider.handleMouseReleased();
}
let button = ui.Button(x, y, width, height, label);
button.setOnClick(callback);
let slider = ui.Slider(x, y, length, min, max, defaultValue, isInteger, step, label, isVertical);
slider.setOnChange(callback);
let radio = ui.RadioButton(x, y, ["Option 1", "Option 2", "Option 3"]);
radio.setOnChange(callback);
let checkbox = ui.Checkbox(x, y, "Label");
checkbox.setOnChange(callback);
let textarea = ui.TextArea(x, y, width, height, defaultText);
textarea.setOnInput(callback);
let inputbox = ui.InputBox(x, y, width, height, defaultText);
inputbox.setOnInput(callback);
let filepicker = ui.FilePicker(x, y, width, height, "Choose File");
filepicker.setOnSelect(callback);
let colorpicker = ui.ColorPicker(x, y, width, height, defaultColor);
colorpicker.setOnColorChange(callback);
Contributions are welcome! Please feel free to submit a Pull Request.
This project is open source and available under the MIT License.