javascriptを再学習の2【関数とObject】

ということで、実際には今回が最初になりますね。
今回のテーマは、【関数とobject】です。
これは、javascriptでは、

  function Nin(){
  }

というのがあったときに、

 Nin();

とすれば当然呼べます。関数ですから。 でも、

 var n1 = new Nin()

とかいても呼べます。
これは正確には、コンストラクタによる呼び出しらしいのですが、
あまり細かいことを気にせずいうと、【this】が違うということです。
だから、C++における、関数とクラスのメンバ関数の違いみたいなものです。
C++のクラスのメンバ関数は、中身としては通常の関数で、
その関数を呼ぶときの【this】が違うだけなのです。
ということで、テストコードを書いてみます。

  var a;
  function Nin(){
   a = this;
  }

  Nin();
  assert(true,a);

  var n1 = new Nin();
  assert(true,a);
  assert(a==n1,"a==n1みたいですよ！");

で、結果は以下。

最初がWindowということは、関数呼び出しの場合にはthisがGlobalということです。
newでの呼び出しは、なんかObjectが生成されて、そこがthisになってるってことですね。 とうぜんthisになってるので、ここでメソッドやプロパティを追加したりとかが自由ってことです。

ただ、とくに違和感があるかっていうと、私的には特にないです。
なにしろ、C++において、mallocした領域をクラスのポインタでキャストして、
newしないでクラスのインスタンスを生成したような使い方をしたりしてたので(o^^o)

javascriptを再学習の1

まずは、学習のために、assert関数と、CSSをつくります。
ほとんどパクリですんません。
●assert.js

function assert(bbb, disp) {
 var resulter = document.getElementById("resulter");
 if (!resulter) {
  resulter = document.createElement('ul');
  document.getElementsByTagName('body')[0].appendChild(resulter);
  resulter.setAttribute('id','resulter');
 }
 var li = document.createElement("li");
 li.className = bbb ? "pass" : "fail";
 var disper = bbb ? "●" + disp : "×" + disp;
 li.appendChild(document.createTextNode(disper));
 resulter.appendChild(li);
}

●assert.css

