前回、SVG と Javascript でザックリと作成した正式名称不明な「影時間に移行するときに現れる時計」の再現の Flash 版とケータイ待受（Flash Lite 1.1）版を作成しましたので公開します。
<iframe src="http://red-one.appspot.com/kagejikan_clock.svg" />
Products
Processing.js 作品．
マウスイベントとJavascriptを使用した作品です．
マウスで線を描いてください．
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();} }
情報元:
Processing.js がすごいのか Canvas タグがすごいのか，とりあえず遊んでみた．
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);
}
}
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;body {margin:0; padding:0;}のように指定しないと IE6 で座標がずれてしまうことを確認したので注意．
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);
}
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);
}
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);
}
}
HTML エリアの右クリックメニュー（コンテキストメニュー）に『タブを閉じる』『右タブに移動』などの項目を追加する Firefox Extension（拡張機能）．
Firefox ブラウザにはタブブラウジングの様々なショートカットキーが用意されていますが，マウスのみで操作するときにはコンテキストメニューから色々操作できた方がいいと思い拡張機能 Context Tab Access Menus (CTX) を作りました．
個人的にはマウスジェスチャよりも，分かりやすい，簡単，確実，初心者向けと考えています．
# 自分はマウスジェスチャ好きではないので．
# ネーミングセンス０です．
名前→色変換してくれるだけのシンプルな Web アプリです．
