ニューラル株式会社|ハイブリッドOS|File System|ARM|Android|Java|制御システム|オープンシステム

 

技術者コラム

 
フォーム
 
第32回目:Processingでシューティング(Part4)
2014-10-18
筆者:村田
 
こんにちは。
 
今回はおまけ編です。Processing.jsというJavaScriptのライブラリを使うとProcessingをブラウザのcanvas上で動かすことができます。公式サイトのリファレンスを見るとファイル操作関連を除いてProcessingAPIがほぼそのまま動くようです。ちょっと面白そうなので紹介したいと思います。
 
まず、公式サイトからprocessing.js (または軽量版processing.min.js)をダウンロードします。同じディレクトリに以下のHTMLを書いてブラウザで開いてみて下さい。なおブラウザはSafari7.1で動作確認しています。IEでも大丈夫だと思いますけど・・
 
<!DOCTYPE html>
<head>
<script src="processing.js"></script>
<script type="text/processing" data-processing-target="canvas">
 
void setup() {
  size(300, 300);
  noStroke();
}
 
void draw() {
  fill(0, 255, 255);
  ellipse(150, 150, 50, 50);
}
 
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
 
canvasの中央に水色で円が描かれましたか?このようにProcessingのコードがそのまま動いちゃいます。楽しいライブラリですね。上記はProcessingの文法で書いていますが、JavaScriptの方が好きな方は以下のようにJavaScriptで書くこともできます。
 
<!DOCTYPE html>
<head>
<script src="processing.js"></script>
<script type="text/javascript">
 
window.onload = function(){
  var canvas = document.getElementById("canvas");
  var p = new Processing(canvas, function(processing) {
    processing.setup = function() {
      processing.size(300, 300);
      processing.noStroke();
    };
    processing.draw = function() {
      processing.fill(255, 0, 255);
      processing.ellipse(150, 150, 50, 50);
    };
  });
};
 
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
 
というわけで前回作ったシューティングプログラムをprocessing.jsを使ってWebにUpしてみました。以下のURLを開き、ゲーム画面を一回クリックすると上下左右キーでプレイヤーを操作できると思います。
 
・Shooting
http://muratamuu.github.io/Processing-ShootingGame/index.html
 
今回おまけ編で、もうチョイProcessingっぽいものを作ってみようかなと思いまして、あと一本プログラムを書いてこちらもWebにUpしました。以下のURLを開いて画面をクリックしてみてください。カラフルなにょろにょろがマウスポインタのそばに寄ってきてくるくる回ったりします。
 
・Rainbow Nyoro
http://muratamuu.github.io/Processing-RainbowNyoro/index.html
 
どうでしょう?ちょっとキモイかもしれません・・・。コードに興味のある方はブラウザの右クリックでHTMLソースを表示させてみれば中身を見ることができます。
 
[おわりに]
Processingはいかがでしたか?簡単にビジュアライゼーションできて遊べるとても楽しい言語だと思いました。プログラムの構造化などはあまり気にせずガンガン書いてみて、RUNしてちょっとパラメータいじって・・の繰り返しで結構ハマります。3Dや音楽なども扱えるので、プログラミングでアートしてみたい方はProcessingをお試しあれ。さて日曜は情報処理試験ですね。受験される方、頑張りましょう!!それではPart4までお付き合い頂きまして有り難うございました。
 
以上。