<?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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="assets/css.css" type="text/css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="processing.js, visualization, animation, canvas, interactive" />

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

<title>Snake Processing.js</title>      
<script language="javascript" src="js/processing.init.js"></script>

<?php 
include("includes/snake-processing.js.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">Kildekode</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-snake-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-Snake.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");
?>
        
            <p>&nbsp;</p>
            <h1>Processing.js Snake</h1>
            
            <p>A snake that follows your cursor.</p>
            
            
            <div class="learning-demo px500x300" align="center">
            <script type="application/processing">
            float[] x = new float[20];
            float[] y = new float[20];
            float segLength = 10;
            PImage a;
            
            void setup() {
              size(500, 300);
              smooth();
              a = loadImage("dirt.jpg");
            }
            
            void draw() {
              background(226);
              image( a, 0, 0 );
              dragSegment(0, mouseX - 8, mouseY - 8);
              for(int i=0; i < x.length-1; i++) {
                dragSegment(i+1, x[i], y[i]);
              }
            }
            
            void dragSegment(int i, float xin, float yin) {
              float dx = xin - x[i];
              float dy = yin - y[i];
              float angle = atan2(dy, dx);  
              x[i] = xin - cos(angle) * segLength;
              y[i] = yin - sin(angle) * segLength;
              //stroke(23, 79, 4, 220);
              
              pushMatrix();
              translate(x[i], y[i]);
              rotate(angle);
              
              color c;
              
              if ( i % 3 == 1 )
                c = color(0, 0, 0, 255);
              else if ( i % 3 == 2 )
                c = color(255, 255, 0, 255);
              else
                c = color(255, 0, 0, 255);
            
              stroke( c );
              strokeWeight(10);
              line(0, 0, segLength, 0);
              
              if ( i == x.length - 1 )
              {
                fill( c );
                noStroke();
                beginShape(TRIANGLES);
                vertex(0, 5);
                vertex(-2 * segLength, 0);
                vertex(0, -5);
                endShape();
              }
              
              if ( i == 0 )
              {
               // stroke(0, 255);
               noStroke();
               fill(0, 255);
               ellipse(segLength, -2, 3, 3);
               ellipse(segLength, 2, 3, 3);
                //point(segLength, -2);
                //point(segLength, 2);
              }
              
              popMatrix();
            }
            </script>
            
            <canvas width="500" height="300" align="center"></canvas></div></p>
            <div style="height:0px;width:0px;overflow:hidden;"></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>

            <p>This page is optimized for firefox and google Chrome.
            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>
    </noscript>

        <br/>
        <br/>
<?php 
include("includes/footer.inc.php");
?>

        </div>
    </div>
</div>  
</body>  
</html>