円の座標点の値をrubyで検証

C#で作成した円を描くロジックの数値を具体的に確認してみたかったので、rubyで似たようなロジックを作成して出力してみました。

paintcircle.rb
---------------------- O ----------------
x = 0
y = 0
r = 100

ix=r*1.0
iy=0.0
E=1.0/r

print "E=",E,"\n"
i=0
begin
    ix -= E * iy
    iy += E * ix
    i+=1
#    print "i=",i," ix=",ix," iy=",iy,"\n"
    puts sprintf "i=%3d ix=%11.6f iy=%11.6f <ix-r>=%11.6f\n",i,ix,iy,ix-r
    #break if i == 5
end while (ix - r).abs > 0.5 || iy.abs > 0.5
---------------------- O ----------------

結果（抜粋）は下記の通りとなりました。
E=0.01
i=  1 ix= 100.000000 iy=   1.000000 <ix-r>=   0.000000
i=  2 ix=  99.990000 iy=   1.999900 <ix-r>=  -0.010000
i=  3 ix=  99.970001 iy=   2.999600 <ix-r>=  -0.029999
　　　　*
         *
i=155 ix=   2.578735 iy=  99.979640 <ix-r>= -97.421265
i=156 ix=   1.578939 iy=  99.995429 <ix-r>= -98.421061
i=157 ix=   0.578985 iy= 100.001219 <ix-r>= -99.421015
i=158 ix=  -0.421028 iy=  99.997009 <ix-r>=-100.421028
i=159 ix=  -1.420998 iy=  99.982799 <ix-r>=-101.420998
i=160 ix=  -2.420826 iy=  99.958590 <ix-r>=-102.420826
　　　　*
         *
i=312 ix= -99.965928 iy=   2.157825 <ix-r>=-199.965928
i=313 ix= -99.987506 iy=   1.157950 <ix-r>=-199.987506
i=314 ix= -99.999085 iy=   0.157959 <ix-r>=-199.999085
i=315 ix=-100.000665 iy=  -0.842048 <ix-r>=-200.000665
i=316 ix= -99.992245 iy=  -1.841970 <ix-r>=-199.992245
i=317 ix= -99.973825 iy=  -2.841708 <ix-r>=-199.973825
i=318 ix= -99.945408 iy=  -3.841163 <ix-r>=-199.945408
　　　　*
         *
i=469 ix=  -2.736638 iy= -99.976231 <ix-r>=-102.736638
i=470 ix=  -1.736876 iy= -99.993600 <ix-r>=-101.736876
i=471 ix=  -0.736940 iy=-100.000969 <ix-r>=-100.736940
i=472 ix=   0.263070 iy= -99.998339 <ix-r>= -99.736930
i=473 ix=   1.263053 iy= -99.985708 <ix-r>= -98.736947
i=474 ix=   2.262910 iy= -99.963079 <ix-r>= -97.737090
　　　　*
         *
i=625 ix=  99.928451 iy=  -3.315360 <ix-r>=  -0.071549
i=626 ix=  99.961605 iy=  -2.315744 <ix-r>=  -0.038395
i=627 ix=  99.984762 iy=  -1.315897 <ix-r>=  -0.015238
i=628 ix=  99.997921 iy=  -0.315917 <ix-r>=  -0.002079

C# 点で円を描く

きれいな円が描ける様になりました。ソースは下記のように記述しています。

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
　　Bitmap Bmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);
　　int x, y, r;

　　x = 0; y = 0; r = 150;
　　this.circle(ref Bmap, x, y, r, Color.Yellow);
　　x = 50; y = 50; r = 100;
　　this.circle(ref Bmap, x, y, r, Color.Red);
　　x = -50; y = -50; r = 100;
　　this.circle(ref Bmap, x, y, r, Color.Blue);
　　x = -50; y = 50; r = 100;
　　this.circle(ref Bmap, x, y, r, Color.Green);
　　x = 50; y = -50; r = 100;
　　this.circle(ref Bmap, x, y, r, Color.Brown);

　　pictureBox1.Image = Bmap;
}

private void circle(ref Bitmap bm, int x, int y, int r, Color c)
{
　　double ix, iy, E;

　　ix = r; iy = 0; E = 1.0 / r;

　　do
　　{
　　　　ix = ix - E * iy;
　　　　iy = E * ix + iy;
　　　　this.pset(ref bm, (int)ix+x, (int)iy+y, c);
　　} while (Math.Abs(ix - r) > .5 || Math.Abs(iy) > .5);
}

