You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

p5.js代码中变量出现NaN引发控制台警告的问题求助

p5.js代码中变量出现NaN引发控制台警告的问题求助

我刚接触编程,学p5.js才两周左右。我想写一段代码,在画布顶部和右侧边缘的等距点之间绘制圆弧。我已经写了一个用直线实现的程序(做出一种“弦艺术”的效果),但想挑战一下换成曲线。

我在for循环(从第37行开始)里花了很长时间做几何计算,现在控制台一直警告我的两个数值变量是NaN。我折腾了好久找问题,现在已经当局者迷了!

以下是我目前的代码:

function setup() {
  //these are the variables that can be changed
  canvasWidth = 500;
  canvasHeight = 500;
  createCanvas(canvasWidth, canvasHeight);
  tileWidth = 500;
  tileHeight = 500;
  originX = 0;
  originY = 0;
  density1 = 100; //common factors of tileWidth and tileHeight only
  density2 = 100; //common factors of tileWidth and tileHeight only
  //stroke weight
  strokeWeight1 = 0.5;
  strokeWeight2 = 0.5;
  //background colours
  background1R = 255;
  background1G = 255;
  background1B = 255;
  background2R = 0;
  background2G = 0;
  background2B = 0;
  //stroke colours
  stroke1R = 0;
  stroke1G = 0;
  stroke1B = 0;
  stroke2R = 255;
  stroke2G = 255;
  stroke2B = 255;
}

function draw() {
  background(background1R, background1G, background1B);
  strokeWeight(strokeWeight1);
  stroke(stroke1R, stroke1G, stroke1B);
  noFill();
  //tile 1
  for (let topStartX = originX; topStartX < tileWidth; topStartX += density1) {
    for (
      let rightEndY = originY;
      rightEndY <= tileHeight;
      rightEndY += density1
    ) {
      //top points
      line(topStartX, originY, tileWidth, rightEndY); //right

      chordLength = sqrt(
        pow(tileWidth - topStartX, 2) + pow(rightEndY - originY, 2)
      ); //chord length

      tileHypotenuse = sqrt(pow(tileWidth, 2) + pow(tileHeight, 2));

      gradient = (rightEndY - originY) / (tileWidth - topStartX);
      normalGradient = (1 / gradient) * -1;

      chordMidpointX = topStartX + (tileWidth - topStartX) / 2;
      chordMidpointY = originY + rightEndY / 2;

      yInterceptOfNormal = chordMidpointY - normalGradient * chordMidpointX;
      xInterceptOfNormal = (yInterceptOfNormal * -1 / normalGradient);

      A = sqrt(pow(tileWidth - topStartX, 2) + pow(chordLength / 2, 2));

      line(0, yInterceptOfNormal, xInterceptOfNormal, 0); //normal to chord

      arcHeight = (chordLength / tileHypotenuse) * density1; //sagitta (height) of arc
      circleRadius = arcHeight / 2 + pow(chordLength, 2) / (8 * chordLength); //radius of arc ellipse
      circleDiameter = 2 * circleRadius; //diameter of arc ellipse

      t = arcHeight / A;
      arcCentreX = (1 - t) * chordMidpointX + t * (tileWidth - topStartX);
      arcCentreY = (1 - t) * chordMidpointY + t * rightEndY;

      circleCentreY =
        (topStartX *
          (pow(arcCentreX, 2) +
            pow(tileWidth, 2) -
            pow(arcCentreY, 2) +
            pow(rightEndY, 2)) +
          tileWidth *
            (pow(arcCentreY, 2) -
              pow(arcCentreX, 2) -
              pow(tileWidth, 2) -
              pow(rightEndY, 2))) /
        (2 * (topStartX - tileWidth) * (arcCentreY - rightEndY)); //y-coordinate of centre of arc ellipse
      circleCentreX =
        (pow(topStartX, 2) +
          pow(originY, 2) -
          2 * circleCentreY * originY -
          pow(tileWidth, 2) -
          pow(rightEndY, 2) +
          2 * circleCentreY * rightEndY) /
        (2 * (topStartX - tileWidth)); //x-coordinate of centre of arc ellipse
      //circle(circleCentreX, circleCentreY, circleDiameter);
      centralAngle = 2 * asin(chordLength / (2 * circleRadius)); //central angle subtending arc
      arc(circleCentreX, circleCentreY, circleDiameter, circleDiameter, HALF_PI, PI, OPEN);
    }
  }
  noLoop();
}

现在每次运行代码,都会收到以下控制台警告:

 p5.js says: [arcs_across_top-to-right.js, line 63] line() was expecting Number for the third parameter, received NaN instead.
 p5.js says: [arcs_across_top-to-right.js, line 95] arc() was expecting Number for the first parameter, received NaN instead.

我猜问题出在xInterceptOfNormal和circleCentreX这两个变量返回NaN上。我试过用float()来处理这些变量,比如:

xInterceptOfNormal = float(yInterceptOfNormal * -1 / normalGradient);

还有直接在arc调用里转换:

arc(float(circleCentreX), circleCentreY, circleDiameter, circleDiameter, HALF_PI, PI, OPEN);

但这些方法都不管用。

我真的搞不懂为什么会这样,也不明白为什么只有这两个变量出问题,其他变量好像都正常。如果有人能给我点思路或者解决办法,那就太感谢了! :)

备注:内容来源于stack exchange,提问作者Pineapple Storage

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.14 08:47:58