【Unityシェーダーグラフ+Processing その3】ランダムに円弧を敷き詰めて色を付けてみた

初めに

ProcessingとUnityのシェーダーグラフを組み合わせて、以下のような絵を作ってみました。

f:id:r-ngtm:20190108101745p:plain:w320 — Processing+シェーダーグラフで作った絵

今回の記事では、この絵の作り方を解説します。

解説

Processing

Processing側で円弧をランダムに大量に並べます。

f:id:r-ngtm:20190108102142p:plain:w320 — Processingで描画したテクスチャ

シェーダーグラフ

これをUnityのシェーダーグラフに取り込んで色を付けて完成となります。

作り方

STEP1 : Processingで絵を描く

f:id:r-ngtm:20190108102142p:plain:w256 — Processingで描画する絵

以下のコードを実行すると、pdeファイルと同じ場所にpngとして絵が出力されます。

final boolean isSave = true; // save as png
final int N = 5000; // arc number
final int lineSize = 5; // arc line size
final float radiusMin = 10; 
final float radiusMax = 400;
float arcRange = radians(100); 

String getPngName()
{
  return "arc_"
    + "_N_" + N
    + "_lineSize_" + lineSize
    + "_radiusMin_" + radiusMin
    + "_radiusMax_" + radiusMax
    + "_arcRange_" + arcRange
    + ".png";
}


void setup()
{
    size(1024, 1024);
    background(255);
    strokeWeight(lineSize);
    strokeCap(RECT);
    noFill();

    // draw arc
    for (int i = 0; i < N; ++i) 
    {
        stroke(random(1, 255));
        drawArc();
    }
    
    if (isSave)
    {
      save(getPngName()); // save as png
    }
}

void drawArc()
{
    float x = width / 2;
    float y = height / 2;
    float r = random(radiusMin, radiusMax);
    float size = r * 2;
    float radian1 = random(0, 2 * PI);
    float radian2 = radian1 + arcRange;

    arc(x, y, size, size, radian1, radian2);
}