📐線だけで三角形の塗りつぶしを行いたいです

線だけを使って三角形を塗りつぶす方法としては、三角形の内部を密に走る線で覆う方法が考えられます。ここでは、p5.js を使用して、三角形の内部に水平または垂直の線を引いて三角形を塗りつぶす例を示します。この手法は、三角形の内部に一定間隔で線を引き、その線が三角形の辺と交差する部分のみを描画するというものです。

p5.js Web Editor

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

function draw() {
  background(240);

  // 三角形の頂点座標
  const x1 = 100, y1 = 100;
  const x2 = 300, y2 = 100;
  const x3 = 200, y3 = 300;

  // 線の間隔
  const spacing = 5;

  // 三角形を線で塗りつぶす
  fillTriangleWithLines(x1, y1, x2, y2, x3, y3, spacing);
}

function fillTriangleWithLines(x1, y1, x2, y2, x3, y3, spacing) {
  // y座標の最小値と最大値を計算
  let minY = min(y1, y2, y3);
  let maxY = max(y1, y2, y3);

  // 指定した間隔で水平線を引く
  for (let y = minY; y <= maxY; y += spacing) {
    // 各 y 座標での三角形の辺との交点を見つける
    let intersections = [];
    findIntersections(x1, y1, x2, y2, y, intersections);
    findIntersections(x2, y2, x3, y3, y, intersections);
    findIntersections(x3, y3, x1, y1, y, intersections);

    // 交点が2つ見つかった場合に線を描画
    if (intersections.length === 2) {
      line(intersections[0], y, intersections[1], y);
    }
  }
}

function findIntersections(x1, y1, x2, y2, y, intersections) {
  // 直線の方程式から x 座標を求める
  if ((y1 <= y && y <= y2) || (y2 <= y && y <= y1)) {
    let t = (y - y1) / (y2 - y1);
    if (t >= 0 && t <= 1) {
      let x = lerp(x1, x2, t);
      intersections.push(x);
    }
  }
}

このコードでは、fillTriangleWithLines 関数で三角形の内部に水平線を引いています。findIntersections 関数は、特定の y 座標での三角形の辺との交点を見つけ、その交点の x 座標を求めています。交点が正確に 2 点見つかった場合にのみ線を描くことで、三角形の内部だけに線が引かれるようにしています。線の間隔は spacing 変数で調整できます。