p5.js循环构建艺术渲染代码核心逻辑与语法技术问询

原始代码 #

JavaScript 实现 #

t=0
draw=_=>{t||createCanvas(W = 720,W)
t+=.01
B=blendMode
colorMode(HSB)
B(BLEND)
background(0,.1)
B(ADD)
for(y = 0; y < W; y += 7)
  for(x = 0; x < W; x+=7)
    dist(x, y, H = 360, H) +
      !fill(x * y % 360, W, W, 
            T=tan(noise(x, y) * 9 + t)) 
         < sin(atan2(y - H, x - H) * 2.5 + 84)**8 * 200 + 130?
circle(x, y + 30, 4/T) : 0}

HTML 依赖 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>

核心疑问解答 #

1. 画布刷新机制与:0}的作用 #

• 画布刷新：p5.js 中draw()函数默认每秒执行60次，每次执行都会调用background(0,.1)——这是用半透明黑色覆盖画布，属于「软刷新」，会保留之前绘制的淡痕，而非完全清空。所以每次t更新时，画布都会被刷新（带残留效果）。
• :0}：0是三元运算符condition ? expr1 : expr2的else分支占位符，因为条件不满足时无需执行任何操作，用0填充语法位置即可，无实际功能；}是draw()函数的闭合括号，和循环无关。

2. +!fill()与三元运算符的语法逻辑 #

这是代码的紧凑写法，拆解后逻辑更清晰：

• 三元运算符? :：整体结构为 [条件表达式] ? [满足时绘制圆形] : [不满足时无操作]，核心是根据条件判断是否绘制圆形。
• !fill(...)的作用：
  • p5.js的fill()无返回值（返回undefined），JavaScript中!undefined会转为布尔值true，而true在数值运算中等价于1。
  • +!fill(...)是把fill()调用和数值计算合并：先执行fill()设置当前绘制的颜色、透明度，再把!fill()转为1加到dist()结果中，参与后续条件判断。
  • 简言之：只要执行到该行代码，就会先设置填充样式，再用1修改距离数值，最终判断总和是否小于右侧阈值。
• <改>生成互补图案：条件反转后，原绘制区域变为不绘制，原不绘制区域变为绘制，自然得到互补视觉效果。

3. 循环与核心逻辑验证（中文说明） #

你的基础循环梳理基本准确，补充完整的逻辑说明：

循环逻辑：
- 外层循环：y从0开始，每次递增7，直到小于画布宽度720
- 内层循环：x从0开始，每次递增7，直到小于画布宽度720

核心判断：
计算「点(x,y)到画布中心(360,360)的距离 + 1」是否小于「sin(角度计算值)的8次方 ×200 +130」
  - 满足条件：用已设置的填充样式，在(x, y+30)位置绘制半径为4/T的圆形（T是tan(noise(x,y)*9 +t)的结果，控制圆的大小和透明度）
  - 不满足条件：无任何操作（用0占位）

内容的提问来源于stack exchange，提问作者Antoni Parellada