世界で一番短いクロックコード

注:本文は張磊のブログから転載した.
　　
一.概要
　　Processing.jsの著者はJohn Resigで、Jqueryに続いて2番目の力作だ.
　　Processing.jsは、教育の可視化されたプログラミング言語と実行環境を提供します.プロセスプログラムを作成することによって、教師は複雑な物理、化学、数学の原理イメージを学生に展示することができる.例えば、様々な曲線図、波線、粒子、分子構造を描くなど、生理衛生の授業でオタマジャクシの群れが泳いでいるなどのダイナミックな図形を描くこともできます.
　　Processing.jsはオープンなプログラミング言語で、FlashやJavaウィジェットを使用しない前提で、プログラム画像、アニメーション、インタラクティブなアプリケーションを実現することができます.
　　Processing.js JavaScriptを使用してシェイプsharpを描画し、HTML 5 canvas要素を操作して画像アニメーションを生成します.
　　Processing.jsは軽量で、把握しやすく、理想的なツールを提案し、データを可視化し、ユーザーインタフェースを作成し、Webベースのゲームを開発します.
　　
二.コア関数
コード:

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

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

三.世界最短のクロックコード誕生
コード:

　　void draw() {
　　 size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160);    
　　stroke(255);
  　　line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, 　　　　　　
　　sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
  　　line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, 　　　　　

　　sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
  　　line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, 　　　　
　　sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
　　}

　　
コードの意味化が非常に強く、1つの円、3つの線があり、これもこのフレームワークが達成する目的の一つであることがわかります.
四.完全なコード
コード:

　　< !DOCTYPE html>
　　< html>
　　< head>
    　　< body>
     　　< script src="http://files.cnblogs.com/iamzhanglei/processing.js" 　　　　　　
　　type="text/javascript">
        　　< script type="application/processing">
　　void draw() {
  　　size(200, 200);background(0); fill(80); noStroke(); ellipse(100, 100, 160, 160); stroke(255);
  　　line(100, 100, cos( TWO_PI*second()/60- HALF_PI) * 70 + 100, 
　　　　sin(TWO_PI*second()/60- HALF_PI) * 70 + 100);
  line(100, 100, cos( TWO_PI*minute()/60- HALF_PI) * 60 + 100, sin(TWO_PI*minute()/60- HALF_PI) * 60 + 100);
  line(100, 100, cos(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100, sin(TWO_PI*(hour()%12)/12- HALF_PI) * 50 + 100);
}
        < /script>
        < canvas>        HTML5,     、IE9       ··<  /canvas>
    < /body>
< /html>

　　
　　　-------------------------------------------------------------------
以下の文章にも興味があるかもしれません.
私はどのようにコンピュータのプログラミングを学びましたか.
「品質は構築プロセスにある」ですか?
HTML 5開発者が知りたいテクニックとツールの概要
10個のWeb開発設計関連リソースブログの推奨
モバイルアプリケーション開発ツールとプラットフォームの最適化
C言語の父の死は「セミコロン」の追悼を引き起こした
　　
　　--------------------------------------------------