如何使用 p5.js 绘制三角形的内切圆？

在本文中，我们将看到如何绘制内接圆（incircle）形成三角形。内圆不过是可以在平面图形内部绘制的最大可能的圆。所以基本上三角形的所有边（三个）都必须与圆表面接触，但不能穿过边栏。

数学背景：在给定的三角形ABC中，如下图所示。

• 三角形内接圆的中心（称为中心）定义为：

  $I_{x}=\frac{ax_{1}+bx_{2}+cx_{3}}{a+b+c}$

  $I_{y}=\frac{ay_{1}+by_{2}+cy_{3}}{a+b+c}$

• 内接圆的半径（称为内半径）为：

  $r=\frac{\Delta }{s}$

执行：

• 第 1 步：在计算机图形学中，我们用角点而不是边长来表示三角形，这意味着输入将是三角形的顶点！因此，我们需要将其转换为边长a, b, c ，以便我们可以将其用于公式。为此，我们使用这个简单的getSides辅助函数：
  代码：

  // Get Sides from Angular points
  function getSides(Ax, Ay, Bx, By, Cx, Cy){
    return {
      a: dist(Bx, By, Cx, Cy),
      b: dist(Cx, Cy, Ax, Ay),
      c: dist(Ax, Ay, Bx, By),
    }
  }
  

• 第 2 步：现在，我们可以将角点转换为边，我们可以简单地插入公式以获得所需的结果。在这里，绘制三角形内圆的完整 P5.js 草图：

  代码：

  function setup() {
    createCanvas(640, 480);
  }
    
  function draw() {
    background(255);
    noFill()
    stroke(0)
    strokeWeight(5)
    triangle(320, 140, 220, 340, 420, 340)
    drawInCircle(320, 140, 220, 340, 420, 340)
    noLoop()
  }
    
  function drawInCircle(x1, y1, x2, y2, x3, y3){
    let side=getSides(x1, y1, x2, y2, x3, y3)
    let a=side.a, b=side.b, c=side.c;
    let inCenter=getIncenter(a, b, c, x1, y1, x2, y2, x3, y3);
    let inRadius=getInradius(a, b, c);
    circle(inCenter.x, inCenter.y, 2*inRadius)
  }
    
  // Helper Function: Get Sides from Angular points
  function getSides(Ax, Ay, Bx, By, Cx, Cy){
    return {
      a: dist(Bx, By, Cx, Cy),
      b: dist(Cx, Cy, Ax, Ay),
      c: dist(Ax, Ay, Bx, By),
    }
  }
  function getIncenter(a, b, c, x1, y1, x2, y2, x3, y3){
    return {
      x: (a*x1 + b*x2 + c*x3)/(a + b + c),
      y: (a*y1 + b*y2 + c*y3)/(a + b + c)
    }
  }
    
  function getInradius(a, b, c){
    let s=(a+b+c)/2    // Semi-perimeter
    let area=sqrt(s*(s-a)*(s-b)*(s-c))
    return area/s
  }
  

• 输出：
  

注意：您可以使用在线编辑器编辑和运行您的代码。