【Unityシェーダーグラフ+Processing その2】ランダムウォークを利用して雷の球っぽいものを作る

ProcessingとUnityシェーダーグラフを組み合わせて、雷の球っぽいものを作る方法を解説します。

目次

作り方解説

STEP1 : Processingでランダムウォークを描画

Processingで描画するテクスチャ

Processing上で下記のコードを実行すると、pdeファイルがある場所と同じ階層にpngとして絵を出力します。

final boolean isSave = true; // save as png

final int N = 5000; // random walk number
final int alpha = 15; // line alpha

// random walk parameter
final float startRadius = 45;
final float addRadius = 45;
final float degreeRandom = 180;
final float radianRandom = radians(degreeRandom); // degree -> radian

// save file name
String getFileName()
{
  return "randomWalkSpread_"
    + "_N_" + N 
    + "_Alpha_" + alpha 
    + "_StartRadius_" + startRadius 
    + "_AddRadius_" + addRadius
    + "_DegreeRandom_" + degreeRandom
    + ".png";
}

void setup()
{
  size(1024, 1024);
  background(255);
  stroke(0, alpha);
  
  for (int i = 0; i < N; i++)
  {
    drawLine(); // draw random walk line
  }
  
  fill(0, 255);
  ellipse(width/2, height/2, startRadius * 2, startRadius * 2);
  
  if (isSave)
  {
    save(getFileName()); // save as png
  }
    
}

// draw random walk line
void drawLine()
{
  float x1, y1;
  float x2, y2;
  x2 = width / 2;
  y2 = height / 2;
  
  float baseRadian = random(0, 2 * PI);
  x2 += startRadius * cos(baseRadian);
  y2 += startRadius * sin(baseRadian);
  while (dist(width/2, height/2, x2, y2) < width)
  {
    float radian = baseRadian + radianRandom * random(-0.5, 0.5);
    x1 = x2;
    y1 = y2;    
    x2 += addRadius * cos(radian);
    y2 += addRadius * sin(radian);
    
    line(x1, y1, x2, y2);
  }
}

コードの軽い解説

コードでやっていることは、
「画面中央から画面の外側へ向かって点をランダムに動かし、その軌跡を描画する」
これを5000回繰り返しています。

Processingが出力したpngをUnityプロジェクトに取り込んだら、シェーダーグラフ上の作業に移ります。

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

SampleTexture2Dノードでテクスチャを取り込み、Smoothstepで明暗のコントラストを補正します。
OneMinusノードで明暗を反転、Powerノードで色味を補正、最後にSampleGradientノードで色を付けます。

上記のシェーダーグラフを組むと、以下のような絵が出力されます。