Processingに新たなモード「Tweakモード」が搭載されました。



引用動画からわかるとおり、このモードはスケッチを実行しながら直感的にコードが改良できるという素晴らしい機能を持っています。
この機能を使うことにより、ハードコーディング(決め打ち、ベタ書き)された値も調整しやすくなります。

使い方はこちらのページに書いてあります。
Gal : portfolio
この記事では、上記ページを翻訳し、まとめたものを書きたいと思います。

--

導入方法
Processingのダウンロードページから、最新版を準備してください。
なお、現在の最新版は2.0.3です。
Download \ Processing.org

Processingを起動し、右上のモード表示(デフォルトではJavaモード)をクリックします。
メニューから「Add Mode...」を選択し、「Tweak Mode」をインストールします。
インストールが終わったら、Processingを再起動します。

また、Tweakモードを使うためには「oscP5」というライブラリが必要です。
メニューバーの「Sketch」から「Import Library...」を選択し、
さらに「Add Library...」を選択します。
「Library Manager」が開くので、右上の「Filter your search...」に「oscP5」と入力します。
下に「oscP5」がしぼりこまれるので、インストールします。

さらに、Tweakモードを使用したいスケッチを開き、
「Sketch」から「Import Library...」を選択し、そこから「oscP5」をインポートします。
これで準備は完了です。
なお、noLoop()関数が書かれているスケッチについては適用されないので注意してください。

値の操作
Tweakモードの状態でスケッチを実行すると以下のような画面になります。
21
数字にアンダーラインが引かれ、左右にドラッグすることでその値を変更することができます。
たとえば、上記コードを実行し、ellipseのx軸の値の部分を右にドラッグした場合は以下のようになります。
0919135430
0919112412
座標が右に移動しました。

fill()の横に表示されている色つきの四角をクリックすると、カラーピッカーが表示されます。
カラーピッカーから色を選択すると、その色が反映されます。

このコードにおいては、円の座標・サイズ・色がスケッチを実行しながら変更できます。
つまり、draw()関数内に書かれている値はTweakモードで調整可能ということです。
これは、draw()関数が実行中に何度も呼び出されるためです。
しかし、setup()関数内に書かれていることは、スケッチを実行してから一度しか呼び出されないために、変更することができません。
よって、このコードにおいてはsize()とbackground()は変更できません。

調整後の値の保存と破棄
スケッチを実行し、調整した後にスケッチを停止(ウィンドウを消す)と、
以下の様なダイアログが表示されます。
54
この時、Yesを選択すると、調整した値がコードに反映・保存されます。
Noを選択すると、調整した値が破棄され、コードにも調整前の値が残ります。

変数の扱い
Tweakモードでは、変数におさめる値も操作することができます。
ただし、グローバル変数の扱いに注意が必要です。
import oscP5.*;
import netP5.*;

int r = 100;

void setup() {
size(300, 300);
background(150);
smooth();
}

void draw() {
int blue = 255;

strokeWeight(5);
stroke(0, 0, blue);
fill(0, 100, blue);
ellipse(150, 150, r, r);
}
この時、円のサイズを指定している変数rはグローバル変数であり、
スケッチを実行した時に一度しか呼び出されません。
よって、Tweakモードでは調整できません。
しかし、変数blueはdraw()関数の中で何度も呼び出されるため、調整が可能です。
0919140724
0919140732

細かな調整
整数値をドラッグすると1きざみで値が調整できますが、
小数値をドラッグすると最下位桁から調整できるようになります。
void draw() {
float x = 150.0;
float r = 100.00;

strokeWeight(5);
stroke(0, 0, 159);
fill(0, 100, 255);
ellipse(x, 150, r, r);
}
上記コードの場合、変数xは0.1きざみで調整でき、
変数rは0.01きざみで調整できます。
細かな調整が必要とされる場合は、「.00」と小数点より下に桁を増やすと良いでしょう。

色の調整
fill()やstroke()のように、色を指定する関数の横には、
色つきの四角が表示されます。
これをクリックすることで色の調整ができますが、
これはcolorMode()でRGB・HSBのどちらを指定しても対応しています。
また、以下のような16進数を利用した指定法やwebカラーでの指定法でも対応しています。
fill(0xffff00ff);
fill(#ff00ff);

指定箇所のみの調整
Tweakモードは、コード全体の値が調整可能となりますが、
指定箇所のみを調整することもできます。
void draw() {
float r = 100; //tweak

strokeWeight(5);
stroke(0, 0, 100);
fill(0, 100, 100);
ellipse(150, 150, r, r);
}
このように、調整したい箇所(このコードの場合は円のサイズの変数r)と同じ行に「//tweak」とコメントします。
すると、他の箇所は調整不可となり、コメント行がある部分のみアンダーラインが引かれるようになります。

--

Tweakモードは自分のスケッチの値の調整だけでなく、
他の人のスケッチの動きを追いかけるのにも役に立ちそうです。
Processingのスケッチ投稿サイトであるOpenProcessingにも、改造したスケッチを元のスケッチと結びつける「Tweak」機能があります。
このTweakモードでスケッチの広がりが豊かになりそうですね!

OpenProcessingの使い方についてはこちらにまとめました:
なれる!P5er ~OpenProcessing使い方ガイド~
OpenProcessingのTweak機能についてはこちらを参考にしてください:
Tweak機能でProcessingの輪を広げよう!