sinθ
cosθ　のθを０に限りなく近づくくらい小さい値を設定して、
sinθ≒ε　cosθ≒１　になるとすれば、
ｘ｛ｎ＋１｝＝ｘ｛ｎ｝・cosθ－ｙ｛ｎ｝・sinθ
ｙ｛ｎ＋１｝＝ｘ｛ｎ｝・sinθ＋ｙ｛ｎ｝・cosθ　は、下記のように表せます
　　　　　　↓
ｘ｛ｎ＋１｝＝ｘ｛ｎ｝－ε・ｙ｛ｎ｝
ｙ｛ｎ＋１｝＝ε・ｘ｛ｎ｝＋ｙ｛ｎ｝　　…ｎは移動前の点、ｎ＋１は移動後の点
ただこれでは、ｙ方向に大きく動きすぎるため、補正をかけて、すこし小さくすることにします。
ｙ｛ｎ＋１｝＝ε・ｘ｛ｎ＋１｝＋ｙ｛ｎ｝

また、εの値は、円周２πｒ（ドット）を埋めるために必要な角度、
２π（ラジアン＝３６０°）÷２πｒ（円周）で、１／ｒを使用すると良いようです。

ということで、めでたく円がきれいに描ける様になりました。よかった。よかった。

c# 円の座標ってむずかしい？

　　円を考えると自分の数学の力では手に負えなくなってきているようです。
下記のソースで１度づつ描画すると、点が間引かれて点線になってしまった。
始点と終点で線を引くようにすれば、とりあえず円として繋がりそうだけど、大丈夫かな？
円周２πｒの１点１点を描く角度を探した方がいいのでしょうか？

private void circle(ref Bitmap bm, int x, int y, int r, Color c)
{
    for (int i=0;i<=360;i++)
　　{
　　　　double a = (2 * Math.PI * i / 360);
　　　　int ix = (int)(r * Math.Cos(a) + x);
　　　　int iy = (int)(r * Math.Sin(a) + y);
　　　　this.pset(ref bm, ix, iy, c);
　　}
}

ソースは、x,yを中心とした半径rの円を描くメソッド。として作ったつもり（ちょっと失敗）
でも、これを２倍の７２０分の１づつ点を描くようにすると、きれいな円として描ける様になるかもしれないです。

ということで、実験結果が左図。
ソースは以下のように修正しました

for (int i=0;i<=720;i++)

double a = (Math.PI * i / 360);

C# 円を考えると

円の方程式は　「ｘ＊ｘ＋ｙ＊ｙ＝ｒ＊ｒ」なので、
　ｘ＝±√（ｒ・ｒ－ｙ・ｙ）
　ｙ＝±√（ｒ・ｒ－ｘ・ｘ）

でも、これをそのまま使うと、上と下の方でｙの密度が高くなって、逆に真中付近ではｙが拡散してしまうので、別の計算方法を考える必要がありそう。と、いうことで、

△ＡＢＣで、Ａの角度をθ、Ｂの角度を９０°とする直角三角形を見ると、
ｓｉｎθ＝（ＢＣ）÷（ＣＡ）、ｃｏｓθ＝（ＡＢ）÷（ＣＡ）
　　　　　　　　　　　　　↓
ｓｉｎθ＝ｙ÷ｒ、ｃｏｓθ＝ｘ÷ｒ　⇒　ｙ＝ｒ・ｓｉｎθ、ｘ＝ｒ・ｃｏｓθ
このθをπで表し、３６０°＝２π。
これを細かく分割して、その時のｘとｙの値を上記の換算式で計算し、点を算出する。
それぞれの点を始点と終点として線を書けば、円に類似した多角形が描画できることになります。
８０分割すれば、きれいな円として描けるようです。

C# 点を打つことで線を引く

ｘ方向に始点（ｘ１）～終点（ｘ２）まで移動（符号方向に１づつ）させるときにｙの値がどうなるかをかんがえてみることにしました。

移動の回数はｘ２－ｘ１の絶対値で長さを求めて、移動方向に関しては、ｘ２がｘ１以上の場合は＋１、ｘ１がｘ２より大きい場合は－１とする。つまり、ｘ２－ｘ１が負の場合、－１。正（ゼロを含めて）の場合は＋１とする。

