JavaScriptでコードを書くことにより、いろいろなPNG画像を生成できます。
「計算コード」の入力欄に、JavaScriptで下記のcolor_calc関数を定義してください。
function color_calc(img_data,width,height)
img_data：画像データの配列
width：画像の幅（整数）
height：画像の高さ（整数）
img_data[y][x].rで(x,y)の位置の赤の値（0〜255）、
img_data[y][x].gで(x,y)の位置の緑の値（0〜255）、
img_data[y][x].bで(x,y)の位置の青の値（0〜255）、
img_data[y][x].aで(x,y)の位置のアルファチャンネルの値（0〜255）を設定/取得できます。
img_data[y][x]の中身は、rgba_tオブジェクトです。
座標は左上が(0,0)で、右や下に行くほど値が大きくなります。
アルファチャンネルは、「アルファチャンネル有効」チェックボックスをオンにしないと反映されません。
補助用にcolor_calc関数以外の関数も定義できますが、名前によっては内部で使用している関数と衝突する場合があります。
エラーが出る場合、名前を変えてみてください。
ブラウザによっては、画像が表示できない場合があります。
その場合、「生成画像のBase64エンコード」に表示される文字列からデコードしてください。
function hsv2rgb(h,s,v) {
var result=new rgba_t();
if(s<=0){result.r=result.g=result.b=v;}
else {
var hi=Math.floor(h/60);
var f=(h/60)-hi;
var v2=Math.floor(v);
var m=Math.floor(v*(1-s/255));
var n=Math.floor(v*(1-s/255*f));
var k=Math.floor(v*(1-s/255*(1-f)));
switch(hi) {
case 0:
result.r=v2;
result.g=k;
result.b=m;
break;
case 1:
result.r=n;
result.g=v2;
result.b=m;
break;
case 2:
result.r=m;
result.g=v2;
result.b=k;
break;
case 3:
result.r=m;
result.g=n;
result.b=v2;
break;
case 4:
result.r=k;
result.g=m;
result.b=v2;
break;
case 5:
result.r=v2;
result.g=m;
result.b=n;
break;
}
}
return result;
}
function color_calc(img_data,width,height) {
var x,y,y2;
var hwidth=width/2;
for(y=0;y<height;y++) {
y2=y*width/height;
for(x=0;x<width;x++) {
var now_a=0;
var tmp=Math.sqrt((((hwidth-y2)*(hwidth-y2)+(hwidth-x)*(hwidth-x))))/hwidth;
var angle=Math.atan2(hwidth-y2,hwidth-x)*180/Math.PI-90;
while(angle<0)angle+=360;
while(angle>=360)angle-=360;
img_data[y][x]=hsv2rgb(
angle,
255,
tmp<=1?255*Math.sin(tmp*Math.PI/2):0);
now_a=tmp>1?0:tmp<0.95?255:Math.floor(255*Math.sin((1-tmp)*20*Math.PI/2));
img_data[y][x].a=now_a;
}
}
}
タブが入力できる入力欄は、WinOfSql( SQLの窓 )様のものを使用させていただきました。