Processing.jsやってみた

javascript

Processing.js入門

wise9の連載を見ててゲームプログラミングしたいなと思いつつ
出来ずにいたのですが、Processing.jsから入門してみたいと思います。

Processing自体はこの連載第１回 Processing.js で初めてのゲームプログラミングが分かりやすいと思うので、
（第4回までやりました。分かりやすいです。ありがとうございますm(_ _)m）
ここではHTML5とJavaScriptを使ってブラウザでProcessingを動かすまでのことを書きます。

enchant.jsもやってみようと思ってます。

準備

ここからLatest Stable Version: 1.1.0を落としてきました。
http://processingjs.org/download

HTMLファイルを作ってProcessing.jsを読み込んでゴニョゴニョ

<!DOCTYPE html>
<html>
<head>
  <title>Processing</title>
  <meta charset="utf-8">
</head>
<body>
  <canvas width="500" height="400"></canvas>
    
  <script src="../libs/js/processing.js-1.1.0/processing-1.1.0.js"></script>
  <script>
    window.onload = function(){
      // canvas要素
      var canvas = document.getElementsByTagName('canvas')[0];
      // Proccessingのコードが書かれたscript要素
      var codeElm = document.getElementById('processing-code');
      // 上記要素の内容を取得
      var code = codeElm.textContent || codeElm.innerText;

      new Processing(canvas, code);
    };
  </script>

  <script id="processing-code" type="application/processing">
    //ここにProcessingのコードを書いていく
  </script>

</body>
</html>

上記コードのこの部分にwise9で紹介されているProcessingのコードを書けばOKです

<script id="processing-code" type="application/processing">
  //ここにProcessingのコードを書いてい
</script>

参考URL

ブラウザでお絵描きプログラミング！ Processing.js 登場！