～canvasアナログ描画入門～

ここではgetImageData()で得たImageの.dataをいじっていろいろ描画します

背景が白のテキストエリアのコードは改編して結果を見れます

～注意！～

※普通にcanvasの基本機能を使ったほうがはるかに速くて便利です。どうしてもこの方法が必要な人以外はすみやかにお帰りください。

※コードは無駄があったり間違ってたりしますのでご了承ください。

※図でcanvasを使っています。IE9以上が必要です。無い人はchromeかfirefoxをダウンロードすれば見れます（無料）

※一度作った関数は使いまわしてるので順番に見てかないとわけわかんないかもです

※製作者も数式を完全には理解していません。「こうすれば何故かこう動いてくれる」程度の参考にしてください。

～目次～

クリックでとびます

はじめに

canvas,ctxは配列にしています

番号は作った順なのでバラバラです

立ち上げが遅くなるので図は最初から表示されてはいません。

超基本

.dataは1ピクセルにつき4つのバイトデータをもつ一次元配列です。

赤、緑、青、透過度の順です。4つ目は複数のcanvasを重ねて使わない限り無意味です。

普通の配列で使えるメソッドはブラウザの種類やバージョンによって使えたり使えなかったりします

0～255の整数値しか入れてはダメです。

lenghを超えていじると遅くなります

中心座標（tx,ty）と半径（han）を決め、forで縦横にすべてのピクセルを見て中心からの距離が半径以内なら色をつけます。

中心からの距離の出し方は　（中心からのx座標の二乗＋中心からのy座標の二乗）の0.5乗です。

↓ここのen0への引数の値を適当に変えてスタートを押してみてね
function en0(ime,tx,ty,han,c1,c2,c3)

var a,b,c,d;
var ime,han,tx,ty,c1,c2,c3;

//テキストエリアを関数にしてるので
//argumentsで引数を取っている
a=arguments;
ime=a[0];//image
tx=a[1];//中心x座標
ty=a[2];//中心y座標
han=a[3];//半径
c1=a[4];//赤
c2=a[5];//緑
c3=a[6];//青
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
//(ty-a)*(ty-a)は外で計算しといたほうが早い

if(d<han){
ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;
};

c+=4;
};
};

このようにすべてのピクセルで計算して描画することを俺の脳内で勝手に

「アナログ」もしくは「全ピクセル計算」と呼んでいます上の円はギザギザしていますね

そこでアンチエイリアス幅（er）を決め、中心からの距離がhan～han+erなら

(han+er-距離)/er　をアンチエイリアス度として

色×アンチエイリアス度　＋　元の色×（１－アンチエイリアス度）　を赤緑青でやります

function en1(ime,tx,ty,han,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,han,tx,ty,er,c1,c2,c3;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];
er=a[4];//アンチエイリアス幅
c1=a[5];
c2=a[6];
c3=a[7];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(d<han+er){
if(d<han){
ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;
}else{

//元の色と混ぜる処理
e=(han+er-d)/er;
f=1-e;
ime.data[c]=Math.floor(c1*e + ime.data[c]*f);
ime.data[c+1]=Math.floor(c2*e + ime.data[c+1]*f);
ime.data[c+2]=Math.floor(c3*e + ime.data[c+2]*f);
//必ずMath.floorすること

};
};

c+=4;
};
};

↑の「元の色と混ぜる処理」は長ったらしいので別に関数にしときます

function ant(ime,ban,c1,c2,c3,c4)

var a,b,c;
var ime,c1,c2,c3,c4;
var mf=Math.floor;

a=arguments;
ime=a[0];
c=a[1];//data位置
c1=a[2];
c2=a[3];
c3=a[4];
c4=a[5];//アンチエイリアス度

if(c4<=0)return;

if(c4>=1){
ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;
}else{
a=c4;
b=1-a;
ime.data[c]=mf(c1*a + ime.data[c]*b);
ime.data[c+1]=mf(c2*a + ime.data[c+1]*b);
ime.data[c+2]=mf(c3*a + ime.data[c+2]*b);
};

アンチエイリアス度が0以下と1以上の時はかけざんをしないように分岐しましょう円描画時の値を　中心からの距離　から　半径からの距離　に変えることで輪っかになります。

ant()を使ってみます

function rin0(ime,tx,ty,han,haba,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,tx,ty,haba,han,er,c1,c2,c3;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];
haba=a[4];//輪っかの幅
haba/=2;
er=a[5];
c1=a[6];
c2=a[7];
c3=a[8];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
d=Math.abs(d-han);//半径からの距離

if(d<haba+er){
e=1;
if(d>haba)e=(haba+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

中心からの距離によって色１→色２→色１と折り返すグラデーションをかけます。

まず距離を適当に割って%2して値が1以上なら2-値します

その値×色１＋（1-その値）×色２　を赤緑青でやります

これは線形補間と呼ばれています

function engra(ime,tx,ty,bai,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,r1,r2;
var ime,bai;
var c1,c2,c3,i1,i2,i3,i4,i5,i6;
//長ったらしいのでMath.floorをmfに
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
bai=a[3];//グラデーション密度

i1=a[4];//色１
i2=a[5];
i3=a[6];

i4=a[7];//色２
i5=a[8];
i6=a[9];

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

ime.data[c]=mf(c1);
ime.data[c+1]=mf(c2);
ime.data[c+2]=mf(c3);

c+=4;
};
};

赤MAXで図形を描画し、赤の度合いに合わせてグラデーションをかければ

後付けでグラデーションをつけれます

当然図形以外は赤が0である必要があります

function gra0(ime,tx,ty,bai,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,r1,r2;
var ime,bai;
var c1,c2,c3,i1,i2,i3,i4,i5,i6;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
bai=a[3];
i1=a[4];
i2=a[5];
i3=a[6];
i4=a[7];
i5=a[8];
i6=a[9];

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

if(ime.data[c]!=0){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;
d=ime.data[c]/255;//赤の濃さをかける
ime.data[c]=mf(c1*d);
ime.data[c+1]=mf(c2*d);
ime.data[c+2]=mf(c3*d);

};

c+=4;
};
};

縦または横につぶれた楕円はty-aまたはtx-bに一定の数をかければできます。

それを回転させれば傾いた楕円になります。

回転後の中心からのx＝(b-tx)×cos(角)＋(a-ty)×sin(角)
回転後の中心からのy＝(b-tx)×sin(角)－(a-ty)×cos(角)

で回転できます

サインコサインを使う際は角度を0～360から0～3.14159..*2（ラジアン）に直す必要があります

function en2(ime,tx,ty,han,kaku,tubu,er,c1,c2,c3)

var a,b,c,d,e,f,x,y,x2,y2,c1,c2,c3;
var ime,tx,ty,han,er,kaku,tubu,mcos,msin;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
kaku=a[4];//回転度数
kaku=kaku/180*Math.PI;//ラジアンにする
tubu=a[5]//潰し度
er=a[6];
c1=a[7];
c2=a[8];
c3=a[9];
c=0;

mcos=Math.cos(kaku);//先に計算しとく
msin=Math.sin(kaku);

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

x=(b-tx);
y=(a-ty);

x2=x*mcos+y*msin;
y2=x*msin-y*mcos;

x2*=tubu;

d=Math.pow(y2*y2+x2*x2,0.5);

if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

中心からの距離に応じて回転角を増加させます

逐一半径と角度を求め　sin(角＋回転)*距離　cos(角＋回転)*距離　でx,yを求めています

たぶんかなりの無駄があります

function en3(ime,tx,ty,han,tubu,soku,er,c1,c2,c3)

var a,b,c,d,e,f,x2,y2;
var ime,tx,ty,han,er,tubu,soku,c1,c2,c3;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
tubu=a[4];
er=a[6];
soku=han/2/Math.PI/300*a[5];//距離に応じた回転率
c1=a[7];
c2=a[8];
c3=a[9];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

e=Math.atan2(a-ty,b-tx);//角
d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

e+=d*soku;

x2=Math.sin(e)*d;
y2=Math.cos(e)*d;

x2*=tubu;
d=Math.pow(x2*x2+y2*y2,0.5);

if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

別の呼び名で紹介していましたが正しくは干渉線だとご指摘がありました。ありがとうございました。

グラデーションを密にすると値が同じじゃない場所に線が浮かびあがってきます。

下の例では　1÷半径からの距離　を値に足すことで半径近辺の値が馬鹿高くなってます。

function en4(ime,tx,ty,han,bai,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,r1,r2;
var ime,tx,ty,han,er;
var c1,c2,c3,i1,i2,i3,i4,i5,i6;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
bai=a[4];
i1=a[5];
i2=a[6];
i3=a[7];
i4=a[8];
i5=a[9];
i6=a[10];

c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

f=Math.abs(d-han)/700;
if(f<0.0001)f=0.0001;//0で除算しない処理
f=d/bai+1/f;

r1=f%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

ime.data[c]=mf(c1);
ime.data[c+1]=mf(c2);
ime.data[c+2]=mf(c3);

c+=4;
};
};

2色グラデーションでは値が0～2で一周するグラデーションがかかっています。

そこで縦横を見るループ内でimageの配列をループさせ値に2/rituを加えていき色を決定すれば

値を決定するまでの計算が他のフレームで大幅に浮きます

ismove、count、timerはグローバル変数です

function endou(imehai,tx,ty,han,bai,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,g,r1,r2;
var ime,imehai,tx,ty,bai,ritu;
var c1,c2,c3,i1,i2,i3,i4,i5,i6;
var mf=Math.floor;

a=arguments;
imehai=a[0];
tx=a[1];
ty=a[2];
han=a[3];
bai=a[4];
i1=a[5];
i2=a[6];
i3=a[7];
i4=a[8];
i5=a[9];
i6=a[10];

ritu=2/imehai.length;//値に加算する値
c=0;

for(a=0;a<200;a++){
for(b=0;b<200;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
f=Math.abs(d-70)/700;
if(f<0.0001)f=0.0001;
f=d/bai+1/f;//この4行分の計算を他のフレームで省略

for(g=0;g<imehai.length;g++){

ime=imehai[g];

r1=f%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

ime.data[c]=mf(c1);
ime.data[c+1]=mf(c2);
ime.data[c+2]=mf(c3);

f+=ritu;
};//g

c+=4;
};//b
};//a

move()

～このページ全体での動画の流れ～

実際のmove()の中身はこうなってます

function move(){
clearTimeout(timer);
if(ismove==0)return;
try{
～テキストエリアの中身の処理～
}catch(e){
alert("実行時エラーです\n\n"+e); ismove=0;
};
}

もっかいスタートを押すかエラーを起こすとismoveが0になって止まりますめんどいんで別に関数を作っておきます

値と色の配列を渡すと赤緑青の配列を返すようにします

色の数をNとして値を0～Nの範囲に調整し、

色１をMath.floor(値)、　色２を色１＋1、a=値%1　として線形補間します

function gra1(atai,col,typ)

var a,b,c,d;
var atai,col,N,c1,c2,c3,col2,typ;
var mf=Math.floor;
var pai=Math.PI;

atai=arguments[0];
col=arguments[1];
typ=arguments[2];
N=mf(col.length/3)//色の数;

//ataiを0～Nにする
atai=atai%1;
if(atai<0)atai+=1;
atai*=N;

a=atai%1;
if(typ==1)a=0.5-Math.cos(a*pai)/2//コサイン補間
b=1-a;
c=mf(atai);
if(c>=N)c=0;
d=c+1;
if(d>=N)d=0;
c*=3;
d*=3;

c1=col[c]*b+col[d]*a;
c2=col[c+1]*b+col[d+1]*a;
c3=col[c+2]*b+col[d+2]*a;

return new Array(c1,c2,c3);

まだ色に何か処理するかもしれないのでMath.floorしてません

typを1にすると色の変化がなめらかになります

Math.cos(0～π)で1～-1の間をゆるやかにカーブするからです

これをコサイン補間といいます上のgra1を使ってしましまを作ってみます

縦横にsin（角）cos（角）の好きな方をかけて縦-横をgra1に渡します

function sen0(ime,tx,ty,kaku,col,bai)

var a,b,c,d,e;
var ime,tx,ty,kaku,rx,ry,col;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
kaku=a[3];//角度
col=a[4];//色の配列
bai=a[5];

kaku=kaku/180*Math.PI;//ラジアン化
rx=Math.sin(kaku);
ry=Math.cos(kaku);

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=(a-ty)*ry-(b-tx)*rx;
e=gra1(d/bai,col);

ime.data[c]=mf(e[0]);
ime.data[c+1]=mf(e[1]);
ime.data[c+2]=mf(e[2]);

c+=4;
};
};

ブレゼンハム線と呼ばれるすんばらしいアルゴリズムを使います。

横の増加量をr1縦の増加量をr2としてr1>r2の時、

横に一個ずつ進みながらbにr2をプラスし、r1を超えたらr1を引いて縦に一個進む　を繰り返すとなぜか目的地に到達します

function sen0(ime,sx,sy,ex,ey,c1,c2,c3)

var a,b,c,d,e;
var sx,sy,ex,ey,r1,r2,c1,c2,c3,imemax;

a=arguments;
ime=a[0];
sx=a[1];//開始点　整数が望ましい
sy=a[2];
ex=a[3];//終着点
ey=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
if(sx==ex && sy==ey)return;

r1=Math.abs(ex-sx);
r2=Math.abs(ey-sy);
imemax=ime.width*4*ime.height;

if(ex>sx){d=4}else{d=-4};//x
if(ey>sy){e=ime.width*4}else{e=-ime.width*4};//y

if(r2>r1){//縦のほうが長かったら横ととっかえる
a=r1;r1=r2;r2=a;
a=d;d=e;e=a;
};//if

b=Math.floor(r1/2);
c=ime.width*4*Math.floor(sy)+Math.floor(sx)*4;

for(a=0;a<r1+1;a++){
b+=r2;
if(b>r1){
b-=r1;
c+=e;
};//if

if(c>=0 && c<imemax){
ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;
};

c+=d;
};//for

ctx[8].putImageData(ime,0,0);

上の線はギザギザしてますね

そこでbの値によって横のマスにアンチエイリアスをかけてみます

斜めの時と水平垂直の時でアンチエイリアスの幅が変わるので先にやっつけます

function sen1(ime,sx,sy,ex,ey,er,c1,c2,c3)

var a,b,c,d,e,f,g,h,i,k;
var sx,sy,ex,ey,r1,r2,ritu,er,c1,c2,c3,imemax;
var pai=Math.PI;
var mf=Math.floor;

a=arguments;
ime=a[0]
sx=a[1];
sy=a[2];
ex=a[3];
ey=a[4];
er=a[5];
c1=a[6];
c2=a[7];
c3=a[8];

if(sx==ex && sy==ey)return;

imemax=ime.width*4*ime.height;
r1=Math.abs(ex-sx);
r2=Math.abs(ey-sy);

//ななめの時にアンチエイリアス幅をアップさせる処理
a=Math.atan2(ey-sy,ex-sx);
a=Math.abs(a)%(pai/2);
if(a>pai/4)a=pai/2-a;
a=Math.cos(a);

er/=a;
h=mf(er)+1;//横を何マス見るか


if(ex>sx){d=4}else{d=-4};
if(ey>sy){e=ime.width*4}else{e=-ime.width*4};

if(r2>r1){
a=r1;r1=r2;r2=a;
a=d;d=e;e=a;
};//if

j=r1*er;
b=Math.floor(r1/2);
c=ime.width*4*mf(sy)+mf(sx)*4;

for(a=0;a<r1;a++){
b+=r2;
if(b>r1){
b-=r1;
c+=e;
};//if

g=c-h*e;

for(f=-h;f<h+1;f++){
if(g>=0 && g<imemax){
i=Math.abs(f*r1-b);
if(i<j){
k=1-i/j;
ant(ime,g,c1,c2,c3,k);
};
};
g+=e;
};//for

c+=d;
};//for

※端っこは正確に描画されません。

ハイクヲリティーな線描画は後述の疑似imageと点線を見てください線を3等分し、中の点を線に直角にずらします。

これを再帰で繰り返してsen1で結びます

～ポイント～

putするのはctx[10]で、その裏に隠れているctx[11]からgetしています。

これによりfillRect()する時間が短縮できます。
ループ用関数の中身

function ina(ime,sx,sy,ex,ey,hen,kai,er,c1,c2,c3)

var a,b,c;
var sx,sy,ex,ey,tx2,ty2,tx3,ty3;
var rx,ry,kyo,hen,kai,er,c1,c2,c3;
var mf=Math.floor;

a=arguments;
ime=a[0];
sx=a[1];
sy=a[2];
ex=a[3];
ey=a[4];
hen=a[5];//乱れ度
kai=a[6];//再帰回数
if(isNaN(kai))return;
er=a[7];
c1=a[8];
c2=a[9];
c3=a[10];

rx=(ex-sx)/3;
ry=(ey-sy)/3;

a=(Math.random()-0.5)*hen;
tx2=sx+rx+ry*a;
ty2=sy+ry-rx*a;
a=(Math.random()-0.5)*hen;
tx3=ex-rx+ry*a;
ty3=ey-ry-rx*a;

if(kai<=0){
sen1(ime,sx,sy,tx2,ty2,er,c1,c2,c3);
sen1(ime,tx2,ty2,tx3,ty3,er,c1,c2,c3);
sen1(ime,tx3,ty3,ex,ey,er,c1,c2,c3);
}else{
ina(ime,sx,sy,tx2,ty2,hen,kai-1,er,c1,c2,c3);
ina(ime,tx2,ty2,tx3,ty3,hen,kai-1,er,c1,c2,c3);
ina(ime,tx3,ty3,ex,ey,hen,kai-1,er,c1,c2,c3);
};//if

ブレゼンハム円とよばれるすんばらしいアルゴリズムを使います

中心の上から中心の右へ右回りに描画する場合、次に描画する点は右か下です

なので右と下の点で半径に近いほうを選んで進んでいきます

中心の右を過ぎたら今度は下と左で見ていきます。これを繰り返します

jikan()を入れるとそこまでの処理時間が表示されます
rin0と比べてみてください

function enko0(ime,tx,ty,han,c1,c2,c3)

var a,b,c,d,e,f,g,h;
var ime,tx,ty,han,c1,c2,c3,imemax,imew2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=mf(a[1]);
ty=mf(a[2]);
han=mf(a[3]);
c1=a[4];
c2=a[5];
c3=a[6];
imew2=ime.width*4;
imemax=imew2*ime.height;

a=-han;//中心からのy
b=0;//中心からのx

han*=han;//0.5乗がめんどいから二乗した状態で比べる

for(c=0;c<30000;c++){

if(b>=0){d=1;}else{d=-1;};//yの方向
if(a<=0){e=1;}else{e=-1;};//xの方向

f=Math.abs((b+e)*(b+e)+a*a-han);//横の点の半径との差
g=Math.abs(b*b+(a+d)*(a+d)-han);//縦の点の半径との差

if(f<g){b+=e;}else{a+=d;};//誤差が少ないほうに進む
h=(a+ty)*imew2+(b+tx)*4;
if(h>=0 && h<imemax){
ime.data[h]=c1;
ime.data[h+1]=c2;
ime.data[h+2]=c3;
};

if(a<0 && b>=0 && d==-1)break;
};

※1/8だけ描画して折り返していけばさらに高速になります点１から点３まで点２に引っ張られながら線を描きます

整数の足し引きとビットシフトだけで描画できます

原理はここを見てね
http://studio-rain.cocolog-nifty.com/blog/2008/07/post_c4f5.html

ちなみに俺は理解できませんでした

※大きいcanvasだと値が馬鹿高くなってうまく描画できない場合があります

function bej0(ime,x1,y1,x2,y2,x3,y3,seido,c1,c2,c3)

var a,b,c,d,maex,maey;
var ime,x1,y1,x2,y2,x3,y3,seido,seido2,c1,c2,c3,N,N2;
var nx1,ny1,nx2,ny2,nx3,ny3,imew2,imemax;
var mf=Math.floor;

a=arguments;
ime=a[0];
x1=mf(a[1]);
y1=mf(a[2]);
x2=mf(a[3]);
y2=mf(a[4]);
x3=mf(a[5]);
y3=mf(a[6]);
seido=mf(a[7]);
c1=a[8];
c2=a[9];
c3=a[10];

imew2=ime.width*4;
imemax=imew2*ime.height;
seido2=seido*2;
N=1<<seido;
N2=1<<seido2;

nx1=x1*N2;
ny1=y1*N2;

nx2=x3+(2*N-2)*x2+(1-2*N)*x1;
ny2=y3+(2*N-2)*y2+(1-2*N)*y1;

nx3=2*x3-4*x2+2*x1;
ny3=2*y3-4*y2+2*y1;

for(a=0;a<N;a++){
b=nx1>>seido2;
c=ny1>>seido2;

if(maex!=b || maey!=c){
d=c*imew2+(b<<2);
if(d>=0 && d<imemax){
ime.data[d]=c1;
ime.data[d+1]=c2;
ime.data[d+2]=c3;
};
};

nx1+=nx2;
ny1+=ny2;
nx2+=nx3;
ny2+=ny3;
maex=b;
maey=c;
};

ベジェ曲線にブレゼンハム円を組み合わせればぶっとくなります

function bej1(ime,x1,y1,x2,y2,x3,y3,seido,haba,c1,c2,c3)

var a,b,c,d,e;
var ime,ime2,haba,seido,c1,c2,c3,x1,y1,x2,y2,x3,y3,st,maex,maey;
var mf=Math.floor;

a=arguments;
ime=a[0];
x1=mf(a[1]);
y1=mf(a[2]);
x2=mf(a[3]);
y2=mf(a[4]);
x3=mf(a[5]);
y3=mf(a[6]);
seido=mf(a[7]);
haba=mf(a[8]);//幅/2
c1=a[9];
c2=a[10];
c3=a[11];

