p5.js布尔变量为真时椭圆尺寸变量i增减失效问题求助

i值修改不生效是两个代码逻辑错误叠加导致的，对应p5.js的运行机制：

• 变量作用域配置错误：当前代码在draw函数内部使用let i = 30声明局部变量，p5.js的draw函数默认以每秒60次的频率循环执行，每一次循环启动时，都会重新创建一个值为30的全新i变量。你在if判断内修改的i，只是当前循环帧的临时局部值，draw函数执行完毕后就会被销毁，既不会和之前的绘制操作产生关联，也不会影响下一次循环的初始值。
• 代码执行顺序错误：当前代码把ellipse(40, 40, i, i)的绘制语句放在了if块修改i值的前面。p5.js按照代码从上到下的顺序逐行执行，当执行到绘制椭圆的代码时，i还保持着初始的30，后续if块对i的加减操作发生在椭圆绘制完成之后，就算i的值被修改，也完全不会影响已经渲染完成的椭圆尺寸。

同代码块内的rect能正常绘制，是因为rect的绘制语句本身就写在if块内部，触发判断时直接在当前帧完成了渲染，自然可以正常显示。

按以下步骤调整代码即可实现预期效果：

• 把控制椭圆尺寸的i变量挪到draw函数外部的全局作用域，和已定义的两个布尔变量放在一起，避免每帧被重新初始化。
• 调整draw内部的代码执行顺序：先完成视线状态判断、i值的加减逻辑，最后再调用ellipse方法用更新后的i值绘制椭圆。
• 补全两个视线布尔值的复位逻辑：不要触发一次判断就永久把值设为true，要在不满足视线方向判断条件时，把对应布尔值切回false，避免状态永久锁死。
• 补充每帧的背景清屏语句，避免多帧绘制的图形叠加残留。

修正后的可运行代码参考：

var lookingLeft = false;
var lookingRight = false;
var i = 30; // 全局声明i，跨帧保留数值

function draw() {
    background(255); // 每帧清屏，避免图形叠加

    // 视线判断逻辑，带状态复位
    if (nose.x > leftEye.x) {
        lookingLeft = true;
    } else {
        lookingLeft = false;
    }
    
    if (nose.x > rightEye.x) {
        lookingRight = true;
    } else {
        lookingRight = false;
    }

    // 先执行i值修改逻辑
    if (lookingLeft === true) {
        i = i + 10;
        rect(10, 10, 50, 50);
    }
    
    if (lookingRight === true) {
        i = i - 10;
        rect(300, 300, 50, 50);
    }

    // 最后绘制椭圆，使用更新后的i值
    ellipse(40, 40, i, i);
}

额外提示：可以给i值增加范围限制，比如设置i的最小阈值为20、最大阈值为100，避免椭圆尺寸过大或过小超出画布范围。

内容的提问来源于stack exchange，提问作者Saskia Smith