ゲージをテクスチャで増減させる

円グラフのように増減するゲージを作るとき、atan2（アークタンジェント２というプログラムの関数）をありがたく使わせてもらっています。少ないノードで実現できてしまうので、大変便利でありがたい存在。解像度に依存しないのもうれしい。ゲームで印象に残っているのはピクミン（2001年）かな。

原理的にはシンプルで、指定した座標と原点(0, 0)との位置関係を角度に変換してくれるというものです。なのでUV座標と atan2関数を組合わせると下図のように変換することができます。

さらに Step や SmoothStepノードをつなげば円グラフゲージの増減が可能です。

アンリアルエンジンのマテリアルには ArcTangent2 というノードが用意されています。

そして便利すぎるのが VectorToRadialValue ノード。

このノードの中身を一部抜き出して整理するとこんな感じになっていました。

ただ、開発終盤の処理上げでこの atan2 が標的になることもしばしば。そこで前もって静的にテクスチャを作っておけばそれで対応できるんじゃないかということで、作ろうと思い立った次第です。

テクスチャのメモリ容量とその取扱いに対して atan2 の計算負荷、どちらが罪深いかはその時の描画面積やら描画状況次第ではあるので、どちらを採用するかは現場で判断することになります。

最初は作業時間優先で atan2 で作っておき、処理上げのタイミングで、テクスチャに差し替えたビルドと比較すると効果があるか、ないかが判明できると思います。

さてさて

Photoshopのグラデーションで、スタイルに角度というのがあります。

まさに atan2 を使ったような見た目のグラデーションが生成されます。

実際に使えるかどうか試してみたのが、Twitterに上げていた画像

ドキュメントのモードを RGBカラーとグレースケール両方で試してみましたが、結果に目立つような差はありませんでした。

ということで、Processing を試すことにしました。。

最近だと SubstanceDesigner とかで作るのでしょうけど、AdobeCC の加入プランにラインナップされていないのもあって、昔お世話になった Processing を使うことにしたのです。

https://processing.org/

バージョンは 4になってました。

ジェネラティブアート界隈ではまだまだ活躍中で、コミュニティも多くそれなりに情報を拾うことができます。

この記事を書いているときもイベントが開催されていました。

Processing Community Japan

https://processing.jp/

マウスやキーの入力に反応することもできるので、インタラクティブな振る舞いも作って遊ぶことができます。

セットアップし、exeファイルを実行するとスケッチブックというエディタウィンドウが開くので、そこにスクリプトを書いていく。

言語は Javaをベースにしていて、JavaScriptに慣れていた自分としては、構文にすぐ馴染めるのでありがたい。

スクリプトを書くと、ウィンドウ左上の再生ボタンをおすとすぐに結果が出る。

エラーがあれば、ウィンドウ下部のコンソールで教えてくれる。

無事エラーが出なければ、デスクトップにキャンバスウィンドウが新しく現れます。

void setup(){
// キャンバスサイズ
size(1024, 1024);
// 背景色
background(255,0,0);
// 1回だけのDraw
noLoop();
// スムージング無効
noSmooth();
}

void draw(){
int dx = width / 2;
int dy = height / 2;
int x, y; //描く座標
float c; //角度を明るさに
//
for(y=0; y < height; y++){
for(x=0; x < width; x++){
c = atan2(dy-y, x-dx) / PI; // -1.0 ～ 1.0 にする
c = c * 0.5 + 0.5;                 // 0 ～ 1.0 にする
stroke(round(c*255));         // カラー
point(x, y);                          // 点を描く
}
}
save("image00.png");             // PNGでファイル書き出し
}