プログラマのオッサンの唄: Processing.js の最小サンプル

2012年9月25日火曜日

Processing.js の最小サンプル

画像処理プログラミング言語の Processing を JavaScripｔから利用できる Processing.js の最小サンプルを作ってみた。

▽作成したHTML

<pre class="prettyprint"> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="processing-1.4.1.js" type="text/javascript"></script>
    <script type="text/processing" data-processing-target="mycanvas">
    void setup() {
      size(200, 200);
    }
    void draw() {
      background(0);
      fill(255);
      rect(10, 10, 20, 20);
    }
    </script>
  </head>
  <body>
    <p>
    <canvas id="mycanvas"></canvas>
    </p>
  </body>
</html>
</pre>

▽実行結果

2012年9月25日火曜日

Processing.js の最小サンプル

0 件のコメント:

コメントを投稿