Chapter 32

線の描画

miku
miku
2021.11.21に更新

基本

line(x1, y1, x2, y2);

今までに幾度か線の描画をしてきたが、改めて線の使い方を確認する。line(x1, y1, x2, y2)(x1, y1) ~ (x2, y2) まで線分を描画する。線の色は stroke() に依存する。

作例

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

  for (let i = 0; i < 100; i++) {
    const x1 = random(width);
    const y1 = random(height);
    const x2 = random(width);
    const y2 = random(height);
    line(x1, y1, x2, y2);
  }
}

画面内のランダムな位置を2つ用意して、その2点を利用して線を描画する作例。

作例 その2

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

  for (let i = 0; i < 100; i++) {
    const rad = random(TWO_PI);
    const x = random(width);
    const y = random(height);

    const x1 = x - Math.cos(rad) * 3000;
    const y1 = y - Math.sin(rad) * 3000;
    const x2 = x + Math.cos(rad) * 3000;
    const y2 = y + Math.sin(rad) * 3000;

    strokeWeight(random(1, 10));
    line(x1, y1, x2, y2);
  }
}

先程の作例と似たような形だが、2点の位置が画面外になる作例。画面に映らなければ意味がないので、線の一部が必ず画面内に映るように調整をする。

まず画面内の点をランダムに取得する。この点からランダムな方向に進んだ画面外の位置(A)を取得する。作例では3000px進んだ位置にしている。(A)とは正反対の方向に3000px先の位置(B)を取得。あとはこの2点を結んで線を引く。画面内の点の位置を基準にしているので必ず画面に線が映ることになる。

作例 その3

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

  for (let i = 0; i < 100; i++) {
    const x1 = -1000;
    const y1 = height / 4;
    const x2 = width + 1000;
    const y2 = height / 4;

    strokeWeight(random(1, 10));
    translate(width / 2, height / 2);
    rotate(random(PI * 2));
    line(x1, y1, x2, y2);
    resetMatrix();
  }
}

中央を軸としてランダムに座標を回転しておき、画面中央からやや下がった位置に線を引く。こうすると、中央部分には線が引かれないので円形のくぼみができた形で線が引かれる作例。

規則的な線

const space = 20;
let x, y;

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

  x = 0;
  y = 0;
}

function draw() {
  const w = random(10, 100);
  line(x, y, x + w, y);
  x += w + space;
  if (x >= width) {
    x = 0;
    y += 30;
  }
}

ランダムな長さの線を等間隔に配置していく作例。

規則的な線 その2

const space = 10;

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

  drawLine(10, 10, 100, 100);
  drawLine(0, height / 2, width, height / 2);
}

function drawLine(x1, y1, x2, y2) {
  const d = dist(x1, y1, x2, y2);
  const n = ceil(d / space);

  let v = createVector(x2 - x1, y2 - y1);
  v.setMag(space);

  let x = x1;
  let y = y1;

  for (let i = 0; i < n; i++) {
    x += v.x;
    y += v.y;
    circle(x, y, 5);
  }

  circle(x1, y1, 14);
  circle(x2, y2, 14);
}

点線を作る作例。

createVector(x2 - x1, y2 - y1)(x1, y1) から (x2, y2) までのベクトルを作る。これで向きは作れたので後は長さだが、setMag(space) でベクトルの長さを space に合わせる。あとは (x1, y1) から (v.x, v.y) を足していき、それぞれの位置が点線の場所になる。

線を重ねる

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#f3eed5");
  noFill();
  strokeWeight(4);

  translate(width / 2, height / 2);
  for (let i = 0; i < 30; i++) {
    stroke(random(256), random(256), random(256));
    for (let a = 0; a < 360; a += 1) {
      push();
      rotate(radians(a));
      const x1 = random(20, 40);
      const x2 = random(80, 120);
      line(x1, 0, x2, 0);
      pop();
    }
  }
}

画面中央からランダムな長さの線を1度ずつずらして360本描画し、更にその処理を複数回繰り返した作例。

線を重ねる その2

function setup() {
  createCanvas(windowWidth, windowHeight);
  background("#f3eed5");
  noFill();
  strokeWeight(4);

  const n = 3;
  for (let y = 0; y < n; y++) {
    for (let x = 0; x < n; x++) {
      drawCircle((width / n) * x, (height / n) * y, width / 3, height / 3);
    }
  }
}

function drawCircle(x, y, w, h) {
  const size = min(w, h) / 2;
  translate(x + w / 2, y + h / 2);
  for (let i = 0; i < 30; i++) {
    stroke(random(256), random(256), random(256));
    for (let a = 0; a < 360; a += 1) {
      push();
      rotate(radians(a));
      const x1 = random(size * 0.2, size * 0.4);
      const x2 = random(size * 0.6, size * 0.8);
      line(x1, 0, x2, 0);
      pop();
    }
  }
  resetMatrix();
}

先程の作例を並べて表示した作例。