controlP5ライブラリを使用してスライダやボタンなどのGUIを作る方法について説明します。
controlP5のインストール
メニューバーから「スケッチ」→「ライブラリをインポート」→「ライブラリを追加」を選択すると、「Contribution Manager」が開くので、左上のフィルターのところに「controlP5」と入力し、右下の「install」ボタンを押してインストールしてください。
ライブラリが追加されていたらインストール完了です。
スライダの作り方
スライダを動かすと四角形の色が変化するプログラムです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | import controlP5.*; ControlP5 slider; int sliderValue; void setup() { size(500, 500); PFont font = createFont("MS Gothic", 36, true);//文字の作成 textFont (font); textSize(36); slider = new ControlP5(this); slider.addSlider("sliderValue") .setLabel("level") .setRange(0, 100)//0~100の間 .setValue(0)//初期値 .setPosition(50, 50)//位置 .setSize(200, 24)//スライダの大きさ .setColorActive(color(255, 0, 0))//スライダの色 .setColorBackground(color(255, 0, 0, 120)) //スライダの背景色 .setColorCaptionLabel(color(0)) //キャプションラベルの色 .setColorForeground(color(255, 0, 0)) //スライダの色(マウスを離したとき) .setColorValueLabel(color(0)) //数値の色 .setSliderMode(Slider.FIX)//スライダーの形 .setNumberOfTickMarks(101);//メモリの値 //スライダーの現在値 slider.getController("sliderValue") .getValueLabel() .align(ControlP5.RIGHT, ControlP5.BOTTOM_OUTSIDE);//位置 } void draw() { background(255); fill(map(sliderValue, 0, 100, 0, 255)); rect(125, 125, 250, 250); fill(0); text ("スライダで明るさ調整", 50, 450);//文字の描画 } |
スライダのサイズの縦横により、スライダの縦横が決まる。
スライダの縦幅が横幅より大きければスライダは縦向きに操作することができ、縦幅が横幅が小さければスライダは横向きに操作することができる。
.setSliderMode(Slider.FIX)でFIXをFLEXIBLEにするとスライダの形が三角形になる。
ボタンの作り方
Blackボタンを押すと背景が黒色、Whiteボタンを押すと背景が白色になるプログラムです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import controlP5.*; ControlP5 Button; void setup() { size(500, 500); Button = new ControlP5(this); Button.addButton("black") .setLabel("Black")//テキスト .setPosition(40, 40) .setSize(40, 40) .setColorActive(color(0, 40)) //押したときの色 .setColorBackground(color(255)) //通常時の色 .setColorForeground(color(255)) //マウスを乗せた時の色 .setColorCaptionLabel(color(0)); //テキストの色 Button = new ControlP5(this); Button.addButton("white") .setLabel("White")//テキスト .setPosition(500-80, 40) .setSize(40, 40) .setColorActive(color(0, 40)) //押したときの色 .setColorBackground(color(255)) //通常時の色 .setColorForeground(color(255)) //マウスを乗せた時の色 .setColorCaptionLabel(color(0)); //テキストの色 } void draw() { } void black() { background(0); } void white() { background(255); } |
トグルスイッチの作り方
ONにすると背景が白、OFFにすると背景が黒になるプログラムです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | import controlP5.*; ControlP5 Toggle; boolean toggleValue; void setup() { size(500, 500); Toggle = new ControlP5(this); rectMode(CENTER); Toggle.addToggle("toggleValue") .setLabel("ON") .setSize(100, 100) .setPosition(40, 40) .setValue(false) .setColorCaptionLabel(color(0)) //テキストの色 .setMode(ControlP5.SWITCH); } void draw() { if (toggleValue==true) { background(255); } else { background(0); } } |
参考
今回の記事のプログラムは以下のサイトを参考にしました。