Processing에서 ControlP5 라이브러리를 사용하면 쉽게 GUI 컨트롤러를 만들 수 있습니다.

이번 자주 사용하는 슬라이더와 버튼에 대해 적어 둡니다.
향후 늘릴지도, 늘지 않을지도,라고 하는 곳.

Processing3을 사용했습니다.

ControlP5를 라이브러리에 추가

먼저 라이브러리를 로드합니다.
메뉴바의
Sketch > ImportLibrary > addLibrary
에서 LibrayManager가 열리므로 ControlP5를 찾아 설치합니다.

다시 Sketch>ImportLibrary를 보면 ControlP5가 표시되므로 선택하면 skech 창에 import controlP5.*;가 표시됩니다.

참고로 ControlP5는 클래스로 정의되며 controlP5.Controller 클래스의 하위 클래스로 구현됩니다.

슬라이더

슬라이더를 좌우로 움직이면 배경색이 변경되는 코드



controlP5_slider.pde

import controlP5.*;

ControlP5 slider;
int sliderValue;

void setup() {
  int myColor = color(255, 0, 0);

  size(500, 500); 
  slider = new ControlP5(this);
  slider.addSlider("sliderValue")
    //.setLabel("bbb")
    .setRange(0, 100)//0~100の間
    .setValue(25)//初期値
    .setPosition(50, 40)//位置
    .setSize(200, 20)//大きさ

    // まとめても書ける
    // slider.addSlider(name, minimum, maximum, default value (float), x, y, width, height)

    //.setColorActive(myColor)//hover
    //.setColorBackground(myColor) //スライダの背景色 引数はintとかcolorとか
    //.setColorCaptionLabel(myColor) //キャプションラベルの色
    //.setColorForeground(myColor) //スライダの色
    //.setColorValueLabel(myColor) //現在の数値の色
    //.setSliderMode(Slider.FIX)//スライダーの形 Slider.FLEXIBLEだと逆三角形
    .setNumberOfTickMarks(5);//Rangeを(引数の数-1)で割った値が1メモリの値


  //スライダーの現在値の表示位置
  slider.getController("sliderValue")
    .getValueLabel()
    .align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE)//位置、外側の右寄せ
    .setPaddingX(-20);//padding値をとる alineで設定したRIGHTからのpadding
}

void draw() {
  background(sliderValue);
}

해설

슬라이더 추가addSlider(string)문자열로 슬라이더의 ID 이름을 지정합니다.

슬라이더 라벨setLabel(string)라벨이 없으면 addSlider 일 때 설정한 ID 이름이 표시됩니다.

슬라이더 위치setPosition(x,y)
슬라이더의 크기setSize(width,height)
슬라이더에 메모리 켜기.setNumberOfTickMarks() 인수가 메모리 수입니다.
Range를 (인수의 수-1)로 나눈 값이 1메모리의 값이 된다.
메모리를 붙이면, 1 메모리씩 밖에 증가할 수 없다.
디폴트치가 메모리와는 관계없는 중간 정도의 값이라면, 올바른 수치가 표시되지 않으므로 주의.

버튼

버튼을 누르면 빨간색 사각형이 그려지는 코드



controlP5_button.pde

import controlP5.*;

ControlP5 Button;
int redcolor;
color C1;

void setup() {
  size(500, 500);
  C1 = redcolor = color(255, 0, 0);

  Button = new ControlP5(this);
  Button.addButton("red")
    .setLabel("Red_Button")//テキスト
    .setPosition(50, 40)
    .setSize(100, 40)
    //まとめてもかける
    //slider.addSlider(name, value (float), x, y, width, height)

    //.setColorActive(C1) //押したときの色 引数はintとかcolorとか
    //.setColorBackground(C1) //通常時の色
    //.setColorForeground(recolor) //hoverしたときの色
    .setColorCaptionLabel(redcolor); //テキストの色

}

void draw() {
}

void red() {
  fill(255, 0, 0);
  rect(0, 0, width, height/3);
}

/*
void red(){}ではなく、下のように書いても同じ。

void controlEvent(ControlEvent theEvent){
 if(theEvent.getController().getName() == "red"){
 fill(255,0,0);
 rect(0,0,width,height/3);

 }
}
*/

해설

버튼을 클릭하면 이벤트가 발생합니다.
방법은 슬라이더와 거의 같기 때문에 할애.

참고

라이브러리를 설치하면 libraries > controlP5 디렉토리에 샘플과 참조도 함께 다운로드됩니다.
그 외 공식 사이트에서 샘플을 볼 수 있으며, Processing 메뉴 > 도움말 > 라이브러리 참조에서 참조를 볼 수도 있습니다.

controlP5
Processing ControlP5 library example 1 : user interface
【Processing】controlP5의 사용법
「Processing GUI 프로그래밍」 아카마 세기 저 공학사