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

简介

内切圆，是指一个圆形刚好可以在三角形的内部完全接触到三角形的三个顶点，我们可以通过 p5.js 绘制一个三角形，并计算出三角形内切圆的圆心坐标和半径，然后再用 p5.js 绘制出这个内切圆。

步骤

1. 绘制三角形

我们使用 p5.js 中的 triangle() 函数，传入三个点的坐标作为参数，即可绘制出一个三角形。

代码片段如下：

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

function draw() {
  background(220);
  
  stroke(0);
  noFill();
  triangle(100,200, 300,200, 200,50);
}

这段代码可绘制出一个三角形，三个点的坐标分别为 (100,200), (300,200), (200,50)。

2. 计算内切圆圆心坐标和半径

接下来我们需要计算出这个三角形的内切圆的圆心坐标和半径。

首先，我们需要计算出三角形的三条边的长度，可以使用勾股定理来计算：

// 计算三角形三边长
let a = dist(100,200, 300,200);
let b = dist(300,200, 200,50);
let c = dist(200,50, 100,200);

接下来，我们可以使用海龙公式来计算三角形的面积：

// 计算三角形面积
let p = (a + b + c) / 2;
let s = sqrt(p * (p - a) * (p - b) * (p - c));

然后，我们可以使用下列公式来计算内切圆的圆心坐标和半径：

// 计算内切圆圆心坐标和半径
let r = 2 * s / (a + b + c);
let ix = (a * 100 + b * 300 + c * 200) / (a + b + c);
let iy = (a * 200 + b * 200 + c * 50) / (a + b + c);

3. 绘制内切圆

最后，我们使用 p5.js 的 ellipse() 函数来绘制内切圆，传入圆心坐标和半径作为参数即可。

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

function draw() {
  background(220);
  
  stroke(0);
  noFill();
  triangle(100,200, 300,200, 200,50);
  
  let a = dist(100,200, 300,200);
  let b = dist(300,200, 200,50);
  let c = dist(200,50, 100,200);
  let p = (a + b + c) / 2;
  let s = sqrt(p * (p - a) * (p - b) * (p - c));
  let r = 2 * s / (a + b + c);
  let ix = (a * 100 + b * 300 + c * 200) / (a + b + c);
  let iy = (a * 200 + b * 200 + c * 50) / (a + b + c);
  
  fill(255, 0, 0);
  ellipse(ix, iy, 2 * r);
}

效果

运行上述代码，即可看到绘制出的三角形与内切圆。

总结

通过上述步骤，我们可以使用 p5.js 绘制出一个三角形和它的内切圆，并且展示了如何计算内切圆的圆心坐标和半径。