processing.jsを使ってみた

・目的
・使用したもの
・方法
（４）まとめ

・目的

webページ上でprocessingを

実行出来るprocessing.jsを使って

みた。

・使用したもの

Raspberry pi(rasbian)

Apache2

mac mini

・方法

（１）processing.jsをダウンロード

　processing.jsを以下のサイト

　からダウンロード

　http://processingjs.org/download/

f:id:shangtian:20170803170420p:plain

上の写真の赤線部分をクリックすると以下

GitHubのサイトに飛ぶ。下の写真（図１）

の赤線をクリック。

f:id:shangtian:20170803170433p:plain

図１：ダウンロードページ

ダウンロードしたzipファイルを

解凍し、processing.jsをコピーしておく。

f:id:shangtian:20170812160455p:plain

（２）index.html

以下のhtmlファイル（図３）を作成

<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
 <title>Processing Demo</title>
<script src="./processing.js"></script>
</head>
<body>
 <canvas data-processing-sources="processing.pde"></canvas>
</body>
</html>

図３：index.html

（３） processingのコード

webページ上で動かしたいprocessing

のコードを図４に載せた。

int x,y;
void setup() {
  size(400,400);
  background(255);
  x = 0;
  y = 0;
}

void draw() {
  
  x++;
  y++;
  ellipse(x,y,10,10);
  
  if(x>width || y>height){
    background(255);
    x = 0;
    y = 0;
  }
}