javascript 处理框架加法 NaN

Question

我正在尝试将 javascript 处理框架与 html5 canvas 一起使用，但我在简单添加 3 个数字变量时遇到问题，我无法计算出来。这是代码：

var radius = 50.0;

var x, y;
var nX, nY;
var delay = 16.0;

// Simple way to attach js code to the canvas is by using a function
function sketchProc(processing) {


processing.size(200,200);
processing.strokeWeight(10);
processing.frameRate(15);
x = processing.width/2.0;
y = processing.height/2.0;
nx = x;
ny = y;



  // Override draw function, by default it will be called 60 times per second
  processing.draw = function() {

    radius = radius + Math.sin(processing.frameCount/4);

    x+=((nX-x)/delay);
    y+=((nY-y)/delay);

    processing.background(100);

    processing.fill(0,121,184);

    processing.stroke(255);

    processing.ellipse(x,y,radius,radius);
  };


  processing.mouseMoved = function(){
        nX = processing.mouseX;
        nY = processing.mouseY;

    }
}

var canvas = document.getElementById("canvas1");
// attaching the sketchProc function to the canvas
var p = new Processing(canvas, sketchProc);
// p.exit(); to detach it

x 和 y 相加的那几行一定是问题所在。尽管它是 3 个数值，但我从该表达式中得到 "NaN" 。有什么想法吗？

Answer 1

JavaScript 标识符区分大小写，因此 nx 和 ny 不同于 nX 和 nY:

nx = x;
ny = y;

...

x+=((nX-x)/delay);
y+=((nY-y)/delay);

javascript 处理框架加法 NaN

javascript processing framework addition NaN

javascript

processing

numeric

nan

addition