ここで、画面上の座標は整数となるため、ｘ方向に１進むときのｙの値も整数になるように小数点第一位を四捨五入するようにしてみる。

整数部をｙ、少数部をｅであらわすことにして、
ｎ番目のｙｎの値は、ｙ＝ｙ｛ｎ｝＋ｅ｛ｎ｝
ここで、ｙ｛１｝はかならず整数で始まるのでｅ｛１｝＝０・・・（１）
ｅ｛ｎ｝＝ｅ｛ｎ－１｝＋⊿ｙ÷⊿ｘ・・・（２）
（四捨五入するのひ判定を簡単にして）
ｅ｛ｎ｝－０．５≧０のとき、ｙ｛ｎ｝＝ｙ｛ｎ－１｝＋１，
　　　　　　　　　　　　　　　ｅ｛ｎ｝はｅ｛ｎ｝－１を代入。
ｅ｛ｎ｝－０．５＜０のとき、ｙ｛ｎ｝＝ｙ｛ｎ－１｝

ｅ｛ｎ｝－０．５は単に判定用に使っているので計算を簡単にする都合上２⊿ｘを掛けて、
Ｅ｛ｎ｝＝２⊿ｘ（ｅ｛ｎ｝－０．５）として、上記の(1)(2)に当てはめると、
Ｅ｛１｝＝２⊿ｘ（ｅ｛１｝－０．５）＝２⊿ｘ（０－０．５）＝－⊿ｘ
Ｅ｛ｎ｝＝２⊿ｘ（ｅ｛ｎ－１｝＋⊿ｙ÷⊿ｘ－０．５）
　　　　＝２⊿ｘｅ｛ｎ－１｝＋２⊿ｙ－⊿ｘ
　　　　＝（２⊿ｘｅ｛ｎ－１｝－⊿ｘ）＋２⊿ｙ＝Ｅ｛ｎ－１｝＋２⊿ｙ

（⇒Ｅ｛ｎ｝＝２⊿ｘ（ｅ｛ｎ｝－０．５）としたので、
　　Ｅ｛ｎ－１｝＝２⊿ｘ（ｅ｛ｎ－１｝－０．５）＝２⊿ｘｅ｛ｎ－１｝－⊿ｘ
　　・・・ｎ番目が前者なのでｎ－１番目は後者。
　　　よって、前半の括弧をＥ｛ｎ－１｝に置換え可能。）

上記を整理してみると、
ｘ｛ｎ｝＝ｘ｛１｝＋ｎ，ｙ＝ｙ｛１｝＋⊿ｙ÷⊿ｘ・ｎのときに、
Ｅ｛１｝＝－⊿ｘ，Ｅ｛ｎ｝＝Ｅ｛ｎ－１｝＋２⊿ｙとすると、
Ｅ｛ｎ｝≧０のとき、ｙ｛ｎ｝＝ｙ｛ｎ－１｝＋１，
　　　　　　　　　　Ｅ｛ｎ｝はＥ｛ｎ｝－２⊿ｘを代入。・・・（３）
Ｅ｛ｎ｝＜０のとき、ｙ｛ｎ｝＝ｙ｛ｎ－１｝
【（３）Ｅはｅの２⊿ｘとしたので、－１は－２⊿ｘと置き換える】

これまでのことはすべて、ｘを動かすことを考えていたが、
⊿ｙ÷⊿ｘ＞１の場合、
ｘを１動かすとｙが１以上動いてしまい、線がつながらなくなるので、その場合は、ｙを動かし、ｘを求めるようにする。以下がそのソース。

