前回、五輪風に3〜2と輪が減っていくように三〇六輪を作成しましたが、最後の行が10輪だとイマイチ収まりが悪いので、収まり良く見える三〇六輪をProcessingで考えてみます。前回よりは収まりはいいのですが、だから何？って感じですねー笑。

輪の数が17〜1までだと153なのですが、それが2つで306になります。頂点が1つの輪で底辺が17輪の三角形風図形が二つで三〇六輪になるので、下に向かって丸が減っていく図形と上に向かって増えていく図形を組み合わせて、菱形風になるようにしました。→補足①参照

それぞれの三角形の底辺のX方向の増分とY方向の増分を指定できるようにして画像の密着状態を変更可能にしました。→補足②参照

描画ウィンドウサイズの指定も直書きではなく、輪の大きさ、数、密着状態から計算するようにしました（結構ざっくりで、画像が真ん中にきてません。あしからず）。→補足③参照

また、上下の三角形の色相と彩度を指定できるようにしました。→補足④参照

全体のコードは以下。後方に補足を書きます。

//
// 初期値
//
// 輪の個数：底辺itr1
int itr1 = 17;
int itr2 = 1;
// 輪の直径、線の太さ、X方向の増分、Y方向の増分
float wd = 40;
float linewgt = 3;
float spx = 48;
float spy = 20;
// 上下の図形同士の重なり
float paddingY = 0;
float paddingX = 0;
// 色の初期値（HBSのH色相二種類、S彩度二種類）
float strokeH1 = 0.0;
float strokeH2 = 0.0;
float strokeS1= 0.0;
float strokeS2 = 0.0;
// 色の明度MAX値
float maxB = 100.0;

//
// 描画ウィンドウサイズを決定する
//
void settings() {
  int szx = int(spx) * (itr1 +  1) + int(paddingX);
  int szy =2 * (int(wd) * 2 +  int(spy) * (itr1 - itr2) + int(paddingY));
  size(szx, szy);
}

//
// メイン処理
//
void setup() {
  colorMode(HSB,360,100,100);          // カラーモード設定
  strokeWeight(linewgt);               // 線の太さ
  background(0,0,100);                 // 背景色（白）
  smooth();                            // アンチエイリアス
  noFill();                            // 塗りつぶしなし

// 画面中央から下向きに描く
  draw(spx, height/2, 1.0, strokeH1, strokeS1);

// 画面中央から上むきに描く
  draw(spx+paddingX, height/2-wd-paddingY, -1.0, strokeH2, strokeS2);

// 画像ファイルとして保存
  save("306rin.png");              
}

//
// 輪の三角形描画
//
void draw(float xPos, float yPos, float sgn, float varH, float varS) {
  int itrRW = 0;
  int itrCircle;
  float scale;
  float xStart = xPos;                               // X方向の開始位置を設定

// 輪の個数が17〜1まで
  for (int itrMax = itr1; itrMax >= itr2; itrMax--) {      
    itrRW++;                                         // 行カウンタ加算
    itrCircle = 0;                                   // 輪カウンタ初期化 
    
    while (itrCircle < itrMax) {                    // 輪カウンタが各行の輪の個数まで以下を行う
      itrCircle++;                                  // 輪カウンタ加算
      scale = maxB - float(itrRW + itrCircle);    　// 明度を行数と輪カウンタより計算する
      stroke(varH,varS,scale);                      // 描画色を決定
      ellipse(xPos, yPos, wd, wd);                  // 楕円を描く
      xPos+=spx;                                    // 次の輪のx位置を決める
    }
    xPos = xStart + (spx * itrRW) / 2;              // 次の行のx位置を決める
    yPos = yPos + spy * sgn;                        // 次の行のy位置を決める
  }
}

補足①
丸の三角形描画は、メイン処理から呼ばれるdrawで行ってます。下向きと上向き分として二回読んでいます。上下の向きは、三番目の引数に1、-1を設定することで行っています（上向きが-1）。

補足②
上の三角形と下の三角形の密着状態は初期値のpaddingY、paddingXで指定可能です。記事最初の画像はpaddingY、Xともに0を指定したものです。
上下に余白を持たせる場合はpaddingYに1〜任意の値を、上下の輪を重ねる場合はpaddingYをマイナス値を設定します。
上下の図形をX方向にずらしたい場合はpaddingXに1〜任意の値を設定します（上の図形が右にずれます）。マイナスの指定は考慮していません。
以下に、Y方向のみ指定した場合（例1）、両方指定した場合（例2）、両方指定してX方向とY方向の重なりが他の重なり部分と同じ増分にした場合（例3）を示します。例2、例3は上下の頂点がずれています。

補足③
描画ウィンドウサイズの指定は、初期値を設定した直後のsettingsで行っています。Processing3では、size();の中に変数を設定したい場合は、settingsで行うようです。

補足④
上下の三角形に重なりを持たせる場合に、丸の描画色が同じだとどこが境目なのかわかりにくかったので、上下の図形の色（HSBの色相と彩度のみ）を指定可能にしました。初期値のstrokeH、strokeSで色相と彩度を指定し、draw関数に渡します。

おまけ：三〇六輪ではないですが、菱形にしたい場合は、paddingY=-40、paddingX=0で17×17の菱形となります。最初に黄色で下向きの三角形を描き、次にグレースケールで上向きの三角形を描きますが、底辺の17個の丸が黄色の上にグレーで描画しなおしているので、微妙に黄色が混じって見えています（以下）。