p5.js入门学习-递归

递归是一种函数的使用方法，其是指在函数内部存在调用自身的情况。

但是需要注意的是，该调用一定得有一个终止条件，否则会成为死循环。

// 创建画布，并让绘图函数只运行一次
function setup() {
  createCanvas(720, 560);
  noStroke();
  noLoop();
}
function draw() {
  drawCircle(width / 2, 280, 6);
}
// 自定义函数：drawCircle
// 参数1：x，图形x轴位置
// 参数2：radius，圆的半径大小
// 参数3：递归次数
function drawCircle(x, radius, level) {
  // 计算灰度值
  let tt = (126 * level) / 4.0;
  fill(tt);
  // 绘图工具
  ellipse(x, height / 2, radius * 2, radius * 2);
  // 判断是否继续进行递归处理
  if (level > 1) {
    // level如果不自减，就会成为死循环
    // 注意观察：每递归一次都会有左右一组圆，因为每一次递归都会执行下面两个drawCircle函数，具体的需要自己体会一下
    level = level - 1;
    // 左边一组圆
    drawCircle(x - radius / 2, radius / 2, level);
    // 右边一组圆
    drawCircle(x + radius / 2, radius / 2, level);
  }
}
new p5();

p5js 开源社区 - 乐述云享 (aleshu.com)