Practice - Generative Art

JavaScript と Canvas API による画像生成のサンプルです。
Generative Art に親しんでもらうために用意しました。

まず HTML ファイルを作成し、 Step 1 のコードをコピペします。
Step 2 からは該当部分だけを上書きしてください。
なお、おまけ付きです。

Step 1

<body></body>
<script>

const canvas = document.createElement('canvas');
canvas.setAttribute('width', 1280);
canvas.setAttribute('height', 792);
document.body.appendChild(canvas);

const context = canvas.getContext('2d');
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);

const render = (x, y, r) => {
  context.beginPath();
  context.arc(x, y, r, 0, Math.PI * 2);
  context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
  context.stroke();
};
render(canvas.width / 2, canvas.height / 2, canvas.height * 0.49);

</script>

Step 2

const render = (x, y, r, level) => {

  if (level <= 0) return;

  context.beginPath();
  context.arc(x, y, r, 0, Math.PI * 2);
  context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
  context.stroke();

  r /= 2;
  for (let i = 0; i < 2; i ++) {
  let v = i / 2 * Math.PI * 2;
  for (let a = 0, aa = 8; a < aa; a ++) {
    let av = a * Math.PI / aa;
    let nx = x + Math.sin(v + av) * r;
    let ny = y + Math.cos(v + av) * r;
    render(nx, ny, r, level - 1);
  }
  }

};
render(canvas.width / 2, canvas.height / 2, canvas.height * 0.49, 2);

Step 3

render(canvas.width / 2, canvas.height / 2, canvas.height * 0.49, 4);

Step 4

context.beginPath();
context.arc(x, y, r, 0, Math.PI * 2);
if (level === 1) {
  context.lineWidth = 1;
  context.strokeStyle = 'rgba(0, 0, 0, 0.5)';
  context.stroke();
} else if (level === 2) {
  context.lineWidth = 2;
  context.strokeStyle = 'rgba(255, 255, 255, 1.0)';
  context.stroke();
}

おまけ

<body></body>
<script>

const canvas = document.createElement('canvas');
canvas.setAttribute('width', 1280);
canvas.setAttribute('height', 792);
document.body.appendChild(canvas);

const context = canvas.getContext('2d');
context.fillStyle = '#ffffff';
context.fillRect(0, 0, canvas.width, canvas.height);

let r = canvas.height * 0.3;
for (let i = 0, ii = 256; i < ii; i ++) {
  let v = (i + 1) / ii * Math.PI;
  let x = canvas.width / 2 + Math.sin(v * 2) * r;
  let y = canvas.height * 0.63 + Math.cos(v * 2) * r;
  context.beginPath();
  context.arc(x, y, Math.sin(v) * r, 0, Math.PI * 2);
  context.fillStyle = 'rgba(' +
  Math.round(Math.sin(v) * 255) + ', ' +
  Math.round(Math.sin(v * 2) * 255) + ', ' +
  Math.round(Math.sin(v * 3) * 255) + ', 0.5)';
  context.fill();
}

</script>