Visual Studio Codeの設定メモ. Markdown, Latexなどなど

Visual Studio codeの設定メモ

VS code設定追加と見直し 2020/7/22版

からあげさんのページを参考にしました。 karaage.hatenadiary.jp 以下の3つはコーディングには必須ですね。便利です。 Bracket Pair Colorizer 2 indent-rainbow Trailing Spaces その他、markdown関連を少し見直してインストールしなおしました。

Visual Studio codeにインストールした拡張機能

• Auto-Opne Markdown Preview: 自動的にプレビューが開くので便利
  -　複数のｍｄのタブがあるときも一つしかプレビューできない
  -> 便利かなと思ったが急にタブが開くのもうっとおしいので無効にしてある
• Markdown+Math: Markdownのプレビューで数式が表示可能
• MarkdownPDF: MarkdownをPDFに変換するツール
• VSCode Great Icons: アイコンを表示
• Latex Workshop: Latexコンパイルとpdf出力やプレビュー可能
• Latex Preview: Latex Workshopと比べてみる（今はdisabelにしている)

以下のサイトを参考にしました
http://www.procrasist.com/entry/vscode-fallinlove

フォントの設定, MathJaxの有効化などの解説が以下にあります
http://qiita.com/yumetodo/items/1a8d371a20ba9a50eeaf

tex fileに関しては,以下のサイトに書いてあるように基本Texで書いてめんどくさいところで適宜Pandocでmd -> Tex変換がベストな気がする. http://qiita.com/ssh0/items/679ac9dd3c33b0e5cd90

