p5.js中t计数器与帧间叠加机制的技术问询

研究的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>

代码来源：Twitter用户Hau_kun

已理解的内容 #

• 代码末尾的:0是三元运算符?的else分支，无实际绘制操作
• t是无终止条件的递增计数器，每帧执行t+=.01
• 保留t+=.01时，图像有帧间叠加的双重轮廓；注释后仅抖动无叠加，背景表现不同，推测t+=.01实现了帧间信息叠加，直到新内容覆盖旧内容

核心疑问 #

1. 每帧是否会从t=0开始重新生成所有历史信息？
2. 帧间是存在延迟还是叠加机制？前帧信息如何被保留？
3. 是否t的迭代范围随每帧持续扩大，但始终从t=0开始？

验证测试代码及结果 #

测试代码 #

t=0
draw=_=>{t||createCanvas(W = 720,W)
t +=0.01
console.log(frameCount)
for(y = 0; y < W; y += 2)
  for(x = 0; x < W; x+=2)

point(x+ random(0,frameCount), y+ random(0, frameCount))}

测试结果 #

画布很快变为全黑，原因是启用t+=.01后，每帧都会在前帧基础上绘制，形成无限叠加。

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