Home | Reference | Development Notes
Note: This is a work in progress that is in early stages of development.
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.
If you'd like to read more about the process, please check out my Google Summer of Code report.
There are two ways to quickly get started with p5.touchgui.
Open this p5.js web editor sketch with p5.touchgui.js added.
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 p5.touchgui</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/p5.touchgui@0.5.2/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!
(Follow along here.)
- Declare a variable named
guiand 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
band 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.
- 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.
- Beginner
- Intermediate
- OSC (see below)
- Slider
- SliderBank
- ButtonBank
- Demo
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
cdto navigate to theexamples/oscfolder within your p5.touchgui directory. -
Once there, type in the terminal:
node bridge.js -
Then point your browser to
http://localhost:8080/index.htmland use the menu to select the OSC examples.
Please use p5.touchgui and let me know if you have any feedback!
- Do you use it in a project? What works and doesn't work?
- Do you teach it in a class? What works and doesn't work?
Any questions pertaining to this project may be communicated via Issues on the p5.touchgui GitHub repository. Simply create a new Issue and either assign or tag me in the conversation with @L05.
