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

Processingで使用するライブラリ、ControlP5のSliderコントロールの使い方を2回行いましたが、どちらも横方向に調整できるものでした、今回は、縦方向にに調整できるようにしてみます。

まずは、実行例を見てみます。

このように縦長のコントロールとしてSliderコントロールを配置するには、コントロールのsetSizeプロパティーを指定します。

スケッチ例です。
import controlP5.*;

ControlP5 cp5;
//int myColor = color(0,0,0);
int sliderValue = 100;

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

void draw() {
  background(sliderValue);

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

前回のSliderコントロールのサンプルスケッチと違うのは、青字の2箇所です。
画面サイズについては、コントロールを縦長に配置する都合で、300ピクセル×300ピクセルに変更しました。

そして、コントロールを縦長にするために設定したのが、
.setSize(100,200) の部分です。

横方向に100ピクセル、縦方向に200ピクセルで指定しました。
ControlP5では、setSizeで指定した縦方向の数値が大きいと縦長に、横方向の数値が大きいと横長に表示されます。

 これで、Sliderコントロールは完全マスターです。



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

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

posted at 2012.11.16

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

Amazon.co.jp で詳細を見る