Графічний інтерфейс користувача

Для створення графічного інтерфейсу користувача існує кілька бібліотек, котрі потрібно підключати з меню Скетч - Імпорт бібліотеки - Додати бібліотеку:

Наприклад, скористаємось бібліотекою ControlP5. За посиланням http://www.sojamo.de/libraries/controlP5/#examples можна знайти перелік елементів керування, що пропонуються бібліотекою та приклади їх застосування.

Приклад кнопки

import controlP5.*;

ControlP5 cp5;

int myColor = color(255);
int c1,n;

void setup() {
  size(400,600);
  cp5 = new ControlP5(this);
  // створення кнопки з назвою 'colorA', значення 0 (не натиснута), розміщення (100,100) та розмір (200,19)
  cp5.addButton("colorA").setValue(0).setPosition(100,100).setSize(200,19) ;
}

void draw() {
  background(myColor);
  myColor = color(c1);
 
}

//друк назви елемента керування, з яким відбулась подія)
public void controlEvent(ControlEvent theEvent) {
  println(theEvent.getController().getName());
  n = n+1;
}

// функція colorA отримує повідомлення про зміни від елемента керування colorA
public void colorA() {
  println("a button event from colorA: "+n);
  c1 = color(int(random(255)),int(random(255)),int(random(255)));
}

Приклад слайдера

import controlP5.*;

ControlP5 cp5;

int sliderValue = 100;

void setup() {
  size(700,400);
  noStroke();
  cp5 = new ControlP5(this);
  // горизонтальний слайдер, що передаватиме значення sliderValue, у позиції 100,50, з діапазоном 0-255
  cp5.addSlider("sliderValue").setPosition(100,50).setRange(0,255);
}

void draw() {
  background(sliderValue);
  fill(sliderValue);
  rect(0,0,width,100);
}