title: processing js sketch not loading
body: <p>This is my markup:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="processing.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;canvas data-processing-sources="main.pde" height="500" width="700"&gt;&lt;/canvas&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my <code>main.pde</code> file:</p>
  
  <pre><code>// 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;  
  }
  </code></pre>
  
  <p>When the page loads I get an error in the console that reads:</p>
  
  <pre><code>Uncaught Processing.js: Unable to load pjs sketch files: main.pde ==&gt; File is empty. 
  </code></pre>
  
  <p>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.</p>