ProcessingのプログラムをWebページで実行してみる
どうも、ごぶさたです。
最近、研究としての自然言語処理的な作業に飽きてきまして、ビジュアルプログラミングに手を出しています(たかが知れていますが…)。で、手を出したのが、Processingという言語です。詳しくはWikipediaとかを見てほしいのですが、要はグラフィックに強いプログラミング言語という感じです。
作品を公開するには、プログラムを公開するか、画像として公開するか、Webページに埋め込むなどの手段があります。今回は、Webページに埋め込む方針で行こうと思います。
なお、今回はProcessingのインストールは省略します。…インストーラがあるので簡単だと思いますので…。
今回Webページに公開する方法はいくつかあるみたいですが、今回はProcessing.jsというjavascriptのライブラリを使います。
1.Processing.jsの入手
では、さっそく手に入れてきましょう。入手先はこちらのサイトから。ダウンロードしたら、普通のjavascriptと同じようにディレクトリに配置してください。
2.コードを書いてみる
次にコードを書いていきましょう。必要なのは、先ほどダウンロードしたjsファイルの呼び出しと、実際の実行コードです。今回は、めんどくさかったので、HTMLに直書きして以下のようになりました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html > <head> <title>Processing Sample</title> <meta charset="utf-8"> <script type="text/javascript" src="./js/processing.js"></script> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById('main_canvas'); // Processing のソースコードが書かれた script 要素 var codeElm = document.getElementById('processing-code'); // 要素の内容を取得する var code = codeElm.textContent || codeElm.innerText; Processing(canvas, code); }; </script> <script id="processing-code" type="application/processing"> MouseEffect me; void setup() { frameRate(30); size(innerWidth,innerHeight); background(0); me = new MouseEffect(50); } void draw() { size(innerWidth, innerHeight); fadeToWhite(); stroke(mouseX, 0, mouseY); me.update(); me.draw(); } // マウス操作関係 class MouseEffect { Effect[] effects; MouseEffect(int num) { effects = new Effect[num]; for(int i=0; i<effects.length; i++) effects[i] = new Effect(); } void update() { for(int i=0; i<effects.length; i++) effects[i].update(); } void draw() { mousePointer(); for(int i=0; i<effects.length; i++) effects[i].draw(); } void mousePointer() { stroke(125); ellipse(mouseX, mouseY, 10, 10); stroke(mouseX, 0, mouseY); } } class Effect { float t; float Xrate, Yrate; float mouseXmem, mouseYmem; float slowRate; Effect() { t = random(-10, 10); Xrate = random(10, 30) * (int(random(2))*2-1); Yrate = random(10, 30) * (int(random(2))*2-1); slowRate = random(5, 13); } void update() { t += 0.25; mouseXmem = (mouseX + mouseXmem*slowRate) / (slowRate+1); mouseYmem = (mouseY + mouseYmem*slowRate) / (slowRate+1); } void draw() { ellipse(sin(t)*Xrate+mouseXmem, cos(t)*Yrate+mouseYmem, 5, 5); } } //フェードアウト void fadeToWhite() { noStroke(); fill(255, 50); rectMode(CORNER); rect(0, 0, width, height); } </script> <style type="text/css"> body{ margin: 0px; padding: 0px; position: relative; } body #wrapper{ width: 100%; height: 100%; position: fixed; } </style> </head> <body> <div id="wrapper"><canvas id="main_canvas"></canvas></div> </body> <html> |
このコードにより、ブラウザのウィンドウ全体で実行することができます。
3.動作確認
では、最後にブラウザで先ほどのHTMLファイルを平出動作を確認してみてください。なんかマウスポインタにちらちらしたのがついて来れば成功です。
ダメだった方は、jsファイルの配置とパスがあっているかを確認してください。
以上です。お疲れさまでした。
「Processing.js」(公式サイト)
「Processing.js基礎最速入門」