This is my markup:
<html>
<head>
<script type="text/javascript" src="processing.min.js"></script>
</head>
<body>
<canvas data-processing-sources="main.pde" height="500" width="700"></canvas>
</body>
</html>
This is my main.pde file:
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw() {
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
When the page loads I get an error in the console that reads:
Uncaught Processing.js: Unable to load pjs sketch files: main.pde ==> File is empty.
Why is this happening? the file is clearly not empty. I have no clue whats going wrong and have been at this for over an hour. Please help.
From the processing issue tracker:
From the processing.js quickstart:
So if you use node.js as a html server, it must serve the XMLHTTPRequests.