if(haba==0){
bej0(ime,x1,y1,x2,y2,x3,y3,seido,c1,c2,c3);
return;
};

a=(haba+1)*2;

if(futo[haba]==undefined){

//常に変化しないcanvasから円を描画するimageをget
ime2=ctx[11].getImageData(0,0,a,a);

enko0(ime2,a/2,a/2,haba,255,0,0);//円描画

st=new Array();
d=0;
for(b=0;b<a;b++){
for(c=0;c<a;c++){

if(ime2.data[d]!=0){
st.push(c-a/2,b-a/2);//円を配列データ化
};

d+=4;
};
};

//pushで作った配列ってキモいから作り直す
st=st.concat();

futo[haba]=st;//グローバルにキャッシュ

}else{
st=futo[haba];
};

imew2=ime.width*4;
imemax=imew2*ime.height;
seido2=seido*2;
N=1<<seido;
N2=1<<seido2;

nx1=x1*N2;
ny1=y1*N2;

nx2=x3+(2*N-2)*x2+(1-2*N)*x1;
ny2=y3+(2*N-2)*y2+(1-2*N)*y1;

nx3=2*x3-4*x2+2*x1;
ny3=2*y3-4*y2+2*y1;

for(a=0;a<N;a++){
b=nx1>>seido2;
c=ny1>>seido2;

if(maex!=b || maey!=c){

for(e=0;e<st.length;e+=2){

d=(c+st[e])*imew2+((b+st[e+1])<<2);
if(d>=0 && d<imemax){
ime.data[d]=c1;
ime.data[d+1]=c2;
ime.data[d+2]=c3;
};

};

};

nx1+=nx2;
ny1+=ny2;
nx2+=nx3;
ny2+=ny3;
maex=b;
maey=c;
};

※ブレゼンハム時に縦、横、斜めをみるとピクセル数が少なくなり高速になります
※円データをシングルトンにして直線等にも応用すると便利です配列で点をわたすとすべての中点をbej1でやんわりつなぎます

function renbej0(ime,retu,seido,haba,c1,c2,c3)

var a,b,c,d,e;
var ime,retu,seido,haba,c1,c2,c3,x1,y1,x2,y2,x3,y3;

a=arguments;
ime=a[0];
retu=a[1];//点の配列
seido=a[2];
haba=a[3];
c1=a[4];
c2=a[5];
c3=a[6];


for(a=0;a<retu.length-4;a+=2){
x2=retu[a+2];
x1=retu[a]+(x2-retu[a])/2;
x3=retu[a+4]+(x2-retu[a+4])/2;

y2=retu[a+3];
y1=retu[a+1]+(y2-retu[a+1])/2
y3=retu[a+5]+(y2-retu[a+5])/2

if(a==0){x1=retu[0];y1=retu[1]};

if(a==retu.length-6){
x3=retu[retu.length-2];
y3=retu[retu.length-1]
};

bej1(ime,x1,y1,x2,y2,x3,y3,seido,haba,c1,c2,c3);

};

連ベジェの輪っか版です

function wabej0(ime,retu,seido,haba,c1,c2,c3)

var a,b,c,d,e;
var ime,retu,seido,c1,c2,c3,x1,y1,x2,y2,x3,y3;

a=arguments;
ime=a[0];
retu=a[1];
seido=a[2];
haba=a[3];
c1=a[4];
c2=a[5];
c3=a[6];

retu.push(retu[0],retu[1],retu[2],retu[3]);

for(a=0;a<retu.length-4;a+=2){
x2=retu[a+2];
x1=retu[a]+(x2-retu[a])/2;
x3=retu[a+4]+(x2-retu[a+4])/2;

y2=retu[a+3];
y1=retu[a+1]+(y2-retu[a+1])/2
y3=retu[a+5]+(y2-retu[a+5])/2

bej1(ime,x1,y1,x2,y2,x3,y3,seido,haba,c1,c2,c3);

};

残念ながら俺の頭ではアンチエイリアスつきのベジェ曲線はできませんでした。

しかしImageを大きくとってから小さくすればどんな図形でもぼやかすことができます。

下の例では２×２ピクセルの平均を１ピクセルに入れています

function syk0(ime,bai)　1/baiにしたimageを返す

var a,b,c,d,e,f;
var ime,ime2,tate,yoko,bai,bai2,imew2,c1,c2,c3;

ime=arguments[0];
bai=arguments[1];

imew2=ime.width*4;
bai2=bai*bai;
yoko=Math.floor(ime.width/bai);
tate=Math.floor(ime.height/bai);

ime2=ctx[11].getImageData(0,0,yoko,tate);

c=0;
for(a=0;a<tate;a++){
for(b=0;b<yoko;b++){

c1=0;
c2=0;
c3=0;

for(d=0;d<bai;d++){
f=(a*bai+d)*imew2+b*bai*4;
for(e=0;e<bai;e++){
c1+=ime.data[f];
c2+=ime.data[f+1];
c3+=ime.data[f+2];
f+=4;
};
};

ime2.data[c]=Math.floor(c1/bai2);
ime2.data[c+1]=Math.floor(c2/bai2);
ime2.data[c+2]=Math.floor(c3/bai2);

c+=4;
};
};
return ime2;

小さくしなくても周囲の値によってぼやかすことはできます

しかし汚いです

より正確なぼかし方は後述のガウスぼかしを見てください

function boya0(ime,bai)

同じサイズのimage.dataを作ってそっちに結果を入れています

そうしないと最初ピクセルの変更を最後までひきずりますランダムに色を決定すればホワイトノイズになります

乱数にrandom()では無く線形合同法というものを使ってみます

seed=(641*seed+3313)%131072;

これを131072回行うとseedの値に0～131071が一回ずつ出現し元に戻ります

つまり最初のseedの値によって同じ乱数が得られるわけです

641,3313,131072の数値は別に他の組み合わせでもいいです

他の組み合わせの探し方は　ググって　ください

function pnoise0(yoko,tate,seed)
tate×yokoの二次元配列に乱数を入れ
グローバル変数rantankに格納

var a,b,c;
var yoko,tate,seed;

a=arguments;
yoko=a[0];
tate=a[1];
seed=a[2];


rantank=new Array(tate);
for(a=0;a<tate;a++){
rantank[a]=new Array(yoko);
for(b=0;b<yoko;b++){
seed=(641*seed+3313)%131072;
rantank[a][b]=seed/131072;
};
};

function beta0(ime,i1,i2,i3,i4,i5,i6)
乱数に合わせて2色グラ

var a,b,c,d;
var ime,i1,i2,i3,i4,i5,i6,c1,c2,c3,r1,r2;
var mf=Math.floor;

a=arguments;
ime=a[0];
i1=a[1];
i2=a[2];
i3=a[3];
i4=a[4];
i5=a[5];
i6=a[6];

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

r1=rantank[a][b];

r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

ime.data[c]=mf(c1);
ime.data[c+1]=mf(c2);
ime.data[c+2]=mf(c3);

c+=4;
};
};

このままでは特に使い道はありません垂線からの角度を出し、

中心からの距離×cos(垂線からの角度)＜一定の値　なら描画させます

一辺しかアンチエイリアスがかからずこのままでは使い道はないです。

function sankaku0(ime,tx,ty,han,er,kaku,toga,c1,c2,c3)

var a,b,c,d;
var ime,han,tx,ty,kaku,er,c1,c2,c3;
var pai=Math.PI;
var pai2=pai*2;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
er=a[4];
kaku=a[5];//回転度数
toga=a[6];//とんがり度数
c1=a[7];
c2=a[8];
c3=a[9];

//ラジアン化
kaku=kaku/180*pai;
toga=toga/180*pai/2;

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

e=Math.atan2(a-ty,b-tx)-kaku;
e=e%pai2;
if(e<0)e+=pai2;
if(e>pai)e=pai2-e;
d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(e<toga){
d*=Math.cos(e);
if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

};

c+=4;
};
};

※～角度Aと角度Bの成す角の出し方～（単位：ラジアン）

C＝AーB　まず普通に引きます

C=C％（π×2）　A、Bの値によっては一周以上するので％（π×2）します

if（C＜0）C＋＝π×2　0～π×2の範囲にします

if（C＞π）C＝π×2ーC　180度以上してたら逆から見たほうが近いのでπ×2から引きます二等辺三角形がn個あると考えます。

絶対値（角＋回転）％（π×2÷n）－π÷nで二等辺三角形の垂線からの角度が出ます。

あとは二等辺三角形の描画と考え方は同じです

function nkakkei(ime,tx,ty,N,han,kaku,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,tx,ty,han,er,N,kaku,kaku1,kaku2,c1,c2,c3;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
N=a[3];//正N角形
han=a[4];
kaku=a[5];
kaku=kaku/180*pai;
er=a[6];
c1=a[7];
c2=a[8];
c3=a[9];

kaku1=pai*2/N;//先に計算しとく
kaku2=pai/N;
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
e=Math.atan2(ty-a,tx-b)+kaku;
e=Math.abs(e)%kaku1-kaku2;

d*=Math.cos(e)

if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

正n角形を一行変えるだけでn芒星になります。

function nbousei(ime,tx,ty,N,han,kaku,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,tx,ty,han,er,N,kaku,kaku1,kaku2,c1,c2,c3;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
N=a[3];
han=a[4];
kaku=a[5];
kaku=kaku/180*pai;
er=a[6];
c1=a[7];
c2=a[8];
c3=a[9];

kaku1=pai*2/N;
kaku2=pai/N;
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
e=Math.atan2(ty-a,tx-b)+kaku;
e=Math.abs(e)%kaku1-kaku2;

d*=Math.cos(kaku1-Math.abs(e));//変えたとこ

if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

この手法の正式な名称は知りません

上のn芒星と正n角形はほとんど同じコードですね

テキストエリアを使って上下に分け、追加したいコードを挟んでnew Function()すれば

似たような関数を動的に作れます

おなじみ正n

n芒星

cosで花びらに

sinでとがる

function sand(bun,ue,sita)
"pan"ue＋bun＋"pan"sitaで関数を作って返す

var a,b,bun,ue,sita;
a=arguments;
bun=a[0];
ue=a[1];
sita=a[2];

a=document.getElementById("pan"+ue).value;
b=document.getElementById("pan"+sita).value;
return new Function(a+bun+b);

function ???(ime,tx,ty,N,han,bai,kaku,er,i1,i2,i3,i4,i5,i6)
（二色グラにした以外は正n角形とほぼ同じ）
テキストエリア　id='pan0'

var a,b,c,d,e,f,g,h;
var ime,tx,ty,han,er,N,kaku,kaku1,kaku2;
var i1,i2,i3,i4,i5,i6,c1,c2,c3,r1,r2;
var pai=Math.PI;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
N=a[3];
han=a[4];
bai=a[5];
kaku=a[6];
kaku=kaku/180*pai;
er=a[7];
i1=a[8];
i2=a[9];
i3=a[10];
i4=a[11];
i5=a[12];
i6=a[13];



kaku1=pai*2/N;
kaku2=pai/N;
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
e=Math.atan2(ty-a,tx-b)+kaku;
e=Math.abs(e)%kaku1-kaku2;

テキストエリア　id='pan1'


if(d<han+er){

r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

ifで済む話ですが何万回もifを通すのが嫌な人用

※必ず　” ; ”　を入れてね！正nに何枚目かによって処理を加えると爆発っぽくなります

上のサンドイッチを何枚目かを計算するように変えて引数を増やします

配列tankに0～1の疑似乱数を入れて何枚目かによって参照します

基本

sinでちょっと細くなる

輪っか

中心ほど値の差をすくなくすると干渉線が出にくい

テキストエリア　id='pan3'

var a,b,c,d,e,f,g,h;
var i1,i2,i3,i4,i5,i6,c1,c2,c3,r1,r2,tank,seed,toge;
var pai=Math.PI;
var pai2=pai*2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
N=a[3];
han=a[4];
bai=a[5];
kaku=a[6];
kaku=kaku/180*pai;
er=a[7];
i1=a[8];
i2=a[9];
i3=a[10];
i4=a[11];
i5=a[12];
i6=a[13];
seed=a[14];//疑似乱数シード値
toge=a[15];//トゲの乱れ度

tank=new Array(N);

for(a=0;a<N;a++){
seed=(641*seed+3313)%100000;//線形合同法
tank[a]=seed/100000;
};

kaku1=pai*2/N;
kaku2=pai/N;
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
e=Math.atan2(ty-a,tx-b)+kaku;
if(e<0)e+=pai2;
if(e>pai2)e-=pai2;
g=Math.floor(e/kaku1);//何枚目か
e=Math.abs(e)%kaku1-kaku2;
g=(1-Math.abs(e/kaku2))*tank[g];//乱数の度合い

～ポイント～

引数seedの値によって同じ形を生成します

最後の(1-Math.abs(e/kaku2))は

とげの境界で0になるのできれいにつながります

ランダムな幅の光をランダムな間隔で放射状に描画してみます。

光の本数×2の配列を二つ作り一方に疑似乱数を格納しその合計を求めます。

2×π/合計を配列内にかけ、別の配列のそれぞれに前までの合計を入れます

後は気合で現在位置が何本目かがわかります

function gok0(ime,tx,ty,hon,seed,c1,c2,c3)

var a,b,c,d,e,f;
var ime,tx,ty,han,hon,hon2,c1,c2,c3;
var tank,tank2,seed,max;
var pai=Math.PI;
var pai2=pai*2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
hon=a[3];//本数
seed=a[4];
c1=a[5];
c2=a[6];
c3=a[7];

hon2=hon*2;
tank=new Array(hon*2);
tank2=new Array(hon*2);

max=0;
for(a=0;a<hon2;a++){
seed=(641*seed+3313)%100000;
//細くなりすぎないように0.1足す
tank[a]=seed/100000+0.1;
max+=tank[a];
};

b=pai2/max;
c=0;
for(a=0;a<hon2;a++){
tank[a]*=b;
c+=tank[a];
tank2[a]=c;
};



c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.atan2(ty-a,tx-b);
if(d<0)d+=pai2;
for(e=0;e<hon2;e++){
if(d<tank2[e])break;
};

if(e%2==0){//1本ごとにとばす

f=tank2[e]-d;
f/=(tank[e]/2);
f++;
f=Math.cos(f*pai)/2+0.5;//コサイン補間
ant(ime,c,c1,c2,c3,f);
};

c+=4;
};
};

後光に中心からの距離による処理をするとヒットスパークっぽくなります

function gok1(ime,tx,ty,hon,seed,han,
haba1,haba2,yose,c1,c2,c3)

var a,b,c,d,e,f,g;
var ime,tx,ty,han,hon,hon2,c1,c2,c3;
var tank,tank2,seed,max,han,haba1,haba2;
var han1,han2,nobi;
var pai=Math.PI;
var pai2=pai*2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
hon=a[3];
seed=a[4];
han=a[5];
haba1=a[6];//外側への伸び
haba2=a[7];//内側への伸び
nobi=a[8];//太さに応じて縮める度
c1=a[9];
c2=a[10];
c3=a[11];

han1=han+haba1;
han2=han-haba2;

hon2=hon*2;
tank=new Array(hon*2);
tank2=new Array(hon*2);

max=0;
for(a=0;a<hon2;a++){
seed=(641*seed+3313)%100000;
tank[a]=seed/100000+0.2;
max+=tank[a];
};

b=pai2/max;
c=0;
for(a=0;a<hon2;a++){
tank[a]*=b;
c+=tank[a];
tank2[a]=c;
};

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.atan2(ty-a,tx-b);
if(d<0)d+=pai2;
for(e=0;e<hon2;e++){
if(d<tank2[e])break;
};

if(e%2==0){

g=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
g+=(g-han)*(tank[e])*nobi;//太さによって縮める

if(g<han1 && g>han2){

//半径から離れてる度
if(g>han){
g=(han1-g)/haba1
}else{
g=(g-han2)/haba2;
};
g=0.5-Math.cos(g*pai)/2;

f=tank2[e]-d;
f/=(tank[e]/2);
f++;
f=Math.cos(f*pai)/2+0.5;
f*=g;

ant(ime,c,c1,c2,c3,f);
};
};

c+=4;
};
};

なんとアンチエイリアスつきの普通の三角形の描画は爆発よりめんどいです

cos(垂線からの角度)×点からの距離÷垂線の長さ　を３点でやり一番小さい値によって描画します

function sankaku1(ime,x1,y1,x2,y2,x3,y3,er,c1,c2,c3)

var a,b,c,d,e,f,g;
var sx,sy,ex,ey,imew,imeh,imew2;
var ime,x1,y1,x2,y2,x3,y3,c1,c2,c3;
var s1,s2,s3,h1,h2,h3,k1,k2,k3;
var pai=Math.PI;
var pai2=pai*2;
var paih=pai/2;
var at=Math.atan2;
var sin=Math.sin;
var cos=Math.cos;
var pow=Math.pow;
var mf=Math.floor;

a=arguments;
ime=a[0];
x1=a[1];//点１
y1=a[2];
x2=a[3];//点２
y2=a[4];
x3=a[5];//点３
y3=a[6];
er=a[7];
c1=a[8];
c2=a[9];
c3=a[10];
imew=ime.width;
imeh=ime.height;
imew2=imew*4;

//各点から見て右の辺の長さ
h1=pow((y3-y1)*(y3-y1)+(x3-x1)*(x3-x1),0.5);
h2=pow((y1-y2)*(y1-y2)+(x1-x2)*(x1-x2),0.5);
h3=pow((y2-y3)*(y2-y3)+(x2-x3)*(x2-x3),0.5);

//点が右周りか左回りか判別
a=-1;
b=at(y3-y1,x3-x1);
c=at(y2-y1,x2-x1);
d=c-b;
if(d<0)a=1;
if(Math.abs(d)>pai)a*=-1;

//各点からの垂線の角度
k1=at(y3-y2,x3-x2)-paih*a;
k2=at(y1-y3,x1-x3)-paih*a;
k3=at(y2-y1,x2-x1)-paih*a;

//各点からの垂線の長さ
s1=cos(at(y3-y1,x3-x1)-k1)*h1;
s2=cos(at(y1-y2,x1-x2)-k2)*h2;
s3=cos(at(y2-y3,x2-x3)-k3)*h3;

//計算範囲を狭める
if(x1<=x2 && x1<=x3){sx=x1}else if(x2<=x3){sx=x2}else{sx=x3};
if(x1>=x2 && x1>=x3){ex=x1}else if(x2>=x3){ex=x2}else{ex=x3};
if(y1<=y2 && y1<=y3){sy=y1}else if(y2<=y3){sy=y2}else{sy=y3};
if(y1>=y2 && y1>=y3){ey=y1}else if(y2>=y3){ey=y2}else{ey=y3};
a=er*5;sx-=a;sy-=a;ex+=a;ey+=a;
if(sx<0)sx=0;if(sy<0)sy=0;if(ex>=imew)ex=imew;if(ey>=imeh)ey=imeh;
sx=mf(sx);sy=mf(sy);ex=mf(ex);ey=mf(ey);

for(a=sy;a<ey;a++){
c=imew2*a+sx*4;
for(b=sx;b<ex;b++){
c+=4;

t1=t2=t3=0;
t1=pp(x1,y1,k1,s1);
if(t1==0)continue;
t2=pp(x2,y2,k2,s2);
if(t2==0)continue;
t3=pp(x3,y3,k3,s3);
if(t3==0)continue;

d=t1;
if(t2<d)d=t2;
if(t3<d)d=t3;
ant(ime,c,c1,c2,c3,d);

};
};

//長いんで別に関数にしとく
 function pp(x,y,k,s){
 d=at(a-y,b-x);
 e=pow((y-a)*(y-a)+(x-b)*(x-b),0.5);
 f=(d-k)%pai2;
 if(f<0)f+=pai2;
 if(f>pai)f=pai2-f;//垂線との角度差
 e=cos(f)*e;
 g=0;
 if(e<s){
 g=1;
 }else if(e<s+er){
 g=(s+er-e)/er;
 };
 return g;
 };

アンチエイリアス幅がでかいと細くした時に不自然になります

正確に描画するには角でアンチエイリアスを丸くする処理が必要です

これは普通にcanvasの機能で線ひいて塗りつぶしたほうがいいですね

円の描画時に別の円の半径内を描画しないようにすれば三日月型になります

function en7(ime,tx,ty,han,tx2,ty2,han2,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,han,tx,ty,er,c1,c2,c3;
var tx2,ty2,han2;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];
tx2=a[4];//円２
ty2=a[5];
han2=a[6];
er=a[7];
c1=a[8];
c2=a[9];
c3=a[10];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(d<han+er){

e=1;
if(d>han)e=(han+er-d)/er;

d=Math.pow((ty2-a)*(ty2-a)+(tx2-b)*(tx2-b),0.5);

if(d<han2+er){

if(d>han2){
f=(d-han2)/er
if(e>f)e=f;
}else{
e=0
};

};

ant(ime,c,c1,c2,c3,e);

};

c+=4;
};
};

ピンボールのはじくやつのことです

二つの円と台形で作ります

台形は回転させてx軸かy軸と平行にすればわかりやすいです

function en8(ime,tx,ty,han,han2,kaku,naga,er,c1,c2,c3)

var a,b,c,d,e,f,x,y,x2,y2;
var ime,han,tx,ty,er,c1,c2,c3;
var tx2,ty2,kaku,naga,han2,mcos,msin;
var teihen,jouhen,sx,ex;
var at2=Math.atan2;
var sin=Math.sin;
var cos=Math.cos;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];//円１の半径
han2=a[4];//円２の半径
kaku=a[5];//角度
naga=a[6];//長さ
er=a[7];
c1=a[8];
c2=a[9];
c3=a[10];

kaku=kaku/180*Math.PI;
mcos=cos(kaku);
msin=sin(kaku);

