p5.touchgui

v0.5.2

Published

3 years ago

An easy-to-use touchscreen and mouse UI library for p5.js.

Downloads

467

0High
0Medium
0Low

l05

p5.js touchscreen ui gui

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 use createGui() 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 use createButton() 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 your draw() loop. You can call it anywhere, but make sure to do so after you draw your background().
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 will print() 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
- Callbacks
- Styling
- Drawing App
- Notes Player
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:

Download and install node.js
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 the examples/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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

p5.touchgui

Why p5.touchgui?

Getting Started

Quick Start

Option 1 - p5.js editor

Option 2 - index.html

My First Button

Object Types

Examples

Using the OSC Examples