ul#resulter { border: 2px ridge maroon; background-color: #ccffcc; padding: 0.25em 1.5em; margin-left: 0; }
li.pass { color: #006400; font-weight:bolder;}
li.fail { color: #dc143c; text-decoration: line-through; font-weight:bolder;}

●sample

●結果

javascriptを再学習の０

jQueryのソースが読みきれなかったのキッカケに、javascriptを再学習。
学習したのは、基本的にこの一冊。
JavaScript Ninjaの極意
これが、稀に見る私にとっての良書と感じたので、
ここで学習したことをメモって、今一度理解を深めたいと思う次第。(o^^o)
向うの方は好きだよね。忍者とか。
笑えるのは、原書の表紙。
でも、内容は秀逸です。

大人の水彩画塗り絵のように加工する件。

前回のつづきとして、

水彩塗り絵っぽくする画像処理を考えます。

水彩塗り絵っぽくとは具体的に言うと、

・縁取りがしてある

・色が全体的に薄い

・色数が少ない

だいたい、こんなとこでしょう。

ただし、『水彩独特の筆のタッチ』とかは考慮しません。

それは、GUIアプリならば考慮できますが、自動ではなかな難しそうです。

機会があったらやってみますが。。。

ということで、縁取りは前回もやったので、

今回は、

（１）色を薄くする

（２）色数を少なくする

ということをしてみます。

具体的には、どうすればいいんでしょうね。。

ちなみに、何も参考にせずにこれを書いてるわけですが、

色は、とりあえずRGBで考えるとすると、

■■FF0000■■なんていうのは、真っ赤になっちゃいますから、

これを、■■FF8080■■あたりになるようなロジックです。

じゃぁどうするかというと、とりあえず、RGBそれぞれの成分に関して、、

0ｘ20～0ｘ50程度を足す。

1.2倍～2倍程度の倍率をかける。

0xffを超えるものは、0xffで頭打ちにする。

っとまぁ、この程度のことしてみた結果が以下です。

でも、まぁ、この程度でも結構いけます。

問題は、その
パラメータをヒストグラムあたりみて、自動的に設定する
ロジックですねーー。

【元画像】

【変換画像】

【SRC。こんな程度。】

RR = ((RR + 0x30) * 4)/3; if(RR > 0xff) RR = 0xff;
GG = ((GG + 0x30) * 4)/3; if(GG > 0xff) GG = 0xff;
BB = ((BB + 0x30) * 4)/3; if(BB > 0xff) BB = 0xff;
RR = ((int)(RR / 32))*32+31;
GG = ((int)(GG / 32))*32+31;
BB = ((int)(BB / 32))*32+31;

漫画カメラの画像処理のしくみを勝手に推測する件。

【漫画カメラ】っていうのがありまして。
ちょっと前に、輪郭抽出+アルファという記事で、

『どーゆーロジックなんだろ？』

と書きまして、その後、推測してみたわけですが、

今回は、この検証です。

●元画像がこれです。

●最終的にモノクロ画像なので、まずこれをグレイスケールにします。

グレイスケールはですね、R,G,Bに係数をかけて足し合わせて求めます。

Gray = R * 0.3 + G * 0.59 + B * 0.11;

こんな感じです。アバウトな計算でよいときは、整数計算にします。

即ち、GRAY=((R * 19660 + G * 38666 + B * 7209) >> 16) & 0xff; です。

まぁこれだと、絶対に出現しない階調が出現しちゃいますけどねー。

で、結果がこれです。

この画像のなかで、黒っぽい部分と、そのグレイだけど黒っぽい部分を抽出します。

それが、以下です。

この例では、0ｘ38以下を黒にして表示しています。

この例では、0ｘ70以下を黒にして表示しています

次に、斜線の画像を用意します。

まぁ画像と同じ大きさにすればよいです。

それがこれ。

そしてこの画像を、さっきのグレイっぽい画像でマスクをします。

そうすると、こうなります。

次は、輪郭の抽出です。

これは、ソーベルフィルタってやつを使います。

もちろん、これで抽出した値をどう使うかが問題となりますが、

簡単に言えば、『閾値を設定して、黒か白かにしてしまう』

ということです。

実際に抽出してみたのが、これです。

ということで、全部出揃いました。

ここで、

（１）黒抽出画像

（２）グレイ抽出マスク斜線画像

（３）輪郭抽出画像。

この３つを合成したのが、これです。

もちろん、【漫画カメラ】とまったく同じにはなりませんが、

そこらへんは、前処理とか、ヒストグラムを平均化するとか、閾値のとりかたとか、いくつかのパラメータの違いだと思われます。

もちろん、実際のプログラムでは、わざわざ画像を作ってから処理するわけではなく、
メモリやCPUコストを小さく抑えるべく、ひとつのLOOPの中で全て処理します。

まぁ、あたりまえですが＼(￣(エ)￣ )/＼(￣(エ)￣ )/

ベクトル図形のANDをとってみる件。(2)

つづきです。
では、順を追ってみましょう。
まず最初に、直線を登録（setLine）しているので、
こっから、頂点と交点、即ち、直線の始点/終点/直線同士の交点を求めます。
交点の求め方とかは、ここらへんを参考にどうぞ。
そして、今度はそのY座標だけをArrayに入れて、SORTしてみます。
そうすると、こういう結果になります。

# 0 : 20.0000 - 10.0000  
# 1 : 40.0000 - 10.0000  
# 2 : 60.0000 - 20.0000  
# 3 : 36.3636 - 20.9091  
# 4 : 50.0000 - 30.0000  
# 5 : 10.0000 - 40.0000  
# 6 : 30.0000 - 40.0000  
# 7 : 60.0000 - 40.0000  
# 8 : 45.0000 - 40.0000  
# 9 : 40.0000 - 50.0000 

# 0 : 10.0000
# 1 : 20.0000
# 2 : 20.9091
# 3 : 30.0000
# 4 : 40.0000
# 5 : 50.0000

図で言えば、こういうことです。

ここで、Y座標は６コあることがわかります。

このY座標で水平な線を引き、

全ての登録した直線に対して、その直線で分割してしまいます。

ただし、水平な線は含みません。

ようするに、こういうことです。

データにすると、こういうふうになっています。

ここで、いくつかの値を一緒に登録しています。

（１）【tag】。分断する前の直線を一意に識別するための番号。

（２）【bup】。直線が、上を向いているか（終点のY座標＞始点のY場表）どうか。

（３）【hnum】。その直線が、どの段（直線の中点がどのY座標の間にあるか）にあるか。

※全て、あとで使います。

# 0  tag:1  bup:1  bHz:0 hnum:1 x1:20.0 y1:10.0 x2:16.7 y2:20.0 x:18.3 y:15.0
# 1  tag:4  bup:0  bHz:0 hnum:1 x1:35.0 y1:20.0 x2:20.0 y2:10.0 x:27.5 y:15.0
# 2  tag:5  bup:1  bHz:0 hnum:1 x1:40.0 y1:10.0 x2:36.7 y2:20.0 x:38.3 y:15.0
# 3  tag:8  bup:0  bHz:0 hnum:1 x1:60.0 y1:20.0 x2:40.0 y2:10.0 x:50.0 y:15.0
# 4  tag:1  bup:1  bHz:0 hnum:2 x1:16.7 y1:20.0 x2:16.4 y2:20.9 x:16.5 y:20.5
# 5  tag:4  bup:0  bHz:0 hnum:2 x1:36.4 y1:20.9 x2:35.0 y2:20.0 x:35.7 y:20.5
# 6  tag:5  bup:1  bHz:0 hnum:2 x1:36.7 y1:20.0 x2:36.4 y2:20.9 x:36.5 y:20.5
# 7  tag:7  bup:0  bHz:0 hnum:2 x1:60.0 y1:20.9 x2:60.0 y2:20.0 x:60.0 y:20.5
# 8  tag:1  bup:1  bHz:0 hnum:3 x1:16.4 y1:20.9 x2:13.3 y2:30.0 x:14.8 y:25.5
# 9  tag:5  bup:1  bHz:0 hnum:3 x1:36.4 y1:20.9 x2:33.3 y2:30.0 x:34.8 y:25.5
# 10  tag:4  bup:0  bHz:0 hnum:3 x1:50.0 y1:30.0 x2:36.4 y2:20.9 x:43.2 y:25.5
# 11  tag:7  bup:0  bHz:0 hnum:3 x1:60.0 y1:30.0 x2:60.0 y2:20.9 x:60.0 y:25.5
# 12  tag:1  bup:1  bHz:0 hnum:4 x1:13.3 y1:30.0 x2:10.0 y2:40.0 x:11.7 y:35.0
# 13  tag:5  bup:1  bHz:0 hnum:4 x1:33.3 y1:30.0 x2:30.0 y2:40.0 x:31.7 y:35.0
# 14  tag:3  bup:0  bHz:0 hnum:4 x1:45.0 y1:40.0 x2:50.0 y2:30.0 x:47.5 y:35.0
# 15  tag:7  bup:0  bHz:0 hnum:4 x1:60.0 y1:40.0 x2:60.0 y2:30.0 x:60.0 y:35.0
# 16  tag:2  bup:1  bHz:0 hnum:5 x1:10.0 y1:40.0 x2:40.0 y2:50.0 x:25.0 y:45.0
# 17  tag:3  bup:0  bHz:0 hnum:5 x1:40.0 y1:50.0 x2:45.0 y2:40.0 x:42.5 y:45.0

これで、準備が整いました。

これから、ANDとかORの演算をすることになります。

次回につづきますが、きっと、ちょっとわかる人は、この図を見ればわかります。

つづく。

ベクトル図形のANDをとってみる件。

●図形を演算する話。
ベクタ画像を合成（演算）する件。のつづきです。
簡単に実装してみますです。
こぅいぅときゎ、まず、どう使いたいかをcodingしてみます。
とりあえず、こうしました。

aPolies A;
//１つめ
A.setLine(20,10,10,40);
A.setLine(10,40,40,50);
A.setLine(40,50,50,30);
A.setLine(50,30,20,10);
//２つめ
A.setLine(40,10,30,40);
A.setLine(30,40,60,40);
A.setLine(60,40,60,20);
A.setLine(60,20,40,10);
A.execute();
A.test();

で、test()の結果が以下です。

# moveTo [5] 36.36 20.91
# lineTo [5] 30.00 40.00
# lineTo [0] 45.00 40.00
# lineTo [3] 50.00 30.00
# lineTo [4] 36.36 20.91

それぞれのデータをグラフにすると、以下です。



実際には、７つのステップを踏んで、この座標を割り出しています。 それが、以下ですね。

# 0 : 20.0000 - 10.0000
# 1 : 40.0000 - 10.0000
# 2 : 60.0000 - 20.0000
# 3 : 36.3636 - 20.9091
# 4 : 50.0000 - 30.0000
# 5 : 10.0000 - 40.0000
# 6 : 30.0000 - 40.0000
# 7 : 60.0000 - 40.0000
# 8 : 45.0000 - 40.0000
# 9 : 40.0000 - 50.0000
------------------------
# 0 : 10.0000
# 1 : 20.0000
# 2 : 20.9091
# 3 : 30.0000
# 4 : 40.0000
# 5 : 50.0000
------------------------
# 0  tag:1  bup:1  bHorizon:0  x1:20.0 y1:10.0 x2:10.0 y2:40.0 x:15.0 y:25.0
# 1  tag:2  bup:1  bHorizon:0  x1:10.0 y1:40.0 x2:40.0 y2:50.0 x:25.0 y:45.0
# 2  tag:3  bup:0  bHorizon:0  x1:40.0 y1:50.0 x2:50.0 y2:30.0 x:45.0 y:40.0
# 3  tag:4  bup:0  bHorizon:0  x1:50.0 y1:30.0 x2:20.0 y2:10.0 x:35.0 y:20.0
# 4  tag:5  bup:1  bHorizon:0  x1:40.0 y1:10.0 x2:30.0 y2:40.0 x:35.0 y:25.0
# 5  tag:6  bup:1  bHorizon:1  x1:30.0 y1:40.0 x2:60.0 y2:40.0 x:45.0 y:40.0
# 6  tag:7  bup:0  bHorizon:0  x1:60.0 y1:40.0 x2:60.0 y2:20.0 x:60.0 y:30.0
# 7  tag:8  bup:0  bHorizon:0  x1:60.0 y1:20.0 x2:40.0 y2:10.0 x:50.0 y:15.0
------------------------
# 0  tag:1  bup:1  bHz:0 hnum:1 x1:20.0 y1:10.0 x2:16.7 y2:20.0 x:18.3 y:15.0
# 1  tag:4  bup:0  bHz:0 hnum:1 x1:35.0 y1:20.0 x2:20.0 y2:10.0 x:27.5 y:15.0
# 2  tag:5  bup:1  bHz:0 hnum:1 x1:40.0 y1:10.0 x2:36.7 y2:20.0 x:38.3 y:15.0
# 3  tag:8  bup:0  bHz:0 hnum:1 x1:60.0 y1:20.0 x2:40.0 y2:10.0 x:50.0 y:15.0
# 4  tag:1  bup:1  bHz:0 hnum:2 x1:16.7 y1:20.0 x2:16.4 y2:20.9 x:16.5 y:20.5
# 5  tag:4  bup:0  bHz:0 hnum:2 x1:36.4 y1:20.9 x2:35.0 y2:20.0 x:35.7 y:20.5
# 6  tag:5  bup:1  bHz:0 hnum:2 x1:36.7 y1:20.0 x2:36.4 y2:20.9 x:36.5 y:20.5
# 7  tag:7  bup:0  bHz:0 hnum:2 x1:60.0 y1:20.9 x2:60.0 y2:20.0 x:60.0 y:20.5
# 8  tag:1  bup:1  bHz:0 hnum:3 x1:16.4 y1:20.9 x2:13.3 y2:30.0 x:14.8 y:25.5
# 9  tag:5  bup:1  bHz:0 hnum:3 x1:36.4 y1:20.9 x2:33.3 y2:30.0 x:34.8 y:25.5
# 10  tag:4  bup:0  bHz:0 hnum:3 x1:50.0 y1:30.0 x2:36.4 y2:20.9 x:43.2 y:25.5
# 11  tag:7  bup:0  bHz:0 hnum:3 x1:60.0 y1:30.0 x2:60.0 y2:20.9 x:60.0 y:25.5
# 12  tag:1  bup:1  bHz:0 hnum:4 x1:13.3 y1:30.0 x2:10.0 y2:40.0 x:11.7 y:35.0
# 13  tag:5  bup:1  bHz:0 hnum:4 x1:33.3 y1:30.0 x2:30.0 y2:40.0 x:31.7 y:35.0
# 14  tag:3  bup:0  bHz:0 hnum:4 x1:45.0 y1:40.0 x2:50.0 y2:30.0 x:47.5 y:35.0
# 15  tag:7  bup:0  bHz:0 hnum:4 x1:60.0 y1:40.0 x2:60.0 y2:30.0 x:60.0 y:35.0
# 16  tag:2  bup:1  bHz:0 hnum:5 x1:10.0 y1:40.0 x2:40.0 y2:50.0 x:25.0 y:45.0
# 17  tag:3  bup:0  bHz:0 hnum:5 x1:40.0 y1:50.0 x2:45.0 y2:40.0 x:42.5 y:45.0
------------------------
# 0  tag:5  bup:1  bHz:0 hnum:3 x1:36.4 y1:20.9 x2:33.3 y2:30.0 check:1
# 1  tag:4  bup:0  bHz:0 hnum:3 x1:50.0 y1:30.0 x2:36.4 y2:20.9 check:1
# 2  tag:0  bup:0  bHz:1 hnum:3 x1:33.3 y1:30.0 x2:50.0 y2:30.0 check:0
# 3  tag:5  bup:1  bHz:0 hnum:4 x1:33.3 y1:30.0 x2:30.0 y2:40.0 check:1
# 4  tag:3  bup:0  bHz:0 hnum:4 x1:45.0 y1:40.0 x2:50.0 y2:30.0 check:1
# 5  tag:0  bup:0  bHz:1 hnum:4 x1:30.0 y1:40.0 x2:45.0 y2:40.0 check:1
# 6  tag:0  bup:0  bHz:1 hnum:3 x1:50.0 y1:30.0 x2:33.3 y2:30.0 check:0
------------------------
# 0  tag:5  bup:1  bHz:0 hnum:3 x1:36.4 y1:20.9 x2:33.3 y2:30.0 check:1
# 1  tag:5  bup:1  bHz:0 hnum:4 x1:33.3 y1:30.0 x2:30.0 y2:40.0 check:1
# 2  tag:0  bup:0  bHz:1 hnum:4 x1:30.0 y1:40.0 x2:45.0 y2:40.0 check:1
# 3  tag:3  bup:0  bHz:0 hnum:4 x1:45.0 y1:40.0 x2:50.0 y2:30.0 check:1
# 4  tag:4  bup:0  bHz:0 hnum:3 x1:50.0 y1:30.0 x2:36.4 y2:20.9 check:1
------------------------
# moveTo [5] 36.36 20.91
# lineTo [5] 30.00 40.00
# lineTo [0] 45.00 40.00
# lineTo [3] 50.00 30.00
# lineTo [4] 36.36 20.91

つづく。