form1.csの内容。
　　public partial class Form1 : Form
　　{
　　　　public Form1()
　　　　{
　　　　　　InitializeComponent();
　　　　}

　　　　private void pictureBox1_Paint(object sender, PaintEventArgs e)
　　　　{
　　　　　　Bitmap Bmap = new Bitmap(pictureBox1.Width,
                                                    pictureBox1.Height);
　　　　　　int x1,x2;
　　　　　　int y1,y2;

　　　　　　x1 = -100; x2 = 100; y1 = -100; y2 = 100;
　　　　　　this.line(ref Bmap, x1, y1, x2, y2, Color.Blue);
　　　　　　x1 = -100; x2 = 100; y1 = 100; y2 = -100;
　　　　　　this.line(ref Bmap, x1, y1, x2, y2, Color.Red);
　　　　　　x1 = 50; x2 = 50; y1 = 0; y2 = 0;
　　　　　　this.line(ref Bmap, x1, y1, x2, y2, Color.Black);
　　　　　　x1 = -50; x2 = 50; y1 = -100; y2 = 100;
　　　　　　this.line(ref Bmap, x1, y1, x2, y2, Color.Cyan);
　　　　　　x1 = -100; x2 = 100; y1 = -50; y2 = 50;
　　　　　　this.line(ref Bmap, x1, y1, x2, y2, Color.Magenta);

　　　　　　pictureBox1.Image = Bmap;
　　　　}

　　　　private void line(ref Bitmap bm, int x1, int y1, int x2, int y2,
                                Color c)
　　　　{
　　　　　　int dx, lenx, sx;
　　　　　　int dy, leny, sy;
　　　　　　int i, ix, iy, E;

　　　　　　dx = x2 - x1; dy = y2 - y1;
　　　　　　lenx = Math.Abs(dx); leny = Math.Abs(dy);
　　　　　　sx = Math.Sign(dx + 0.1); sy = Math.Sign(dy + 0.1);
　　　　　　ix = x1; iy = y1;

　　　　　　if (leny > lenx)
　　　　　　{
　　　　　　　　E = -leny;
　　　　　　　　for (i=0; i <= leny; i++)
　　　　　　　　{
　　　　　　　　　　this.pset(ref bm, ix, iy, c);
　　　　　　　　　　iy += sy;
　　　　　　　　　　E += 2 * lenx;
　　　　　　　　　　if (E >= 0)
　　　　　　　　　　{
　　　　　　　　　　　　ix += sx;
　　　　　　　　　　　　E -= 2 * leny;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　　　else
　　　　　　{
　　　　　　　　E = -lenx;
　　　　　　　　for (i=0; i <= lenx; i++)
　　　　　　　　{
　　　　　　　　　　this.pset(ref bm, ix, iy, c);
　　　　　　　　　　ix += sx;
　　　　　　　　　　E += 2 * leny;
　　　　　　　　　　if (E >= 0)
　　　　　　　　　　{
　　　　　　　　　　　　iy += sy;
　　　　　　　　　　　　E -= 2 * lenx;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}
　　　　}
　　　　private void pset(ref Bitmap bm,int x,int y,Color c)
　　　　{
　　　　　　int x0 = 320; int y0 = 200;
　　　　　　int xx = x0 + x;
　　　　　　int yy = y0 - y;
　　　　　　bm.SetPixel(xx, yy, c);
　　　　}
　　}

左図は実行結果。（クリックで大きくできます）
少しだけ、解説。
Math.Signは負で-1、ゼロは0、
正は+1となってしまって、ゼロの時に不都合があるので、ゼロも正の値を返すように、0.1を足して、符号を見るようにしました。
それから、コンピュータの画像では、左上が（０，０）で、ｙは下に行く方が＋方向に増えていくので一般的な（学問的な）座標軸に直すために、画像の中心を原点に補正し、さらに、ｙ方向は上が＋、下が－になるように変換させています。点を打つpsetのメソッドでそこら辺をまとめて処理してます。

C# DrawLineで線を描く

やった！やっと、線が出力されました。
とりあえず、できた。って感じ。

Form1.cs
　　private void pictureBox1_Paint(object sender, PaintEventArgs e)
　　{
　　　　Graphics g = e.Graphics;
　　　　Pen bluePen = new Pen(Color.Blue, 3);
　　　　Point pstart = new Point(0,0);
　　　　Point pend = new Point(639,399);
　　　　g.DrawLine(bluePen,pstart,pend);
　　}

まずは、１歩づつ先に進めそうなのでここで数学のお勉強。
確か、学校で直線の方程式は「ｙ＝ａｘ＋ｂ」って習ったような。。。
ここで、話を簡単にするために、始点（原点：０，０）～終点（１，１）の線は
　　ｙ＝ｘ　　　－－－＞　ａは１、ｂはゼロ　　
    更に　ａは（ｙの増加量（１）÷ｘの増加量（１））

一般式に直せば、
　ｙ＝（ｙの増加量÷ｘの増加量）×（ｘ－ｘの始点）＋ｙの始点
　　　↓
　y = (y2-y1) ÷ (x2-x1) × (x - x1) + y1
これが、始点(x1,y1)～終点（x2,y2)の直線を描く方程式として定義できそう。
xをx1→x2まで順に動かしてyを求めれば、開始～終了までの２点を描く線が引けるのかな？たぶん。

C# paintイベント

pictureboxオブジェクトを選んでもプロパティのところしか出てこなかったのでイベントってどこで設定するのかな～って思ってたら、イベントに切り替えるボタンがあった。ここでpictureboxのpaintインベトを選んでソースを記述する場所にとりあえず、線を出すDrawLineを書いてみたら。。。。。

え、一瞬線が引かれたけど、すぐ消えたよ！！なんで？もうちょっとでスタートラインに立てそう。

でもその前に、イベントの処理を確認するためにボタンの貼り付けをしたフォームを用意してテキストボックスに文字を出力するだけのものを作ってみてよかったかも。それによってイベント処理の記述が少し理解できたので。

Ｃ＃の勉強とともに数学も勉強していかないと３Ｄ処理はできないのかもしれないので。直線から復習してみることにしようかな。
次回はｙ＝ａｘ＋ｂを考えてみることにしよ。

C#で最初のプロジェクト

graphicsのインスタンスをpictureboxに生成して、penとpointも作ってdrawlineするだけのものを作ろうとしたけど、pictureboxの変数が見れません。とエラーになってしまった。

応用的なものをいきなり作るんじゃなくて、地道に基礎から始めてみないと駄目かも。
まだまだ修行が必要そう。

でも、C#ってなんかよさそうな予感が。Microsoftの製品で初めて好きになれそうなものかもしれない。
ちょっと本気で取り組んでみたいと改めて思いました

C#のインストール

http://www.microsoft.com/japan/msdn/vstudio/express/
↑ここからC#のインストールを行う。入れてみないことには何も始まらないので、何はともあれC#のインストール。何も考えなくても素直にインストールが終了。インストールするとsilverlightのruntimeというのが入っていた。runtimeということは。。。このままでは開発には使用できないってことでしょうか？

C#だけの機能でもグラフィックスを作っていけるのかな？まずはＣ＃のお勉強から手をつけてみることにしよう。

下記のサイトが検索できたので、このあたりの”読書”からじっくりと取り組むことにします。
C# によるプログラミング入門
連載　 改訂版 C#入門
私がJavaからC#に乗り換えた10の理由
C#入門
C#を攻略しよう!
宇宙仮面のC#プログラミング
C# Tips

サイト作成者の皆様、お世話になります。

C#とsilverlightでグラフィックス？

Ｃ＃ってどんな言語なんだろう？勉強するの難しいのでしょうか？あちらこちらのサイトを読んでいるとＣ＃とsilverlightの組み合わせでやるとグラフィックスの勉強を進められそうな気がしたんだけど、これってとてつもなく難しい組み合わせなの？

とりあえず、Ｃ＃に関してはvisual studio 2008 express editionっていうのをインストールすれば始められそうだけど、silverlightは使えない！？どう取り組んでいけばいいのだろう？

いきなりつまづいてしまいそうな感じだけど、めげずに。とにかくゆっくり進めてみます。
何分、各方面に初心者なので。

何から始めていいのやら

数学苦手でプログラミングのセンスがなくてどこまで理解していけるか分かりませんが、気持ちとしてはグラフィックス、しかも３Ｄ、できれば動きのあるものを作っていけるようになりたいな～っていう願望を持ってこのブログを始めてみたいと思います。
さて、何から。っていうのが正直なところ。プログラミング言語もどうしたらいいのか。勉強ってどっから手をつけていいのやら。できればＷＥＢで、ブラウザでみれるものにしたいとは考えているのですけど。
なにかいい方法はないですかね。普通とっかかりってどんなところから始めているのでしょうか？
まずは、情報収集にいろいろなサイトを見てみることから始めるのがいいのかも。

还有我最近没有经常写中文文章。
我今年还是也得学外语。
边看韩剧边学韩语，对我来说最好！是因为我老婆爱看韩剧。看韩剧的机会特别多。
努力吧。

I'd like to watch American TV dramas, too. They're usually very exciting.
Too much violence sometimes, though. Too bad.