後はVS codeでターミナルを開いて（ Ctrl+`でVS code内に, Ctrl+Shift+Cで別ウインドウで）そこでコンパイルしたりプレビューすればいいのかなと思います. 適当にエリアスを作っておけば, コマンド一発なのでそれが便利かな.

そもそもVS codeってどんなことできるのという段階では以下を読むとよくわかる http://www.atmarkit.co.jp/ait/articles/1507/10/news028.html

Sublime3+Windows10で日本語変換の場所がずれる問題

最近Windows10の環境に移行したので、Sublime3を早速セットアップしました。
基本的なセットアップはこのブログに書いてある通りなのですが、IMESupportを導入しても日本語変換の返還窓がずれて表示されます。
入力している文字のすぐそばに表示してくれればいいのですが、その場所が左のほうにだいぶずれてしまいます.
github.com
この問題はまだ解決されていないようですが、日本語を入力するときだけ少し不便な程度なのでいまは目をつぶることにします。(2017/3/9)
Visual studio Codeに乗り換えた人もいるようですが、僕はやっぱりSublimeを使い続けようかなと思います.
[追記:使い続けようといいつつVS codeに乗り移りつつあります]

Processingの高速化 Tips その１

Processingでpixel shaderを使って、ピクセル操作を行っているときにシェーダーはほとんど何もしていないのに異常に処理速度がかかってしまう問題にはまりましたので、その原因と解決方法をメモっておきます。

やっていることは、以下のコードを見ていただくとわかりますがProcessing のPGraphicsオブジェクトを使用して、pixel shaderでカラーをバッファーに書き込み表示するという非常に単純なものです。

[Processingの本体のコード]

// Processing performance test
PShader simpleShader;
PGraphics pgShader;

int scrn_w = 0;
int scrn_h = 0;

float time;
PImage image0, image1;

void setup() {
  size(400, 400, P2D);
  frameRate(120);
  scrn_w = width;
  scrn_h = height;
  simpleShader = loadShader("simpleShader.glsl");
  image0 =createImage( scrn_w, scrn_h, RGB );
 
  pgShader = createGraphics(scrn_w, scrn_h, P2D);
   
}

void draw() {
    float starttime = millis();
    pgShader.beginDraw();
    pgShader.shader(simpleShader);
    //pgShader.image(image0, 0, 0);
    pgShader.image(pgShader.get(), 0, 0); // this line take a lot of time
    pgShader.endDraw();
    image(pgShader, 0, 0);
    float endtime = millis();
    println("time " + (endtime - starttime) + "ms"); 
     
    // faster code
    //shader(simpleShader); 
    //rect(0, 0, width, height);
}

[pixel shaderのコード: simpleShader.glsl]

void main(void) {
  gl_FragColor = vec4(0.0, 1.0, 1.0, 1.0);
}

このコードを実行すると私の使用しているマシーンですと20msec近くかかってしまいます。
以下の一行をコメントアウトし

pgShader.image(pgShader.get(), 0, 0); // this line take a lot of time

以下の１行をアンコメントすると、

//pgShader.image(image0, 0, 0);

期待通り1msec程度で走るようになります。
おそらくpgShader.get()がバッファーのコピーを行っているのではないかと思われます。
あるいは、pgShaderが毎フレームレンダー用のバッファを用意しているのかもしれません。

Processingのインプリに詳しい方で原因のわかる方おられましたら教えてください。

球面調和関数を視覚化してみまして

球面調和関数と言えば物理やってる人は、水素原子のシュレディンガー方程式の解ということで学部時代に一度は教科書で見たことあるとか、テスト勉強で解いてみたことあるっていう人も多いのではないかと思います。
ルジャンドルの陪関数が出てきたり、添え字がいくつか出てきて混乱したり数式を見て挫折することも多いですが、よくよく見ると構造は単純で、三角関数の三次元版だと思えばいいわけです。

そんな球面調和関数ですが、コンピュータグラフィックスの世界でも意外と使われています。
先日ブログで球面調和に関するリンク集をつくりましたが、そこにいくつかＣＧでの応用例があります。
球面調和関数と大域照明について（web上のリンク集） - 科学やら技術やら

ざっくり言って信号処理で信号をフーリエ展開するように、ＣＧでオブジェクトのライティングを行う際にいろんな方向からやってくるたくさんの光をひとまとめにして球面調和関数で展開してしまい、入ってくる光の情報を展開係数に圧縮してしまおうという話です。光源の高周波成分はどうせ拡散反射するならわかりませんから。

そんな球面調和関数をprocessingを使って描画するコードを書いてみました。
ＷＥＢ上には、OpenGLとかDirectXを使ったコードは転がっていますが実行するにはライブラリやらＳＤＫやらなにかと必要で敷居が高いのでさくっと実行できるProcessingで書いてみました。
元にした球面調和関数のコードは以下から使用させていただきました。
☆PROJECT ASURA☆ [OpenGL] 『球面調和関数(1)』

実行結果はこんな感じです↓

まあやっていることは、ものすごく単純で、Processingのサンプルにある
processing-docs/NoiseSphere.pde at master · processing/processing-docs · GitHub
を改造して、lineで書いた球を乱数でゆらゆらしている部分の、lineで線を書いている部分を流用して、線の長さを球面調和関数の結果に置き換え、符号を色に置き換えただけです。
球面調和関数の計算コードは、Project Asuraさんのコードほぼそのままです。
キーボードからの入力でリアルタイムに球面調和の次数(l, m)を変えてイガイガの形を変えたり、マウスでぐりぐり回転させたりして楽しんでます。

コードは以下からどうぞ↓
github.com

球面調和関数と大域照明について（webリンク集）

大域照明について、球面調和関数を使用する方法と球面調和関数そのものについての解説記事にリンク集を自分メモように作ります。
多くのサイトで球面調和を計算したり可視化するコードが公開されていますが、ほぼ同じようなコードとなっているようです。

1) 以下のサイトでは球面調和関数をつかったリアルタイム大域照明について解説してあります。

数式もあり、DirectX9のコードもあります。
実装コードが何を意味しているのかも解説があります。球面調和関数そのものについての説明はありません。
t-pot『リアルタイム大域照明』

2) そもそも大域照明（グローバルイルミネーション）ってなに？ということに関して、ゲームでの事例の解説記事です。

セガ、新作「ソニック ワールドアドベンチャー」におけるライティング技法を公開

3) この記事も大域照明に関する解説記事、(2)よりも詳しい。球面調和だけでなくPRT(Precomputed Radiance Transfer)全般についてまとめてある。

筆者は西川善司さん.
itmemolog.blogspot.jp
上の記事は古くて、最新の記事は以下の記事一部になっているのかも。
news.mynavi.jp

4) 球面調和関数で大域照明をするときの実装に関するものすごく簡単な解説。

実装されたコードへのリンクがある。
blogs.yahoo.co.jp

5) (4)のブログで実装先としてリンクされいるサイト。球面調和関数で大域照明を実装するときに多くのサイトから参照されている大元になるぺージ。

このサイトのコードが元になっているサイトが多い。
An Efficient Representation for Irradiance Environment Maps

6) Asuraさんの記事。球面調和を視覚化するサンプルコード。具体的に式もかいてある。ＣＧで使う場合は実部のみを利用するがようの式もきちんと記述してある

☆PROJECT ASURA☆ [OpenGL] 『球面調和関数(1)』
球面調和関数を使ってキューブマップを近似（圧縮）するコードと解説。
☆PROJECT ASURA☆ [OpenGL] 『球面調和関数(2)』

7) 藤田さんの球面調和関数の多項式表現のpdfドキュメント。

ＣＧで利用する実数球面調和関数について正しく記述してある（ネットにはこの記述間違いの記事もある）
また、デカルト座標系での球面調和関数についての記述もある。
http://lucille.sourceforge.net/blog/images/shpoly.pdf

8) 球面調和関数計算の高速化についての記述。Web上で球面調和展開した画像を取得するアプリも公開されている。

Spherical Harmonic Expansion

9) GLUTを使って球面調和関数の値を描画するテストプログラムのソース

http://harumune.s56.xrea.com/assari/index.php?%B5%E5%CC%CC%C4%B4%CF%C2%B4%D8%BF%F4

10) pythonを用いた球面調和関数の視覚化

takuyaokada.hatenablog.com

11) msdnによるPRTの解説とサンプル.サイトの一番下にあるリンクからさらにＰＲＴレンダリングに関する解説に飛べます.

PRTDemo サンプル

Courseraでヒントン先生の"Neural Networks for Machine Learning" ２週目

１週目はイントロということで、課題も無難にこなし２週目も受講し終わりました。

２週目はざっと以下のような内容でした。

ネットワークの種類の説明
feed forward network
recurrent network
symmetrically connected networks
以上３つの種類のネットワークの解説

パーセプトロンの解説
歴史的経緯からパーセプトロンを解説

パーセプトロンの幾何的な概念
weight spaceの話
急にweight spaceの話が出てきて、初め何を言っているのかわかりづらい
線形分離していることを説明しているようだ

パーセプトロンでなぜ学習できるか
input vector とweightをかけてうまく領域分けできますというのを原理的に解説した。
feasible　regionをとれば領域分けは収束するよという話のようだ

パーセプトロンで何ができないのか
いわゆるxorがパーセプトロンで表現できないよという話
パーセプトロンは線形分離可能な問題しか扱えないという制限がある

結構むつかしいことをサラッと説明してしまうので、この講義だけだと完全理解は難しいかもしれません。

課題は、複数選択があるので選択式といっても案外難しいです。

教師あり学習と教師なし学習のイメージ

教師というからには、学校をイメージしてみましょう。
教師あり学習と教師なし学習で、生徒を小集団に分類することを考えます。

教師あり学習

全校生徒を運動場に集めて、一人一人に教師があなたは１組、あなたは２組という風に伝えます。
その後任意の生徒に教室に入ってといえば、その生徒は自分の教室に入ります。これが教師あり学習。まさに教師がいるから自分のクラスがどこかを学習したということです。

教師なし学習

教師なし学習は、例えば運動場に集まった生徒たちを、お互い話し合って同じ趣味の人同士集まってくださいというようなもの。
結果としていくつかの集団はできますが、どのような集団にわかれるべきかという教師は居なくて、単に同じ趣味の人同士集まるという基準だけで集団をいくつかの小集団に分類できました。
これが教師なし学習のイメージです。

強化学習

強化学習を学校の生徒に例えると、新入生が昼休みにたむろする場所が、入学してからしばらくすると固定してくるというようなものです。
生徒一人一人が初めは昼休みにいろんな場所に出没しますが、図書館が居心地のいい人、運動場で遊ぶ人、校舎裏でゲームする人、屋上で昼寝する人、教室でおしゃべりする人など人それぞれ居心地の良さ（報酬）に応じて滞在場所が決まってきます。そして結果として場所ごとの生徒の小集団（クラスター）に分けられる、これが強化学習のイメージです。

かなり強引な例えですが、いかがだったでしょうか。