<?php
//enable visitors to see the PHP source code of current file
$me basename($_SERVER['PHP_SELF']);
if(isset(
$_GET['showPHP'])){
    
show_source("$me");    
    die();
}
?>
<!DOCTYPE html>
<head>
<link href="assets/css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--This meta element defines keywords for my page:-->
<meta name="keywords" content="HTML5, canvas, Jonas, Grolin " /> 

<!--This meta element identifies the document for search engines as being intended for EN="English" readers.-->
<meta http-equiv="Content-Language" content="en"/>

<title>Processing.js Interactive ball</title>      
<script language="javascript" src="js/processing.init.js"></script>
<script language="javascript" src="js/processing.js"></script>
<?php 
include("includes/header.inc.php");
?>

</head>
<body>
<div id="wrapper">
    <div id="center-box">

        <div class="menu bubplastic horizontal aqua">
            <ul>
                <li><span class="menu_r">
                <a href="/mobile/index.php" target="_self">
                    <span class="menu_ar">Mobile</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="?showPHP" target="_self">
                    <span class="menu_ar">Source code</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="sitemap.html" target="_self">
                    <span class="menu_ar">Site map</span>
                </a></span></li>
                
                <li><span class="menu_r">
                <a href="processing.js-javascript-html5-dk.php" target="_self">
                    <span class="menu_ar"><img src="image/dk-icon.png" alt="Dansk flag"/> Dansk</span>
                </a></span></li>
        
                <li><span class="menu_r">
                <a href="processing.js-javascript-html5.php" target="_self">
                    <span class="menu_ar"><img src="image/eng-icon.png" alt="English flag"/> English</span>
                </a></span></li>
            </ul>
          <br class="clearit" />
        </div>

<?php 
include("includes/header_img.inc.php");
?>
        <div id="left-right-padding">
<?php 
include("includes/navigation.inc.php");
?>
    
        <div style="clear: left;"></div>
        <h1>Interactiv ball</h1>
        <h4>Processing.js uses Javascript to draw shapes and 
        manipulate images on the HTML5 Canvas element.</h4>

          <div align="center">
<script type="application/processing">
        /* 
          BASIC EXAMPLE
          Delayed Mouse Tracking  
          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( 400, 400 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 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;  
}
</script>

                <canvas width="400px" height="400px" align="absmiddle"></canvas>
                  <br/>
            </div>

<noscript>          
       <div id="browser-support">
              <a href="http://www.mozilla.com/en-US/firefox/fx/" title="Download Firefox" target="blank" rel="nofollow">
              <img src="image/browser-support/firefox.png" alt="Firefox supported" width="70" height="70" /></a>
              
              <a href="http://www.google.com/chrome" title="Download Google Chrome" target="blank" rel="nofollow">
              <img src="image/browser-support/google-chrome.png" alt="Google Chrome supported" width="70" height="70" /></a>
              
              <a href="http://www.opera.com/" title="Download Opera" target="blank" rel="nofollow">
              <img src="image/browser-support/opera.png" alt="Google Chrome supported" width="70" height="70" /></a>

              <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages" 
              title="Download Internet Explorer 9" target="blank" rel="nofollow">
              <img src="image/browser-support/ie9.png" alt="Internet Explorer 9 supported" width="70" height="70" /></a>
        </div>

        <div id="left-right-padding">
            <p>This page is optimized for firefox and google Chrome.<br/>
            It will not work with old versions of Internet explorer. 
            Internet explorer 6, 7 and 8 doesn't support Processing.js,  
            border-radius and 
            <a href="http://acupuncture-n-herbs.com/Browser_Redirect" style="color:#f00; 
            text-decoration:none;" rel="nofollow">many</a> other 
            things that should be visible on the Internet. 
            Internet explorer 9 is only available for vista and windows 7.</p>
            <br/>
</noscript>
        
        <br/>
        <br/>
<?php 
include("includes/footer.inc.php");
?>
        </div>
    </div>
</div>
</body>
</html>