【Unityシェーダーグラフ+Processing その１】線をたくさん出して色を付けてみた

はじめに

最近、Processingを触りはじめました。

https://processing.org/

「Processingを使って何か面白いことはできないだろうか？」と考えていたところ、

「Unityのシェーダーグラフと組み合わせれば面白いことできそうじゃない？」

と思いつきました。  

Processingで作った絵をシェーダーグラフで加工してみた

そこで、Processingで描画した以下の絵を引っ張り出してきて、

 
Unityシェーダーグラフに取り込み、SampleGradientで色を付けてみました。
 

そして出来上がった絵が以下になります。

お、いろいろ遊べそう。

前置きが長くなってしまいましたが、今回の記事ではこの絵を作る方法を解説します。

作り方解説

STEP1 Processingで絵を描く

以下のコードをProcessingで実行します。

final int N = 15000; // line number
final int alpha = 15;

String getFileName()
{
  return "lines" + "_N_" + N + "_alpha_" + alpha +".png";
}

void setup()
{
  size(1024, 1024);
  background(255);
  stroke(0, alpha);
  for (int i = 0; i < N; i++)
  {
    drawLine();
  }
  
  save(getFileName());
}

void drawLine()
{
  line(random(0, width), random(0, height), random(0, width), random(0, height));
}

やっていることはシンプルで、
「キャンバス上でランダムな位置の点を2か所とり、2点を結ぶ線を描画する」
これを15000回繰り返しているだけです

上記のコードをProcessing上で実行すると以下のような絵が出力され、pdeファイルと同じ場所にpngとして保存されます。

出力されたpngをUnityプロジェクトに取り込んだら、次にUnity上でのシェーダーグラフ上での作業に入ります。

STEP2 : シェーダーグラフで加工する(完成)

SampleTexture2Dノードでテクスチャを取り込み、Smoothstepで色味を補正。
最後にSampleGradientノードで色をつけて完成です。

色を変えて遊んでみた。

SampleGradientの色を変更すると絵の色も変化します。
色を弄っているだけでもいろいろ遊べそうです。