【p5.js】エビングハウス錯視を描こう

p5.jsでのクリエイティブコーディングの練習をはじめてみました！

何か良い練習材料はないかなーと考えてみたところ、目の錯覚で有名な「エビングハウス錯視」はどうだろう？と。

構造としては、円を配置するだけのとてもシンプルな図形。練習にちょうど良いと思い、描いてみることにしました。

エビングハウス錯視

よく見かけるエビングハウス錯視は、このWikipediaに出てくるような図形です。

エビングハウス錯視 - Wikipedia

真ん中のオレンジの円は2つとも同じ大きさです。ですがその周りに配置した複数の円の大きさによって、オレンジの円が違う大きさに見えてしまいます。不思議ですね。

関係ないですが、自分の身体を小さく見せたい場合は、ガタイの大きい人と一緒にいるのが良い…のでしょうかね？

描いてみた

こんな感じのシンプルな図が描けました！

ざっと書いてみたスケッチはこんな感じです。

p5.js Web Editor

二つのパターンを個別に記述しちゃっているので、再利用性がなくあまり美しいスケッチではないですね…。汗

本記事では、この片側だけのシンプルなパターンの描き方について解説してみます。

円の周囲に円を配置するパターンの描き方

さて、先ほどの図では似たようなパターンをふたつ横に並べた形ですが、左側のひとつのパターンだけを描いてみます。

スケッチはこちら。

function setup() {
  createCanvas(400, 400);
}

function draw(){
  background(255);
  
  let d = 60;
  let num = 6;
  
  noStroke();
  
  // 真ん中の円
  fill(230, 90, 50);
  circle(width * 1/ 2, height / 2, d);
  
  // 周囲の円
  fill(50, 190, 230);
  push();
  translate(width * 1/ 2, height / 2);
  
  for (let i = 0; i < 10; i++) {
    let R = d * 1.2;
    let x = R * 1.2 * cos(radians(360 * i / num));
    let y = R * 1.2 *  sin(radians(360 * i / num));

    circle(x, y, R);
  }
  pop();

}

（１）キャンバスサイズの指定

setup関数のなかで、キャンバスサイズを(400, 400)と正方形に指定。

function setup() {
  createCanvas(800, 400);
}

（２）真ん中の円を描く

draw関数に入り、まずは真ん中の円をひとつ描きます。

円の半径は、変数 d = 60として上で定義しています。ここではキャンバスサイズの横幅 widthと縦幅 height を使って、円の中心がキャンバスの中心になるように調整して配置します。

  // 真ん中の円
  fill(230, 90, 50);
  circle(width * 1/ 2, height / 2, d);

（３）周囲の円を描く

そして次に、真ん中のひとつの円のまわりに複数の円を描きます。

push関数とpop関数、そしてtranslate関数を使って座標をずらして記述するテクニックは、面白いですね。

周囲の円の個数は、変数 num = 6 として最初に定義しています。また、変数 R, x, y の数値はそれぞれ、周囲の円の半径、x座標、y座標を表しています。その半径や中心の円との距離感などは描画しながら良い感じになるようにパラメータ（ここでは1.2）を調整しました。

  // 周囲の円
  fill(50, 190, 230);
  push();
  translate(width * 1/ 2, height / 2);
  
  for (let i = 0; i < 10; i++) {
    let R = d * 1.2;
    let x = R * 1.2 * cos(radians(360 * i / num));
    let y = R * 1.2 *  sin(radians(360 * i / num));

    circle(x, y, R);
  }
  pop();

（４）円のカラー

中心の円と周囲の円のカラーは、補色の関係にしてみました。

• 中心の円：橙色　fill(50, 190, 230)

• 周囲の円：水色　fill(50, 190, 230)

こちらのサイトで、RGB値から補色を自動で算出してくれます！

おわりに

スケッチも解説も雑で恥ずかしい限りですが…。何はともあれ、円だけで作成できるなかなか良い練習題材でした〜。

このパターンを、繰り返しを使って直線上に配置したり、円状に配置したり、螺旋系に配置してみたり、というのができそうですね。周囲の円の大きさを、アニメーションをつけて変化させてみたりしても面白いかも。