tx2=mcos*naga;//円２の中心
ty2=msin*naga;

a=at2(han-han2,naga);
b=cos(a);
c=sin(a);

sx=c*han;//台形と円１の境
ex=c*han2+naga;//台形と円２の境
teihen=b*han;//台形の底辺の長さ
jouhen=b*han2;//台形の上辺の長さ

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

e=0;
x=(b-tx);
y=(a-ty);

x2=x*mcos+y*msin;
y2=x*msin-y*mcos;

if(x2<sx){//円１

d=Math.pow(x2*x2+y2*y2,0.5);
if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
};

}else if(x2>ex){//円２

d=Math.pow((y-ty2)*(y-ty2)+(x-tx2)*(x-tx2),0.5);
if(d<han2+er){
e=1;
if(d>han2)e=(han2+er-d)/er;
};

}else{//台形

d=teihen-(teihen-jouhen)/(ex-sx)*(x2-sx);
y2=Math.abs(y2);
if(y2<d+er){
e=1;
if(y2>d)e=(d+er-y2)/er;
};
};

ant(ime,c,c1,c2,c3,e);

c+=4;
};
};

以下の式で特殊な形が生成できますが特に使い道がないです

x,yは中心からの値を画面サイズの半分で割ったものです

|x|^(2/3)+|y|^(2/3) アステロイド
(xx+yy)^2-2xy 二葉線
x(3yy-xx)-(yy+xx)^2 三葉線
4xxyy-(xx+yy)^3 四葉線
xxx+yyy-3xy 正葉線

最後に画面サイズの半分をかけます

後述のリサージュ、バラ曲線で代用できるのでそちらを参照してください

木目、かべのしみ、水面などは平面上をなだらかに変化する乱数によって表されます

何回かに分けてその作り方を見ていきましょう

その１：でかくする

ホワイトノイズをでかくしてみます

function pnoise1(yoko,tate,seed,ss,es,wari)

var a,b,c,d,e,f,g;
var yoko,tate,seed,ss,oct;
var mf=Math.floor;

a=arguments;
yoko=a[0];
tate=a[1];
seed=a[2];
ss=a[3];//マスの大きさ 2のss乗

ss=1<<ss;

//マスに合わせてサイズ拡張
a=mf(tate/ss);
if(tate%ss!=0)a++;
tate=a*ss;
a=mf(yoko/ss);
if(yoko%ss!=0)a++;
yoko=a*ss;

rantank=new Array(tate);
for(a=0;a<tate;a++){
rantank[a]=new Array(yoko);
};

//二次元配列octに乱数を入れる
c=mf(tate/ss);
oct=new Array(c);
d=mf(yoko/ss);
for(a=0;a<c;a++){
oct[a]=new Array(d);
for(b=0;b<d;b++){
seed=(641*seed+3313)%131072;
oct[a][b]=seed/131072;
};
};


//グローバルに入れる
for(a=0;a<tate;a++){
for(b=0;b<yoko;b++){
rantank[a][b]=oct[mf(a/ss)][mf(b/ss)];
};
};

その２：なめらかにする

グローバルに入れる時に位置によって隣のマスを見ながら値を変えます

範囲外は反対側を見ます

例えば　x=6.6、y=4.8　の時、

x2=1.5-xの少数部分、y2=1.5-yの小数部分、x1=1-x2、y1=1-y2　として

[6][4]*x2*y2　+　[6][5]*x2*y1　+　[7][4]*x1*y2　+　[7][5]*x1*y1　にします（バイリニア補間）

（小数点以下が0.5以下の時は　0.5+小数部分　を出して方向が逆になります）

さらに　x2,y2を出す時にコサイン補間をかけるとさらになめらかになるそうですが

俺の頭では平面にコサイン補間をかけるのは無理でした

function pnoise2(yoko,tate,seed,ss)

var a,b,c,d,e,f,g;
var yoko,tate,seed,ss,oct,x,y,px,py,x1,x2,y1,y2;
var mf=Math.floor;

a=arguments;
yoko=a[0];
tate=a[1];
seed=a[2];
ss=a[3];
ss=1<<ss;

a=mf(tate/ss);
if(tate%ss!=0)a++;
tate=a*ss;
a=mf(yoko/ss);
if(yoko%ss!=0)a++;
yoko=a*ss;

rantank=new Array(tate);
for(a=0;a<tate;a++){
rantank[a]=new Array(yoko);
};

c=mf(tate/ss);
oct=new Array(c);
d=mf(yoko/ss);
for(a=0;a<c;a++){
oct[a]=new Array(d);
for(b=0;b<d;b++){
seed=(641*seed+3313)%131072;
oct[a][b]=seed/131072;
};
};


for(a=0;a<tate;a++){
for(b=0;b<yoko;b++){

if(ss!=1){

x=mf(b/ss);
c=b/ss-x;//xの小数点部分
if(c>0.5){
px=x+1;
x2=1.5-c;
}else{
px=x-1;
x2=0.5+c;
};

y=mf(a/ss);
c=a/ss-y;//yの小数点部分
if(c>0.5){
py=y+1;
y2=1.5-c;
}else{
py=y-1;
y2=0.5+c;
};

x1=1-x2;
y1=1-y2;

//範囲外は反対側をみる
if(px<0)px=yoko/ss-1;
if(px>=yoko/ss)px=0;
if(py<0)py=tate/ss-1;
if(py>=tate/ss)py=0;

rantank[a][b]=oct[y][x]*x2*y2+oct[y][px]*x1*y2+
oct[py][x]*x2*y1+oct[py][px]*x1*y1;


}else{
rantank[a][b]=oct[a][b];
};


};
};

その３：さらになめらかにする

octを隣のマスを見ながら値を変化させとけばさらになめらかになるそうです

隣を1/8、斜め隣を1/16、自分を1/4した値を別の二次元配列に入れます（ガウスぼかし）

範囲外は反対側を見ます

それと後々のために直接グローバルにいれずにローカルの二次元配列をreturnするようにします

function pnoise3(yoko,tate,seed,ss)

var a,b,c,d,e,f,g;
var yoko,tate,seed,ss,oct,oct2;
var x,y,px,py,px2,py2,x1,x2,y1,y2,mtank;
var mf=Math.floor;

a=arguments;
yoko=a[0];
tate=a[1];
seed=a[2];
ss=a[3];
ss=1<<ss;

a=mf(tate/ss);
if(tate%ss!=0)a++;
tate=a*ss;
a=mf(yoko/ss);
if(yoko%ss!=0)a++;
yoko=a*ss;

mtank=new Array(tate);
for(a=0;a<tate;a++){
mtank[a]=new Array(yoko);
};

c=mf(tate/ss)+7;
oct=new Array(c);
d=mf(yoko/ss)+7;
for(a=0;a<c;a++){
oct[a]=new Array(d);
for(b=0;b<d;b++){
seed=(641*seed+3313)%131072;
oct[a][b]=seed/131072;
};
};

//最後のシード値を後々のためグローバルにとってる
maeseed=seed;

//ぼかし後の値を入れるoct2
oct2=new Array(c);
for(a=0;a<c;a++){
oct2[a]=new Array(d);
};//for


//ガウスぼかし
for(a=0;a<oct.length;a++){
for(b=0;b<oct[a].length;b++){

py=a-1;
if(py<0)py=oct.length-1;
py2=a+1;
if(py2>=oct.length)py2=0;
px=b-1;
if(px<0)px=oct[0].length-1;
px2=b+1;
if(px2>=oct[0].length)px2=0;

oct2[a][b]=oct[py][px]/16+oct[py][b]/8+oct[py][px2]/16+
oct[a][px]/8+oct[a][b]/4+oct[a][px2]/8+
oct[py2][px]/16+oct[py2][b]/8+oct[py2][px2]/16;

};
};


for(a=0;a<tate;a++){
for(b=0;b<yoko;b++){

if(ss!=1){

x=mf(b/ss);
c=b/ss-x;
if(c>0.5){
px=x+1;
x2=1.5-c;
}else{
px=x-1;
x2=0.5+c;
};

y=mf(a/ss);
c=a/ss-y;
if(c>0.5){
py=y+1;
y2=1.5-c;
}else{
py=y-1;
y2=0.5+c;
};

x1=1-x2;
y1=1-y2;

if(px<0)px=yoko/ss-1;
if(px>=yoko/ss)px=0;
if(py<0)py=tate/ss-1;
if(py>=tate/ss)py=0;

mtank[a][b]=oct2[y][x]*x2*y2+oct2[y][px]*x1*y2+
oct2[py][x]*x2*y1+oct2[py][px]*x1*y1;

}else{

mtank[a][b]=oct2[a][b];

};


};
};

return mtank;

その４：フラクタル化

pnoise3で作った配列にその半分のマスで作ったものを加算、

さらに半分のものを・・と繰り返します

これで完成です

※一周させる都合上サイズが設定よりでかくなっております

function pnoise4(yoko,tate,seed,ss,es,bure,nou,yori)

var a,b,c,d;
var yoko,tate,seed,ss,es,bure,nou,yori,mtank,ritu;
var mf=Math.floor;

a=arguments;
yoko=a[0];
tate=a[1];
seed=a[2];
ss=a[3];//小さいマス　2のss乗
es=a[4];//大きいマス　2のes乗
bure=a[5];//ブレンド率
nou=a[6];//濃淡のくっきり度
yori=a[7];//濃淡の偏り　0.5固定でいいです

//大きいマスに合わせてサイズをそろえる
b=1<<es;
a=mf(tate/b);
if(tate%b!=0)a++;
tate=a*b;
a=mf(yoko/b);
if(yoko%b!=0)a++;
yoko=a*b;

rantank=new Array(tate);
for(a=0;a<tate;a++){
rantank[a]=new Array(yoko);
};

mtank=new Array(es-ss+1);

for(a=ss;a<es+1;a++){
mtank[a-ss]=pnoise3(yoko,tate,seed,a);
seed=maeseed;
};



//加算した後割る値を出す
ritu=0;
b=1;
for(a=0;a<mtank.length;a++){
ritu+=b;
b*=bure;
};


for(a=0;a<tate;a++){
for(b=0;b<yoko;b++){
d=0;
e=1;

for(c=0;c<mtank.length;c++){
d+=mtank[c][a][b]*e;
e*=bure;
};


//値を0、1に近づける処理
d/=ritu;
if(d<yori){
d/=yori;
d=Math.pow(d,nou)*yori;
}else{
var d2=(1-d)/(1-yori);
d=1-Math.pow(d2,nou)*(1-yori);
};


rantank[a][b]=d;
};
};


return mtank;

加算していく時に倍率をbure倍していきます

２倍で４回加算した時は最後に（１＋２＋４＋８）で割ります

なめらかにする処理で値が0.5によっているので1、0に近づける処理をします

その際ついでに濃淡の偏りも変えれるようにしてますが0.5固定でいいです

最後に製作途中の三次元配列をreturnしているのでこれを倍率を変えて加算して

別のノイズに利用すると便利ですパーリンノイズ（以降ノイズと表記）を取得する際に範囲外だったら一周した位置を取得する関数を作っときます

function ranput0(x,y)

var x,y,tate,yoko;
var mf=Math.floor;
x=mf(arguments[0]);
y=mf(arguments[1]);
tate=rantank.length;
yoko=rantank[0].length;
x=x%yoko;
if(x<0)x+=yoko;
y=y%tate;
if(y<0)y+=tate;
return rantank[y][x];

しましまの値にノイズを足してみます

function moja0(ime,kaku,bai,rr,nou,yori,i1,i2,i3,i4,i5,i6)

var a,b,c,d,kaku,rx,ry,rr,r1,r2,nou,yori,bai;
var i1,i2,i3,i4,i5,i6,c1,c2,c3;
var ime;
var mf=Math.floor;

a=arguments;
ime=a[0];
kaku=a[1];
bai=a[2];//縦横にかける値
rr=a[3];//乱数にかける値
nou=a[4];//濃淡度
yori=a[5];//濃淡かたより
i1=a[6];
i2=a[7];
i3=a[8];
i4=a[9];
i5=a[10];
i6=a[11];

kaku=kaku/180*Math.PI
rx=Math.sin(kaku)/bai;
ry=Math.cos(kaku)/bai;

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

r1=a*ry+b*rx+ranput0(b,a)*rr;
r1=Math.abs(r1);

r1=r1%2;
if(r1>1)r1=2-r1;

if(r1<yori){
r1/=yori;
r1=Math.pow(r1,nou)*yori;
}else{
r1=(1-r1)/(1-yori);
r1=1-Math.pow(r1,nou)*(1-yori);
};



r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

ime.data[c]=mf(c1);
ime.data[c+1]=mf(c2);
ime.data[c+2]=mf(c3);

c+=4;
};
};

ノイズは80*80で作っていますが一周しているので200*200のimageでも大丈夫なのですノイズをそのまま利用して雲を描画します

一定の値以下は描画しないようにし、

描画するとことの境はアンチエイリアスします

描画するとこは境～1が0～1になるように直して線形補間します

function beta1(ime,lim,gen,i1,i2,i3,i4,i5,i6)

var a,b,c,d;
var ime,lim,gen,i1,i2,i3,i4,i5,i6,r1,r2,ritu;
var mf=Math.floor;

a=arguments;
ime=a[0];
lim=a[1];//半透明と空の境界
gen=a[2];//不透明と半透明の境界
i1=a[3];
i2=a[4];
i3=a[5];
i4=a[6];
i5=a[7];
i6=a[8];


ritu=1/(1-lim);

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=ranput0(b,a);
if(d>lim){

r1=(d-lim)*ritu;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d<gen)e=1-(gen-d)/(gen-lim);
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

今まではピクセルとノイズを１対１で対応させて見てましたが

多くの場合ノイズを縮めたり歪めた状態で値を取得します

その際小数点の位置のノイズを参照することになるので

バイリニア補完っぽいことをするようにranput0()を改造します

function ranput1(x,y)

var a,x,y,t,tate,yoko,px,py,mt;
var x1,x2,y1,y2;
var mf=Math.floor;

x=arguments[0];
y=arguments[1];
mt=arguments[2];//別の二次元配列を見たい時に指定
if(mt==undefined){
t=rantank;
}else{
t=mt;
};

tate=t.length;
yoko=t[0].length;

x=x%yoko;
if(x<0)x+=yoko;
y=y%tate;
if(y<0)y+=tate;

x1=(x-mf(x))/2;
x2=1-x1;
y1=(y-mf(y))/2;
y2=1-y1;

x=mf(x);
y=mf(y);

px=x+1;
if(px>=yoko)px=0;
py=y+1;
if(py>=tate)py=0;

return t[y][x]*y2*x2+t[py][x]*y1*x2+
t[y][px]*y2*x1+t[py][px]*y1*x1;

注：周囲4ピクセルを見て色を決めるため4倍以上圧縮されてる箇所は精度が落ちます雲１を縮めて描画します

ranput1()で値を取得します

function beta2(ime,tx,ty,baix,atuy,lim,gen,kaku,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,g,h;
var ime,lim,gen,i1,i2,i3,i4,i5,i6,r1,r2,ritu;
var tx,ty,kaku,baix,atuy,rw,rh,rtx,rty
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
baix=a[3];//横方向の下に行くにつれてに縮む度
atuy=a[4];//縦のつぶし度
lim=a[5];
gen=a[6];
i1=a[7];
i2=a[8];
i3=a[9];
i4=a[10];
i5=a[11];
i6=a[12];

rh=rantank.length;
rw=rantank[0].length;
rty=mf(rh/2);
rtx=mf(rw/2);

ritu=1/(1-lim);
c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

e=(a-ty);
e*=atuy;
f=(b-tx)/((0.5-e/rh)*(1-1/baix)+1/baix);
e+=rty;
f+=rtx;

d=-1;
if(mf(e)<rh-1){
d=ranput1(f,e);
};

if(d>lim){

r1=(d-lim)*ritu;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d<gen)e=1-(gen-d)/(gen-lim);
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

円にノイズを合わせると島っぽくなります

ノイズそのままでも島っぽいですが円と合わせることで

一定以内が確実に陸地になり一定以上が確実に海になるので都合がよくなります

function sima0(ime,tx,ty,han,bai,rr,er,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f;
var ime,han,bai,er,tx,ty,rr,c1,c2,c3,r1,r2;
var i1,i2,i3,i4,i5,i6;
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
bai=a[4];
rr=a[5];//乱数倍率
er=a[6];
i1=a[7];
i2=a[8];
i3=a[9];
i4=a[10];
i5=a[11];
i6=a[12];


c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
d-=(ranput0(b,a)-0.5)*han*rr;
d=Math.abs(d);


if(d<han+er){

r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

半径に近いとこで遠くのノイズを参照します

陸と雲でシード値を変えましょう

function beta3(ime,tx,ty,rtx,rty,han,bai,er,lim,gen,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,g,h;
var ime,lim,gen,i1,i2,i3,i4,i5,i6,r1,r2,ritu;
var tx,ty,han,bai,er,rtx,rty;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
rtx=a[3];//ノイズx
rty=a[4];//ノイズy
han=a[5];
bai=a[6];//歪み率
er=a[7];
lim=a[8];
gen=a[9];
i1=a[10];
i2=a[11];
i3=a[12];
i4=a[13];
i5=a[14];
i6=a[15];

ritu=1/(1-lim);
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(d<han+er){

e=Math.atan2(a-ty,b-tx);
h=(bai-d/(han+er))/bai;
h=d/h;
f=Math.cos(e)*h+rtx;
e=Math.sin(e)*h+rty;
e=ranput1(f,e);

g=1;
if(d>han)g=(han+er-d)/er;

if(e>lim){

r1=(e-lim)*ritu;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

if(e>gen){
ime.data[c]=mf(c1*g);
ime.data[c+1]=mf(c2*g);
ime.data[c+2]=mf(c3*g);
}else{
f=(gen-e)/(gen-lim);
e=1-f;
ime.data[c]=mf((c1*e + ime.data[c]*f)*g);
ime.data[c+1]=mf((c2*e + ime.data[c+1]*f)*g);
ime.data[c+2]=mf((c3*e + ime.data[c+2]*f)*g);
};

};

};

c+=4;
};
};

ノイズの座標を変化させて地球を回します

move()
n個下のノイズから順次みていき、値＋（n-距離/n）＞１だった場合

そこのノイズを参照することででっぱります

function beta4(ime,rtx,rty,nobi,bai,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,e2,f2,x1,x2;
var ime,rtx,rty,nobi,bai,ritu,r1,r2;
var i1,i2,i3,i4,i5,i6;
var mf=Math.floor;

a=arguments;
ime=a[0];
rtx=a[1];
rty=a[2];
nobi=a[3];//伸び
bai=a[4];
i1=a[5];
i2=a[6];
i3=a[7];
i4=a[8];
i5=a[9];
i6=a[10];

ritu=1/nobi;

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

for(d=0;d<nobi;d++){
e=ranput0(b+rtx,a+rty+nobi-d);
if(e+d*ritu>1)break;
};

//1を超える小数点位置を割り出し下と線形補間
if(d<nobi){
f=ranput0(b+rtx,a+rty+nobi-d+1);
e2=e+d*ritu;
f2=f+(d-1)*ritu;
x2=(1-f2)/(e2-f2);
x1=1-x2;
e=e*x2+f*x1;
};

e*=bai;
e=e%2;
if(e>1)e=2-e;
d=1-e;

c1=mf(i1*e+i4*d);
c2=mf(i2*e+i5*d);
c3=mf(i3*e+i6*d);

ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;

c+=4;
};
};

雲１みたく小腸の一定以下を描画しないようにします

隣のノイズと比べて値によって色を小さくして影をつけます

function beta5(ime,rtx,rty,nobi,bai,lim,gen,ei,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f,g,h,x1,x2,e2,f2;
var ime,rtx,rty,nobi,bai,ritu,ei;
var i1,i2,i3,i4,i5,i6,x,y,lim,gen;
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
rtx=a[1];
rty=a[2];
nobi=a[3];
bai=a[4];
lim=a[5];
gen=a[6];
ei=a[7];//影倍率
i1=a[8];
i2=a[9];
i3=a[10];
i4=a[11];
i5=a[12];
i6=a[13];

ritu=1/nobi;

c=0;
for(a=0;a<ime.height;a++){

for(b=0;b<ime.width;b++){

x=b+rtx;

for(d=0;d<nobi;d++){
y=a+rty+nobi-d;
e=ranput0(x,y);
if(e+d*ritu>1)break;
};

if(d<nobi){
f=ranput0(x,y+1);
e2=e+d*ritu;
f2=f+(d-1)*ritu;
x2=(1-f2)/(e2-f2);
x1=1-x2;
e=e*x2+f*x1;
};

//影
h=1;
f=ranput1(x+1,y+x1);
if(e+0.06>f)h=1-(e+0.06-f)*ei;
if(h<0)h=0;
h=1-Math.cos(h*pai/2)

if(e>lim){

if(e>gen){
g=1;
}else{
g=(e-lim)/(gen-lim);
};

e=(e-gen)/(1-gen);

e*=bai;
e=e%2;
if(e>1)e=2-e;
d=1-e;

c1=i1*e+i4*d;
c2=i2*e+i5*d;
c3=i3*e+i6*d;

c1*=h;
c2*=h;
c3*=h;

d=1-g;

ime.data[c]=mf(c1*g+ime.data[c]*d);
ime.data[c+1]=mf(c2*g+ime.data[c+1]*d);
ime.data[c+2]=mf(c3*g+ime.data[c+2]*d);

};

c+=4;
};
};

でっぱったとこと後ろとのアンチエイリアスがまだ不完全です

影は単純に色を小さくしてますが、255ー（255ー色）×倍率　のほうがそれっぽくなります

乱数をぼやかしながら上にあげてくと炎っぽくなります

まず乱数を入れる二次元配列をimageに合わせて作り一番下の段に線形合同法で乱数を入れます

ループで下から見ながら(左下+下+右下+二個下)/4を入れていきます

（最初は二個下がないので下3つ÷3を入れます）

はじっこは反対側を見ます

最後に乱数の値+ノイズ*ノイズ倍率に合わせて　黒→赤→黄→白　でグラデーションをかけます

下段が荒いので乱数の配列を縦に余分に長く作り隠します

縦長になるので4より少し大きめで割るか黒の比率を多くします

ノイズをつけれるようにしてますが無しのほうがいいです

function honoo0(ime,seed,yowa,col,bai,rr,rtx,rty)

var a,b,c,d,e,col;
var ime,mt,tate,yoko,seed,yowa,rr,rtx,rty;

a=arguments;
ime=a[0];
seed=a[1];
yowa=a[2]/100+4;//だんだん弱くなる度
col=a[3];
bai=a[4];//初期倍率
rr=a[5];//ノイズ倍率
rtx=a[6];//ノイズx
rty=a[7];//ノイズy

yoko=ime.width;
tate=ime.height+3;

mt=new Array(tate);
for(a=0;a<tate;a++){
mt[a]=new Array(yoko);
};

//1段目
for(a=0;a<yoko;a++){
seed=(641*seed+3313)%131072;
mt[tate-1][a]=seed/131072*bai;
};

//2段目
a=tate-1;
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
mt[a-1][b]=c/3;
};
mt[a-1][0]=(mt[a][0]+mt[a][1]+mt[a][yoko-1])/3;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]+mt[a][0])/3;

