Subscribed unsubscribe Subscribe Subscribe

CHROMA

世の中の "当たり前" を確認する

processing.jsこんにちは

processingjs

Processingを本気で覚える時に参考になりそうなサイトで紹介されてたブラウザでお絵描きプログラミング! Processing.js 登場!をやった。

書かれてるサンプルコード動かしてみる

ブラウザ上で表示させてみた
Processing.js の練習場

楕円

size(200, 200);
ellipse(100, 100, 100, 100);

ellipse
ディスプレイに楕円を描く。
最初の2つの数値で位置指定。3つめで幅、4つめで高さを設定する。
http://processingjs.org/reference/ellipse_/
起点は楕円の中点になってるのかな?

複数楕円(ランダム色指定)

size(200, 200);
background(0);
noStroke();

for (int i = 0; i < 100; i ++) {
  fill(random(255), random(255), 255, 100);
  ellipse(random(200), random(200), 60, 60);
}

stroke(noStroke)
図形の周りの線や境界線を描画するために使用する色を設定します。
デフォルトはRGBでの指定となっており、0~255で指定できるようになっています。
先頭に"#"をつけてhexColorも指定できる。
http://processingjs.org/reference/stroke_/

fill
図形を塗りつぶすために使用する色(中の色)を設定します。
色の指定方法についてはstrokeと同じです。

http://processingjs.org/reference/fill_/

int
”整数のデータタイプで小数点のない数をいう。整数(int)は最大が2,147,483,647 で最小が-2147483648まで扱うことができる。整数は、32ビットの情報である。”

http://processingjs.org/reference/int/
int(整数) - 引用に使用

ローカルでファイル作って動かす

手順

  1. Processing.js をダウンロードする。
  2. HTML ファイルを作って、Processing.js を読み込む。
  3. canvas 要素を挿入する。
  4. Processing という関数を呼び出す。

詳細な(と、いっても簡単)手順は冒頭で取り上げてるので省略
表示させてるjsも解釈できないところもなく省略

script 要素に Processing のソースコードを書く

下記参照でtextContentとinnerTextを理解したら読み取れた...? いや、textContentとパイプ2本(パターン論理和?であってるのかな)、あと下記のコードの

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

1番後ろの[0]がわからなかった。
明日中に解決する。
textContentは上記サンプルでやったみたいに要素とかぶっとばして単一のテキスト・ノードに置き換え。

オブジェクト, innerTextとinnerHTML
XML DOM textContent プロパティ
DOM の textContent と innerText について

IE対応

これ→explorercanvas落としてhtmlに貼ったらいいだけみたいなのでieで表示させてないけどまぁ、いいでしょう。

やってみて

おもしろかった。
時間掛かりそうだとか、コードどっさり書いてあるモノを触ってないからだと思うけど特に大きな障壁(わかんなかったところはあるけど!)もなく簡単なものを最初に触れてよかった。

ほんとはここまでが準備なので面白いところも難しいところもこれからっぽいけど今日はこのくらいで。
しばらくProcessing.jsネタを続けていこうと思います。