01_2_5 螺旋と線

長期と短期の時間経過を螺旋に織り込んでビジュアライズする

サンプルコード sketch01_2_5

https://gyazo.com/bb9ce9e42ffb38717a4ed158c50844d2

螺旋を描くための座標計算の基本

円環のsketchでは、Y軸の方向に温度のデータを適用していましたが、螺旋ではY軸からの距離に温度のデータを適用します。そして、Y座標は一定に増加していくように計算します。円環との違いを図にすると次のようになります。（図1）

https://gyazo.com/caaf6e85cb5145b6a74f737236ec1055

各日付のデータから順番にrを計算し、円環と同じくrとθからX座標、Y座標を計算すれば次の図のように螺旋状にプロットすることができます。（図2）

https://gyazo.com/fa29b6d5f94d1bd961ccd02d6e99de7b

座標の計算

code:sketch01_2_5.pde

void setup(){

...

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

dist = map(data.temperature.get(i), 0, 50, 80, 120); //Y軸からの距離を求める

x = dist * cos( radians( 360*i/365 ));

y = -1* float(i)*0.05 + 300; //Y座標は一定に増加させる

z = dist * sin( radians( 360*i/365 ));

...

}

...

}

線によるビジュアライズ

code: sketch01_2_5.pde

void draw(){

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

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

//螺旋の内側からプロット位置向かう線を描く

strokeWeight(plot_size);

float innerX = 60 * sin( radians( 360*i/365 ));

float innerZ = 60 * cos( radians( 360*i/365 ));

line(innerX, verts.get(i).y, innerZ, verts.get(i).x, verts.get(i).y, verts.get(i).z);

//プロット位置をつなぐ線を描く

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

if(i < verts.size()-1)

line(verts.get(i).x, verts.get(i).y, verts.get(i).z, verts.get(i+1).x, verts.get(i+1).y, verts.get(i+1).z);

}

}

Visualization

https://gyazo.com/839bed8f69b77d2b14f5ef0becdb146c

https://gyazo.com/bb9ce9e42ffb38717a4ed158c50844d2

https://gyazo.com/bb22226cb1ff07e13f16f567b4e9229f

https://gyazo.com/e5589233353fd33f7074e198a618db77