エージェント・ベース・グラフィックWebアプリ
の作り方
2025.10.15
パラメトリック・ボイス
コンピュテーショナルデザインスタジオATLV 杉原 聡筆者はコンピュテーショナルデザインによるファサード設計に加えて、たまにグラフィックの
デザインを行う（図1）。ーションをProcessingとiGeoライブラリを用いて行っており、図1a
のCAADRIA2025のために作成したものについては、モーショングラフィックとしてシミュ
レーション動画（クリックするとYouTubeへリンクします）も作成している。
図1 a) CAADRIA2025のグラフィック b) AIS WEEK2024の
グラフィック c) 枝分岐アルゴリズムを用いたグラフィック
d) スウォームアルゴリズムを用いたグラフィック
近年、筆者がコンピュテーショナルデザインに馴染みのない学生に授業を行うときには、コン
ピュテーショナルデザインの中でも、結果がどうなるか予想しづらく、制御が困難ではあるが
その代わりに思いも寄らないものが生まれる創発性を持ったボトムアップなアルゴリズムによ
るデザインを体験してもらうために、プログラミングをすること無しにエージェント・ベース
のグラフィックを手軽に取り組めるWebアプリを用意して、それを用いたデザインに取り組ん
でもらっている (図2)。
図2 エージェント・ベースのグラフィックを生成するWebアプリ
※上記の画像、キャプションをクリックするとWebアプリへリンクします。
今回のコラムでは、このようなWebアプリを制作する手順を簡略に述べる。なお、ソースコー
ドはセキュリティ上の都合によりテキストではなく画像として掲載されるが、必要な方は画像
キャプションにリンクされた実行サンプルよりソースコードを辿れる。
まず、手間を掛けずにグラフィカルなWebアプリを構築するために、Processingと同様の機能
を持つがJavascriptで書かれてブラウザ上で動作するp5.jsを用いる。HTMLファイルではp5.js
と、作成するWebアプリの処理が記され、同じフォルダに置かれたagent_sketch.jsをscript
タグで読み込む(図3 HTMLファイル)。
agent_sketch.jsに書かれるJavascriptは以下のようなものである(図3 Javascriptファイル)。
p5.jsでは、最初に行う処理をsetupメソッドに書き、グラフィック描画処理をdrawメソッドに
書く決まりになっている。setupメソッドではp5.jsのcreateCanvasメソッドによってブラウザ
の画面いっぱいに描画を行うcanvas要素が生成されている。描画処理を行うdrawメソッドで
は、まずは１本の水平な線だけを描いてみる。線の描画にはp5.jsのlineメソッドを用いる。
これらのHTMLファイルとJavascriptファイルの実行はこちらで確認できる。
図3 1本の１本の横の線をキャンバスに描くHTMLファイルとJavascript
ファイルと実行結果
※上記の画像、キャプションをクリックすると実行サンプルへリンク
します。
次に、HTMLはそのままにagent_sketch.jsのコードを書き換える。図3では一本の線を描画し
ていただけであったが、時間で変化するエージェントを導入して、移動するエージェントに応
じて少しずつ線を描くコードを書いてみる（図4）。ここではclassを用いてAgentクラスを定
義している。Agentクラスのオブジェクトが生成されるときにオブジェクトの内部で最初に実
行されるconstructorメソッドでは、エージェントの位置(x、y)と向き(xdir、ydir)が定められ
ている。そしてAgentクラスのdrawメソッドでは線の描画を、updateメソッドではエージェ
ントの動作を定義している。動作ではxdir、ydirの分位置を移動させ、描画では元の位置から
移動する位置へ線が描かれている。setupメソッドでは(0, 0)の位置に、(1, 1)を移動方向とし
てAgentオブジェクトが生成され、その結果エージェントは(1, 1)だけ斜めに移動しながら線
を描画して、右下へ線が伸びていくようなシミュレーションがなされる。
図4 エージェントのクラスを追加したJavascriptファイルと実行結果
※上記の画像、キャプションをクリックすると実行サンプルへリンク
します。
今度は、Agentクラスで用いる位置と移動方向をベクトルで表す。p5.jsに含まれるベクトルク
ラスp5.Vectorのベクトルは、createVectorメソッドで生成できる。またこのベクトルクラス
には各種ベクトル演算メソッドが含まれ、図5ではAgentクラスのupdateメソッドにてベクト
ル和のaddメソッドと回転のrotateメソッドが用いられている。移動と移動方向の回転を繰り
返すことにより図5aのように円が少しずつ描かれる。
図5 ベクトル用いたJavascriptファイル
※上記の画像、キャプションをクリックすると実行サンプルへリンク
します。
今度は、１つのエージェントを動かすだけでなく、複数のエージェントを用いて描画すること
を考える（図6）。この際、図5の１行目で宣言されている、生成されたエージェントを保持す
るagent変数は、図6ではagentsと名前を変え、setupメソッドにおいて空のリスト[]が代入さ
れてリストとして初期化されている。そしてforループを用いて30のエージェントが移動方向を
変えながら生成されている。
図6 複数のエージェントを生成するJavascriptファイルと実行結果
※上記の画像、キャプションをクリックすると実行サンプルへ
リンクします。
次に、エージェントを生成するエージェントを考える。図7では、Agentクラスのupdateメ
ソッドで20フレームに一回、2%の確率で新しいエージェントを生成し、枝分岐の動作をシミュ
レートしている。時間間隔を制御するためにAgentクラスにはtimeパラメータが追加され、確
率の制御はMathクラスの乱数生成メソッドrandom(0から1の乱数を生成する)を用いている。
また、このコードでは描画される線の色と透明度を定めるp5.jsのstrokeメソッドを用いて、
重なり合う黒い線の透明度を上げている。こちらから実行結果を確認できるが、エージェント
の数を増やしながら無限に実行されて、放って置くとブラウザの動作が重くなるので注意され
たい(図7と8のコードも同様)。
図7 分岐するエージェントのJavascriptファイルと実行結果
※上記の画像、キャプションをクリックすると実行サンプルへ
リンクします。
図8では、時間制御のためのパラメータをAgentクラスにもう一つ追加して、二つの時間パラ
メータを用いている。これらにより、毎秒ごとにある動作をして、毎分ごとに違う動作を行う
ような、二段階の動作の制御を行っている。エージェントの動作を定義するAgentクラスの
updateメソッドでは、一つ目のパラメータtime1を用いてエージェントのわずかな回転を行
い、円弧を描いている。そしてtime1が40に達したとき、エージェントは180度回転して逆戻
りし、二つ目のパラメータtime2の時間が1進む。また、time2が8に達したときには回転は行
わず、time2の値が0にリセットされる。その結果、図8の実行結果に示されるように円弧によ
る多角形が描画された後に、隣に移動して別の多角形が描画されるような結果となる。
図8 二つの階層の動作をするエージェントのJavascript
ファイルと実行結果
※上記の画像、キャプションをクリックすると実行サンプル
へリンクします。
そして図9では、時間パラメータを三つに増やし(time1、time2、time3)、三段階の動作制御
を行っている。time1で円弧を、time2で複数の円弧による多角形を、time3で複数の多角形
の生成と枝分岐を行っている。またこのコードでは全体の描画回数を数えるcount変数をコー
ドの冒頭に追加し、これと三角関数をstrokeメソッドで用いることにより、線の描画色を時間
が経つごとに反復してグラデーションするように制御している(図10)。
図9 三つの階層の動作をするエージェントのJavascriptファイル
図10 上記Javascriptの実行結果
※上記の画像、キャプションをクリックすると実行サンプルへリンクします。
（ちなみに極めて薄い色の線を描画しているため長時間実行しないとグラフィックは
見えてこないので注意)
以上のようなエージェント・ベースのグラフィックを描画するJavascriptに、ボタンやスライ
ダー、数字入力などのp5.jsが提供するユーザインタフェースを追加したのが図2で述べた
Webアプリである。ユーザインタフェースで与えられる回転角度や時間周期、拡大縮小率、
分岐確率などのパラメータは、それぞれ該当するエージェントのパラメータに代入され、その
動作を制御している。また、画面から外に出たエージェントは画面の反対から現れるようにし
てある。このWebアプリで生成されたエージェント・ベース・グラフィックの例を図11に示す。
図11 エージェント・ベースのグラフィックのWebアプリで生成
されたグラフィック例
※上記の画像、キャプションをクリックするとWebアプリへリン
クします。
最後に、このWebアプリで遊んでみたい方のために、ユーザインタフェースの操作方法を以下
に解説して、今回のコラムの締めとする。なお、このWebアプリはPCだけでなくスマホでも
動作するので、興味のある方はぜひお試しいただきたい。
図12 エージェント・ベースのグラフィックのWebアプリのメニュー部分
※上記の画像、キャプションをクリックするとWebアプリへリンクします。
- resetボタン： キャンバスを背景色で塗りつぶし、エージェントの動作を最初からやりな
おす。 - pause/resumeボタン: エージェントのシミュレーションを一時停止/再開する。
- saveボタン: キャンバスに描かれた画像をPNGで保存して、ダウンロードする。
- init angle: 最初のエージェントが移動する向きの角度(単位は°である)を指定する。0°は
x軸方向である。 - init size: 最初のエージェントの移動距離を指定する。距離1は、1ピクセルの幅に相当す
る。 - rotation0: 毎描画フレームごとのエージェントの移動方向を回転させる角度。
- scale0: 毎描画フレームごとのエージェントの移動距離の拡大縮小量。スライダー中央の
値が1.0。 - flip0: 毎描画フレームごとに回転方向を反転させるか否か。
- cycle1: 二つ目の時間制御パラメータの周期。
- rotation1: 二つ目の時間制御パラメータの周期ごとのエージェントの移動方向の回転角度。
- scale1: 二つ目の時間制御パラメータの周期ごとのエージェントの移動距離の拡大縮小量。
- flip1: 二つ目の時間制御パラメータの周期ごとの回転方向を反転させるか否か。
- branch1 %: 二つ目の時間制御パラメータの周期ごとに枝分かれをする確率。
- branch1 rot: 二つ目の時間制御パラメータの周期ごとに枝分かれをするときの回転角度。
- branch1 flip: 二つ目の時間制御パラメータの周期ごとの枝分かれ角度を反転させるか否か。
- cycle2: 三つ目の時間制御パラメータの周期。
- rotation2: 三つ目の時間制御パラメータの周期ごとのエージェントの移動方向の回転角度。
- scale2: 三つ目の時間制御パラメータの周期ごとのエージェントの移動量の拡大縮小量。
- flip2: 三つ目の時間制御パラメータの周期ごとの回転方向を反転させるか否か。
- branch2 %: 三つ目の時間制御パラメータの周期ごとに枝分かれをする確率。
- branch2 rot: 三つ目の時間制御パラメータの周期ごとに枝分かれをするときの回転角度。
- branch2 flip: 三つ目の時間制御パラメータの周期ごとの枝分かれ角度を反転させるか否か。
- background: 背景色。
- line color1: 線の色。
- line color2: 線の色をグラデーションにする際のもう一つの色。
- line alpha: 線の不透明度。
- color cycle: 線の色をグラデーションにする際の時間周期。
- oscillate color: color1→color2のグラデーションの直後にcolor1に戻してグラデーション
するか、color1→color2→color1と交互にグラデーションするか否か。