//3段目以降
for(a=tate-2;a>0;a--){
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
c+=mt[a+1][b];
mt[a-1][b]=c/yowa;
};
mt[a-1][0]=
(mt[a][0]+mt[a][1]+mt[a+1][0]+mt[a][yoko-1])/yowa;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]
+mt[a+1][yoko-1]+mt[a][0])/yowa;
};

//描画
e=1-1/(col.length/3)//一番白くなる値
c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
d=mt[a][b]+(ranput0(b+rtx,a+rty)-0.5)*rr;
if(d>e)d=e;
if(d<0)d=0;
d=gra1(d,col,1);
ime.data[c]=d[0];
ime.data[c+1]=d[1];
ime.data[c+2]=d[2];
c+=4;
};
};

return mt;

乱数の二次元配列の最下段を少しずつ乱数で変化させ、

何度も全体を上へあげればゆらめきます

重いです

普通の炎にノイズを強くかけたほうがいいかもです

function honoo1(ime,seed,yowa,col,bai,rr,rtx,rty,ritu)

var a,b,c,d,e,col;
var ime,mt,tate,yoko,seed,yowa,rr,ritu,rtx,rty;

a=arguments;
ime=a[0];
seed=a[1];
yowa=a[2]/100+4;
col=a[3];
bai=a[4];
rr=a[5];
rtx=a[6];
rty=a[7];
ritu=a[8];//ゆらぎ度

yoko=ime.width;
tate=ime.height+4;

mt=new Array(tate);
for(a=0;a<tate;a++){
mt[a]=new Array(yoko);
};

for(a=0;a<yoko;a++){
seed=(641*seed+3313)%131072;
mt[tate-1][a]=seed/131072*bai;
};


for(e=0;e<tate-2;e++){

for(b=0;b<yoko;b++){
seed=(641*seed+3313)%131072;
c=mt[tate-1][b]+(seed/131072-0.5)*ritu;
if(c<0)c=-c;
if(c>bai)c=bai*2-c;
mt[tate-1][b]=c;
};

a=tate-1;
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
mt[a-1][b]=c/3;
};
mt[a-1][0]=(mt[a][0]+mt[a][1]+mt[a][yoko-1])/3;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]+mt[a][0])/3;


for(a=tate-2-e;a<tate-1;a++){
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
c+=mt[a+1][b];
mt[a-1][b]=c/yowa;
};
mt[a-1][0]=
(mt[a][0]+mt[a][1]+mt[a+1][0]+mt[a][yoko-1])/yowa;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]
+mt[a+1][yoko-1]+mt[a][0])/yowa;
};

};//e

//描画
c=0;
e=1-1/(col.length/3);
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
d=mt[a][b]+(ranput0(b+rtx,a+rty)-0.5)*rr;
if(d>e)d=e;
if(d<0)d=0;
d=gra1(d,col,1);
ime.data[c]=d[0];
ime.data[c+1]=d[1];
ime.data[c+2]=d[2];
c+=4;
};
};

return mt;

honoo1は最後に乱数の配列をreturnしているのでこれをグローバルhotankにとっといて

下段を変えてぼやかしながら全体を1マスずつあげて描画します

これだけだと遅いのでノイズのy座標も変えます

function honoo2(ime,seed,yowa,col,bai,rr,rtx,rty,ritu)

var a,b,c,d,e;
var ime,seed,yowa,col,bai,mt,rr,rtx,rty;

a=arguments;
ime=a[0];
seed=a[1];
yowa=a[2]/100+4;
col=a[3];
bai=a[4];
rr=a[5];
rtx=a[6];
rty=a[7];
ritu=a[8];

mt=hotank;
tate=mt.length;
yoko=mt[0].length;

//3段目以降
for(a=1;a<tate-1;a++){
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
c+=mt[a+1][b];
mt[a-1][b]=c/yowa;
};
mt[a-1][0]=
(mt[a][0]+mt[a][1]+mt[a+1][0]+mt[a][yoko-1])/yowa;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]
+mt[a+1][yoko-1]+mt[a][0])/yowa;
};

//1段目
for(b=0;b<yoko;b++){
seed=(641*seed+3313)%131072;
c=mt[tate-1][b]+(seed/131072-0.5)*ritu;
if(c<0)c=-c;
if(c>bai)c=bai*2-c;
mt[tate-1][b]=c;
};

//2段目
a=tate-1;
for(b=1;b<yoko-1;b++){
c=mt[a][b];
c+=mt[a][b-1];
c+=mt[a][b+1];
mt[a-1][b]=c/3;
};
mt[a-1][0]=(mt[a][0]+mt[a][1]+mt[a][yoko-1])/3;
mt[a-1][yoko-1]=
(mt[a][yoko-1]+mt[a][yoko-2]+mt[a][0])/3;

c=0;
e=1-1/(col.length/3);
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
d=mt[a][b]+(ranput0(b+rtx,a+rty)-0.5)*rr;
if(d>e)d=e;
if(d<0)d=0;
d=gra1(d,col,1);
ime.data[c]=d[0];
ime.data[c+1]=d[1];
ime.data[c+2]=d[2];
c+=4;
};
};

maeseed=seed;//シード値を次回に持ち越し

炎を丸めて描画したら太陽っぽくなるかと思ったらそんなことありませんでした

honoo1で炎を作って半径を縦、角度を横に補正してranput1でhotankを参照します

一度imeに炎が描きこまれるのでかなり無駄です

function honoo3(ime,tx,ty,han1,han2,er,col)

var a,b,c,d,e,f,g;
var ime,han1,han2,tx,ty,tate,yoko,col;
var pai2=Math.PI*2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han1=a[3];//内側
han2=a[4];//外側
er=a[5];
col=a[6];

tate=hotank.length-3;
yoko=hotank[0].length;

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);
e=Math.atan2(ty-a,tx-b)/pai2*yoko;

if(d>han1-er && d<han2+er){
g=(han2+er-d)/(han2-han1+er*2)*tate;
g=ranput1(e,g,hotank);
g=gra1(g,col,1);

e=1;
if(d<han1)e=1-(han1-d)/er;
if(d>han2)e=1-(d-han2)/er;
ant(ime,c,g[0],g[1],g[2],e);
};

c+=4;
};
};

x,yを同じ計算を繰り返して変化させ続けると次のいずれかになります

①0になる

②無限になる

③一定のルートを巡回し続ける

④それ以外

この④の状態でx,yの位置に点を打っていくとカオス図形というものができます

ただしPCは小数点以下が無限ではないので

本来カオスになるはずが同じとこに戻って③になる可能性はあります

点

カオス描画用に点を打つ関数を作っときます

function ten0(ime,x,y,ki,c1,c2,c3)

var a,b,c,d,e,f;
var ime,x,y,ki,c1,c2,c3;
var imew,imeh,imew2,imed;
var mf=Math.floor;

a=arguments;
ime=a[0];
x=a[1];
y=a[2];
ki=a[3];
c1=a[4];
c2=a[5];
c3=a[6];

imew=ime.width;
imeh=ime.height;
imew2=imew<<2;
imed=ime.data;

x=mf(x);
y=mf(y);


if(x>=0 && x<imew && y>=0 && y<imeh){
c=y*imew2+x*4;
d=1-ki;
imed[c]=mf(c1*ki + imed[c]*d);
imed[c+1]=mf(c2*ki + imed[c+1]*d);
imed[c+2]=mf(c3*ki + imed[c+2]*d);
};

次のx=y-sign(x)*√(|t1*x-t2|)
次のy=t3-x

で点を打つとホッパロンになります

計算回数で色分けしてます

sign()は0以下で-1、0以上で1、0で0を返します

注：xの計算結果は変数に入れといて後でxに入れないといきなりyに影響が出ちゃうよ

function kao0(ime,tx,ty,han,max,ki,t1,t2,t3)

var a,b,c,d,e;
var ime,tx,ty,t1,t2,t3,x,y,ki,han,max,c1,c2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];//光度
t1=a[6];
t2=a[7];
t3=a[8];

c1=mf(max/3);
c2=c1*2;

x=0;
y=0;

for(a=0;a<max;a++){

b=y-sign(x)*Math.pow(Math.abs(t1*x-t2),0.5);
y=t3-x;
x=b;

d=y*han+ty;
e=x*han+tx;
if(Math.abs(d)>100000000)break;

if(a<c1){
ten0(ime,e,d,ki,255,100,100);
}else if(a<c2){
ten0(ime,e,d,ki,100,255,100);
}else{
ten0(ime,e,d,ki,100,100,255);
};


};

ホッパロンはt1,t2,t3の値のわずかな変化によって激しく変化します

その様子を見てみましょう

止めてからスライダーで値をチェックできます

ループ用関数の中身

gtとgrはグローバル変数です定数を4つにして計算式を

変数=t1*(x*x+y*y)+t2*x*(x*x-3*y*y)+t3
次のx=変数*x+t4*(x*x-y*y)
次のy=変数*y-2*t4*x*y

にするとチョ（ｒｙになります

function kao1(ime,tx,ty,han,max,t1,t2,t3,t4)

var a,b,c,d,e;
var ime,tx,ty,t1,t2,t3,t4,x,y,han,max,ki,c1,c2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
t1=a[6];
t2=a[7];
t3=a[8];
t4=a[9];

c1=mf(max/3);
c2=c1*2;

x=0.1;
y=0.1;

for(a=0;a<max;a++){

b=t1*(x*x+y*y)+t2*x*(x*x-3*y*y)+t3;
c=b*x+t4*(x*x-y*y);
y=b*y-2*t4*x*y;
x=c;

d=y*han+ty;
e=x*han+tx;

if(Math.abs(d)>100000000)break;

if(a<c1){
ten0(ime,e,d,ki,255,100,100);
}else if(a<c2){
ten0(ime,e,d,ki,100,255,100);
}else{
ten0(ime,e,d,ki,100,100,255);
};

};

※定数が限られた範囲の組み合わせでないとすぐに発散（値がどんどんでかくなり描画できなくなる）してしまいます

この「限られた範囲の組み合わせ」は連続して存在しないので偶然見つけるのが難しいです次のx=y+t1*x+5*x*x/(1+x*x)+1-0.2*exp(-y*y)
次のy=-t2*x+t3*pow(-1,計算回数)

で鳥っぽくなります

exp(n)は自然対数のn乗です

function kao2(ime,tx,ty,x,y,han,max,ki,t1,t2,t3)

var a,b,c,d,e;
var ime,tx,ty,t1,t2,t3,t4,x,y,han,max,ki,c1,c2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
x=a[3];
y=a[4];
han=a[5];
max=a[6];
ki=a[7];
t1=a[8];
t2=a[9];
t3=a[10];

c1=mf(max/3);
c2=c1*2;


for(a=0;a<max;a++){

b=y+t1*x+5*x*x/(1+x*x)+1-0.2*Math.exp(-y*y);
y=-t2*x+t3*Math.pow(-1,a);
x=b;

d=y*han+ty;
e=x*han+tx;

if(Math.abs(d)>100000000)break;


if(a<c1){
ten0(ime,e,d,ki,255,100,100);
}else if(a<c2){
ten0(ime,e,d,ki,100,255,100);
}else{
ten0(ime,e,d,ki,100,100,255);
};


};

これもt1、t2、t3が限られた範囲の組み合わせじゃないとすぐに発散します

２匹の鳥が見えますが、回数%2が0の時だけ描画すると１匹になります次のx=t1*x+t2*y+t3+t4/(1+x*x)
次のy=-x

でも鳥っぽくなります

function kao6(ime,tx,ty,x,y,han,max,ki,t1,t2,t3,t4)

var a,b,c,d,e;
var ime,tx,ty,t1,t2,t3,t4,x,y,han,max,ki,c1,c2;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
x=a[3];
y=a[4];
han=a[5];
max=a[6];
ki=a[7];
t1=a[8];
t2=a[9];
t3=a[10];
t4=a[11];

c1=max/3;
c2=c1*2;

for(a=0;a<max;a++){

b=t1*x+t2*y+t3+t4/(1+x*x);
c=-x;

x=b;
y=c;

b=x*han+tx;
c=y*han+ty;

if(Math.abs(b)>100000000)break;

if(a<c1){
ten0(ime,b,c,ki,255,10,10);
}else if(a<c2){
ten0(ime,b,c,ki,10,255,10);
}else{
ten0(ime,b,c,ki,10,10,255);
};

};

形を成すのは一瞬です

ここで残念なお知らせがあります。

お気づきの方もいらっしゃるでしょうが、何度も同じピクセルをいじる時

その都度少数点を丸めているので正確な描画がなされていません。

何度も同じピクセルをいじる点描画だけこれを改善してみます。

まず少数点が使えるようにimage.dataを渡すと同じサイズの通常配列をつくり

データを移してオブジェクトに格納しwidthとheightもつけた疑似imageを返す関数を作ります

function utusi(ime)

var ime,a,b;
ime=arguments[0];
a=new Array(ime.width*4*ime.height);
for(b=0;b<a.length;b++){
a[b]=0;
};
b=new Object();
b.width=ime.width;
b.height=ime.height;
b.data=a;
return b;

そして疑似imageからimageに戻す関数を作ります

function modosi(ime,gj,ki)

var ime,gj,ki,a,b;
ime=arguments[0];
gj=arguments[1];
ki=arguments[2];
for(a=0;a<gj.data.length;a++){
if(a%4==3)continue;
b=Math.floor(ime.data[a]+gj.data[a]*ki);
if(b<0)b=0;
if(b>255)b=255;
ime.data[a]=b;
};

そして少数点を丸めず範囲も気にしない点描画を作ります

ついでにバイリニアの要領で周囲4マスに光を振り分けます

あと色の合成を単純な加算にしました

function ten1(ime,x,y,c1,c2,c3)

var a,b,c,d,e,f;
var ime,x,y,c1,c2,c3;
var x1,x2,y1,y2,px,py;
var imew,imeh,imew2,imed;
var mf=Math.floor;

a=arguments;
ime=a[0];
x=a[1];
y=a[2];
c1=a[3];
c2=a[4];
c3=a[5];

imew=ime.width;
imeh=ime.height;
imew2=imew<<2;
imed=ime.data;

b=Math.floor(x);
c=x-b;

if(c>0.5){
px=b+1;
x2=1.5-c;
}else{
px=b-1;
x2=c+0.5;
};
x1=1-x2;

a=Math.floor(y);
c=y-a;

if(c>0.5){
py=a+1;
y2=1.5-c;
}else{
py=a-1;
y2=c+0.5;
};
y1=1-y2;


if(b>=0 && b<imew && a>=0 && a<imeh){
c=a*imew2+b*4;
e=x2*y2;
imed[c]+=c1*e;
imed[c+1]+=c2*e;
imed[c+2]+=c3*e;
};

if(px>=0 && px<imew && a>=0 && a<imeh){
c=a*imew2+px*4;
e=x1*y2;
imed[c]+=c1*e;
imed[c+1]+=c2*e;
imed[c+2]+=c3*e;
};

if(b>=0 && b<imew && py>=0 && py<imeh){
c=py*imew2+b*4;
e=x2*y1;
imed[c]+=c1*e;
imed[c+1]+=c2*e;
imed[c+2]+=c3*e;
};

if(px>=0 && px<imew && py>=0 && py<imeh){
c=py*imew2+px*4;
e=x1*y1;
imed[c]+=c1*e;
imed[c+1]+=c2*e;
imed[c+2]+=c3*e;
};

従来の方法だと1以下は加算されませんがこれだと加算されます

光度は点を打つ時は考慮せずimageに戻す時にかけます

※最近のブラウザだと最後にMath.floorすればdataに小数点を入れてもエラーにならないようです x,y,zの点に対して

次のx=t1*(y-x)
次のy=t2*x-y-x*z
次のz=x*y-t3*z

で二点を回るカオスになります

ten1を使ってみます

function kao2(ime,tx,ty,x,y,han,max,ki,t1,t2,t3)

var a,b,c,d,e;
var ime,tx,ty,zx,zy,t1,t2,t3,han,max,ki,c1,c2;
var x,y,z,dt,gj,zx2,zy2;
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
zx=a[3];//zの値による横の回転
zy=a[4];//zの値による縦の回転
han=a[5];
max=a[6];
ki=a[7];
dt=a[8]/1000;//速度
t1=a[9];
t2=a[10];
t3=a[11];

zx=Math.sin(zx/180*pai);
zy=Math.sin(zy/180*pai);

gj=utusi(ime);//疑似imageに移す

c1=mf(max/3);
c2=c1*2;

x=0.1;
y=0.1;
z=0.1;

for(a=0;a<max;a++){

b=x+dt*t1*(y-x);
c=y+dt*(t2*x-y-x*z);
d=z+dt*(x*y-t3*z);

x=b;
y=c;
z=d;

d=y*han+zy*z+ty;
e=x*han+zx*z+tx;

if(Math.abs(d)>100000000)break;

if(a<c1){
ten1(gj,e,d,255,0,0);
}else if(a<c2){
ten1(gj,e,d,0,255,0);
}else{
ten1(gj,e,d,0,0,255);
};

};

modosi(ime,gj,ki);//疑似imageから戻す

ロンゲクッタ法というものを使うと高精度になりますがコードが大変なことになります上のローレンツアトラクタは点が密なとこと荒いとこでかなり差が出てしまいます。

これは点と点の間を点線で結ぶことで一様にすることができます。

グローバルを使って余りを調整すれば頭と前の線のけつが重なりません

function tensen0(ime,sx,sy,ex,ey,kan,c1,c2,c3)

var a,b,c,d,e;
var ime,c1,c2,c3,kan,sx,sy,ex,ey,rx,ry;

a=arguments;
ime=a[0];//ten1を使うので渡すのは疑似image
sx=a[1];
sy=a[2];
ex=a[3];
ey=a[4];
kan=a[5];//刻み幅
c1=a[6];
c2=a[7];
c3=a[8];

kyo=Math.pow((ex-sx)*(ex-sx)+(ey-sy)*(ey-sy),0.5);

a=Math.atan2(ey-sy,ex-sx);
rx=Math.cos(a);
ry=Math.sin(a);

b=sx+amari*rx;//前回の余りの分スタートを進める
c=sy+amari*ry;

rx*=kan;//一回に進む距離
ry*=kan;

for(a=amari;a<kyo;a+=kan){
ten1(ime,b,c,c1,c2,c3);
b+=rx;
c+=ry;
};

amari=a-kyo;//次回に余りを付加

※値がとびとびになるカオスには使えませんでは点線の威力を見てみましょう

引数に刻み幅を追加
function kao5(ime,tx,ty,x,y,han,max,kan,ki,t1,t2,t3)

var a,b,c,d,e;
var ime,tx,ty,zx,zy,t1,t2,t3,han,max,kan,ki,c1,c2;
var x,y,z,dt,gj,zx2,zy2;
var mf=Math.floor;
var pai=Math.PI;

var maex,maey;
amari=0;//余りを初期化

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
zx=a[3];
zy=a[4];
han=a[5];
max=a[6];
kan=a[7];//刻み幅
ki=a[8];
dt=a[9]/1000;
t1=a[10];
t2=a[11];
t3=a[12];

zx=Math.sin(zx/180*pai);
zy=Math.sin(zy/180*pai);

gj=utusi(ime);
ki*=kan;//刻み幅で重なる分光度を下げる

c1=mf(max/3);
c2=c1*2;

x=0.1;
y=0.1;
z=0.1;

maex=x*han+zx*z*han+tx;
maey=y*han+zy*z*han+ty;

for(a=0;a<max;a++){

b=x+dt*t1*(y-x);
c=y+dt*(t2*x-y-x*z);
d=z+dt*(x*y-t3*z);

x=b;
y=c;
z=d;

d=y*han+zy*z*han+ty;
e=x*han+zx*z*han+tx;

if(Math.abs(d)>100000000)break;

if(a<c1){
tensen0(gj,maex,maey,e,d,kan,255,0,0);
}else if(a<c2){
tensen0(gj,maex,maey,e,d,kan,0,255,0);
}else{
tensen0(gj,maex,maey,e,d,kan,0,0,255);
};

maex=e;//前回のx,yをとっとく
maey=d;
};

modosi(ime,gj,ki);

zx,zyを変化させて動かしてみましょう

