p5.touchgui
v0.5.2
Published
An easy-to-use touchscreen and mouse UI library for p5.js.
Downloads
534
Readme
Home | Reference | Development Notes
p5.touchgui
Note: This is a work in progress that is in early stages of development.
Why p5.touchgui?
p5.js is a wonderfully accessible way for students and creative minds to both learn computer programming and create interactive art and experiences.
p5.touchgui is intended to extend p5.js and make it easy to add buttons, sliders, and other GUI (graphical user interface) objects to your p5.js sketches, enabling you to focus on quickly iterating ideas with easily created GUI objects that work with both mouse and multi-touch input.
Getting Started
Quick Start
There are two ways to quickly get started with p5.touchgui.
Option 1 - p5.js editor
Open this p5.js web editor sketch with p5.touchgui.js added.
Option 2 - index.html
In an index.html file, copy and paste the following and open up that file in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Getting Started with ml5.js</title>
<!-- p5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.sound.min.js"></script>
<!-- p5.touchgui -->
<script src="https://unpkg.com/[email protected]/lib/p5.touchgui.js"></script>
</head>
<body>
<script>
// Your code will go here
let gui;
let b;
function setup(){
createCanvas(400, 400);
gui = createGui();
b = createButton("Button", 50, 50);
}
function draw(){
background(200);
drawGui();
if(b.isPressed) {
print(b.label + " is pressed.");
}
}
</script>
</body>
</html>
That's all!
My First Button
(Follow along here.)
- Declare a variable named
gui
and usecreateGui()
to create a new GUI context. This is where each of your GUI objects is tracked and updated.
let gui;
function setup() {
createCanvas(400, 400);
gui = createGui();
}
- Declare a variable called
b
and usecreateButton()
to add a new button.
let gui;
let b;
function setup() {
createCanvas(400, 400);
gui = createGui();
b = createButton("myButton", 50, 50);
}
Make sure to call
drawGui()
in yourdraw()
loop. You can call it anywhere, but make sure to do so after you draw yourbackground()
.If you run your sketch now, you should see your button drawn on the screen at an x position of 50 and a y position of 50.
function draw() {
background(220);
drawGui();
}
if()
your button is.isPressed
, you can choose to perform actions. In this example, we willprint()
a message using the button's.label
.
function draw() {
background(220);
drawGui();
if(b.isPressed) {
print(b.label + " is pressed.");
}
}
- All together your p5.js sketch should look like:
let gui;
let b;
function setup() {
createCanvas(400, 400);
gui = createGui();
b = createButton("Button", 50, 50);
}
function draw() {
background(220);
drawGui();
if(b.isPressed) {
print(b.label + " is pressed.");
}
}
Congratulations! You've created your first sketch using p5.touchgui. If you want to see what this looks like, click here.
Object Types
- Button A button with a label that highlights when touched or clicked. When released it turns off.
- Toggle A button with a label that highlights when touched or clicked. When touched or clicked again, it turns off.
- Checkbox A button with an X that turns on when touched or clicked. When touched or clicked again, it turns off.
- Slider A horizontally oriented slider that can be touched or clicked and dragged side to side to change its value.
- SliderV A vertically oriented slider that can be touched or clicked and dragged up and down to change its value.
- Crossfader A horizontally oriented crossfader that can be touched or clicked and dragged side to side to change its value. Visually similar to a slider except the indicator extends from the center.
- CrossfaderV A vertically oriented crossfader that can be touched or clicked and dragged up and down to change its value. Visually similar to a slider except the indicator extends from the center.
- Slider2d A two dimensional slider that returns an X/Y pair of values depending on touch or click location.
- Joystick A two dimensional slider that returns an X/Y pair of values relative to a resetting zero point at its center.
Examples
- Simple
- Intermediate
- OSC (see below)
- Slider
- SliderBank
- ButtonBank
- Demo
Using the OSC Examples
In order to run the OSC examples you'll need to do the following:
Open a terminal or command prompt (on Windows you might need to open the command prompt as admin).
In the terminal, navigate to your p5.touchgui directory using
cd
.In the terminal type to install dependencies needed by p5.touchgui to run the OSC examples:
npm install
Type the following in the terminal to install node.js
http-server
:npm install -g http-server
Then start a local server by typing in the terminal:
http-server -c-1
Open a new terminal or command prompt (again, on Windows you might need to open the command prompt as admin).
Use
cd
to navigate to theexamples/osc
folder within your p5.touchgui directory.Once there, type in the terminal:
node bridge.js
Then point your browser to
http://localhost:8080/index.html
and use the menu to select the OSC examples.