javascript 处理艺术表现中的循环构造

z31licg0 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(120)

代码来自here：

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}

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

我看到t在每次迭代中增加了0.01，但是我不确定对于每个t值是否刷新了整个画布，或者是否存在:0}设置的端点，这是否正确？
看起来中间还有一个布尔调用，基本上是比较两个距离来确定填充哪些圆以及如何填充。如果<改为>，则圆将在再现上形成互补模式。
!被解释为here，作为一种节省空间和在声明后立即调用函数的方式。我推测它决定了如何根据布尔运算结果用特定的可变配色方案填充点。+!fill()和最后的?都很陌生，我猜它们相当于：如果x，y位置在星的边界内，则圆圈被着色（填充），但是"!"中的否定是混乱的。
我可以得到这个代码的主要结构点（循环和布尔）的英文解释，以匹配语法吗？
目前为止我已经了解到基本的循环是

for(y from 0 to the width of the canvas at increments of 7)
  for(x from... )
check if the distance from (x , y) to 360 is less than sin()^8 * 200 + 130
  If so fill (or not fill with the ! ????) with these colors
otherwise do nothing :0

JavaScript

来源：https://stackoverflow.com/questions/74925697/loop-construction-in-processing-artistic-rendition

2条答案

按热度按时间

wkyowqbh1#

这是正常编写时的外观

let t = 0;
const W = 720;
// https://p5js.org/reference/#/p5/draw
// `draw` needs to be in the global scope so p5 can use it
draw = () => {
  // create a canvas if this is the first frame
  if (!t) createCanvas(W, W);
  t += 0.01;
  // Use HSB and blending to do the fancy effects
  // The black circles are because we're ignoring stroke and so using its defaults
  // The blending will eventually hide it anyway
  colorMode(HSB);
  blendMode(BLEND);
  background(0, 0.1);
  blendMode(ADD);
  // iterate over 7px grid
  for(y = 0; y < W; y += 7) {
    for(x = 0; x < W; x += 7) {
      // center
      const H = 360;
      // distance from center
      const D = dist(x, y, H, H);
      // pick an alpha based on location and time
      const T = tan(noise(x, y) * 9 + t);
      // set fill color
      fill(x * y % 360, W, W, T);
      // magic to calculate the star's boundary
      // sine wave in polar coords, I think
      const S = sin(atan2(y - H, x - H) * 2.5 + 84)**8 * 200 + 130;
      // draw a circle if we're within the star's area
      // circle's color, alpha, and radius depend on location and time
      if (D < S) circle(x, y + 30, 4/T);
    }
  }
};

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

请注意，原始代码中有一些改动，它们只是为了使代码成为一行程序或减少字符数，对结果没有任何有意义的影响。

赞(0）回复(0）举报 2022-12-28

jm81lzqq2#

主要问题是+!与?和:0，这非常令人困惑，但显然它等效于

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)
    if(dist(x, y, H = 360, H) < sin(atan2(y - H, x - H) * 2.5 + 84)**8 * 200 + 130){
fill(x * y % 360, W, W, 
            T=tan(noise(x, y) * 9 + t)) 
circle(x, y + 30, 4/T)}else{0}}

?中的布尔值适用于dist()部分（Angular 的绝对值必须小于sin()... + 130。
+部分我仍然不理解，希望了解Processing或JS的人（不是我）能够解决这个问题。然而，它可能会强制执行识别并丢弃对于sin(atan2())来说太低的填充值（因此是!），这将发生在0和pi附近。
因为arctan2()是（here）

从0到2 pi，星星中尖峰的数量将是5的倍数。将代码改为< sin(2 * atan2(...)...使尖峰加倍的事实暗示fill()部分也处于其自身的布尔运算中。
布尔值的结果确定是否应用彩色填充（如果小于则应用）。
最后的:0是什么都不做的else。

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 处理艺术表现中的循环构造

2条答案

相关问题

热门标签

最新问答