Chapter 14

重ねる

miku
miku
2021.11.11に更新

この章では、複数のオブジェクトを扱う方法の一つである「重ねる」ことについて学ぶ。完全に重なってしまっては意味がないので、少しずつ位置や大きさをずらすのが基本形である。

円を重ねる

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  stroke(240);
  noFill();

  let d = 0; // 円の直径

  translate(width / 2, height / 2);
  for (let i = 0; i < 10; i++) {
    circle(0, 0, d);
    d += 40;
  }
}

座標を固定して、円の直径を少しずつ大きくして描画する作例。塗りを適用すると、重なりがわからなくなるので、線だけの描画にする。

円を重ねる その2

const space = 40;

function setup() {
  createCanvas(windowWidth, windowHeight);
  strokeWeight(2);
  stroke(240);
  noFill();

  let d = 0;

  translate(width / 2, height / 2);
  for (let i = 0; i < 30; i++) {
    circle(0, 0, d);
    d += space - i * 2;
  }
}

先程と同じで、位置は固定で、円の直径を少しずつ大きくするのだが、外側の円ほど隙間が近くなる作例。

円を重ねる その3

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(240);
  noFill();

  for (let i = 0; i < 100; i++) {
    translate(2, 2);
    circle(0, 0, i * 2);
  }
}

右下に向かって移動しながら、円の直径を少しずつ大きくする作例。縞模様の部分はモアレという現象で、規則的に並べて描画すると出現する。

モアレの軽減

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#f3eed5");
  noFill();
  stroke("#e5af9b");

  for (let i = 0; i < 100; i++) {
    translate(2, 2);
    circle(0, 0, i * 2);
  }
}

背景色と線の色をうまく組み合わせてモアレを目立たなくする作例。彩度が高いと重なったときにモアレの色が黒くなりがちなので彩度を抑え、明度差が大きいとまたモアレが目立つので明度差を小さくする。

モアレの軽減 その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(240);
  noFill();

  for (let i = 0; i < 100; i++) {
    translate(2, 2);
    strokeWeight(random(3));
    circle(0, 0, i * 2);
  }
}

線の太さをランダムにしてモアレを目立たなくする作例。

円を重ねる その4

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#efd4cd");
  noFill();
  stroke("#604461");

  translate(200, height / 2);
  for (let i = 0; i < 300; i++) {
    strokeWeight(random(1, 3));
    translate(1.5, 0);
    circle(0, 0, i * 3);
  }
}

右に向かって移動しながら、円の直径を少しずつ大きくする作例。線の太さをランダムにしている。

円を重ねる その5

function setup() {
  createCanvas(windowWidth, windowHeight);
  noStroke();
  fill(240);
  translate(width / 2, height / 2);

  const n = 300;
  for (let i = 0; i < n; i++) {
    const t = i / n;
    const d = lerp(20, 0, t);
    const tx = i;
    const ty = 0;
    circle(i, 0, d);
  }
}

円を少しずつ右側に重ねていくにつれて、円の大きさも小さくしていき、筆のような形をつくる作例。

円を重ねる その6

function setup() {
  createCanvas(windowWidth, windowHeight);
  noFill();

  for (let i = 0; i < 300; i++) {
    const x = random(width);
    const y = random(height);
    const d = random(50, 100);
    const w = random(10, 20);
    const c = random(0, 255);

    strokeWeight(w);
    stroke(c);
    circle(x, y, d);
  }
}

ストロークだけで描かれる円の位置、直径、太さ、色をランダムにした作例。

回転で重ねる

let angle = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
}

function draw() {
  angle += 10;

  translate(width / 2, height / 2);
  rotate(angle);
  rect(0, 0, 100, 100);
  resetMatrix();
}

矩形を画面中央で回転させるが clear() を呼ばずに描画を重ねる作例。

回転で重ねる その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  angleMode(DEGREES);
  rectMode(CENTER);

  const n = 30;
  colorMode(HSB, n, 100, 100);

  for (let i = 0; i < n; i++) {
    translate(width / 2, height / 2);
    rotate(map(i, 0, n, 0, 360));
    scale(map(i, 0, n, 1, 0.1));
    fill(i, 100, 100);
    rect(0, 0, 300, 300);
    resetMatrix();
  }
}

中央を軸にした複数の矩形を画面中央に配置していくが、重ねるごとに角度・大きさ・色をずらしていく作例。