円を並べてみる、ただそれだけで：前編

今回は超単純！円を並べるだけの作例です。
超単純なはずなのに、なぜか前後編の 2部構成です。

今回のコードは p5.js で書きました。
OpenProcessing や p5.js Web Editor に貼り付けて実行することも可能です。

この記事は全文無料でお読みいただけます。もしお気に召しましたら投げ銭お願いしますね。😉✨

並べてみる

まずはキャンバス上に何個か円を並べてみましょう。

格子状に図形を配置する方法として、 高尾俊介（@takawo）先生のワークショップ資料「グラフィックのための「動かない」クリエイティブコーディング」での解説がとてもわかりやすいです。

グラフィックのための「動かない」クリエイティブコーディング

今回、長方形のキャンバスにも収まるように、縦横の個数を可変にしたコードを書いてみました。

/*
* Just a grid alignment.
* This work is licensed under a Creative Commons Public Domain Mark 1.0 License.
*/

function setup() {
   createCanvas(640, 480);
   colorMode(HSB, 360, 100, 100, 100);
   noFill();
   strokeWeight(1);
   noLoop();
}

function draw() {

   // キャンバス縦横どちらか最小の辺にちょうど収まるサイズを算出
   const minCells = 6;
   const cSize = min(width, height) / minCells; 

   // 縦横の個数算出
   const xCells = floor(width  / cSize);
   const yCells = floor(height / cSize);

   // 描画
   background(0, 0, 90, 100);
   translate(cSize * 0.5, cSize * 0.5);
   stroke(0, 0, 30, 100);
   for (let iX = 0; iX < xCells; iX++) {
	for (let iY = 0; iY < yCells; iY++) {
	    circle(iX * cSize, iY * cSize, cSize);
	}
   }

}

・キャンバスの縦横どちらか小さい方に収める円の個数を指定。
・その個数を基に円のサイズを算出。
・そのサイズから、縦横それぞれの円の個数を算出して描画。
というコードで、縦に 6個収めてみた結果はこう！

描画のポイントは

   translate(cSize * 0.5, cSize * 0.5);

で開始点を調整しているところです。これが無いとこうなっちゃいます。

余白を調整

縦横の個数を可変にしたので、個数によってはこんな風に余白が出ることがあります。

これじゃちょっとカッコ悪いので、余白を上下左右均等にしてグリッドが中央にくるように調整しましょう。

余白の値はこれで計算できます。（※どっちかは必ずゼロになるんですけどね）

横の余白： width  - xCells * cSize
縦の余白： height - yCells * cSize

上下左右均等にするということはこれを半分にすればいいですね。

(width  - xCells * cSize) * 0.5
(height - yCells * cSize) * 0.5

ここに、先程「描画のポイント」として説明した開始点の調整分を足せば、余白を上下左右均等にした場合の開始点が計算できます。

(width  - xCells * cSize) * 0.5 + cSize * 0.5;
(height - yCells * cSize) * 0.5 + cSize * 0.5;

横方向を例に図解（ヘタクソ😆）するとこんな感じです。

最後の式では cSize * 0.5 がダブって出てくるので、式を整理すると最終的にこうなります。

(width  - (xCells - 1) * cSize) * 0.5;
(height - (yCells - 1) * cSize) * 0.5;

コードに反映するとこうなって、横長キャンバスなら左右の余白均等、縦長キャンバスなら上下の余白を均等にしてくれます。

/*
* A grid alignment with a suitable margin.
* This work is licensed under a Creative Commons Public Domain Mark 1.0 License.
*/

function setup() {
   createCanvas(380, 480);
   colorMode(HSB, 360, 100, 100, 100);
   noFill();
   strokeWeight(1);
   noLoop();
}

function draw() {

   // キャンバス縦横どちらか最小の辺にちょうど収まるサイズを算出
   const minCells = 3;
   const cSize = min(width, height) / minCells;

   // 縦横の個数算出
   const xCells = floor(width  / cSize);
   const yCells = floor(height / cSize);

   // 描画
   const xMargin = (width  - (xCells - 1) * cSize) * 0.5;
   const yMargin = (height - (yCells - 1) * cSize) * 0.5;

   // 描画
   background(0, 0, 90, 100);
   translate(xMargin, yMargin);
   stroke(0, 0, 30, 100);
   for (let iX = 0; iX < xCells; iX++) {
	for (let iY = 0; iY < yCells; iY++) {
	    circle(iX * cSize, iY * cSize, cSize);
	}
   }

}

大きさを変えてみる

これで最小個数 4個の円を並べるとこんな感じですね。

円は 1倍の大きさで綺麗に隣り合って並ぶ形になります。

ここで円の大きさを 2倍にしてみましょう。

circle(iX * cSize, iY * cSize, cSize * 2.0);

2つ隣りの円同士が接する形になります。

いろいろ倍率変えてみると…

これだけでもいろんな模様を描けそうですね。

応用として、一つ一つの円の大きさを noise() を使って変化させてみるとこうなります。

さらに発展させるとこんな感じにも。

このコードはこちらからご覧いただけます。

How The Web Was Woven.

はい、前編はここまでにしましょう。
こんな感じで単に円を並べてみるだけでいろいろ遊べそうですね。
後編ではさらにいろいろ遊んでいきます。🙂

ここでこの記事はおしまいです。もしこの記事がお気に召しましたら投げ銭お願いします。😉✨