raspberrypiでprocessing.jsを動かす、
つまりlinuxマシン上でprocessing.jsを動かす方法。
raspberrypi上でも今のところ動作が重いなどの症状は無いです。
まず、processing.jsのサイトからprocessing.jsをダウンロードしてくる。
http://processingjs.org/
processing.jsとprocessing.min.jsはファイルサイズの違いだけであるので、processing.jsを直接いじる必要がなければminの方をダウンロードする。
落としてきたファイルをteratermなどを用いてraspberrypiに転送。
自分はubuntuのターミナルから行ったのでwindowsだと少し違うかもしれない。
ipaddressの部分を適宜自分のサーバーのアドレスにしてください。
|
1 |
user@user-Prime-Series:~ scp "home/user/desktop/processing.min.js" pi@ipddress:/var/www/programfiles |
raspberrypi側の/var/www上にprogramfilesというディレクトリを作ってそこに保存しました。
アクセスできるディレクトリならば基本的にどこでも良いです。
これで準備は完了。
以下のようにhtmlファイルを書きます。
scriptタグでprocessing.jsを読み込み、canvasで表示するprocessingのファイルを読み込みます。
|
1 2 3 4 5 6 7 8 9 10 |
<html> <head> <meta charset = "utf-8"> <title>processing DEMO</title> <script src="processing.min.js" type= "text/javascript"></script> </head> <body> <canvas id = "sample" data-processing-sources="sample_pde.pde" width="200",height="200"></canvas> </body> </html> |
今回は簡単のため、htmlとprocessingのソースコードは同じディレクトリ内に置きました。
適宜、参照することで別のディレクトリでも利用できます。
サンプルを動かすとこんな感じ。もしかしたらchromeだと動かないかも。。。
LINK:Processing.jsのデモプログラム
参考として使用したprocessingのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 |
void setup(){ size(200,200); noStroke(); } void draw(){ background(255); fill(125,0,0); ellipse(mouseX,mouseY,20,20); } |