01_1_1 型となる基本のsketch

グリッド表示やマウスによる視点操作を準備する

サンプルコード：sketch01_1_1

基本構成

table:表1 基本構成

ファイル名 役割

sketch01_1_1.pde プログラムのメインコード

Viewport.pde レンダリングを行うCameraのためのクラス

Gui.pde 実行中に各種パラメータを変更するためのスライダやボタンなどのUIのためのクラス

Grid.pde 座標軸やグリッドの設定や描画を行うためのクラス

/data ビジュアライズするデータを保存するフォルダ

/capture 「s」キーを押した時に画面キャプチャを保存するフォルダ

ライブラリのインストール

このSketchでは、次の２つのライブラリを使用しています。実行する前にライブラリをインポートしましょう。

table:表2 使用するライブラリ

ライブラリ名 役割

ControlP5 スライダやボタンなどUIパーツを実装するためのライブラリ。パーツの種類も豊富。

PeasyCam 標準のCameraクラスを拡張するライブラリ。ドラッグやホイール操作でカメラの視点やズームを操作できる。

本書では、それぞれのライブラリについては必要な部分の解説だけに留めますが、もし詳細なリファレンスが必要な場合は、公式サイトを参考にしてください。

Sketchの実行

Sketchを実行すると、次のように表示されます。画面中心部分に青い小さな立方体（box）が表示され、その背面にグリッドと座標軸が、また左上にはパラメータを調整するためのUIが表示されます。マウスのドラッグで視点が移動でき、スクロールホイールの操作でズームできます。その他の操作については、表3を参照してください。

https://gyazo.com/5af4b83b1416205575a34d4aca66365b

図1 Sketch01_1_1の実行画面

table:表3 実行時の操作について

種類 操作 機能

マウス ドラッグ 原点を中心に視点を回転

Shift+ドラッグ 方向をX,Y,Z軸のどれかに固定して回転

右ボタンドラッグ（Macの場合はCommand+ドラッグ） 視点の移動

ホイールアップ ズームイン

ホイールダウン ズームアウト

キー g グリッドの表示・非表示

u UIの表示非表示

s 表示中の画面をキャプチャ

UI PLOT_SIZE プロットする大きさを調整

PLOT_ALPHA プロットの透明度を調整

Camera Reset 視点を初期状態に戻す

Blending Additive ブレンドモードを加算合成に

Blending Blend ブレンドモードを標準に

Sketchの解説

メインのコード

それでは、Sketchのコードについて解説していきます。既に実行してわかったとおり、このSketchでは青いBoxを座標（x,y,z）=（50, -50, 100）の位置に表示します。y座標の値がマイナスになるのは、Processingの3D表現においてはY座標の正の方向はウィンドウの上から下に向かう方向に定義されているためです。

以降の作例でデータをプロットする時に、このBoxによって、ひとつひとつのデータをプロットしてビジュアライズを行います。Boxの描画を担う、メインコードのdrawは次のようになります。

code: sketch01_1_1.pde

void draw() {

...

pushMatrix();

translate(50, -50, 50);

fill( 30, 160, 255, 255 * plot_alpha);

box(plot_size);

popMatrix();

...

}

変数plot_alphaとplot_sizeはUIによって変更できるパラメータです。

この例ではプロットにBoxを使っていますが、必ずしもBoxでなくても構いません。表現したい方法に応じて、線（line）や、面（shape）を使いますが、しばらくの間はBoxで感覚をつかむと良いでしょう。ただし、Boxのレンダリングにはとても時間がかかるため、大きなデータに紐付けてビジュアライズする図形としてはあまり適さないということも覚えておいてください。

その他のコード（Grid、Viewport、GUI）

ビジュアライズのための汎用的な部分のコードをまとめて使いやすくしたGui、Grid、Viewportの各オブジェクトの宣言と初期化について見てみましょう。

code: sketch01_1_1.pde

Gui gui; //guiオブジェクトの宣言

Grid grid; //gridオブジェクトの宣言

Viewport vp; //vpオブジェクトの宣言

void setup() {

size(1024,768,P3D);

grid = new Grid(0, 100, 10); //gridの初期化

vp = new Viewport(this, 250); //viewportの初期化

gui = new Gui(this,vp); //guiの初期化

}

まず、冒頭の宣言部分で、各オブジェクトを宣言し、setpu( )で各オブジェクトを初期化しています。

GridとViewportは初期化時にパラメータが調節できますが、Guiについては特に値を指定する必要はありません。GridとViewportのパラメータは次のように指定できます。

table:表4 Gridの初期化パラメータ

Grid(float min, float max, float margin)

min グリッドの最小値を指定する（すべての軸に共通）

max グリッドの間隔を指定する（すべての軸に共通）

margin グリッドの間隔を指定する（すべての軸に共通）

table:表5 Viewportの初期化パラメータ

Viewport(this, double distance)

distance 実行直後の原点から視点までの距離（100〜1000）

UIに何かを追加したり、スライダの最大値最小値などを変更する場合は、Gui.pdeの内部を書き換える必要があります。書き換えが必要な場合は、各作例の紹介ページで解説します。