Processing.jsとは?

Processing.jsとは、ProcessingというJavaベースのプログラミング言語をWebブラウザで再現できるJavaScriptライブラリです。

さっそく使ってみる

準備するもの

Processing.js
↑のリンクからライブラリを落とします。*1
適当にフォルダを作り、その中に放り込んでおきましょう。

ライブラリを読み込む

作ったフォルダに適当な名前を付けたhtmlファイル*2を作り、簡単なベースを作っておきます。

<html>
<head>
<title>ProcessingTest</title>
</head>
<body>
Sample
</body>
</html>

次に、肝心要のProcessing.jsファイルを読み込みます。
↑のソースコードの<head>~</head>間に

<script type="text/javascript" src="processing.js"></script>

を追加します。ひとまず、読み込みは完了

Javascriptコードを書く

ソースコードの<head>~</head>間に以下のJavaScriptのコードを書き加えていきます。

<script type="text/javascript">
      window.onload = function() {
      var canvas = document.getElementsByTagName('canvas')[0];
      var code = "size(400,400);noStroke();
                  fill(255, 0, 0, 255 * 0.5);ellipse(200, 150, 200, 200);
                  fill(0, 255, 0, 255 * 0.5); ellipse(250, 250, 200, 200); 
                  fill(0, 0, 155, 255 * 0.5); ellipse(150, 250, 200, 200);";
      Processing(canvas, code);
      }
</script>

単純に丸を描くだけのコードです。
軽く説明~

window.onload = function()

ページを開いたときに処理を開始する関数・・・みたいな意。よく使います。

var canvas = document.getElementsByTagName('canvas')[0];

varは変数です。後述するcanvasの部分を拾ってくる・・・みたいな意。

var code =...

ここにProcessingのコードを書いていきます。それをその後のProcessing関数で読み込みます。

Processing(canvas, code);

Processing関数を呼び出します。描画先とコードを引数にします。*3

canvas要素を加える

ソースの<body>~</body>間に以下のコードを書き加えます。

<div>
    <canvas width="400" height="400"></canvas>
</div>

canvas要素を加えるだけです。<div>はまぁ、スルーの方向で。
このcanvas要素を描画先に指定して、描画するわけですね。

ひとまずは完成

サンプル

何も起きねぇぞ、ボラァって人

なるほど、IE使いですか・・・。残念ですね。
IEにはcanvas要素に対応していません。F**K IE!!!

仕方ないので・・・。
excanvas.js
↑のjsライブラリを使って擬似再現させます。
ソースの<head>~</head>の間に

<script type="text/javascript" src="excanvas.js"></script>

を加えてexcanvas.jsを読み込みます。



ちなみに、IEでの動作はコードによっては激重になる可能性があると思います。

主要リンク

以下編集中...

サンプル2

written by jigsaw


*1 右クリで名前を付けて保存。一応
*2 拡張子は"html"です。一応
*3 引数でいいんですよね?ね?ね?自信ないです。。
*4 ちなみにですが、jQueryの作者です。
*5 jQueryのロゴマークってDEVOのかぶりものっぽいよね!

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2010-10-24 (日) 17:14:24 (2586d)