globalAlphaで薄めてgetImagedataすることで残像がつきます

move()
次のx=x*(t1-y)
次のy=x*x
パラメーター1個のこの式でナイスなカオスが出ます

ただし模様になるような値の範囲は狭いです

前の点からの距離で色分けしてます

function kao4(ime,tx,ty,x,y,han,max,ki,t1)

var a,b,c,d,e;
var ime,tx,ty,t1,x,y,han,max,ki;
var gj;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
t1=a[6];

gj=utusi(ime);

x=0.1;
y=0.1;

for(a=0;a<max;a++){

b=x*(t1-y);
c=x*x;
d=Math.pow((b-x)*(b-x)+(c-y)*(c-y),0.5);

x=b;
y=c;

c=y*han+ty;
b=x*han+tx;

if(b>100000000)break;

if(d<han/80){
ten1(gj,b,c,255,100,100);
}else if(d<han/40){
ten1(gj,b,c,100,255,100);
}else{
ten1(gj,b,c,100,100,255);
};

};

modosi(ime,gj,ki);

t1を1.8から2まで動かします

move()
漠然としてますが正式な名称です

次のx=？*x+？*y+？
次のy=？*y+？*y+？

これを４種類用意し、ひとつを原点近くに戻るようにして確率で選びながらx,yの点に描画していくと

３つに分岐していくフラクタルになります

原理は簡単ですが引数がすごい数になります

function kao6(ime,tx,ty,han,max,ki,c1,c2,c3,t0,t1,
t2,t3,t4,t5,t6,t7,t8,t9,t10,t11,t12,t13,
t14,t15,t16,t17,t18,t19,t20,t21,t22)

var a,b,c,t;
var ime,tx,ty,han,max,ki,c1,c2,c3;
var x,y,gj;
var mf=Math.floor;
var pai=Math.PI;


a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
c1=a[6];
c2=a[7];
c3=a[8];

t=new Array(27);
for(b=0;b<t.length;b++){
t[b]=a[b+9]/100;
};

t[25]+=t[24];
t[26]+=t[25];


gj=utusi(ime);

x=0;
y=0;

for(a=0;a<max;a++){

b=Math.random();

if(b<t[24]){
c=t[0]*x+t[1]*y+t[2];
y=t[3]*x+t[4]*y+t[5];
x=c;
}else if(b<t[25]){
c=t[6]*x+t[7]*y+t[8];
y=t[9]*x+t[10]*y+t[11];
x=c;
}else if(b<t[26]){
c=t[12]*x+t[13]*y+t[14];
y=t[15]*x+t[16]*y+t[17];
x=c;
}else{
c=t[18]*x+t[19]*y+t[20];
y=t[21]*x+t[22]*y+t[23];
x=c;
};

b=mf(tx+x*han);
c=mf(ty+y*han);

ten1(gj,b,c,c1,c2,c3);

};

modosi(ime,gj,ki);

式に使う27個の引数を変化させてみます

止めてからスライダーで値をチェックできます

move()

次のx=t0*x-t1*y+t2*x+t3*y
次のy=t1*x+t0*y+t3*x-t2*y

と

次のx=t4*(x-1)-t5*y+t6*(x-1)+t7*y+1
次のy=t5*(x-1)+t4*y+t7*(x-1)-t6*y

を同時に行い点を打っていきます

つまり一回ごとに計算量が２倍になっていきます

再帰だと重くなるのでだんだんでかくなる二次元配列を使ってループします

function kao8(ime,tx,ty,han,max,ki,c1,c2,c3,
t0,t1,t2,t3,t4,t5,t6,t6,t8)

var a,b,c,d,e,f,t;
var ime,tx,ty,t1,t2,t3,x,y,ki,han,max,mtank;
var gj,c1,c2,c3;
var mf=Math.floor;

t=new Array(8);

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
c1=a[6];
c2=a[7];
c3=a[8];


for(b=0;b<8;b++){
t[b]=a[b+9];
};


gj=utusi(ime);

mtank=new Array(max);
b=2;
for(a=0;a<max;a++){
mtank[a]=new Array(b);
b*=2;
};

tx-=han;
mtank[0][0]=1;
mtank[0][1]=0;

for(a=0;a<max;a++){

for(b=0;b<mtank[a].length;b+=2){
x=mtank[a][b];
y=mtank[a][b+1];

ten1(gj,x*han+tx,y*han+ty,c1,c2,c3);

if(a<max-1){

c=t[0]*x-t[1]*y;
d=t[1]*x+t[0]*y;
e=t[2]*x+t[3]*y;
f=t[3]*x-t[2]*y;
mtank[a+1][b*2]=c+e;
mtank[a+1][b*2+1]=d+f;

x--;
c=t[4]*x-t[5]*y;
d=t[5]*x+t[4]*y;
e=t[6]*x+t[7]*y;
f=t[7]*x-t[6]*y;



mtank[a+1][b*2+2]=c+e+1;
mtank[a+1][b*2+3]=d+f;
};

};

};

modosi(ime,gj,ki);

引数8個をランダムに変化させます

これはマジでかっこいいです

ゲームのエフェクト等に使えます

move()
次のx=sin(t1*y)+t3*cos(t1*x)
次のy=sin(t2*x)+t4*cos(t2*y)

できれいな線が出ます

N個前の点との角度で色付けします

重ねても色が混ざりにくいので光度の低い点を大量に打てば打つほどきれいな画像ができます

function kao9(ime,tx,ty,han,max,ki,N,t1,t2,t3,t4)

var a,b,c,d,e,f;
var ime,tx,ty,x,y,han,max,t1,t2,t3,t4;
var gj,c1,c2,ki,xtank,ytank,N,col;
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
N=a[6];//何個前の点を見るか
col=a[7];
t1=a[8];
t2=a[9];
t3=a[10];
t4=a[11];

gj=utusi(ime);

x=0;
y=0;
d=0;
xtank=new Array(N);
ytank=new Array(N);

for(a=0;a<max;a++){
xtank[a%N]=x;
ytank[a%N]=y;

b=Math.sin(t1*y)+t3*Math.cos(t1*x);
y=Math.sin(t2*x)+t4*Math.cos(t2*y);
x=b;

if(a>=N){

d=(a-N)%N;
d=Math.atan2(ytank[d]-y,xtank[d]-x);
d/=pai

d=gra1(d,col);
b=x*han+tx;
c=y*han+ty;

ten1(gj,b,c,d[0],d[1],d[2]);

};

};

modosi(ime,gj,ki);

ためしにmaxの桁を上げてkiの桁を下げてみてください

やればやるほどきれいになります

ただしPCは小数点以下が無限ではないのでやりすぎると精度が落ちます

画像をでかくとって縮小させれば無限に精度をあげることはできます次のx=sin(t1*y)-cos(t2*x)
次のy=sin(t3*x)-cos(t4*y)

クリフォードとほぼ同じです

function kao10(ime,tx,ty,han,max,ki,N,t1,t2,t3,t4)

var a,b,c,d,e,f;
var ime,tx,ty,x,y,han,max,t1,t2,t3,t4;
var gj,c1,c2,ki,xtank,ytank,N,col;
var mf=Math.floor;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
N=a[6];
col=a[7];
t1=a[8];
t2=a[9];
t3=a[10];
t4=a[11];

gj=utusi(ime);

x=0;
y=0;
d=0;
xtank=new Array(N);
ytank=new Array(N);

for(a=0;a<max;a++){
xtank[a%N]=x;
ytank[a%N]=y;

b=Math.sin(t1*y)-Math.cos(t2*x);
y=Math.sin(t3*x)-Math.cos(t4*y);
x=b;

if(a>=N){
d=(a-N)%N;
d=Math.atan2(y-ytank[d],x-xtank[d]);
d/=pai;

d=gra1(d,col);

b=x*han+tx;
c=y*han+ty;

ten1(gj,b,c,d[0],d[1],d[2]);

};

};

modosi(ime,gj,ki);

まだ最適化の余地があります

クリフォードやpeta de jongで時間をかけて緻密な描画をしたい人は

工夫してみてください密集度と光度があってないと汚くなるのでランダムな動画には向いてません

move()

kao9のとこをkao10に変えるとpeta de jongになります次のわけわからん式から生成されます

前の点との角度で色づけします

xx=-4*x+cos(kaku*t1)
yy=-4*y+sin(kaku*t1)
r=√√(xx*xx+yy*yy)
kaku=atan2(yy,xx)
if(Math.random()>0.5){c=1}else{c=-1}

として

次のx=-cos(t2*kaku)-r*cos(kaku/2)/2*c
次のy=-sin(t2*kaku)+r*sin(kaku/2)/2*c

function kao11(ime,seed,kai,bai,c1,c2,c3)

var a,b,c,d,e,f;
var ime,gj,tx,ty,max,t1,t2;
var x,y,x1,y1,xx,yy,r,han,kaku,ki,col;
var cos=Math.cos;
var sin=Math.sin;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
col=a[6];
t1=a[7];
t2=a[8];

gj=utusi(ime);

x=1;
y=1;
kaku=0;

for(a=0;a<max;a++){
xx=-4*x+cos(kaku*t1);
yy=-4*y+sin(kaku*t1);
r=Math.pow(xx*xx+yy*yy,0.25);
kaku=Math.atan2(yy,xx);

c=1;
if(Math.random()>0.5)c=-1;

x1=-cos(t2*kaku)-r*cos(kaku/2)/2*c;
y1=-sin(t2*kaku)+r*sin(kaku/2)/2*c;

d=gra1(kaku/pai,col);

b=x1*han+tx;
c=y1*han+ty;

ten1(gj,b,c,d[0],d[1],d[2]);

x=x1;
y=y1;

};


modosi(ime,gj,ki);

変数1=t1*x+2*(1-t1)*x*x/(1+x*x)
次のx=y+t2*(1-t3*y*y)*y+変数1
変数2=t1*次のx+2*(1-t1)*次のx*次のx/(1+次のx*次のx)
次のy=-x+変数2

から生成されます

今までと少し違うのはxの変化がそのターンのyに影響してます

変数2は次のターンの変数1と同じなのでうまく計算を減らせます

初期値に左右されるのでx,yも引数で変えれるようにします

function kao12(ime,tx,ty,han,max,ki,col,x,y,t1,t2,t3)

var a,b,c,d,e;
var ime,gj,tx,ty,max,t1,t2,t3,t4;
var x,y,x1,y1,xx,yy,r,han,kaku,ki,col;
var pai=Math.PI;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
col=a[6];
x=a[7];
y=a[8];
t1=a[9];
t2=a[10];
t3=a[11];


gj=utusi(ime);

t4=2*(1-t1);

e=t1*x+t4*x*x/(1+x*x);

for(a=0;a<max;a++){

x1=y+t2*(1-t3*y*y)*y+e;
e=x1*x1;
e=t1*x1+t4*e/(1+e);
y1=-x+e;

d=gra1(Math.atan2(y1-y,x1-x)/pai,col);

b=x1*han+tx;
c=y1*han+ty;

if(Math.abs(b)>100000000)break;

ten1(gj,b,c,d[0],d[1],d[2]);

x=x1;
y=y1;

};

modosi(ime,gj,ki);

x,yの初期値とパラメーター3つをランダムに変化させます

実はカオスの形状には複素数というものが大きく関わっています

この複素数とは二つのパラメーターを持ち、足し算掛け算に変な法則があります

その性質が平面状に模様となって現れているようです

x=～、y=～という式は複素数の計算をむりやりコードに置き換えたものです

複素数クラスと複素数用の演算関数を作れば超複雑な式も簡単な表記で再現できます

詳しくは　ググって　ください適当にいじってたらたまたまタコっぽくなりました

式はコード参照

function kao13(ime,tx,ty,han,max,ki,t1,t2,t3,t4)

var a,b,c,d,e,fk,fk1;
var ime,tx,ty,x,y,han,max,ki;
var gj,t1,t2,t3,t4,t5,t6,t7;
var mf=Math.floor;
var ma=Math.abs;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
t1=a[6];
t2=a[7];
t3=a[8];
t4=a[9];

gj=utusi(ime);

t5=t1+t3;
t6=t2+t4;
t7=t3*t3+t4*t4;
x=0.1;
y=0;

if(Math.abs(t3)<0.0000001)t3=0.0000001*sign2(t3);
if(Math.abs(t7)<0.0000001)t7=0.0000001*sign2(t7);

for(a=0;a<max;a++){

b=x*t5-y*t6;
c=x*t6+y*t5;
b=(ma(b)-ma(t1))*sign(b);
c=(ma(c)-ma(t2))*sign(c);
x=(b*t3+c*t4)/t7;
y=(c-t4*x)/t3;
c=y*han+ty;
b=x*han+tx;

if(Math.abs(b)>100000000)break;
ten1(gj,b,c,255,80,50);
};

modosi(ime,gj,ki);

0で除算しない処理をしています

sign2は負の時-1、正の時1を返します適当に作ってたらサインコサインを使わずにクリフォードっぽいのができました

ひょっとしたらすごいかもしれないので俺（通称じゃがりきん）の名をつけました

～かっこよかった値の例～
0.5, -0.5, -1.4, -1.3
0.92, -0.7, -1.2, -1
0.06, -0.8, -0.6, -0.4
2.3, -0.4, 4.5, 2.75
0.8, -1.5, -1.2, -1.4
0.6, 1.68, -1.38, 1
0.7, -0.94, -4.5, -1
1.38, -0.8, -2.6, -1.3
1.668, 0.5, -3.6, 1.6
0.55, 1.5, -0.5, 0.4　植物
0.8, -1.5, 4.6, 3.2　鳥
1.7, -1.3, -4.6, -1.3　鳥２
0.4, -0.4, 0.05, 0.4　深海魚
0.2, -0.6, -0.07, 0　クラインの壷
0.1, -0.7, -0.4, -0.9　胎児
0.7, -0.01, -1, 1.15　二匹の天使
0.57, -0.71, -2.64, -1.78　二匹の宇宙人
1.3, 0.8, -3.7, 1.9　ワッフル
0.5, 0.07, -0.7, -1.7　天狗
1.7, -0.15, -1.33, -1.33　鎖鎌を振り回す人
2.1, -0.6, 4.4, 2.6　ウルトラマン対怪獣

function kao14(ime,tx,ty,han,max,ki,col,t1,t2,t3,t4)

var a,b,c,d,e,f,g;
var ime,tx,ty,x,y,han,max,ki,col;
var gj,t1,t2,t3,t4;
var pai2=Math.PI*2;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
col=a[6];
t1=a[7];
t2=a[8];
t3=a[9];
t4=a[10];
tx-=han;
gj=utusi(ime);
x=y=0;

for(a=0;a<max;a++){

b=x-t1;
c=t2-y;
d=t3-x;
e=y-t4;
f=b*d-c*e;
g=b*e+c*d;
b=f+x;
c=g+y;
d=f+t3;
e=g+t4;
if(Math.abs(d)<0.0001)d=0.0001*sign2(d);
f=(b*d+c*e)/(d*d+e*e);
g=(c-e*f)/d;
d=gra1(Math.atan2(x-f,y-g)/pai2,col,1);

x=f;
y=g;

b=x*han+tx;
c=y*han+ty;

if(Math.abs(b)>100000000)break;
ten1(gj,b,c,d[0],d[1],d[2]);
};

modosi(ime,gj,ki);

性質上xが常に右に1寄っているので最初にtxからhanを引いときます

0で除算しない処理をしていますが形状にこれが影響している場合がありますパラメーターを-2～2の範囲でランダムに変化させてみます

kao14をkao15に変えれば↓の宇宙アトラクタの動画になります円形のアトラクタは意外と簡単に作れることが判明しました

計算の最後にxとyを　0.1+x*x+y*y　で割るだけです

途中結果がでかいほど小さくなるので本来発散する式でもOKです

この宇宙アトラクタ（命名：俺）もループの中でループして適当に計算しまくってますが一定範囲に収まります

0.1の部分や反復回数を変えれるようにしてもよいです

function kao15(ime,tx,ty,han,max,ki,col,t1,t2,t3,t4)

var a,b,c,d,e,f,g,h;
var ime,tx,ty,x,y,han,max,ki,col;
var gj,t1,t2,t3,t4;
var pai2=Math.PI*2;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
max=a[4];
ki=a[5];
col=a[6];
t1=a[7];
t2=a[8];
t3=a[9];
t4=a[10];

gj=utusi(ime);
x=y=0.1;

for(a=0;a<max;a++){

b=t3-x;
c=t4-y;

for(h=0;h<3;h++){
d=t1-b;
e=t2-c;
b=d*d-e*e;
c=2*d*e;
};

h=b*b+c*c;
f=b/(0.1+h);
g=c/(0.1+h);
d=gra1(Math.atan2(x-f,y-g)/pai2,col,1);

x=f;
y=g;

b=x*han+tx;
c=y*han+ty;

ten1(gj,b,c,d[0],d[1],d[2]);
};

modosi(ime,gj,ki);

縦横に見ながらそれぞれのピクセルで

次のx=rr*x*(1-x)　を指定回数計算します

ただしrrはあらかじめ配列に入れておいた疑似乱数tank[n]が0ならrx,1ならryを入れます

rx,ryは縦横に連動した0～4までの数じゃないと不自然になります

最後のxの値で色を割り振ります

function ria0(ime,seed,kai,bai,c1,c2,c3)

var a,b,c,d;
var ime,seed,kai,bai,bai2,x,y,c1,c2,c3;
var rx,ry,rr,tank;
var mf=Math.floor;

a=arguments;
ime=a[0];
seed=a[1];
kai=a[2];//計算回数
bai=a[3];//倍率
c1=a[4];
c2=a[5];
c3=a[6];

bai=4/bai;
bai2=4-bai;

tank=new Array(kai);
for(a=0;a<kai;a++){
seed=(641*seed+3313)%100000;
if(seed>50000){tank[a]=1;}else{tank[a]=0};
};

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
ry=bai2+bai-a/ime.height*bai;//水っぽいので逆に
rx=bai2+b/ime.width*bai;

x=0.5;

for(d=0;d<kai;d++){
if(tank[d]==0){rr=ry;}else{rr=rx;};
x=rr*x*(1-x);
};

if(x>1)x=1;
if(x<0)x=0;
y=1-x;

ant(ime,c,c1,c2,c3,y);
c+=4;
};
};

本来は最後のxの値からリアプノフ指数というのを計算するのですが

よくわからないのでそのまま使いました rx,ryを座標に連動させながら

次のx=x^2-y^2+rx、次のy=2xy+ry　を無限に繰り返してx^2+y^2が4を超した時の回数を色分けすると模様ができます

x,yの初期値はその都度0にします

～canvas内をクリックするとその位置を拡大します～

　倍率：　MAX：　C1：　C2：　C3：

座標に連動したジュリア集合（後述）も表示します

function mandel0(ime,tx,ty,zoom,max,c1,c2,c3)

var a,b,c,d,e;
var x,y;
var ime,tx,ty,zoom;
var step,max,rx,ry,c1,c2,c3,e1,e2,e3;
var mf=Math.floor;

a=arguments;

ime=a[0];
tx=a[1];
ty=a[2];
zoom=a[3];
max=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
e1=256/c1;
e2=256/c2;
e3=256/c3;

//クリックイベント用にグローバルに保管
gzoom=zoom;
gtx=tx;
gty=ty;

step=2.6/zoom;

a=ime.width/2;
b=ime.height/2;

tx/=1000;
ty/=1000;

tx+=(tx/a)/zoom-step*a;
ty+=(ty/b)/zoom-step*b;


ry=ty;
c=0;
for(a=0;a<ime.height;a++){
rx=tx;
for(b=0;b<ime.width;b++){
x=y=0;

for(d=0;d<max;d++){
e=x*x-y*y+rx;
y=2*x*y+ry;
x=e;
if(x*x+y*y>4)break;
};



ime.data[c]=mf((d%c1)*e1);
ime.data[c+1]=mf((d%c2)*e2);
ime.data[c+2]=mf((d%c3)*e3);
c+=4;
rx+=step;
};
ry+=step;
};

～ポイント～

maxをc1,c2,c3の公倍数にすると最大値が黒になります

メインの計算でx、yをその都度絶対値にすると

バーニングシップというフラクタルになりますが

細部が汚くあまり使えませんあれをやってみます

最初に少し時間がかかります

うまくいかないときはmaisuuかmzoomを下げてね

ループ用関数move()の中身

マンデルブロさんは巨大ですねマンデルブロのrx,ryを固定にし、x,yの初期値を縦横にあわせるとこうなります

形状がマンデルブロの座標と連動しています

function mandel3(ime,tx,ty,rx,ry,zoom,max,sai,bai,c1,c2,c3)

var a,b,c,d,e;
var x,y;
var ime,tx,ty,zoom;
var step,max,rx,ry,c1,c2,c3,e1,e2,e3;
var mf=Math.floor;

a=arguments;

ime=a[0];
tx=a[1];
ty=a[2];
rx=a[3]/=1000;
ry=a[4]/=1000;
zoom=a[5];
max=a[6];
c1=a[7];
c2=a[8];
c3=a[9];
e1=256/c1;
e2=256/c2;
e3=256/c3;

step=2.6/zoom;

a=ime.width/2;
b=ime.height/2;
tx/=1000;
ty/=1000;
tx+=(tx/a)/zoom-step*a;
ty+=(ty/b)/zoom-step*b;

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
y=ty+step*a;
x=tx+step*b;

for(d=0;d<max;d++){
e=x*x-y*y+rx;
y=2*x*y+ry;
x=e;
if(x*x+y*y>4)break;
};

ime.data[c]=mf((d%c1)*e1);
ime.data[c+1]=mf((d%c2)*e2);
ime.data[c+2]=mf((d%c3)*e3);
c+=4;
x+=step;
};
y+=step;
};

回数が最大の時、値を変えて再計算するとこうなりました

