01_2_1 円環と点

気温の時系列データを極座標系でプロットしてみると、季節の周期の中にも微細な変化が感じられるビジュアルが生まれます。

サンプルコード：sketch01_2_1

https://gyazo.com/c59b9e84e083d1eb03480b030e2be37c

table:Data Profile

概要 東京の毎日の平均気温（1988年〜2017年）

Data 日付（date）、気温（temp）

データ数 10958

提供元 気象庁

座標の計算

真上から見た平面（図1X-Z平面）に円環上にプロットします。高さ（Y座標）は温度をから求めます。

X-Z平面では1日進むごとに偏角を約0.98度（360/360）増加させ1周で1年（365日）をプロットします。rも1日ずつ増加させ、1周しても重ならないようにします。

https://gyazo.com/d079b67b074d79386899a90cd600e954

図1: X,Z座標は極座標の変換式で求める

code: sketch01_2_1.pde

void setup() {

...

for(int i=0; i<data.size(); i++){

//日付が進むに連れてX-Z平面に渦巻状になる位置にプロットする。Yは温度に対応させる

x = (30 + float(i)*0.005) * cos( radians( 360*i/365 ));

y = -1 *map(data.temperature.get(i), 0, 50, 0, 100);

z = (30 + float(i)*0.005) * sin( radians( 360*i/365 ));;

//map関数で温度を色相に変換する

h = map(data.temperature.get(i), data.temperature.min(), data.temperature.max(), 164, 0);

...

}

}

点の表現方法1 box( )による描画

点を表現する方法は複数あり、方法によって形だけでなく処理の速度も変わります。

Processingで3D表現を少し学んだことがある人であればbox( )はおなじみでしょう。sketch01_2_1では、box( )を使用しています。

code: sketch01_2_1.pde

void draw() {

...

for(int i=0; i<verts.size(); i++){

pushMatrix();

translate(verts.get(i).x, verts.get(i).y, verts.get(i).z);

fill( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);

box(plot_size);

popMatrix();

}

...

}

なんとなく、点であれば球を描画するためのsphere( )を使うのが自然のように感るかと思いますが、sphere( )は表示に時間がかかるため、多くの点を表現するビジュアライゼーションには不向きです。丸い形状で点を表現したい場合は、次の例のようにします。

点の表現方法2 beginShape( POINTS ) 〜 endShape( ) を使いGPUでレンダリング

beginShape( POINTS ) と endShape( )を使うことで、描画をGPU（Graphics Processing Unit）で行います。CPU（Central Processing Unit）で描画を行う場合に比べて格段に高速です。点を表現するには次のようにします。

code: sketch01_2_1_2.pde

void draw() {

...

noFill();

strokeWeight(plot_size); //点の大きさはstrokeWeight()で決定。

//beginShape(POINTS);　を実行してからendShape();を実行するまでのあいだに、描く点の座標をvertex()で、色をstroke()で指定する。

beginShape(POINTS);

for(int i=0; i<verts.size(); i++){

stroke( hue(verts.get(i).cl), saturation(verts.get(i).cl), brightness(verts.get(i).cl), 255*plot_alpha);

vertex(verts.get(i).x, verts.get(i).y, verts.get(i).z);

}

endShape();

...

}

Visualization

https://gyazo.com/dbfdf39f98b0314a08d33e609c690cc8

https://gyazo.com/6194a5bebbb881155f2892aae96f26f3

https://gyazo.com/960123950ee53827bca2aefce2804ba3

https://gyazo.com/19c4df609fc75e7a232ede16a7bfbfcc