読者です 読者をやめる 読者になる 読者になる

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

VS Code パソコン TeX markdown

Visual Studio codeの設定メモ

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

  • Auto-Opne Markdown Preview: 自動的にプレビューが開くので便利
    - 複数のmdのタブがあるときも一つしかプレビューできない
    -> 便利かなと思ったが急にタブが開くのもうっとおしいので無効にしてある
  • 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

Markdown環境の構築

markdown sublime パソコン

jupyter notebook やgitのreadme以外にも自分のメモもmarkdownで書くことが増えてきました.
長い文章はtexを使いますが,ちょとしたメモや簡単なプレゼン程度ならmarkdownでサクッと書いたほうが手軽です.
そんなわけで,windows10 PCでMarkdownを編集したりプレビューしたりpdfに変換するツールを導入しました.
まずは、text editorですが,Sublime3を今は使っていますが、packageを追加すればブラウザでリアルタイムにプレビューで来るようです.
ただし,先ほどの記事で書いたような日本語IMEの変換窓のずれがあったりプレビュー画面で数式が表示されなかったりしました.
それで,Visual Studio Codeをインストールしてみました.
起動や動作が重いかと思ったのですが、想像していたよりは軽かったです.

MarpdownのプレビューにはMarpというツールをインストールしました。
Marp - Markdown Presentation Writer
動作も軽く使いやすそうです.

まだ使いこなせていませんがこれから使ってみて情報を追加していきます.

Visual Studio Codeのproxy設定は
Visual Studio Code のおすすめ拡張機能と設定値(2016/11 版 随時更新) - Qiita
を見ました。

markdownで数式を表示するには、コマンドパレット(Ctrl+P)から
ext install mdmath
だけでインストールできてしまいます.
http://qiita.com/saitotak/items/3ea2a1897dca6bb5b91b
VSCodeのMarkdownで数式を表示する - Qiita
数式を表示してプレビューは(Ctrl+Shift+V)ではだめで、Ctrl+Shift+.ですので注意が必要です.

tex形式で書いてある部分は
ParseError: KaTeX parse error: No such environment: align at position 14: \begin{align}̲
とエラーが出ています. 後日この問題を解決します.MathJaxだとエラーにならないようです.

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

sublime

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

Processingの高速化 Tips その1

Processing

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

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

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

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

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

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

コンピュータグラフィックス 数学 Processing

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

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

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

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

実行結果はこんな感じです↓
f:id:wshinya:20161208103747j:plain

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

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

球面調和関数と大域照明について(web上のリンク集)

コンピュータグラフィックス OpenGL 数学

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

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さんの記事。球面調和を視覚化するサンプルコード。具体的に式もかいてある。CGで使う場合は実部のみを利用するがようの式もきちんと記述してある

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

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

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

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

Spherical Harmonic Expansion

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

球面調和関数 - assari

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

takuyaokada.hatenablog.com

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

PRTDemo サンプル

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

機械学習

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

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

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

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

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

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

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

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

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