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

今回は、ProcessingでのControlP5のライブラリーにある、Sliderコントロールの使い方を見ていきます。



英語サイトにはいくつかサンプルがありますが、初心者には辛いので、基本的に使い方をマスターするために、ものすごくシンプルなスケッチを作って見ました。

まずは、サンプルのスケッチをみてください。

import controlP5.*;
ControlP5 cp5;
int myColor = color(0,0,0);
int sliderValue = 100;

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

void draw() {
  background(0,0,0);

  fill(sliderValue);
  rect(0,0,300,200);
}

【解説】
import controlP5.*;　　　・・・controlP5ライブラリーを使うための宣言です
ControlP5 cp5;　　　　　・・・まずは変数としてControlP5を宣言します。
上の2行は、約束として、覚えましょう。

int myColor = color(0,0,0);
int sliderValue = 100;

このふたつの変数は、のちほど使うので、それぞれ整数型の変数を宣言しています。


 void setup() {
  size(300,100);　　　・・・画面サイズの指定をする命令です。横300ピクセル、縦100ピクセルです。
  noStroke();　　　　・・・輪郭線を描かない命令です。
  cp5 = new ControlP5(this);　・・・インスタンスにするための命令です。約束です。
  cp5.addSlider("sliderValue")　・・・ここからが、Sliderコントロールを描くための命令です。
     .setPosition(100,50)　　・・・Sliderコントロールの表示位置を指定しています。
　　 setRange(0,255)  ・・・・Sliderコントロールをスライドした時の値の範囲です。
     ;
}


void draw() {
  background(0,0,0);　　・・・背景を真っ黒に指定しています。
　fill(sliderValue);　　・・・Sliderコントロールの値を色の指定としています。
  rect(0,0,300,200);　・・・指定した色で長方形を塗りつぶしています。
}

実行例

スライダーをマウスで動かすと、塗りつぶす色が変わります。
基本機能を理解すると使いやすい簡単なコントロールなので、是非、お試しください。



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

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

posted at 2012.11.16

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

Amazon.co.jp で詳細を見る