レッド ■ ワン: red-one

情報元:

• ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記

Processing.js がすごいのか Canvas タグがすごいのか，とりあえず遊んでみた．

random dot

int max=100;
Particle prt = new Particle[max];
size(200, 200);
frameRate(5);
int cnt, st;
void setup() {
 cnt=0;
 st =0;
 background(0);
 noStroke();
 prt[cnt] = new Particle();
 prt[cnt].paint();
}
void draw() {
 background(0);
 if (cnt < max) {
  cnt++;
  prt[cnt] = new Particle();
 } else if (st < prt.length) {
  prt[st].reset();
  st++;
 } else {
  st=0;
 }
 for (int i=st; i<cnt; i++) {
  prt[i].paint();
 }
 for (int i=0; i<st; i++) {
  prt[i].paint();
 }
}
class Particle {
 int x, y;
 int c;
 float dev;
 float al;
 float r;
 Particle() {
  dev=0.9;
  this.reset();
 }
 void reset() {
  al=100;
  x=(int)random(width);
  y=(int)random(height);
  c=(int)random(255);
  r=random(5, 60);
 }
 void paint() {
  if (8<al) {
   al-=dev;
  }
  fill(c, 255, 255, al);
  ellipse(x, y, r, r);
 }
}

イベント関係

　マウス位置の取得にはスクロール位置が考慮されていないので，修正する必要がある．
　ソースコードを読むと Canvas 上のマウス位置の取得には，event.clientX(or clientY)と[element].offsetLeft(or offsetTop)が使われているのだけれど，clientX は表示領域の XY 座標，offsetLeft は body のトップからの位置座標になるためスクロール量を別途加算します．

   p.mouseX += window.scrollX || document.body.scrollLeft || document.documentElement.scrollLeft;
   p.mouseY += window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;

processing.jsファイルの１６１２行の次から上記２行を追加しよう．　ただし，スタイルシートでbody {margin:0; padding:0;}のように指定しないと IE6 で座標がずれてしまうことを確認したので注意．

Ball Shower, Dark - Stained Glassic -

size(200, 200);
//背景
background(120);
//noStroke();
strokeWeight(1);
stroke(0, 200);
for (int i=0; i<80; i++) {
 int r = random(5, 60), c = random(255);
 fill(random(255), 255, c, 100);
 ellipse(random(width), height-(c/255)*height, r, r);
}
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}

描画関係

• テキスト表示は Fx.3 より対応．
  Firefox は一応1.5から Canvas タグに対応とされていますが，Fx.1.5 ではイベント関係からなのか正常に動作しないスクリプトもあります．
• 現在，ellipse（円・楕円描画）には，楕円の幅と高さを指定できるのだが，幅と高さが同値でないと図形が描画されない．
  つまり，円しか描画できない．
• あと，IEでは円に枠線（stroke）を指定しても枠線は描画されない．
• 円弧（arc）の枠線に余計な線が付加される．

Ball Shower, Dark

size(200, 200);
//背景
background(120);
noStroke();
for (int i=0; i<80; i++) {
 int r = random(5, 60), c = random(255);
 fill(random(255), 255, c, 100);
 ellipse(random(width), height-(c/255)*height, r, r);
}
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}

不満点

• グラデーションがない．地味にピクセルやラインで色を変えて描く方法しかない
• 切抜き，トリミング，描画範囲のマスク掛けなどがほしい

　最低でもこの２点がサポートされなければ，グラフィックアートを作るのは難しい……．

Rays Mix

size(200, 200);
//背景
background(120);
strokeWeight(1);
for (int i=0; i<height; i++) {
 stroke(0, 255*i/height);
 line(0, i, width, i);
}
CRay rays = new CRay[20];
for (int i=0; i<rays.length; i++) {
 rays[i] = new CRay(i);
 rays[i].paint();
}
class CRay {
 int a;
 int x0, y0, x1, y1;
 int r;
 int idx;
 CRay(int _i) {
  idx = _i;
  a = (int)random(6);
  r = random(1, 3);
  strokeWeight(r);
  switch (a) {
  case 0:
   x0=0;y0=random(height); x1=random(width);y1=0;break;
  case 1:
   x0=0;y0=random(height); x1=width;y1=random(height);break;
  case 2:
   x0=0;y0=random(height); x1=random(width);y1=height;break;
  case 3:
   x0=random(width);y0=0; x1=width;y1=random(height);break;
  case 4:
   x0=random(width);y0=0; x1=random(width);y1=height;break;
  case 5:
   x0=width;y0=random(height); x1=random(width);y1=height;break;
  }
 }
 void paint() {
  stroke(255, idx*5+50);
  line(x0, y0, x1, y1);
 }
}

補足・注意

　グラデーション描画は Canvas タグではサポートされているので，Canvas のデバイスコンテキストを取得するか，Processing.js を自分でいじるかすれば可能です．　けど，これって反則気味？

• ブラウザでお絵描きプログラミング！ Processing.js 登場！ - IT戦記
• John Resig - Processing.js
• Language (API) \ Processing 1.0 (BETA)
• Processing 1.0 _ALPHA_ » Reference（Alpha版リファレンス・日本語版）
• http://ejohn.org/apps/processing.js/examples/basic/
• Processing.jp
• Canvas tutorial - MDC
• Canvas - 線形グラデーションを指定する - HTML5.JP
• Canvas - 円形グラデーションを指定する - HTML5.JP