Comments
Description
Transcript
挑 戦 ！
8
7
<
特
集
❸
7
>
9
:
=
;
>
?
挑
戦
！
8
7
8
<
FheY[ii_d]
近年、アートとデータビジュアライゼーションの境界線はあいまいだ。
アーティストは、社会的、文化的、科学的な現象を表現しようとしており、作品の中で
事実やデータを盛り込む手段が求められている。同時に、エドワード・タフティや
ジョン・マエダといった思想家の意見も影響し、データの表現に美を求める声も多い。
そうしたニーズに応えるプログラミング環境が
「Processing」なのだ。
文／トニー・マレン
(
'
起動するとコードの編
集ウィンドウが 開く。
ここにコードを記述し
て、ツールバーの再生
ボタンを押せば、実
行結果を確認できる
開発元からディスクイ
メージを入手し、その
中身を任意の場所に
コピーすれば準備は
完 了 http://ww
w.processing.org/
*
ツールバーの「Open」
ボタンをクリックする
とサンプルコードを開
ける。プログラムを制
作するうえで参考にな
るので確認しておこう
£{£ÊÊÊÊÊÕ}°ÊÊÓäänÊÊ
)
実行結果は、別ウィン
ドウに表示される。単
体のJavaアプリケー
ションやウェブブラウ
ザー用のJavaアプレッ
トとしても書き出せる
9
が
求
め
ら
れ
る
。
複
雑
に
な
る
と
シ
ン
プ
ル
な
デ
ザ
イ
ン
ー
タ
表
現
の
重
み
が
増
す
。
デ
ー
タ
が
の
体
験
を
色
濃
く
反
映
す
る
こ
と
で
デ
取
る
。
優
雅
な
デ
ザ
イ
ン
は
、
観
察
者
ア
ラ
イ
ゼ
ー
シ
ョ
ン
の
芸
術
性
を
見
て
探
訪
し
、
統
計
学
者
が
デ
ー
タ
ビ
ジ
ュ
て
の
書
き
出
し
も
可
能
だ
。
ム
ー
ビ
ー
、
Ｊ
ａ
ｖ
ａ
ア
プ
レ
ッ
ト
と
し
シ
ョ
ン
作
品
を
制
作
で
き
る
。
画
像
や
タ
ラ
ク
テ
ィ
ブ
な
ビ
ジ
ュ
ア
ラ
イ
ゼ
ー
ん
、
趣
味
で
使
う
人
で
も
精
巧
で
イ
ン
発
環
境
。
研
究
者
や
美
術
家
は
も
ち
ろ
す
い
Ｊ
ａ
ｖ
ａ
言
語
を
ベ
ー
ス
に
し
た
開
7 HeX[hj>eZ]_d:Wddo<hWdph[X
8
9 C?JI[di[WXb[BWX : >eb][hB_ffcWdd
< CWh_kiMWjp
= :Wd_[b>_hiY^cWdd
ア
ー
テ
ィ
ス
ト
は
デ
ー
タ
の
世
界
を
﹁
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ｇ
﹂
は
、
扱
い
や
ア
ー
ト
を
プ
ロ
グ
ラ
ミ
ン
グ
す
る
新
し
い
ツ
ー
ル
: <h[Z[h_aLWd^ekjj[
> d[hlekiioij[c > 7WhedAeXb_d
Processingはグラフィックの描画に特化したプログラミング環境だ。
ここではまず、基本的な図形の描画や着色の方法について確認しよう。
を
体
験
し
て
い
こ
う
。
44
を
入
力
す
れ
ば
い
い
の
だ
。
こ
こ
で
は
、
の
座
標
と
形
の
大
き
さ
に
つ
い
て
情
報
行
の
コ
ー
ド
を
書
く
だ
け
。
Ｘ
／
Ｙ
軸
学
図
形
を
表
現
す
る
に
は
、
た
っ
た
１
に
マ
ス
タ
ー
で
き
る
。
点
、
線
、
幾
何
な
る
グ
ラ
フ
ィ
ッ
ク
機
能
は
特
に
簡
単
て
も
心
配
す
る
こ
と
は
な
い
。
特
徴
と
が
、
プ
ロ
グ
ラ
ミ
ン
グ
の
経
験
が
な
く
オ
ブ
ジ
ェ
ク
ト
の
作
り
方
に
も
触
れ
る
従
っ
て
、
チ
ュ
ー
ト
リ
ア
ル
の
中
で
は
オ
ブ
ジ
ェ
ク
ト
指
向
言
語
で
も
あ
る
。
も
簡
単
だ
。
ま
た
、
Ｊ
ａ
ｖ
ａ
と
同
様
の
利
用
す
る
関
数
な
ど
は
Ｊ
ａ
ｖ
ａ
よ
り
的
な
記
述
方
法
は
似
通
っ
て
い
る
が
、
言
語
が
ベ
ー
ス
に
な
っ
て
い
る
。
基
本
く
。
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ｇ
は
、
Ｊ
ａ
ｖ
ａ
な
ア
プ
リ
ケ
ー
シ
ョ
ン
を
制
作
し
て
い
ー
ジ
を
通
し
て
、
イ
ン
タ
ラ
ク
テ
ィ
ブ
グ
ラ
ミ
ン
グ
し
て
み
よ
う
。
以
降
の
ペ
ー
ル
し
た
ら
、
い
よ
い
よ
自
分
で
プ
ロ
﹁
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ｇ
﹂
を
イ
ン
ス
ト
コード
実行結果
思い通りの位置にドットを描いて
Processingの描画の基本をマスター
FheY[ii_d]
コードを入力したら、ツールバーの
再生ボタンを押せば実行結果を確
認できる。コードはすべて半角の英
数字で記入しよう
44
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ｇ
の
座
標
シ
ス
テ
ム
Processingの座標のシステムでは、画面の左上の角
を起点とする。そこから右方向への距離を
「x」
という変
数の値で表現し、
下方向への距離を変数
「y」
で表現する。
x／yの単位はドット数だ。すべての図形は
「カンバス」
の
上に描画される。カンバスサイズはもちろん独自に指定
することも可能だが、初期状態のカンバスサイズはx／y
とも100ドットとなっている。まずは、初期状態のカンバ
スの上にドットを1つずつ直接描画するコードを記述し
てみよう。これには
「point(x,y)」
という関数を使う。引数
実行すると斜め方向に連続したドッ
トが表示される。座標の指定を変
えて、予想通りの位置にドットを打
てるか試してみよう
44
にしたければx、下側にしたければyの値を大きくすれば
いい。斜めに連続したドットを描くことで確認してみよう。
コード
実行結果
単純な図形を描いてみよう
図形はコード中の順に重なる
線や基本的な図形は、あらかじめProcessingの中に
定義されており、ドットを描く場合と同様に1行のコード
で描画できる。基本的な考え方は2種類あり、ひとつは
指定した点を線でつなぐという方法。
「line (x1,y1,x2,y
2)」関数は、
「x1,y1」
の位置から
「x2,y2」
をつなぐ線を描
く。
「triangle(x1,y1,x2,y2,x3,y3)」
は、引数で指定した
3点をつなぐ三角形を、
「quad(x1,y1,x2,y2,x3,y3,x4,y4)
」
は、4点を指定して四角形を描く。また、基準となる座
標と幅、高さを指定する方法もある。
「rect(x,y,haba,
takasa)」関数は四角形を描くもので、基点
「x,y」
を指定
して幅と高さを決める。一方、円や楕円を描画したい場
図形は、コードの中で記述した順
番に描画される。そのため、最後
に記述した命令ほど手前に重なっ
て表示されるのがわかる
合には、
「ellipse(x,y,haba,tak asa)」関数を使う。これ
は、
「x,y」
の座標で円に中心を定義したうえで、幅と高さ
を指定するものだ。
「Processing」では、ベジェ曲線の描画用関数も用意されている。
「bezier(x1,y1,cx1,cy1,cx2,cy2,x2,y2)」関数では、線分の始点／終
点を「x1,y1」
「x2,y2」
、ベジェ曲線のコントロール点を「cx1,cy1」
「cx2,cy2」で指定できる
ÊÊÓäänÊÊÕ}°ÊÊÊÊÊ£{Ó
FheY[ii_d]
「rect」
「ellipse」関数を使ったサン
プルコード。高さ、幅の値を変えれ
ば、長方形や楕円を描画できる
44
は、
ドットを描きたい座標のx／yの値を指定する。右側
44
コード
44
FheY[ii_d]
「fill()」関数で先ほどのサンプルに
着色する。塗りつぶしや境界線が
不要なら、
「noFill()」
「noStroke()」
関数を使う
図形の塗りつぶし色や境界線は
RGBでの色指定や透明度の設定が可能
実行結果
先ほどのサンプルでは、すべての図形が白く不透明だ
った。もちろんこの塗りつぶしの色や境界線はコントロ
ールできる。塗りつぶし色は、
「fill()」関数で制御する。
引数の指定方法にはいくつかのパターンがある。引数を
ひとつだけ指定する場合には、モノトーンの不透明なグ
レースケールになる。値は、白が
「0」
で黒が
「255」
となる。
2つの引数を指定すると、最初の値はグレースケールの
値、2つ目はアルファチャンネルの値となる。
「0」
ならば
透明で、
「255」が不透明を示す値。引数が3つの場合
は、RGB
（赤／緑／青）
の値で色を指定できる。4つにし
た場合は、RGBに加えて4番目の値で透明度の指定が
「fill()」関数が実行されると、次に
描画する図形にも影響を与える。
下に描かれている楕円は、赤い色
で描画されている
可能だ。境界線をコントロールするには
「stroke()」関数
を使う。引数の指定方法は、
「fill()」
関数の場合と同様だ。
FheY[ii_d]=Wbb[ho
8_hZi
XoHeX[hj>eZ]_d
http://www.barbariangroup.com/
http://www.nervo.tv/
数多くの鳥が羽ばたくアニメーショ
ン作品。Processingでは、生物
の複雑な動き再現するアルゴリズ
ムをプログラミングして、シミュレ
ーションできることを示している
こ
の
ビ
デ
オ
だ
。
鳥の群をシミュレーションす
る ア プ リ ケ ー シ ョン は、
Processingがモーショング
ラフィックを作成するうえで
も役立つ可能性を秘めてい
ることを示す好例だ
£{ÎÊÊÊÊÊÕ}°ÊÊÓäänÊÊ
用
し
て
Ｎ
ｅ
ｒ
ｖ
ｏ
が
完
成
さ
せ
た
の
が
プ
リ
ケ
ー
シ
ョ
ン
を
開
発
。
そ
れ
を
利
ら
再
生
ま
で
を
一
度
に
実
行
で
き
る
ア
め
、
シ
ミ
ュ
レ
ー
シ
ョ
ン
値
の
設
定
か
方
法
で
は
時
間
が
か
か
り
過
ぎ
る
た
シ
ョ
ン
を
レ
ン
ダ
リ
ン
グ
す
る
と
い
う
ュ
レ
ー
シ
ョ
ン
結
果
を
基
に
ア
ニ
メ
ー
シ
ョ
ン
値
を
基
に
計
算
さ
れ
る
。
シ
ミ
離
、
風
の
速
度
と
い
っ
た
シ
ミ
ュ
レ
ー
平
均
的
な
方
向
や
ほ
か
の
鳥
と
の
距
﹁ ル
ー
プ
社
と
グ
ラ
フ
ィ
ッ
ク
﹂ ス
の タ
共 ジ
通 オ
Nervo Motion Graphics
プ
ロ
ジ
ェ
ク
ト
。
鳥
の
動
き
は
、
グ
ル
ー
プ
が
向
か
う
を
再
現
す
る
。
メ
ー
シ
ョ
ン
で
、
米
バ
ー
バ
リ
ア
ン
グ
に
制
作
さ
れ
た
カ
ラ
ス
の
群
れ
の
ア
ニ
ｐ
ａ
ｎ
﹂
の
ホ
ラ
ー
番
組
の
広
告
の
た
め
鳥
の
群
れ
の
行
動
シ
ミ
ュ
レ
ー
シ
ョ
ン
開
発
経
験
が
あ
り
、
そ
の
技
術
を
基
に
衆
シ
ミ
ュ
レ
ー
シ
ョ
ン
プ
ロ
グ
ラ
ム
の
ケ
ー
ブ
ル
テ
レ
ビ
局
﹁
Ｆ
Ｏ
Ｘ
Ｊ
ａ
バ
ー
バ
リ
ア
ン
グ
ル
ー
プ
で
は
、
群
「Birds!」プロジェクトの完成作品は、Nervoのウェブサイトで閲覧できる。シミュレーション用アプリケーションに関する詳細情報は米バ
ーバリアングループ社のウェブサイトで公開されている http://portfolio.barbariangroup.com/birds/
Processingではアニメーションも簡単。さまざまな値を時間の経過に合わせて変化させられる。
ここでは、その基本を紹介していこう。
紹
介
す
る
。
こ
れ
は
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ロ
グ
ラ
ミ
ン
グ
を
容
易
に
す
る
手
法
も
ツ
と
し
て
定
義
し
て
お
く
こ
と
で
、
プ
ス
﹂
と
い
う
ひ
と
つ
の
独
立
し
た
パ
ー
加
え
、
プ
ロ
グ
ラ
ム
の
一
部
を
﹁
ク
ラ
す
る
こ
と
に
な
る
わ
け
だ
。
こ
れ
ら
に
こ
と
で
ア
ニ
メ
ー
シ
ョ
ン
効
果
を
実
現
変
化
さ
せ
な
が
ら
繰
り
返
し
処
理
す
る
の
部
分
で
、
引
数
の
パ
ラ
メ
ー
タ
ー
を
す
る
パ
ラ
メ
ー
タ
ー
を
定
義
す
る
。
こ
ひ
と
つ
は
、
﹁
﹂
関
数
で
、
変
化
で
変
化
し
な
い
値
を
設
定
す
る
。
も
う
で
、
プ
ロ
グ
ラ
ム
の
起
動
か
ら
終
了
ま
み
込
ま
れ
る
﹁
﹂
と
い
う
関
数
造
を
作
る
。
ひ
と
つ
は
、
一
度
だ
け
読
グ
ラ
ム
を
２
つ
の
パ
ー
ト
に
分
け
て
構
し
︶
処
理
が
必
要
だ
。
そ
の
た
め
、
プ
ロ
ョ
ン
を
作
る
に
は
、
ル
ー
プ
︵
繰
り
返
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
ｇ
で
ア
ニ
メ
ー
シ
コード
実行結果
円の描画関数の引数を変化させ
サイズと色を変化させる
FheY[ii_d]
プログラムは、初期 設 定を行う
「setup ()」と描画処理を繰り返し
行う「draw()」の2パートから構成
されている
44
ｇ
の
プ
ロ
グ
ラ
ム
で
頻
出
す
る
構
造
だ
。
setup()
44
決
し
て
難
し
い
概
念
で
は
な
い
の
で
、
draw()
し
っ
か
り
と
理
解
し
て
お
こ
う
。
円のサイズと塗りつぶし色が変化するアニメーション
を作ってみよう。まずは、サイズとグレースケールの値と
して使う変数「x」
を用意して値「0」
を代入しておく。プロ
グラムのどの部分からでも変数を参照できるようにする
ため、変数 xは関数の外側で定義するのだ。続けて、初
期設定を行う
「setup()」
と描画を実行する
「draw()」
を記
述していく。その際には、値を戻さないことを示す予約
語「void」を先頭に記述する
（まめ知識参照）
。
「setup()」
の中ではカンバスサイズを設定。
「draw()」の中では描画
円が大きくなると同時に、塗りつぶ
し色も不透明の黒から完全な透明
に変化。このアニメーションが繰り
返される
44
画し、ループするたびに
「x」
の値を増やす。
「if」
を利用し
た条件分岐文でxの値が255になったら0に戻す。
コード
実行結果
FheY[ii_d]
コードの最後の行はテスト用に丸を
描画するためのもの。実際にプロ
グラムの中でこのクラスを利用する
ときには、削除しよう
44
ループを作る。冒頭で定義した変数 xの値を基に円を描
円を描くクラスを定義して
プログラム中で再利用する
Processingは、オブジェクト指向言語なので当然ク
ラスを定義できる。このチュートリアルを完成させるため
には、簡単なクラスが必要になる。ここでは、
「Maru」
と
いう名前を付けた円を描画するクラスを作る。クラス
Maruには、中心点となるｘ／ｙの座標／透明度／大き
さに利用する変数を用意する。このほかに、ランダムに
サイズを変化させるための変数
「rsize」
も用意した。プロ
グラムの中でこのクラスが呼び出されるとこうした変数
の値が代入されて円が描かれる。一度円を描くだけなら
クラスを定義する必要はないが、色や透明度が変わる、
クラスを定義して、クラスからオブ
ジェクトを作り、円を描画した。こ
のクラスは以降も再利用する
移動するなど、異なる条件で円を描きたいときに重宝す
る。そのために必要になるクラスのメソッドは、別途定
義する必要がある。
Processingで関数を利用する場合、関数は処理結果の値を返すことが多い。しかし、値を返さず処理だけを行う関数も存在する。そう
した関数を実行する場合には、関数名の前に「void」という予約語を記述する
ÊÊÓäänÊÊÕ}°ÊÊÊÊÊ£{{
44
コード
44
FheY[ii_d]
「agaru()」メソッドの定義とdraw()
ループからの呼び出し方法。画面
では省略されているが、Maruクラ
スの定義も含ませること
クラスメソッドを用意して
動作をクラスに組み込む
実行結果
先ほど定義したクラスはまだ不完全だ。円が上方向に
移動しながら、大きくなるような動作を持たせたい。これ
を実現するためにクラスMaruの中に「agaru()」
という名
前でメソッドを定義する。agaru ()の定義では、
「yloc」
の値を減らすことで中心座標を上方向に移動するほか、
透明度「opc」
やサイズ「size」
の値も操作している。プロ
グラムの中でメソッドを呼ぶには、クラスから作成したオ
ブジェクト名とメソッド名を
「.」
でつないで記述する。サ
ンプルの中では、
「mymaru」
というオブジェクトを用意
し、クラスMaruを実体 化しているので、
「mymaru.
クラスメソッドの働きによって、描
画されたそれぞれの円が上方向に
移動し、サイズが大きくなっていく
様子がわかる
agaru()」
と記述する。draw()ループの中では、このクラ
スメソッドを50回呼び出している。
FheY[ii_d]=Wbb[ho
C_Y^W[b
<Wa[iY^L_Zei
Xo:Wddo<hWdph[X
http://www.taobot.com/
Processingは、データ処理をビジ
ュアル化することも可能なプログラ
ミング言語。ダニー・フランツァー
ブ氏のアートは、数学的なデータ
を基にした抽象的なアートだ
そ
う
だ
。
作者のフランツァーブ氏は、独
ライカ・カメラ社、独メルセデ
ス・ベンツ社、米コカ・コーラ
社などの広告でアートディレク
ターを務めた経験も持つ
£{xÊÊÊÊÊÕ}°ÊÊÓäänÊÊ
を
解
釈
す
る
の
は
﹁
作
品
自
体
﹂
な
の
だ
う
﹂
。
そ
の
た
め
、
制
作
者
の
ア
イ
デ
ア
者
が
決
め
た
規
則
に
よ
っ
て
影
響
し
合
り
、
そ
の
オ
ブ
ジ
ェ
ク
ト
同
士
が
制
作
ロ
グ
ラ
ム
と
し
て
オ
ブ
ジ
ェ
ク
ト
を
作
イ
ラ
ス
ト
レ
ー
シ
ョ
ン
で
は
な
く
、
プ
作
成
ま
で
利
用
で
き
る
と
い
う
。
な
る
画
像
、
ム
ー
ビ
ー
、
３
Ｄ
素
材
の
ト
か
ら
、
高
解
像
で
の
印
刷
が
必
要
に
を
利
用
す
る
イ
ン
タ
ラ
ク
テ
ィ
ブ
ア
ー
書
き
出
せ
る
か
ら
だ
。
パ
ソ
コ
ン
な
ど
ま
ざ
ま
な
メ
デ
ィ
ア
フ
ォ
ー
マ
ッ
ト
で
ｇ
を
使
う
。
作
品
を
必
要
に
応
じ
て
さ
社
で
は
、
マ
ッ
ク
で
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
ｓ
ｉ
ｎ
イ
ン
ス
ピ
レ
ー
シ
ョ
ン
が
得
ら
れ
る
。
ル
で
き
な
い
こ
と
で
、
む
し
ろ
新
し
い
に
入
っ
て
い
る
。
細
部
を
コ
ン
ト
ロ
ー
べ
て
の
細
部
を
支
配
で
き
な
い
点
も
気
氏
は
言
う
。
﹁
最
初
か
ら
最
後
ま
で
、
す
を
混
ぜ
る
こ
と
﹂
と
フ
ラ
ン
ツ
ァ
ー
ブ
人
間
と
し
て
自
分
の
中
に
あ
る
混
沌
と
は
、
﹁
数
学
と
自
然
の
美
し
さ
、
そ
し
て
フ
ラ
ン
ツ
ァ
ー
ブ
氏
の
デ
ザ
イ
ン
会
作
品
﹁
Ｖ
ｉ
ｄ
ｏ
ｓ
﹂
の
コ
ン
セ
プ
ト
Processingのプログラミングを詳しく勉強したいなら、
「Built with Processing デザイン／アートのためのプログラミング入門」がお
勧めだ（著／前川峻志、田中 孝太郎 ビー・エヌ・エヌ新社刊）
3570円
Processingを使うメリットは、ユーザーの操作に反応するインタラクティブな環境を作れることだ。
最後に、そうした機能に触れる。
Basics
Input
に せ 取 リ
も る 得 ア
、
﹁ 方 し ル
法 て で
を 画 は
﹂ 紹 面 、
メ
ニ 介 の マ
ュ し 描 ウ
ー よ 画 ス
か う 内 か
ら 。 容 ら
﹁ そ を の
の 変 入
ほ 化 力
か さ を
Examp
﹁
ド し ラ で
と
い
か て ム 添 ﹂
っ
ら み を 付 ↓
﹁
た
の る 実 さ
プ
入 と 行 れ
ロ ﹁
﹂ 力 い し て
グ
を い 、 い ﹂
ラ
処 だ そ る ↓
ム
理 ろ の サ ﹁
が
す う コ ン
参
ー プ
る 。
考
キ ド
な ー を ル ﹂
に
に
ら ボ 観 プ
な
ロ 標
る
ば ー 察 グ 準
。 ﹂ 、
File
そ
し
て
、
こ
う
し
た
情
報
を
参
考
に
オ
les
44
リ
ジ
ナ
ル
の
プ
ロ
グ
ラ
ム
作
成
に
挑
戦
Ke yboard KeyboardFunctions
し
て
ほ
し
い
。
機
能
を
実
現
で
き
る
。
こ
の
チ
ュ
ー
ト
さ
れ
て
い
る
の
で
、
簡
単
に
そ
う
し
た
の
中
で
利
用
す
る
た
め
の
関
数
が
用
意
か
ら
の
入
力
を
取
得
し
て
プ
ロ
グ
ラ
ム
ｓ
ｉ
ｎ
ｇ
で
は
、
マ
ウ
ス
、
キ
ー
ボ
ー
ド
応
す
る
機
能
が
必
要
だ
。
Ｐ
ｒ
ｏ
ｃ
ｅ
ｓ
を
作
る
に
は
、
ユ
ー
ザ
ー
の
操
作
に
反
イ
ン
タ
ラ
ク
テ
ィ
ブ
な
プ
ロ
グ
ラ
ム
コード
マウスカーソルの位置は
「mouseX」
「mouseY」で取得
FheY[ii_d]
このサンプルでは、マウスからの入
力を受け取る方法にフォーカスする
ため、Maruクラスは利用せずに簡
単な円を描いている
マウスカーソルの位置情報を取得する方法を確認す
44
実行結果
るため、マウスカーソルがある位置に円を描画するプロ
グラムを作りたい。そのためには、マウスの位置と状態
を認識する必要があるが、Processingは自動的にこうし
た情報を取得しており、決められた変数を使って参照で
きる。マウスカーソルの位置を取得するには、
「mouseX」
「mouseY」
という変数を呼び出せばいい。円を描画する
際の座標の指定で、x軸の値にmouseX、y軸の値に
mouseYを指定すれば、描画された円がマウスカーソル
に追従して動くようになる。まだ、マウスボタンが押され
マウスカーソルの位置に円を描く。
円の高さと幅を決める変数xの値
は、draw()ループの中で0∼255
までの間で変化している
44
ているかをチェックする機能は実装されていないし、一
度描画した円を消去する機能も含まれていないが、あく
まで例として確認してほしい。
コード
円の描画クラスを利用して
簡単なドロープログラムを作る
いよいよアプリケーションを仕上げていく。第1段階
として、簡単なドロープログラムに進化させる。ウィンド
ウ上でマウスを移動すると、カーソルの移動に合わせて
44
実行結果
円を描く。結果だけ見ると上の作例とあまり変わらない
ように見えるが、円を描画するために、以前に作成した
Maruクラスを利用しているのがポイントだ。Maruオブジ
ェクトを作成する際には、同時に50 個のMaruオブジェ
クトを作成して配列に格納している。配列は先頭の変数
を宣言する部分で定義している。実体化はsetup() 内で、
オブジェクトはdraw()ループ内で代入する。本来、Maru
マウスカーソルの位置に小さな円
を連続して描くプログラムになっ
た。マウスを素早く移動すると破
線のようになる
オブジェクトが1つあれば円を描画できるが、残りの49
個は次のステップでエフェクト風の効果を再現するとき
に利用する。
Processingで制作された作品は、写真共有サイトFlickrで数多く公開されている。ユーザーによっては、作品公開のための専用ページも
作られている http://www.flickr.com/groups/processing/pool/
ÊÊÓäänÊÊÕ}°ÊÊÊÊÊ£{È
FheY[ii_d]
スペースの都合上省略しているが、
実際には末尾にMaruクラスの定義
を追加する必要がある。それを忘
れるとエラーになる
44
コード
FheY[ii_d]
「background( 50 )」という行の先
頭に「//」を付けてコメントアウトす
ると描画した円が残り、スプレーペ
イントのようになる
円の描画クラスを改造して
カラフルな効果を与える
さらに機能を改良してアプリケーションを完成させる。
まず、Maruクラスのメソッドagaru()を利用して、描画し
44
た円のサイズが大きくなり、上方向に動くように改造す
実行結果
る。さらに、agaru()の定義の中にある
「ellipse()」
の直
前に
「fill(255-(x*5), mouseX, x*5, opc);」
という1行を
追加することで円の色も変化させる。また、円を描くの
はマウスボタンが押されているときだけとする。これを実
現するには、マウスボタンの状態を取得する
「mousePre
ssed」変数を参照すればいい。最後に、一度描画した円
をクリアするためdraw()ループの中に
「background
マウスボタンを押して移動している
間、円の色が変化しながら、マウ
スカーソルの移動に合わせてゆら
ゆらと動く
(50)」を追加し、繰り返しのたびに背景を描き直してい
る。以上の変更で、円がカラフルな煙のように動く。
FheY[ii_d]=Wbb[ho
DOJ;
Xoj^[I[di[WXb[9_joBWX
WjC?J"b[ZXoAh_ij_WdAbe[Yab
http://senseable.mit.edu/nyte/
地球上で行われる通信をビジュ
アル化した作品。IP通信や電話
回線で接続された地点を異なる
色のラインで接続する。退屈に
なりがちなデータ統計の表現を
アート作品に仕上げている
ー
ヨ
ー
ク
の
地
図
上
で
エ
リ
ア
ご
と
に
上
で
光
る
と
い
う
も
の
。
最
﹂ 後
は の
、 ﹁
ニ
ュ
現
し
、
着
信
し
た
地
点
が
世
界
地
図
の
以
内
に
発
信
さ
れ
た
国
際
電
話
数
を
表
な
デ
ー
タ
を
扱
い
、
高
い
評
価
を
得
た
に
し
か
な
ら
な
い
統
計
学
的
で
技
術
的
く
ラ
イ
ン
で
表
現
。
﹁
﹂
は
、
ニ
ュ
ー
ヨ
ー
ク
か
ら
24
時
間
Pulse of the Pl
ど
の
国
へ
の
発
信
が
多
い
か
を
表
現
す
美
術
作
品
。
現
在
、
米
国
の
ニ
ュ
ー
ヨ
anet
る
も
の
。
ニ
ュ
ー
ヨ
ー
ク
の
中
で
も
、
ー
ク
近
代
美
術
館
︵
Ｍ
ｏ
Ｍ
Ａ
︶
で
展
示
The
エ
リ
ア
ご
と
に
異
な
る
国
と
の
関
連
が
﹂
は
、
ニ
ュ
ー
ヨ
ー
ク
と
世
界
の
さ
れ
て
い
る
。
World Inside New York
£{ÇÊÊÊÊÊÕ}°ÊÊÓäänÊÊ
強
い
と
い
う
こ
と
が
ひ
と
目
で
わ
か
る
﹁
Ｎ
Ｙ
Ｔ
Ｅ
﹂
に
は
、
３
つ
の
イ
ン
タ
Globe Encou
nters
無味乾燥なデータから美術
作品を生み出せるビジュアラ
イゼーション機能は、Proce
ssingの特徴。見た目が美し
いだけでなく、正確な情報
を伝えられる
よ
う
に
な
っ
て
い
る
。
ー
フ
ェ
ー
ス
が
あ
る
。
﹁
表
現
方
法
に
よ
っ
て
は
単
な
る
資
料
Ｉ
Ｐ
接
続
を
地
球
の
上
で
動
く
光
り
輝
「Wiring」は、Processingと連携して物理デバイスを制作できるプログラミング環境だ。日本にも「Gainer」という同様のプロジェクトが
ある http://www.wiring.org.co/ http://gainer.cc/