細部は変わらないので重いだけであまり使えません

function mandel1(ime,tx,ty,zoom,max,sai,bai,c1,c2,c3)

var a,b,c,d,e,f;
var xx,yy,x,y,rx,ry,rx2,ry2;
var ime,tx,ty,zoom,max,sai,bai;
var step,max,rx,ry,c1,c2,c3,e1,e2,e3;
var mf=Math.floor;

a=arguments;

ime=a[0];
tx=a[1];
ty=a[2];
zoom=a[3];
max=a[4];
sai=a[5];//再計算回数
bai=a[6];//再計算倍率
c1=a[7];
c2=a[8];
c3=a[9];
e1=256/c1;
e2=256/c2;
e3=256/c3;

step=2.6/zoom;

a=ime.width/2;
b=ime.height/2;

tx/=1000;
ty/=1000;

tx+=(tx/a)/zoom-step*a;
ty+=(ty/b)/zoom-step*b;


ry=ty;
c=0;
for(a=0;a<ime.height;a++){
rx=tx;
for(b=0;b<ime.width;b++){

rx2=rx;
ry2=ry;
for(f=0;f<sai;f++){
xx=yy=x=y=0;
for(d=0;d<max;d++){
e=x*x-y*y+rx2;
y=2*x*y+ry2;
x=e;
if(x*x+y*y>4)break;
};
if(d<max)break;
rx2*=bai;
ry2*=bai;
};


ime.data[c]=mf((d%c1)*e1);
ime.data[c+1]=mf((d%c2)*e2);
ime.data[c+2]=mf((d%c3)*e3);
c+=4;
rx+=step;
};
ry+=step;
};

マンデルブロの式は複素数で書くと

次の複(x,y)＝複(x,y)^2+複(rx,ry)　ですが

この２乗のとこを変えるとマンデルブロさんの頭が増えます

function mandel2(ime,kai,max,size)

var a,b,c,d,e,f;
var x,y,x1,y1,N;
var ime,tx,ty,zoom;
var step,max,rx,ry,c1,c2,c3,e1,e2,e3;
var mf=Math.floor;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
zoom=a[3];
max=a[4];
N=a[5];//乗数
c1=a[6];
c2=a[7];
c3=a[8];
e1=256/c1;
e2=256/c2;
e3=256/c3;

step=2.6/zoom;
a=ime.width/2;
b=ime.height/2;

tx/=1000;
ty/=1000;

tx+=(tx/a)/zoom-step*a;
ty+=(ty/b)/zoom-step*b;

ry=ty;
c=0;
for(a=0;a<ime.height;a++){
rx=tx;
for(b=0;b<ime.width;b++){
x=y=0;

for(d=0;d<max;d++){
x1=x;
y1=y;
for(f=1;f<N;f++){
e=x1*x-y1*y;
y1=x1*y+x*y1;
x1=e;
};
x=x1+rx;
y=y1+ry;
if(x*x+y*y>4)break;
};

ime.data[c]=mf((d%c1)*e1);
ime.data[c+1]=mf((d%c2)*e2);
ime.data[c+2]=mf((d%c3)*e3);
c+=4;
rx+=step;
};
ry+=step;
};

マンデルブロのrx、ryをランダムに設定し、

計算して最後まで4を超えなかった場合に計算途中のx,yの点すべてに点を描画すると仏陀が出ます

kaiとmaxによって微妙に形が変わります

function mandel2(ime,kai,max,size)

var a,b,c,d,e;
var xx,yy,x,y,rx,ry,c1,c2;
var ime,tx,ty,max,re,im,imewh,imew2,imemax,imeh2,imed;
var mf=Math.floor;

a=arguments;

ime=a[0];
kai=a[1];//計算回数
max=a[2];//計算上限
size=a[3];//おおきさ


c1=mf(max/3);
c2=c1*2;
re=new Array(max);
im=new Array(max);

imew2=ime.width*4;
imewh=mf(ime.width/2);
imemax=imew2*ime.height;
imeh2=mf(ime.height/4*3);
imed=ime.data;


for(a=0;a<kai;a++){

rx=Math.random()*2-1.5;
ry=Math.random()*2-1;
x=y=0;

for(b=0;b<max;b++){
e=x*x-y*y+rx;
y=2*x*y+ry;
x=e;
if(x*x+y*y>4)break;
re[b]=x;
im[b]=y;
};//b

if(b==max){
for(b=0;b<max;b++){

x=mf(im[b]*size+imewh)*4;
y=mf(re[b]*size+imeh2)*imew2;
c=y+x;

if(c>=0 && c<imemax){
d=y+imew2-x;//どうせ左右対称なので反対側にも描画
if(b<c1){
if(imed[c+2]<255){imed[c+2]++,imed[d+2]++};
}else if(b<c2){
if(imed[c+1]<255){imed[c]++,imed[d]++};
}else{
if(imed[c]<255){imed[c+1]++,imed[d+1]++};
};
};

};

};

};

常に全体を描画してしまうためマンデルブロのようなズームはできませんググったら複素数どうしの計算がなんとなくわかったので書いときます

一つ目のパラメーターをre、二つ目のパラメーターをimとします

・足し算引き算

複(a,b)＋複(c,d)＝複(a+c, b+d)
複(a,b)－複(c,d)＝複(a-c, b-d)

中のreどうし、imどうしを足し引きするだけですね

・かけ算

中身を掛け合わせるわけですが、

reとreをかけたらreになる　reとimをかけたらimになる　imとimをかけたらプラマイを逆にしたreになる

という性質があるためこうなります

複(a,b)×複(c,d)＝複(ac-bd, ad+bc)

・割り算

かけ算がわかれば割り算も出せます

複(a,b)÷複(c,d)＝複(x,y)　→　複(a,b)＝複(c,d)×複(x,y)　→　複(a,b)＝複(cx-dy, dx+cy)

つまりa=cx-dy、b=dx+cyなのでこれを連立方程式でx=～、y=～になるまでがんばると

複(a,b)÷複(c,d)＝複( (ac+db)/(cc+dd), (b-dx)/c )

となります(imのxの部分はreの(ac+db)/(cc+dd)のこと)

・平方根

かけ算がわかってるので√複素数も出せます

√(複(a,b))＝複(x,y)　→　複(a,b)＝複(x,y)×複(x,y)　→　複(a,b)＝複(xx-yy,2xy)

つまり　a=xx-yy、b=2xy　なのでここからがんばると　4xxxx-4axx-b=0　の形が出せます

これはxxをxとおいた二次方程式と捉えると公式から解けて

√(複(a,b))＝複( ±√((a±√(aa+bb))/2) , b/2x )

となります(imのxの部分はreの±√((a±√(aa+bb))/2)のこと)

内側の±は数学的にどっちでも同じことですがマイナスだとプログラム的にエラーになるのでプラスにします

外側の±はどっちでもいいです。aの符号に合わせるのがよいでしょう

違ったらごめん ニュートン法とは方程式の解をとく方法の名前であり、

これはそれを使ったフラクタルであってこれ自体の名称は特にないようです

ジュリア集合的に縦横を複素数ととらえ

次の複＝（複^３－１）/（３×複^２）

を計算していきx,yが一定以下になる回数によって色わけします

function mandel5(ime,tx,ty,zoom,max,c1,c2,c3)

var a,b,c,d,e;
var x,y,x1,y1,x2,y2,x3,y3;
var ime,tx,ty,zoom;
var step,max,rx,ry,c1,c2,c3,e1,e2,e3;
var mf=Math.floor;

a=arguments;

ime=a[0];
tx=a[1];
ty=a[2];
zoom=a[3];
max=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
e1=256/c1;
e2=256/c2;
e3=256/c3;


step=2/zoom;

a=ime.width/2;
b=ime.height/2;

tx/=1000;
ty/=1000;

tx+=(tx/a)/zoom-step*a;
ty+=(ty/b)/zoom-step*b;

ry=ty;
c=0;
for(a=0;a<ime.height;a++){
rx=tx;
for(b=0;b<ime.width;b++){

x=rx;
y=ry;

for(d=0;d<max;d++){
x1=x*x-y*y;
y1=2*x*y;
x2=x*x1-y*y1-1;
y2=x*y1+y*x1;
if(x2*x2+y2*y2<0.001)break;
x3=x1*3;
y3=y1*3;
e=x3*x3+y3*y3;
x-=(x2*x3+y2*y3)/e;
y-=(x3*y2-y3*x2)/e;
};

ime.data[c]=mf((d%c1)*e1);
ime.data[c+1]=mf((d%c2)*e2);
ime.data[c+2]=mf((d%c3)*e3);

c+=4;
rx+=step;
};
ry+=step;
};

ジェネレーターとは線分をつなげたものです

各線分に相似なジェネレーターをはめこんでいくとフラクタルになります

有名なコッホ曲線とかC曲線とかいうやつです

ただコッホとかCは特定の形のジェネレーターの時にできるフラクタルを指す言葉で

この手法自体の正式な呼び名は無いようです

前述のイナズマも毎回ランダムなジェネレーターになるこれの一種です

function jen0(ime,retu,kai,kan,ki,c1,c2,c3)

var a,b,c;
var ime,gj,max,kai,len,mtank,atank,ltank;
var kaku,kyo,x,y,x1,x2,y1,y2,kan,ki;
var c1,c2,c3;

a=arguments;
ime=a[0];
retu=a[1];//点の配列
kai=a[2];//再帰回数
kan=a[3];
ki=a[4];
c1=a[5];
c2=a[6];
c3=a[7];


gj=utusi(ime);
amari=0;

max=retu.length/2;

atank=new Array(max-1);//角データ
ltank=new Array(max-1);//長さデータ

//全体の長さと角
x1=retu[0];
x2=retu[max*2-2];
y1=retu[1];
y2=retu[max*2-1];
kaku=Math.atan2(y2-y1,x2-x1);
kyo=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5);


//各線分の前との角度・長さの比を格納
for(a=0;a<max-1;a++){
b=a*2;
x1=retu[b];
y1=retu[b+1];
x2=retu[b+2];
y2=retu[b+3];
c=Math.atan2(y2-y1,x2-x1);
atank[a]=kaku-c;
kaku=c;
ltank[a]=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5)/kyo;
};


b=max-1;
mtank=new Array(kai+1);
for(a=0;a<kai+1;a++){
mtank[a]=new Array(b*2+2);
b*=(max-1);
};

for(a=0;a<retu.length;a++){
mtank[0][a]=retu[a];
};

for(a=0;a<kai;a++){
for(b=0;b<mtank[a].length-2;b+=2){
x1=mtank[a][b];
y1=mtank[a][b+1];
x2=mtank[a][b+2];
y2=mtank[a][b+3];
kaku=Math.atan2(y2-y1,x2-x1);
kyo=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5);

x=x1;
y=y1;
for(c=0;c<max-1;c++){
d=b*(max-1)+c*2;
mtank[a+1][d]=x;
mtank[a+1][d+1]=y;
kaku+=atank[c];
d=kyo*ltank[c];
x+=Math.cos(kaku)*d;
y+=Math.sin(kaku)*d;
};//c

};//b
mtank[a+1][mtank[a+1].length-2]=x;
mtank[a+1][mtank[a+1].length-1]=y;

};//a

//つなぐ
c=mtank[kai];
for(a=0;a<c.length-2;a+=2){
tensen0(gj,c[a],c[a+1],c[a+2],c[a+3],kan,c1,c2,c3);
};

modosi(ime,gj,ki);

だんだんでかくなる配列を使ってループさせています

普通に再帰を使えばこの1/3ぐらいのコードでできます

tensen0が前の余りによってスタートを調整するので、

つなぐ時に順番につなぐと精度があがります

これはおそらくcanvasの機能で線を引く時も同じですジェネレーターを特定の線分の位置で逆にはめこんでできたものはドラゴン曲線と呼ばれています

function jen1(ime,retu,kai,kan,ki,c1,c2,c3,htank)

var a,b,c;
var ime,gj,max,kai,len,mtank,atank,ltank,htank;
var kaku,kyo,x,y,x1,x2,y1,y2,kan,ki,ltank2,atank;
var c1,c2,c3,kaku2,at,lt;

a=arguments;
ime=a[0];
retu=a[1];//点の配列
kai=a[2];//再帰回数
kan=a[3];
ki=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
htank=a[8];//反転させる番号の配列

gj=utusi(ime);
amari=0;

max=retu.length/2;

atank=new Array(max-1);
ltank=new Array(max-1);
atank2=new Array(max-1);//逆の角データ
ltank2=new Array(max-1);//逆の長さデータ

x1=retu[0];
x2=retu[max*2-2];
y1=retu[1];
y2=retu[max*2-1];
kaku=Math.atan2(y2-y1,x2-x1);
kaku2=kaku+Math.PI;
kyo=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5);

for(a=0;a<max-1;a++){
b=a*2;
x1=retu[b];
y1=retu[b+1];
x2=retu[b+2];
y2=retu[b+3];
c=Math.atan2(y2-y1,x2-x1);
atank[a]=kaku-c;
kaku=c;
ltank[a]=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5)/kyo;
ltank2[max-2-a]=ltank[a];
};

for(a=0;a<max-1;a++){
b=max*2-a*2-1;
x2=retu[b-3];
y2=retu[b-2];
x1=retu[b-1];
y1=retu[b];
c=Math.atan2(y2-y1,x2-x1);
atank2[a]=kaku2-c;
kaku2=c;
};

b=max-1;
mtank=new Array(kai+1);
for(a=0;a<kai+1;a++){
mtank[a]=new Array(b*2+2);
b*=(max-1);
};

for(a=0;a<retu.length;a++){
mtank[0][a]=retu[a];
};

for(a=0;a<kai;a++){
for(b=0;b<mtank[a].length-2;b+=2){
x1=mtank[a][b];
y1=mtank[a][b+1];
x2=mtank[a][b+2];
y2=mtank[a][b+3];
kaku=Math.atan2(y2-y1,x2-x1);
kyo=Math.pow((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1),0.5);

x=x1;
y=y1;

if(htank[b/2%(max)]==1){//反転
at=atank2;
lt=ltank2;
}else{
at=atank;
lt=ltank;
};

for(c=0;c<max-1;c++){

d=b*(max-1)+c*2;
mtank[a+1][d]=x;
mtank[a+1][d+1]=y;

kaku+=at[c];
d=kyo*lt[c];

x+=Math.cos(kaku)*d;
y+=Math.sin(kaku)*d;
};//c

};//b
mtank[a+1][mtank[a+1].length-2]=x;
mtank[a+1][mtank[a+1].length-1]=y;

};//a

c=mtank[kai];
for(a=0;a<c.length-2;a+=2){
tensen0(gj,c[a],c[a+1],c[a+2],c[a+3],kan,c1,c2,c3);
};

modosi(ime,gj,ki);

ジェネレーターの中点を動かしてみます

move()
半径と角速度（ラジアンに追加する値）の異なる円軌道を複数加算して点を打ってくとサイクロイドになります

function sai0(ime,tx,ty,han,han2,han3,max,ki,col,t1,t2,t3)

var a,b,c,d;
var ime,tx,ty,x,y,han,han2,max,ki,col;
var gj,t1,t2,t3,rad,rad2,rad3;
var pai2=Math.PI*2;
var sin=Math.sin;
var cos=Math.cos;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
han2=a[4];//二個目の円の半径の比率
han3=a[5];//三個目の円の半径の比率
max=a[6];
ki=a[7];
col=a[8];
t1=a[9];//一個目の円の角速度
t2=a[10];//二個目の円の角速度
t3=a[11];//三個目の円の角速度

gj=utusi(ime);
rad=rad2=rad3=0;

for(a=0;a<max;a++){

rad+=t1;
rad2+=t2;
rad3+=t3

b=sin(rad)+sin(rad2)*han2+sin(rad3)*han3;
c=cos(rad)+cos(rad2)*han2+cos(rad3)*han3;

d=gra1(Math.atan2(x-b,y-c)/pai2,col,1);

x=b;
y=c;

b=x*han+tx;
c=y*han+ty;

if(a!=0)ten1(gj,b,c,d[0],d[1],d[2]);
};

modosi(ime,gj,ki);

正確にはスピログラフと呼ぶそうです

スピログラフは商標なのでもっと正確にはトコロイドもしくはハイポロイドと呼ぶそうです

ただどれも半径によって角速度が決まるのでこれは厳密にはどれでもありません頻繁に見かける手法ですが正式な名称は知りません

サイクロイドの描画を前の点との線にしただけです

function sai0(ime,tx,ty,han,han2,han3,max,ki,col,t1,t2,t3)

var a,b,c,d,maex,maey;
var ime,tx,ty,x,y,han,han2,max,ki,col;
var gj,t1,t2,t3,rad,rad2,rad3;
var pai2=Math.PI*2;
var sin=Math.sin;
var cos=Math.cos;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
han2=a[4];
han3=a[5];
max=a[6];
ki=a[7];
col=a[8];
t1=a[9];
t2=a[10];
t3=a[11];

gj=utusi(ime);
rad=rad2=rad3=0;
amari=0;

for(a=0;a<max;a++){

rad+=t1;
rad2+=t2;
rad3+=t3
b=sin(rad)+sin(rad2)*han2+sin(rad3)*han3;
c=cos(rad)+cos(rad2)*han2+cos(rad3)*han3;
d=gra1(Math.atan2(x-b,y-c)/pai2,col,1);
x=b;
y=c;

b=x*han+tx;
c=y*han+ty;

if(a!=0)tensen0(gj,maex,maey,b,c,0.4,
d[0],d[1],d[2])

maex=b;
maey=c;
};

modosi(ime,gj,ki);

色わけがくっきり出てしまうので単色のほうがいいです

サイクロイドより少ない計算で密に描画できます線の距離によって密度が変わるので変化を狭い範囲にしています

サイクロイドは円を重ねた式でしたが

これをサインコサインを使った適当な式にするとリサージュと呼ばれる図形になります

というかサイクロイドがリサージュの一種のようなもんです

確実にいつか元の位置に戻るのでカオスではないです

基本的な式は

x=sin(rad)
y=sin(rad2)

ですがこれでは面白みがないので

x=(cos(rad)+cos(rad2))/((cos(rad3)+sin(rad2))^2+0.5)
y=(sin(rad)+sin(rad2))/((sin(rad3)+cos(rad2))^2+0.5)

（radに対応した半径の比率をかける）
でやってみます

function sai2(ime,tx,ty,han,han2,han3,max,ki,col,t1,t2,t3)

var a,b,c,d,e;
var ime,tx,ty,x,y,han,han2,max,ki,col;
var gj,t1,t2,t3,rad,rad2,rad3;
var pai2=Math.PI*2;
var sin=Math.sin;
var cos=Math.cos;
var pow=Math.pow;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
han2=a[4];
han3=a[5];
max=a[6];
ki=a[7];
col=a[8];
t1=a[9];
t2=a[10];
t3=a[11];

gj=utusi(ime);
rad=rad2=rad3=0;

for(a=0;a<max;a++){
rad+=t1;
rad2+=t2;
rad3+=t3
d=cos(rad);
e=sin(rad2)*han2;
c=(sin(rad)+e)/(pow(sin(rad3)*han3+d,2)+0.5);
b=(d+cos(rad2)*han2)/
(pow(cos(rad3)*han3+e,2)+0.5);

d=gra1(Math.atan2(x-b,y-c)/pai2,col,1);

x=b;
y=c;
b=x*han+tx;
c=y*han+ty;
if(a!=0)ten1(gj,b,c,d[0],d[1],d[2]);
};

modosi(ime,gj,ki);

～かっこよかった値～

-0.397, 0.233, 0.935

0.339, 0.791, 0.982

-0.282, 0.445, 0.564　玉座

0.158, 0.461, 0.606　玉座２

0.174, 0.354, 0.522　メビウスの輪

0.026, -0.359, -0.104　便座

バラ曲線とは

x=sin(rad2)*cos(rad)
y=sin(rad2)*sin(rad)

で描画される円形にした正弦波です
前述のn葉線もこれで描けます

これだけでは面白みがないのでsai2をサンドイッチにしていろいろなスーパーバラ曲線（命名：俺）を作ってみます

var ime,col,a;
ctx[110].fillRect(0,0,200,200);

ime=new Array(20);

for(a=0;a<ime.length;a++){
ime[a]=ctx[110].getImageData(0,0,200,200);
};

//canvasは横に見てく

col=new Array(255,105,15,255,105,15,255,225,113);

a=sand(
"b=sin(rad2)+sin(rad2*3);"+
"x=(b*han2+1)*cos(rad)+sin(rad3)*han3*b;"+
"y=(b*han2+1)*sin(rad)+cos(rad3)*han3*b;",4,5);
a(ime[0],100,100,50,0.4,0.1,70000,0.1,col,
0.3,1,2.11);
ctx[110].putImageData(ime[0],0,0);

a=sand(
"b=sin(rad2);"+
"c=abs(b)*2;"+
"if(c>1)c=2-c;"+
"c=pow(c,2.5);"+
"x=(b*han2+1)*cos(rad)+cos(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+sin(rad3)*han3*c;",4,5);
a(ime[1],100,100,50,0.5,0.5,90000,0.2,col,
0.1,1,2.115);
ctx[111].putImageData(ime[1],0,0);

a=sand(
"b=sin(rad2);"+
"c=pow(sin(rad2*5),4);"+
"x=(b*han2+1)*cos(rad)+cos(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+sin(rad3)*han3*c;",4,5);
a(ime[2],100,100,50,0.7,0.2,10000,1,col,
0.1,1,2.1);
ctx[112].putImageData(ime[2],0,0);

