Processing ControlP5 Sliderコントロール使い方 その2

ControlP5のSilder(スライダ)コントロールの使い方の2回目です。

今回は、目盛りのあるSlider コントロールの使い方をマスターします。



目盛りのあるSliderの外観です。

その1でマスターしたSliderと違うのは、目盛りがついていることです。
大まかな数値で指定したい時に使えるコントロールです。

スケッチのサンプルは以下のとおりです。

import controlP5.*;

ControlP5 cp5;
int sliderValue = 100;

void setup() {
  size(300,100);
  noStroke();
  cp5 = new ControlP5(this);
  cp5.addSlider("sliderValue")
     .setPosition(100,50)
     .setRange(0,255)
     .setNumberOfTickMarks(5)
　　;
}

void draw() {
  background(sliderValue);
}

【解説】
import controlP5.*;　　　・・・もう覚えましたね。ControlP5を使う時のお約束、ライブラリの宣言です。
ControlP5 cp5;　　　　・・・　ControlP5を格納するオブジェクト変数の宣言です。
int sliderValue = 100; 　・・・Sliderコントロールで使用する値を格納するための変数を宣言です。

void setup() {
  size(300,100);   ・・・Processingで使用する画面サイズを指定します。
  noStroke();　　・・・輪郭無しを指定します。
  cp5 = new ControlP5(this);　　・・・cp5変数へControlP5と結びつけます。
  cp5.addSlider("sliverValue")　　・・・この命令により、目盛り付きのスライダを追加します。
     .setPosition(100,50)　　・・・コントロールを表示する位置を指定します。
     .setRange(0,255)　　　・・・値の範囲を指定します
     .setNumberOfTickMarks(5); 　・・・目盛りの数です。5つの目盛りを入れます
}

void draw() {
  background(sliderValue); ・・・背景色をsliderValueの値により変化させています。
　　　　　　　　　　　　　　　　　　コントロールを追加した際に使用したsliderValueにスライダが
　　　　　　　　　　　　　　　　　　示している値が格納されています。
}

使い勝手良いので、是非、マスターして下さい。



・Processingをはじめよう
・Processing アニメーション
・楽しく学ぶコンピュテーショナルデザイン

Processingプログラミング入門―Javaベースのオープンソース統合開発環境

posted at 2012.11.16

田原 淳一郎
カットシステム
売り上げランキング: 292836

Amazon.co.jp で詳細を見る