レッド ■ ワン: red-one

本日，６月１０日は『時の記念日』らしいです．

• 時の記念日（日本）

  「日本書紀」の天智天皇10年4月25日（新暦6月10日）の項に、「漏刻を新しき台に置く。始めて候時を打つ。鐘鼓を動す。」とあることから。

  大正9年に制定。

6月10日 - Wikipedia より引用

本日，午前中に区役所へ行き婚姻届を提出してきました．

　これからの時を今から刻みはじめる

Processing.js 作品．
マウスイベントとJavascriptを使用した作品です．
マウスで線を描いてください．

Cherry Blos.

size(400, 400);
int cnt=0; //Counter
float trs(float s) {
 return 3.5*sqrt(s);
}
boolean fnc(float s, float r) {
 if (s<5) {
  return s+5 > r;
 }
 return  s*s*4/75+26/3 > r;
}
void setup() {
 background(230);
 strokeWeight(35);
 stroke(180, 120, 0, 80);
}
void mousePressed() {
 point(mouseX, mouseY);
}
void mouseDragged() {
 int dx=pmouseX-mouseX, dy=pmouseY-mouseY;
 float s=sqrt(dx*dx+dy*dy);
 s=trs(s);
 strokeWeight(35-s)
 line(pmouseX, pmouseY, mouseX, mouseY);

 float r=random(3,35);
 if (fnc(s, r)) {
  noStroke();
  fill(240, 180, 180, 180);
  ellipse(pmouseX+40-random(80), pmouseY+40-random(80), r, r);
 }
}
var btn=document.getElementById('button-09-clear');
if (btn) { btn.onclick=function () {setup();} }

• レッド ■ ワン: red-one: Processing.js で１週間遊んでみた: Processing Works#1

情報元:

• ブラウザでお絵描きプログラミング！ 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

最近，コメントスパムが多いので（一時的に）コメント投稿画面に verification （入力確認用の文字列・または音声）を表示するようにさせていただきました．
コメント投稿に一手間掛かってしまいますが，投稿時に表示される文字列を併せて入力してください．

従来通りユーザ登録等の制限はございません．
あくまで機械のボットと区別するためのものですので何方でも気軽にコメントを残してください．

以上です．