a=sand(
"b=sin(rad2)+sin(rad2*19/3);"+
"x=(b*han2+1)*cos(rad)+sin(rad3)*han3*b;"+
"y=(b*han2+1)*sin(rad)+cos(rad3)*han3*b;",4,5);
a(ime[3],100,100,50,0.3,0.1,70000,0.2,col,
0.1,1,2.1121);
ctx[113].putImageData(ime[3],0,0);

a=sand(
"b=sin(rad2);"+
"d=1-abs(b);"+
"c=b*han2+1;"+
"x=c*sin(rad+cos(b))+sin(rad3)*han3*d;"+
"y=c*cos(rad+cos(b))+cos(rad3)*han3*d;",4,5);
a(ime[4],100,100,60,0.5,0.2,70000,0.2,col,
0.1,1,2.111);
ctx[114].putImageData(ime[4],0,0);

a=sand(
"b=(sin(rad2)+sin(rad2*7))/2;"+
"d=(1-abs(b))*b;"+
"c=b*han2+1;"+
"e=cos(rad2*9);"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[5],100,100,50,0.7,0.1,70000,0.2,col,
0.1,1,2.111);
ctx[115].putImageData(ime[5],0,0);

a=sand(
"b=(sin(rad2*9)+sin(rad2*7))/2;"+
"d=(1-abs(b))*b;"+
"c=b*han2+1;"+
"e=cos(rad2*3);"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[6],100,100,50,0.7,0.1,70000,0.2,col,
0.1,1,2.111);
ctx[116].putImageData(ime[6],0,0);

a=sand(
"b=(sin(rad2*7)+sin(rad2*17))/2;"+
"d=((1-abs(b))*6)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2*5);"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[7],100,100,50,0.7,0.05,70000,0.2,col,
0.1,1,2.111);
ctx[117].putImageData(ime[7],0,0);

a=sand(
"b=(sin(rad2)+sin(rad2*23))/2;"+
"d=((1-abs(b))*8)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2*21);"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[8],100,100,50,0.7,0.05,70000,0.2,col,
0.1,1,2.111);
ctx[118].putImageData(ime[8],0,0);

a=sand(
"c=sin(rad2);"+
"b=(c+cos(rad2*2))/2;"+
"x=(b*han2+1)*cos(rad)+sin(rad3)*han3*b*c;"+
"y=(b*han2+1)*sin(rad)+cos(rad3)*han3*b*c;",4,5);
a(ime[9],100,100,60,0.6,0.2,70000,0.2,col,
0.9,1,2.1111);
ctx[119].putImageData(ime[9],0,0);

a=sand(
"b=(sin(rad2*3)-sin(rad2*9))/2;"+
"d=(b*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*5)+cos(rad2*7))/2;"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[10],100,100,50,0.7,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[120].putImageData(ime[10],0,0);

a=sand(
"b=(sin(rad2*11)-sin(rad2*7))/2;"+
"d=(b*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*5)+cos(rad2*9))/2;"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[11],100,100,50,0.7,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[121].putImageData(ime[11],0,0);

a=sand(
"b=(sin(rad2*7)-sin(rad2*13))/2;"+
"d=(b*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*9)+cos(rad2*11))/2;"+
"x=c*sin(rad+e)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e)+cos(rad3)*han3*d;",4,5);
a(ime[12],100,100,50,0.7,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[122].putImageData(ime[12],0,0);

a=sand(
"b=sin(rad2*2);"+
"b=sin(rad2+sin(b+sin(b)*3));"+
"d=(b*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2*3);"+
"x=c*sin(rad+e/5)+sin(rad3)*han3*d;"+
"y=c*cos(rad+e/5)+cos(rad3)*han3*d;",4,5);
a(ime[13],100,100,50,0.7,0.1,70000,0.15,col,
0.2,1,2.11);
ctx[123].putImageData(ime[13],0,0);

a=sand(
"c=cos(rad2*6);"+
"b=(sin(rad2)+c)/2;"+
"c=1-abs(c);"+
"x=(b*han2+1)*cos(rad)+sin(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+cos(rad3)*han3*c;",4,5);
a(ime[14],100,100,45,1,0.15,70000,0.3,col,
0.1,1,2.1111);
ctx[124].putImageData(ime[14],0,0);

a(ime[15],100,100,45,1,0.15,70000,0.3,col,
0.7,1,2.1111);
ctx[125].putImageData(ime[15],0,0);

a=sand(
"b=(sin(rad2)-sin(rad2*3))/2;"+
"c=(1-abs(b));"+
"x=(b*han2+1)*cos(rad)+sin(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+cos(rad3)*han3*c;",4,5);
a(ime[16],100,100,50,0.7,0.15,70000,0.15,col,
0.1,1,2.111);
ctx[126].putImageData(ime[16],0,0);

a=sand(
"c=sin(rad2);"+
"b=sin(rad2+c);"+
"x=(b*han2+1)*cos(rad)+cos(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+sin(rad3)*han3*c;",4,5);
a(ime[17],100,100,50,0.7,0.2,70000,0.15,col,
0.1,1,2.1121);
ctx[127].putImageData(ime[17],0,0);

a=sand(
"c=sin(rad2)+sin(rad2*2);"+
"b=sin(rad2+c*2);"+
"x=(b*han2+1)*cos(rad)+cos(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+sin(rad3)*han3*c;",4,5);
a(ime[18],100,100,45,0.7,0.2,70000,0.15,col,
0.1,1,2.1121);
ctx[128].putImageData(ime[18],0,0);

a=sand(
"c=sin(rad2)+sin(rad2/2);"+
"b=sin(rad2+sin(c*2));"+
"x=(b*han2+1)*cos(rad)+cos(rad3)*han3*c;"+
"y=(b*han2+1)*sin(rad)+sin(rad3)*han3*c;",4,5);
a(ime[19],100,100,50,0.7,0.2,70000,0.15,col,
0.2,1,3.1929229);
ctx[129].putImageData(ime[19],0,0);

textarea id='pan4'

var a,b,c,d,e,f,g;
var ime,tx,ty,x,y,maex,maey,han,han2,max,ki,col;
var gj,t1,t2,t3,t4,rad,rad2,rad3,rad4;
var pai2=Math.PI*2;
var sin=Math.sin;
var cos=Math.cos;
var pow=Math.pow;
var abs=Math.abs;

a=arguments;
ime=a[0];
tx=a[1];
ty=a[2];
han=a[3];
han2=a[4];
han3=a[5];
max=a[6];
ki=a[7];
col=a[8];
t1=a[9];
t2=a[10];
t3=a[11];

t4=t2*2+t1;
gj=utusi(ime);
rad=rad2=rad3=rad4=0;

for(a=0;a<max;a++){
rad+=t1;
rad2+=t2;
rad3+=t3;
rad4+=t4;

textarea id='pan5'

d=gra1(Math.atan2(maex-x,maey-y)/pai2,col,1);
b=x*han+tx;
c=y*han+ty;
if(a!=0)ten1(gj,b,c,d[0],d[1],d[2]);
maex=x;
maey=y;
};
modosi(ime,gj,ki);

～考え方～

基本的なバラ曲線だと真ん中が濃くなるので

b=sin(rad2)*han2+1
x=b*cos(rad)
y=b*sin(rad)

と波形に１以下をかけ＋１して浮かせますそして

b=sin(rad2)*han2+1
x=b*cos(rad)+cos(rad3)*han3
y=b*sin(rad)+sin(rad3)*han3

とrad3の円軌道を足すと線がぶっとくなりますさらに

b=sin(rad2)*han2+1
x=b*cos(rad)+cos(rad3)*han3*sin(rad2)
y=b*sin(rad)+sin(rad3)*han3*sin(rad2)

小さい円にsin(rad2)をかけることで
小さい円の大きさが波の真ん中で0になります
cosにすると波の上下で0になります

大きい円のradに

b=sin(rad2)*han2+1
x=b*cos(rad+sin(rad2*?))+cos(rad3)*han3*sin(rad2)
y=b*sin(rad+sin(rad2*?))+sin(rad3)*han3*sin(rad2)

のようにsin(rad2)を足すと螺旋状になります
cos(rad2)を足すと波が横に広がります
cosの時は?は奇数倍がいいです

また波形を

b=abs(sin(rad2))

とabsすると花びら型になり
-absだとトゲトゲになりますまた

b=sin(rad2)+sin(rad2*3)+1

と奇数倍したものを加算するとナイスな波になります
偶数倍を加算する時はcosのほうがいいです
小さい円にかける値は倍化したののほうがナイスですまた

b=sin(rad2+sin(rad2*?)*?)+1

とsinの中でsinした式にするとFM変調した波形になります
FM変調は dx7 fm音源講座でググってみるとよいです
とげが左右対称にならないので扱いが難しいです

radとrad2は近い公倍数を持つ値にしてrad3は適当に小数点をつけるとよいです
han2は0.5～0.8 han3は0.1～0.2ぐらいがよいです

スーパーバラ曲線では式が

大きい円×波形＋小さい円

でしたがこれを

（大きい円＋中くらいの円）×波形＋小さい円

にするとハイパーバラ曲線（命名：俺）になります

中円の半径は小円を収縮させる周期と逆の位置で0にするとよいです

中円のラジアンに追加する値は大円と波のラジアンに追加する値から特定の値を出しときます

式は

t4=2*t2+t1

です

この値は波の左右対称を崩さずに大きな変化を与えます

var ime,col,a;
ctx[130].fillRect(0,0,200,200);

ime=new Array(16);

for(a=0;a<ime.length;a++){
ime[a]=ctx[130].getImageData(0,0,200,200);
};

col=new Array(255,105,15,255,105,15,255,225,113);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"x=c*(sin(rad+e)+sin(rad4)/2*d)+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[0],100,100,50,0.4,0.1,70000,0.2,col,
0.1,1,2.11);
ctx[130].putImageData(ime[0],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/3*d)+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/3*d)+cos(rad3)*han3*f;",
4,5);
a(ime[1],100,100,60,0.4,0.1,70000,0.2,col,
0.1,1,2.11);
ctx[131].putImageData(ime[1],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/3*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/3*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[2],100,100,60,0.4,0.1,70000,0.2,col,
0.1,1,2.11);
ctx[132].putImageData(ime[2],0,0);

a=sand(
"b=(sin(rad2*3)-sin(rad2*5))/2;"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/3*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/3*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[3],100,100,60,0.4,0.1,70000,0.2,col,
0.1,1,2.11);
ctx[133].putImageData(ime[3],0,0);

a=sand(
"b=(sin(rad2*7)-sin(rad2*3))/2;"+
"d=(abs(b)*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*5)+cos(rad2*9))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/3*d*f)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/3*d*f)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[4],100,100,60,0.5,0.02,70000,0.2,col,
0.3,1,2.111);
ctx[134].putImageData(ime[4],0,0);

a=sand(
"b=(sin(rad2*7)-sin(rad2*9))/2;"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*5)+cos(rad2*11))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[5],100,100,55,0.5,0.02,70000,0.2,col,
0.3,1,2.111);
ctx[135].putImageData(ime[5],0,0);

a=sand(
"b=(sin(rad2*11)-sin(rad2*9))/2;"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*5)+cos(rad2*7))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[6],100,100,55,0.5,0.02,70000,0.2,col,
0.1,1,2.111);
ctx[136].putImageData(ime[6],0,0);

a=sand(
"b=(sin(rad2*5)-sin(rad2*3))/2;"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*11)+cos(rad2*7))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[7],100,100,55,0.5,0.02,70000,0.2,col,
0.1,1,2.111);
ctx[137].putImageData(ime[7],0,0);

a=sand(
"b=(sin(rad2*5)-sin(rad2*7))/2;"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2)+cos(rad2*3))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[8],100,100,55,0.5,0.02,70000,0.2,col,
0.3,1,2.111);
ctx[138].putImageData(ime[8],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2)+cos(rad2*3))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[9],100,100,55,0.5,0.04,70000,0.2,col,
0.1,1,2.111);
ctx[139].putImageData(ime[9],0,0);

a=sand(
"b=sin(rad2*3-cos(rad2));"+
"d=(abs(cos(b))*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[10],100,100,55,0.5,0.05,70000,0.2,col,
0.2,1,2.111);
ctx[140].putImageData(ime[10],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=(cos(rad2*3)-cos(rad2*5))/2;"+
"f=1-d;"+
"x=c*(sin(rad+e/3)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[11],100,100,55,0.5,0.1,70000,0.2,col,
0.1,1,2.111);
ctx[141].putImageData(ime[11],0,0);

a=sand(
"b=(sin(rad2)-sin(rad2*5))/2;"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[12],100,100,55,0.5,0.1,70000,0.2,col,
0.2,1,2.111);
ctx[142].putImageData(ime[12],0,0);

a=sand(
"b=(sin(rad2*11)-sin(rad2*9))/2;"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[13],100,100,55,0.5,0.1,70000,0.2,col,
0.25,1,2.111);
ctx[143].putImageData(ime[13],0,0);

a=sand(
"b=sin(rad2-cos(rad2)*2);"+
"d=(abs(b)*6)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[14],100,100,60,0.5,0.05,70000,0.2,col,
0.2,1,2.111);
ctx[144].putImageData(ime[14],0,0);

a=sand(
"b=sin(rad2-cos(rad2*5)*3);"+
"d=(abs(cos(b))*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2*3);"+
"f=1-d;"+
"x=c*(sin(rad)+sin(rad4)/2*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+cos(rad4)/2*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[15],100,100,50,0.5,0.05,70000,0.25,col,
0.25,1,2.111);
ctx[145].putImageData(ime[15],0,0);

ハイパーは太さ0の状態（俺の脳内で勝手に骨と呼んでる）

でも味があって楽しめます

適当に図形を並べて万華鏡のように表示させても

似たようなものが作れるため繋がりがみえないほど

細かくさせると意味が無くなります

ハイパーバラ曲線の中円のラジアンに追加する値は

t4=2*t2+t1 でしたが

この2の部分が偶数ならなんでもいけることが後から発覚しましたのでちょっとやってみます

var ime,col,a;
ctx[146].fillRect(0,0,200,200);

ime=new Array(20);

for(a=0;a<ime.length;a++){
ime[a]=ctx[146].getImageData(0,0,200,200);
};

col=new Array(255,105,15,255,105,15,255,225,113);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*6+rad;"+
"x=c*(sin(rad+e/3)+(sin(rad4)/2+sin(g)/5)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/3)+(cos(rad4)/2+cos(g)/5)*d)"+
"+cos(rad3)*han3*f;",4,5)
a(ime[0],100,100,50,0.4,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[146].putImageData(ime[0],0,0);

a=sand(
"b=(sin(rad2)-sin(rad2*3))/2;"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"f=1-d;"+
"g=rad2*6+rad;"+
"x=c*(sin(rad)+(sin(rad4)/2+sin(g)/5)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+(cos(rad4)/2+cos(g)/5)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[1],100,100,50,0.4,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[147].putImageData(ime[1],0,0);

a=sand(
"b=(sin(rad2*5)-sin(rad2*3))/2;"+
"d=(abs(b)*8)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad)+(sin(g)/3)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad)+(cos(g)/3)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[2],100,100,50,0.4,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[148].putImageData(ime[2],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*6)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad-e/4)+(sin(g)/2)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad-e/4)+(cos(g)/2)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[3],100,100,50,0.4,0.05,70000,0.2,col,
0.2,1,2.11);
ctx[149].putImageData(ime[3],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*10+rad;"+
"x=c*(sin(rad+e/2)+(sin(g)/3)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/2)+(cos(g)/3)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[4],100,100,50,0.4,0.1,70000,0.2,col,
0.2,1,2.11);
ctx[150].putImageData(ime[4],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*4)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad+e/2)+(sin(g)/4)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/2)+(cos(g)/4)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[5],100,100,55,0.5,0.04,70000,0.2,col,
0.3,1,2.11);
ctx[151].putImageData(ime[5],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2+cos(rad2*3)-cos(rad2*5));"+
"f=1-d;"+
"g=rad2*8+rad;"+
"x=c*(sin(rad+e/4)+(sin(g)/3)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/4)+(cos(g)/3)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[6],100,100,50,0.5,0.04,70000,0.2,col,
0.2,1,2.11);
ctx[152].putImageData(ime[6],0,0);

a=sand(
"b=sin(rad2*3);"+
"d=(abs(b)*20)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad-e/4)+(sin(g)/3)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad-e/4)+(cos(g)/3)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[7],100,100,50,0.5,0.04,70000,0.2,col,
0.2,1,2.11);
ctx[153].putImageData(ime[7],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*7)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2+cos(rad2*7)/2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad+e/2)+(sin(g))*d*f)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/2)+(cos(g))*d*f)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[8],100,100,50,0.7,0.05,70000,0.2,col,
0.2,1,2.1111);
ctx[154].putImageData(ime[8],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*16)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*8+rad;"+
"h=rad2*18+rad;"+
"x=c*(sin(rad+e/2)+(sin(g)/4)*d"+
"+sin(h)/12*f)+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/2)+(cos(g)/4)*d"+
"+cos(h)/12*f)+cos(rad3)*han3*f;",4,5);
a(ime[9],100,100,55,0.5,0.04,70000,0.2,col,
0.7,1,2.1111);
ctx[155].putImageData(ime[9],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"d=1-d;"+
"c=b*han2+1;"+
"e=cos(rad2+cos(rad2*3)-cos(rad2*5));"+
"f=1-d;"+
"g=rad2*8+rad;"+
"x=c*(sin(rad+e/5)+(sin(g)/4)*d)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/5)+(cos(g)/4)*d)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[10],100,100,55,0.5,0.04,70000,0.2,col,
0.9,1,2.1111);
ctx[156].putImageData(ime[10],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*3)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"x=c*(sin(rad+e/2)+(sin(g))*d*f)"+
"+sin(rad3)*han3*f;"+
"y=c*(cos(rad+e/2)+(cos(g))*d*f)"+
"+cos(rad3)*han3*f;",4,5);
a(ime[11],100,100,55,0.5,0.04,70000,0.2,col,
0.7,1,2.1111);
ctx[157].putImageData(ime[11],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2);"+
"f=1-d;"+
"g=rad2*4+rad;"+
"h=d*f*4;"+
"x=c*(sin(rad-e/4)+sin(g)/4*h)"+
"+sin(rad3)*han3*d;"+
"y=c*(cos(rad-e/4)+cos(g)/4*h)"+
"+cos(rad3)*han3*d;",4,5);
a(ime[12],100,100,50,0.6,0.1,70000,0.2,col,
0.2,1,2.1111);
ctx[158].putImageData(ime[12],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"c=b*han2+1;"+
"e=cos(rad2*3);"+
"f=1-d;"+
"f*=f;"+
"g=rad2*4+rad;"+
"h=d*f*4;"+
"i=1-h;"+
"i*=i;"+
"x=c*(sin(rad-e/2*i)-sin(g)/2*h)"+
"+sin(rad3)*han3*d;"+
"y=c*(cos(rad-e/2*i)-cos(g)/2*h)"+
"+cos(rad3)*han3*d;",4,5);
a(ime[13],100,100,50,0.6,0.07,70000,0.2,col,
0.2,1,2.1111);
ctx[159].putImageData(ime[13],0,0);

a=sand(
"b=sin(rad2);"+
"d=(abs(b)*5)%2;"+
"if(d>1)d=2-d;"+
"d*=d;"+
"c=b*han2+1;"+
"e=cos(rad2*3);"+
"f=1-d;"+
"f*=f;"+
"h=e*f*3;"+
"x=c*(sin(rad-e)+sin(rad4+h)/3*f)"+
"+sin(rad3)*han3*d;"+
"y=c*(cos(rad-e)+cos(rad4+h)/3*f)"+
"+cos(rad3)*han3*d;",4,5);
a(ime[14],100,100,50,0.6,0.07,70000,0.2,col,
0.2,1,2.1111);
ctx[160].putImageData(ime[14],0,0);

※同じ計算をループ内でやってしまっているので

かなり無駄があります

わかりずらくなったので別にまとめました↓

～スーパーバラ曲線を作ろう～
http://www42.atwiki.jp/syugyou?cmd=upload&act=open&pageid=250&file=bar.html

二点からの１/（距離２乗）を足してルートして１を割った値によって描画すると

二つの円がつながった図形になります

本来は3Dに使われる手法で式はたぶん本家とぜんぜん違います

function meta0(ime,tx1,ty1,tx2,ty2,han,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,han,tx1,ty1,tx2,ty2,er,c1,c2,c3;

a=arguments;
ime=a[0];
tx1=a[1];//点１
ty1=a[2];
tx2=a[3];//点２
ty2=a[4];
han=a[5];
er=a[6];
c1=a[7];
c2=a[8];
c3=a[9];

c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=1/((ty1-a)*(ty1-a)+(tx1-b)*(tx1-b));
e=1/((ty2-a)*(ty2-a)+(tx2-b)*(tx2-b));
d=1/Math.pow(d+e,0.5);

if(d<han+er){
e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

３個以上の点でメタボールを作ってみます

その際すべての点と距離を求めるわけですが、大量の点があると処理が重くなってしまいます

そこでx,yがある程度離れている点は計算しないように絞りこみます

一つの点が平面上に無限に影響しているので絞るほど精度は落ちます

function meta1(ime,retu,han,bai,er,gen,i1,i2,i3,i4,i5,i6)

var a,b,c,d,e,f;
var ime,han,x,y,er,bai,c1,c2,c3;
var max,gen,i1,i2,i3,i4,i5,i6,r1,r2;
var mf=Math.floor;

a=arguments;
ime=a[0];
retu=a[1];//点の座標の配列
han=a[2];
bai=a[3];
er=a[4];
gen=a[5];//絞りこみ倍率
i1=a[6];
i2=a[7];
i3=a[8];
i4=a[9];
i5=a[10];
i6=a[11];

gen=(han+er)*gen;
c=0;
for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=0;


for(e=0;e<retu.length;e+=2){
x=Math.abs(b-retu[e]);
if(x<gen){//絞りこむ
y=Math.abs(a-retu[e+1]);
if(y<gen){//絞りこむ
d+=1/(y*y+x*x);
};
};
};

d=1/Math.pow(d,0.5);

if(d<han+er){

r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r1=0.5-Math.cos(r1*Math.PI)/2;//コサイン補間
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d>han)e=(han+er-d)/er;
ant(ime,c,c1,c2,c3,e);
};

c+=4;
};
};

