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
相关产品推荐
相关产品推荐

