Skip to content

Raspberrypiでprocessing.jsを動かす

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の部分を適宜自分のサーバーのアドレスにしてください。

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のファイルを読み込みます。

<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のサンプルコード

void setup(){
  size(200,200);
  noStroke();
}

void draw(){
  background(255);
  fill(125,0,0);
  ellipse(mouseX,mouseY,20,20);
}

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です