液体っぽいです

大量の点を法則に沿って動かすことで水っぽいものを描画します

エセとついているのは本来なら使う流体力学をまったく使っていないからです

※まだ実験中の項目です。いっさいあてにしないでください

LV1：粒子を作る

グローバル変数のryuusiを配列にして粒子オブジェクトを格納します

function setryu0(max,c1,c2,c3)

var a,b,c,d,max,c1,c2,c3;
var mf=Math.floor;
a=arguments;
max=a[0];//個数
c1=a[1];
c2=a[2];
c3=a[3];
ryuusi=new Array(max);
for(a=0;a<max;a++){
ryuusi[a]=new Object();
b=ryuusi[a];
b.x=80+Math.random()*40;//x座標
b.y=30+Math.random()*40;//y座標
b.rx=0;//x増加
b.ry=0;//y増加
b.c1=c1;//赤
b.c2=c2;//緑
b.c3=c3;//青
};

LV2：粒子を動かす

毎ターン各粒子の座標に増加率を足して描画します

増加率に重力を足していきます

はじにあたったら反射させて増加率を下げます

function ryumove0(ime)

var a,b;
var ime,gj;
ime=arguments[0];
gj=utusi(ime);
for(b=0;b<ryuusi.length;b++){
a=ryuusi[b];

//移動
a.x+=a.rx;
a.y+=a.ry;

//壁反射
if(a.x<0){a.rx=-a.rx;a.x=-a.x;a.ry/=1.5};
if(a.y<0){a.ry=-a.ry;a.y=-a.y;a.ry/=1.5};
if(a.x>=200){a.rx=-a.rx;a.x=399-a.x;a.rx/=1.5};
if(a.y>=200){a.ry=-a.ry;a.y=399-a.y;a.ry/=1.5};

//重力
a.rx+=juux;
a.ry+=juuy;

ten1(gj,a.x,a.y,a.c1,a.c2,a.c3);
};
modosi(ime,gj,1);

move()

どんどん平べったくなってしまいます

LV3：重ならないようにする

平べったくならないように重なりにくくします

平面を等間隔にわけて粒子を登録させます。

その際すでに粒子が登録されてたら別な場所にワープさせます

rytankというグローバル変数が用意されているのでこれを二次元配列にして粒子を登録します

グローバル変数ryrateで1ピクセルを何分割するか決めてます

各初期値は-1にします
function setrytank(x,y)

var x,y,a,b;
x=arguments[0]*ryrate;//横サイズ
y=arguments[1]*ryrate;//縦サイズ
rytank=new Array(y);
for(a=0;a<y;a++){
rytank[a]=new Array(x);
for(b=0;b<x;b++){
rytank[a][b]=-1;
};
};

for(a=0;a<ryuusi.length;a++){
touroku(a);
};

rytankに粒子を登録する関数を作ります

function touroku(ban)

var a,b,c,d,e,f,g,ban,x,y;
var sx,sy,ex,ey,tate,yoko;
var mf=Math.floor;

ban=arguments[0];//粒子番号
x=mf(ryuusi[ban].x*ryrate);//粒子x
y=mf(ryuusi[ban].y*ryrate);//粒子y
tate=rytank.length-1;
yoko=rytank[0].length-1;

if(rytank[y][x]!=-1){
//すでに何かいたら空いてる場所を探す
for(c=1;c<10000;c++){

sy=y-c;if(sy<0)sy=0;
ey=y+c;if(ey>=tate)ey=tate;
sx=x-c;if(sx<0)sx=0;
ex=x+c;if(ex>=yoko)ex=yoko;

f=1;
d=sx;
e=ex;//たまに左右逆に
if(Math.random()<=0.5){f=d;d=e;e=f;f=-1};

for(a=sy+1;a<=ey-1;a++){//左
if(rytank[a][d]==-1){pp(a,d);return};
};
for(a=sy+1;a<=ey-1;a++){//右
if(rytank[a][e]==-1){pp(a,e);return};
};
g=d;
for(b=sx;b<=ex;b++){//上
if(rytank[sy][g]==-1){pp(sy,g);return};g+=f;
};
g=d;
for(b=sx;b<=ex;b++){//下
if(rytank[ey][g]==-1){pp(ey,g);return};g+=f;
};

};//c
};

rytank[y][x]=ban;

 function pp(yy,xx){
 ryuusi[ban].y=(yy+0.5)/ryrate;
 ryuusi[ban].x=(xx+0.5)/ryrate;
 rytank[yy][xx]=ban;
 return;
 }

毎ターンごとに各粒子の登録と解約をするようにryumove0を改造します

function ryumove1(ime)

var a,b,c;
var ime,gj;
var mf=Math.floor;
ime=arguments[0];
gj=utusi(ime);
for(b=0;b<ryuusi.length;b++){
a=ryuusi[b];

rytank[mf(a.y*ryrate)][mf(a.x*ryrate)]=-1;//解約

a.x+=a.rx;
a.y+=a.ry;

for(;;){//複数回壁に当たってもいいようにループ
c=0;
if(a.x<0){a.rx=-a.rx;a.x=-a.x;a.rx/=1.5;c=1};
if(a.y<0){a.ry=-a.ry;a.y=-a.y;a.ry/=1.5;c=1};
if(a.x>=200){a.rx=-a.rx;a.x=399-a.x;a.rx/=1.5;c=1};
if(a.y>=200){a.ry=-a.ry;a.y=399-a.y;a.ry/=1.5;c=1};
if(c==0)break;
};

a.rx+=juux;
a.ry+=juuy;

touroku(b);//登録

ten1(gj,a.x,a.y,a.c1,a.c2,a.c3);
};
modosi(ime,gj,1);

では動かしてみましょう

縦にしか動かしてないはずなのに横に広がりましたね

しかしこれは登録時のワープによるもので力学的なものではありません

LV4：圧力と粘り気を加える

隣接する粒子によってrx,ryを変化させます

function atu0(lv)

var a,b,c,d,e,t,x,y,tate,yoko,lv;
var mf=Math.floor;
lv=arguments[0];
t=rytank;
tate=t.length;
yoko=t[0].length;
for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];

x=mf(b.x*ryrate);
y=mf(b.y*ryrate);

if(x-1>=0){　//左
if(t[y][x-1]!=-1){
b.rx+=0.2*lv;
};
};

if(x+1<yoko){　//右
if(t[y][x+1]!=-1){
b.rx-=0.2*lv;
};
};

if(y-1>=0){　//上
if(t[y-1][x]!=-1){
b.ry+=0.2*lv;
};
};

if(y+1<tate){　//下
if(t[y+1][x]!=-1){
b.ry-=0.2*lv;
};
};

if(y-1>=0 && x-1>=0){　//左上
if(t[y-1][x-1]!=-1){
b.ry+=0.1*lv;
b.rx+=0.1*lv;
};
};

if(y-1>=0 && x+1<yoko){　//右上
if(t[y-1][x+1]!=-1){
b.ry+=0.1*lv;
b.rx-=0.1*lv;
};
};

if(y+1<tate && x-1>=0){　//左下
if(t[y+1][x-1]!=-1){
b.ry-=0.1*lv;
b.rx+=0.1*lv;
};
};

if(y+1<tate && x+1<yoko){　//右下
if(t[y+1][x+1]!=-1){
b.ry-=0.1*lv;
b.rx-=0.1*lv;
};
};

};

隣に隣接してたら0.2、斜めに隣接してたら0.1逆方向に補正します

function nen0(lv)

var a,b,c,d,e,t,x,y,tate,yoko,lv,lv2;
var mf=Math.floor;
var pai=Math.PI;
lv=arguments[0];
lv2=1-lv;
t=rytank;
tate=t.length;
yoko=t[0].length;
for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];

x=mf(b.x*ryrate);
y=mf(b.y*ryrate);

b.xx=0;
b.yy=0;

if(x-1>=0){
if(t[y][x-1]!=-1){
c=ryuusi[t[y][x-1]];
b.xx+=c.rx;
b.yy+=c.ry;
};
};

if(x+1<yoko){
if(t[y][x+1]!=-1){
c=ryuusi[t[y][x+1]];
b.xx+=c.rx;
b.yy+=c.ry;
};
};

if(y-1>=0){
if(t[y-1][x]!=-1){
c=ryuusi[t[y-1][x]];
b.xx+=c.rx;
b.yy+=c.ry;
};
};

if(y+1<tate){
if(t[y+1][x]!=-1){
c=ryuusi[t[y+1][x]];
b.xx+=c.rx;
b.yy+=c.ry;
};
};

if(y-1>=0 && x-1>=0){
if(t[y-1][x-1]!=-1){
c=ryuusi[t[y-1][x-1]];
b.xx+=c.rx/2;
b.yy+=c.ry/2;
};
};

if(y-1>=0 && x+1<yoko){
if(t[y-1][x+1]!=-1){
c=ryuusi[t[y-1][x+1]];
b.xx+=c.rx/2;
b.yy+=c.ry/2;
};
};

if(y+1<tate && x-1>=0){
if(t[y+1][x-1]!=-1){
c=ryuusi[t[y+1][x-1]];
b.xx+=c.rx/2;
b.yy+=c.ry/2;
};
};

if(y+1<tate && x+1<yoko){
if(t[y+1][x+1]!=-1){
c=ryuusi[t[y+1][x+1]];
b.xx+=c.rx/2;
b.yy+=c.ry/2;
};
};

};


for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];
b.rx=(b.rx*lv2+b.xx*lv/6);
b.ry=(b.ry*lv2+b.yy*lv/6);
};

隣接する粒子の方向を加算します

lv（0～1）で影響度を決めます

斜めは半分の影響にします

直接rx,ryを変えずに一度値をとっておいて

ループが終わってからもっかい回して変えます

では動かしてみましょう

うーん

なんか違いますね

沸騰してるし

LV5：もっと遠くの粒子を参照する

nen0は粒子が他と接触していないと遅くなり洗剤みたいになっていたようです

でも面白いんで残しておきます

それを解消しつつ広範囲の粒子を見るようatu0とnen0を改造します

function atu1(lv,han)

var a,b,c,d,e,t,x,y,tate,yoko,lv,han;
var mf=Math.floor;
lv=arguments[0];
han=arguments[1];//上下左右何マス見るか
t=rytank;
tate=t.length;
yoko=t[0].length;
for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];

x=mf(b.x*ryrate);
y=mf(b.y*ryrate);

for(c=y-han;c<=y+han;c++){
for(d=x-han;d<=x+han;d++){

if(c>=0 && c<tate && d>=0 && d<yoko){
if(t[c][d]!=-1){
b.rx+=-sign(d-x)*0.2/han*lv;
b.ry+=-sign(c-y)*0.2/han*lv;
};
};

};
};

};

function nen1(lv,han)

var a,b,c,d,e,t,x,y,tate,yoko,lv;
var mf=Math.floor;
lv=arguments[0];
han=arguments[1];
t=rytank;
tate=t.length;
yoko=t[0].length;
for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];

x=mf(b.x*ryrate);
y=mf(b.y*ryrate);
b.xx=0;
b.yy=0;
b.rr=0;

for(c=y-han;c<=y+han;c++){
for(d=x-han;d<=x+han;d++){

if(c>=0 && c<tate && d>=0 && d<yoko){
if(t[c][d]!=-1 && c!=y && d!=x){
e=ryuusi[t[c][d]];
b.xx+=e.rx;
b.yy+=e.ry;
b.rr++;//粒子が存在した数
};
};

};
};

};

c=(han*2+1)*(han*2+1)-1;//見たマス数
for(a=0;a<ryuusi.length;a++){
b=ryuusi[a];
if(b.rr==0)continue;
d=b.rr/c*lv/10;
e=1-d;
b.rx=b.rx*e+b.xx/b.rr*d;
b.ry=b.ry*e+b.yy/b.rr*d;
};

では動かしてみましょう

ミルククラウンのようなものが出ました

～結論～

重いわりに動きが悪いです

少ない粒子でメタボールを使うか

別言語でちゃんとした粒子法をやったほうがいいです 10000個の粒子をピクセルに対応したノイズに合わせて飛ばす技法です

x,yの加速度にノイズ-0.5を加算していきます

ノイズが二つ必要ですが設定ミスでひとつしか用意できないので縦に倍長くノイズをとります

画面外に行ったら反対側に移動させます

どこまでも加速しないようある程度速くなったら1以下の適当な数をかけます

globalalphaで薄めた画面をgetすることで残像がつきます

function liq0(ime)

var a,b,x,y;
var ime,gj;
var mf=Math.floor;
var ma=Math.abs;
ime=arguments[0];
gj=utusi(ime);
for(b=0;b<ryuusi.length;b++){
a=ryuusi[b];

//移動
a.x+=a.rx;
a.y+=a.ry;

//一周
a.x=a.x%200;
a.y=a.y%200;
if(a.x<0)a.x+=200;
if(a.y<0)a.y+=200;

x=mf(a.x);
y=mf(a.y);

//ノイズ加速
a.rx+=rantank[y][x]-0.5;
a.ry+=rantank[y+200][x]-0.5;

//減速
if(ma(a.rx)>1)a.rx*=ggen;
if(ma(a.ry)>1)a.ry*=ggen;

ten1(gj,a.x,a.y,a.c1,a.c2,a.c3);
};
modosi(ime,gj,1);

action script3でこれの派生形がたくさん公開されています

現在は100000個の粒子を高速で飛ばせるようです

本来はパーティクル（小さい円）を使いますがcanvasでは重くなってしまいます Liquid10000の要領でノイズに合わせてtensen0を引くとフレアっぽくなります

function liq1(ime,kai,rx,ry,c1,c2,c3)

var a,b,c,x,y,x1,y1,rx,ry,mx,my,gj;
var ime,seed,kai,c1,c2,c3;

a=arguments;
ime=a[0];
kai=a[1];//１ピクセルから線をひく回数
mx=a[2];//横のノイズから引く値
my=a[3];//縦のノイズから引く値
c1=a[4];
c2=a[5];
c3=a[6];

gj=utusi(ime);

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){
amari=0;
x=b;
y=a;

rx=ry=0;

for(c=0;c<kai;c++){
d=(c+1)/kai;

rx+=ranput1(x,y)-mx;
ry+=ranput1(x,y+200)-my;
x1=x+rx;
y1=y+ry;
tensen0(gj,x,y,x1,y1,0.4,c1*d,c2*d,c3*d);
x=x1;
y=y1
};

};
};

modosi(ime,gj,1);

画面外からひかれる線がないのではじっこが薄くなってしまいますこれはアトラクタと呼ぶか謎ですが

全てのピクセルで式を一回計算し次の点との角度で色づけすれば全体に色がつきます（当然ですが）

宇宙アトラクタの式でやってみます

function mandel6(ime,tx,ty,zoom,col,t1,t2,t3,t4)

var a,b,c,d,e;
var x,y;
var ime,tx,ty,zoom,t1,t2,t3,t4,col;
var step,col,gj,tate,yoko;
var pai=Math.PI;

a=arguments;

ime=a[0];
tx=a[1];
ty=a[2];
zoom=a[3]/10;
col=a[4];
t1=a[5];
t2=a[6];
t3=a[7];
t4=a[8];

gj=utusi(ime);
tate=ime.height;
yoko=ime.width;
step=1;

for(a=-1;a<=tate;a+=step){
for(b=-1;b<=yoko;b+=step){

y=(ty+a-tate)/tate/zoom;
x=(tx+b-yoko)/yoko/zoom;

c=t3-x;
d=t4-y;
for(h=0;h<3;h++){
e=t1-c;
f=t2-d;
c=e*e-f*f;
d=2*e*f;
};

e=c*c+d*d+0.1;
c/=e;
d/=e;

d=Math.atan2(d-y,c-x);
d=gra1(d/pai,col,1);
ten1(gj,a,b,d[0],d[1],d[2]);
};
};

modosi(ime,gj,step*step);

単色にしたほうがきれいです

本来形を成さない式でもなんらかの模様が出るのである意味無限の可能性がある手法ですゲーム等でimageDataを使う場合、いちいち計算せずに最初に作って使いまわします

その際どことアンチエイリアスがかかるかわからないわけですから、

ここまでのアンチエイリアス技術はまったく役に立ちません＞＜

動的にアンチエイリアスをかけるには透明なcanvasを取得し、

アンチエイリアス部分は色はそのままに４つ目のバイトデータを変えます

0～255の整数値に直して入れます

上のen1()を直すとこうなります

function en5(ime,tx,ty,han,er,c1,c2,c3)

var a,b,c,d,e,f;
var ime,han,tx,ty,er,c1,c2,c3;
var mf=Math.floor;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];
er=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(d<han+er){

ime.data[c]=c1;
ime.data[c+1]=c2;
ime.data[c+2]=c3;

e=1;
if(d>han)e=(han+er-d)/er;
ime.data[c+3]=mf(255*e);

};

c+=4;
};
};

おー、うまく透過でき・・あれ！？

重なってる部分がおかしいですね

単品ならこの処理でいいのですが、すでに何か描画されている場合は↓こんな処理が必要です

自分の透過度（0～1）をa、相手の透過度（0～1）をbとして

（自分の色×a　＋　相手の色×（１－a）×b）÷（a+（１－a）×b）

に色を変え、透過度を

（１－（１－a）×（１－b））×２５５

にする

これはめんどいんで別に関数を作っとくとよいです↓

function suke(ime,ban,c1,c2,c3,c4)

var a,b,c,d,e;
var ime,nam,c1,c2,c3,c4;
var mf=Math.floor;

a=arguments;
ime=a[0];
nam=a[1];//data位置
c1=a[2];
c2=a[3];
c3=a[4];
c4=a[5];//透過度

a=ime.data[nam+3]/255;
b=1-c4;
c=a*b;
d=c4+c;

ime.data[nam]=mf((c1*c4 + ime.data[nam]*c)/d);
ime.data[nam+1]=mf((c2*c4 + ime.data[nam+1]*c)/d);
ime.data[nam+2]=mf((c3*c4 + ime.data[nam+2]*c)/d);

e=1-(1-a)*b;
ime.data[nam+3]=mf(e*255);

自分の透過度が0か1の時、相手の透過度が0か1の時でifでわけることで大幅に計算を減らせますが

そこは自分で考えてください sukeを使ってすでに何か描画されてる時の透過をみてみましょう

function en6(ime,tx,ty,han,er,c1,c2,c3)

var a,b,c,d,e,f,g,h;
var ime,han,tx,ty,er,c1,c2,c3;
var mf=Math.floor;

a=arguments;
ime=a[0]
tx=a[1];
ty=a[2];
han=a[3];
er=a[4];
c1=a[5];
c2=a[6];
c3=a[7];
c=0;

for(a=0;a<ime.height;a++){
for(b=0;b<ime.width;b++){

d=Math.pow((ty-a)*(ty-a)+(tx-b)*(tx-b),0.5);

if(d<han+er){

e=1;
if(d>han)e=(han+er-d)/er;

suke(ime,c,c1,c2,c3,e);

};

c+=4;
};
};

描画処理を書かなくていいぶんコンパクトになりました

正nサンドイッチも透過用に下だけ変えるとこうなります

テキストエリア　id='pan2'

if(d<han+er){

r1=(d/bai)%2;
if(r1>1)r1=2-r1;
r2=1-r1;
c1=i1*r1+i4*r2;
c2=i2*r1+i5*r2;
c3=i3*r1+i6*r2;

e=1;
if(d>han)e=(han+er-d)/er;
suke(ime,c,c1,c2,c3,e);

};

c+=4;
};
};

透明じゃないimageDataに透過用のimageDataを透過させます

計算せずに同じ図形を描画できます

canvasを大量に使わなくてすみます

function gousei0(ime1,ime2,x,y)
sukeで透過用のimageDataどうしを合わせて透過用のimageDataを作ります

普通の合成もこれでできますが

四つ目のバイトデータも変えるためgousei0より時間がかかります

画像を文字列化します。

canvasに画像を読み込み

a=canvas.toDataURL()

これだけです。

ただしセキュリティーの都合上デフォルトの状態では読み込んだ画像は文字列化できません。

（getImagedata()もできません。）

クロームの場合：
クロームのショートカットを右クリ→プロパティ→リンク先→
～.exe" の後に --allow-file-access-from-files をつける（先頭とケツに半角スペースをつけてね）
すでにクロームを開いている場合はいったん閉じる

ファイアーフォックスの場合：
アドレスバーにabout:configと入力してエンター→
security.fileuri.strict_origin_policyってとこでダブルクリック

バージョンによって違うかもしれません。

textarea id='kekka'

一度「失敗しました＞＜」が出るとどうやっても更新するまで失敗し続けます

下のcanvasには文字列から描画しています

文字列はブラウザによって異なったりしますが

なぜか同じものが描画されます考え出したもののしょぼかったもの

・アトラクタカーテン
線形になるアトラクタを座標を変えながら何度も描画してオーロラみたいにする
無駄に重い

・全ピクセルアトラクタ２
1ピクセルずつ計算しながら次の点の位置に点描画
画面の四角が反映されてしまう

・全ピクセルアトラクタ線
1ピクセルずつ計算しながら次の点と線で結ぶ
非常に重い

・全ピクセルアトラクタフレア
1ピクセルずつ計算しながら次の点の方向に少しずつ線をひく
非常に重い

目次に戻る

～まだ制作中～

苦情は　じゃがりきん　まで