2

I'm trying to use the javascript processing framework with a html5 canvas, but I have a problem with simple addition of 3 numeric variables and I can't figure it out. here's the code:

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

the lines with the addition to x and y must be the problem. I get "NaN" from that expression although it's 3 numerical values. any ideas?

1 Answer 1

3

JavaScript identifiers are case-sensitive, so nx and ny are not the same as nX and nY:

nx = x;
ny = y;

...

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.