processing on iphone with sinatra

app.rb

require "sinatra"
require "haml"
require "sass"


get '/' do
  haml :index
end

get '/style.css' do
  content_type 'text/css', :charset => 'utf-8'
  sass :style
end

index.haml

!!!
%html
  %head
    %meta{:'http-equiv' => 'Content-type', :content => 'text/html', :charset => 'utf-8'}
    %meta{:name => "viewport", :content => "user-scalable=no, width=device-width, minimum-scale=1.0, maximum-scale=1.0"} //iphoneで画面の幅を合わせる
    %meta{:name => "apple-mobile-web-app-capable", :content => "yes"}   //iphoneでフルスクリーンモードに
    %meta{:name => "apple-mobile-web-app-status-bar-style", :content => "black"} //iphoneでステータスバーを黒に
    %title Processing
    %link{:rel => 'stylesheet', :href => '/style.css', :type => 'text/css', :media => "only screen and (max-width: 480px)"} //iphone用のCSS
    %link{:rel => 'stylesheet', :href => '/style.css', :type => 'text/css', :media => "only screen and (min-width: 481px)"} //desktop用のCSS
    %script{:type => 'text/javascript', :src => '/javascripts/jquery.js'}
    %script{:type => 'text/javascript', :src => '/javascripts/processing.js'}
    %script{:type => 'text/javascript', :src => '/javascripts/myjs.js'}
  %body
    %canvas.processing //processingの描画エリアの確保

myjs.js

$(document).ready(function(){
  function move (e) {
    e.preventDefault();
    return false;
  }

  function click (e) {
    alert(e);
    return false;
  }
    //processingで外部ファイルの読み込み

    var processing_init = function(obj, url) {
        obj.each( function(){
            var canvas = $(this)[0];
            var p = Processing( canvas );
            var code = $(this).text() || p.ajax( url );
            Processing( canvas, code );
        });
    };
    processing_init( $('.processing'), 'javascripts/head-animation.pjs' );

  //document.addEventListener("touchstart", click, false);
  //document.addEventListener("touchmove", move, false);
  $(document).bind('touchmove', move);//iphoneで画面スクロールを禁止
  $(document).bind('touchstart', click); //iphoneのtouchstartイベント


});

default.pjs

/*
  PROCESSINGJS.COM - BASIC EXAMPLE 
  Delayed Mouse Tracking
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible
*/ 

// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 180, 100 );
  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-200;
  nY = mouseY-200; 
}