p5.touchgui-fork
v0.7.1
Published
An easy-to-use touchscreen and mouse UI library for p5.js.
Downloads
2
Readme
Home | Reference | Development Notes
p5.touchgui-fork
Note: This is a fork of L05/p5.touchgui. I don't know if I'll add any extra features.
It also contains improvements from other forks, most notably aryan02420:patch0
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.
If you'd like to read more about the process, please check out my Google Summer of Code report.
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 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/[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
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.
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
- Beginner
- 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 installType the following in the terminal to install node.js
http-server:npm install -g http-serverThen start a local server by typing in the terminal:
http-server -c-1Open 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.jsThen point your browser to
http://localhost:8080/index.htmland use the menu to select the OSC examples.