研究

メタボールパズルゲームを作る -メタボール編-

 unity1weekお疲れさまでした.今回は私は以下のようなゲームを作成したので遊んだことのない人は是非プレイしてみてください.

unityroomへ移動

 ちなみにツイートのいいね数が150を超えていて地味にうれしいです.

 本記事ではゲームで使用した主要な技術について軽く解説していきます.なお,サンプルプロジェクトも用意しておいたので気になる方は以下のリンクをどうぞ.

サンプルプロジェクトへ移動

2次元のメタボールを描画する

 さて,このゲームで最も特徴的なのはメタボールだと思います.メタボールとは,2次元のグラフィクスにおいては滑らかな曲線を描画するための技術です.ゲームキャラクター(メタボ~ル)はこの技術によってスライムのような滑らかな表現を表すことができるようになっています.

 以降はメタボールの数式的な理解,及びシェーダ上での実装を順に見ていきます.

メタボールを数式で表す

 まずは,数式を交えながらメタボールの表現方法を述べていきます.
メタボールは一言でいうと,あるピクセル上の点\((x,y)\)において,密度関数\(f_i(x,y)(i=0,…,N)\)の重ね合わせが閾値\(t\)を超えた際に色を塗り,そうでない場合は地の色を塗ると言った処理を全ピクセルに渡って行う操作によって有機的な形状を描画するグラフィクス技法のことです..

 具体例を見てみましょう.\(N=2\)とし,密度関数が次のように表されるとします.

$$
\begin{eqnarray}
f_0(x,y) &=& \exp(-(x^2+y^2)),
f_1(x,y) &=& \exp(-((x+2)^2+y^2))
\end{eqnarray}
$$

 \(f_0\)をグラフにすると次のようになります.なお,\(f_1\)に関しては単に\(f_0\)の中心位置を負の方向に2だけ移動したものになります.

 分かりやすいように等高線で表すと以下のようになります.

 例えば最も濃い部分から3つ目のオレンジ色の部分を閾値\(t\)とすれば,この\(f_0\)によって円形の画像が描画されることが分かります.

 そして,これらの密度関数を重ねあわせると次のようになります.

 等高線では以下のように表されます.

 もうメタボールが見えましたね.この場合,オレンジ色の部分は次の式を満たしていると言えます.

$$
f_0(x,y) + f_1(x,y) > t
$$

 『つながるメタボ~ル』ではキャラクターの位置を中心とした\(f_0\)のような関数を定義してやることで滑らかな表現を実現しているのです.

シェーダで実装する

 それでは具体的な実装を行っていきます.今回の実装では次の2ステップに分解ができます.

  1. スプライトの描画
  2. 全体にイメージエフェクトを適応する

 1.のスプライトの描画は前節で言う,密度関数の定義に当たります.スプライトの描画は4点の頂点で正方形を表しその内部に色を載せていきます.すなわち,頂点シェーダで中心位置を移動(実際にはtransformで調整しています)し,フラグメントシェーダで密度関数の本体を書くことになります.
 そして,2.の操作は閾値を超えているかどうか判定をする操作に当たります.

 それでは実際のプログラムを見ていきましょう.

 長々と書いてありますが,注目すべきは2点のみです.
 まずは23行目です.ここでは透明なオブジェクトをどのようにブレンドしていくかを決定します.今回はメタボールの密度値(密度関数からの出力)をα値に格納するため,適切にブレンド方法を決める必要があります.今回の描画では,地の値をそのまま保存しながら描画しなければならないため,One Oneで指定します.

 そしてもう一つの注目点はフラグメントシェーダです.58行目でスプライトの中心位置からの距離を計算し,59行目で計算した密度関数の出力結果をα値に書き込んでいます.なお,使用する密度関数の形式には特に規定がないため,前節のものとは異なる数式を使用しています(2の累乗数は,プロセッサによっては特殊関数が用意されているためですが,アセンブリが最適化されているかは確認していません).最後に60行目では色をうまくブレンドする際に利用に密度値を参照するために残しておきます.α値に直接密度値を書き込んでいるので必要ないように感じますが,α値は後で上書きしてしまうため,色もうまくブレンドするにはこのようにする必要があるのです.

 続いて,イメージエフェクト用のシェーダです.

 こちらはフラグメントシェーダにのみ注目してください.46行目が核となる部分です._Cutが閾値を表しこの値を超えないピクセルについては黒く塗りつぶします.

Unityで実装する上での注意

 以上でメタボールを描画することができるのですが,一つ注意が必要です.それはUnityは基本的に各色を8bitで表し,0~1を256段階に区切った色しか出力できないという点です.もしも1を超えてしまう場合は,1にクリップされて出力されます.今回算出する密度値は重なりが大きいと1を超えかねないため,何も対策をしないと以下のように一部分が白くなり,光ったような表現になってしまうのです.

Image from Gyazo

 これを防ぐためにはおそらくレンダーテクスチャに描画するしかありません(CameraのAllow HDRtrueにするだけで良さそうですがうまいこといきませんでした).レンダーテクスチャでは色のフォーマットを8bitだけではなく,16bitまたは32bitにすることができます.これによって,値がクリップされることをできるだけ防止することができます.したがって,実際に試してみたい方は次のようにレンダーテクスチャを作成し,カメラの描画先をレンダーテクスチャに設定してください.

Image from Gyazo

 レンダーテクスチャを表示するためにはuGUIのRawImageを使用します.

Image from Gyazo

 すると,次のようにきれいなメタボールを描画できるというわけです.

Image from Gyazo

最後に

 以上でUnity上でのメタボールの実装は完了です.『つながるメタボ~ル』の実装には他にも様々な要素がありますが,今回は疲れたのでここで終了にします.
最後まで読んでいただき,ありがとうございました.また,実装についてアドバイスをして頂いたchokopan先輩,ありがとうございました.
 気が向いたらphotonについての記事も書いていこうと思いますのでその時はまたよろしくお願いします.

画面情報でモデルを照らす:kcstuber開発日記

どうも,チョコです.

KCSTuberをn年ぶりに更新しました.古いChokoEngine(研究でforkして作業している)を使っているせいで,最適化が反映されていない.つらいさん.

さて,前々からやりたかった課題として,以下のようなものがある.

KCSちゃんは画面を見ているから,画面情報によって照明が変わるはず.と.

 

....

いや,ちょっと面倒すぎないか.

 

....

仕方ないので,実装を考えましょう.linuxはさておき,画面をキャプチャーするwinapi関数にない(と思う)し,どうやればいいか困りますね.

そこで,まず考えたのはこれ.

OBSで画面をキャプチャーしてストリーミングし,ffmpegで取得する.

おう.天才.(と思うじゃん?)

OBSで出力するのは簡単なので詳細は省いて,要はlocalhost:1234に映像データを吐くようにすればいい.

そして,悪夢のffmpeg.このようなクラスを作ろう.

実装はffmpegの仕様を見て自分で考えましょう.(ないんですよ最新の仕様がぁ.)

まあ,ストリームを取得するところはこんな感じですね.

はい,映像の配列を取得したとしましょう.あとはOpenGLに渡せば好きにし放題だね.

っと,その前に..

 

いやあ,さすがにこれはひどい.このやり方の問題点を考えてみよう.

1.OBSを立ち上げる必要がある

2.映像の質がわるい

3.OBSを立ち上げる必要がある

4.ユーザがいちいち設定する必要がある

5.OBSを立ち上げる必要があるため,配信するときはOBSが2つになっちゃう

 

だめじゃん.

 

そこで,もう一つの神のFOSS,VLCを思いついた.

そう,libVLCを使えばいいじゃん.と.

 

はい,解散解散.

 

libVLCを画面をキャプチャーするのは簡単.一応公式のサンプルもあるし,gistも落ちている.が,両方とも少しずれているので,我のものも見せよう.

ここで,transcode{vcodec=RV24}を指定すると,画素データがBGRの8ビットづつになるので,変換する必要性がない(!).神.

 

そして,この得たデータをOpenGLに渡せばいいね.

これを描画すると,こんな感じになりますね.

Screenshot (535)

いぇーい.ノイズもないし,すごいぬるぬる.

 

では,最後にこれを使ってKCSちゃんを照らそう.結局KCSちゃんはアニメ風なので,ちゃんとHDRIとして使うと不自然になっちゃう.そのため,適当に照らそう.

要するに,ぼかした背景をオーバーレイするだけ.

OpenGLコードは説明する必要ないでしょう.(勉強したい方はCG班に入ってね☆)

,,と言ったものの,色の組み合わせは一応こんな感じですね.

これの効果を一行一行見ていくと:

1:ぼかす

Screenshot (542)

2:KCSちゃんの元の色を下げる

Screenshot (543)

3:ぼかしたテクスチャを描く

Screenshot (544)

はい終了.割と簡単ですね.これを動画にするとエフェクトがはっきり分かりますね.

KCSちゃんかわいい.では.

Marloコンペ用の強化学習環境をサーバーに立てた話(おまけ:Google ColabでDQN)

はじめに

こんにちは、syuntoku14です。現在カリフォルニアでスマブラしてます。イカちゃん強いね。

 

スマブラのせいで時間がなくなってしまったので、本記事ではDavisで作成した無についてしゃべります。

 

皆さんMarloコンペというのをご存知ですか?OpenAIが主催しているMinecraft環境での強化学習の大会で、入賞するとカナダに行けたりするすごいやつです(もう終わっちゃいましたが、来年もあると思います)。

 

MarloコンペのチームにDavisで参加し、私は環境構築を担当したわけなんですが、この環境構築が鬼めんどくさかったのでスクリプト化しました。

 

一応公式ページにインストール方法などは書いてあるんですが、Minecraft環境非常に不親切で、ウィンドウがある環境でないと動きません。このままではGoogle Cloudなどクラウド上で学習させることが出来ません。困りましたね。

 

 やったこと

 

xvfbを使って仮想ウィンドウを作成し、Marloを走らせました。が、これだけではなぜか動かなかったので(OpenGL周りが原因?)、最終的に公式が配布しているDockerファイルを弄くり、中にあるlaunchClient.shをxvfb付きで実行したら動きました。

 

最終的に出来上がったDocker imageがこれです:

 

以下のコマンドで任意のポートにつなげて実行できます。

 

“`
docker run -it –rm -p [number of port]:10000 syuntoku/marlo_client
“`

 

ここまで自力で頑張ったあとで、これDocker Hubに既に存在していることに気がついてしまいました。圧倒的車輪の再発明だったんですね(悲しいね)。まあDockerについての知識が微妙についたので良いんじゃないでしょうか。

 

あとはこれをdocker-composeと–scaleオプションで並列化させて実行するだけです。(スクリプトにしました)

 

クラウド上で利用するにはDockerやCUDA、Anacondaのインストールもやらないといけないので、これもスクリプトにしました。

 

できたもの

Github:

https://github.com/syuntoku14/marlo_headless

使い方は一応READMEに書いてあります。

 

手順:
1. AWSでもGoogle Cloudでも何でも良いが、Ubuntu18.04環境を立ちあげる。
2. Jupyterの設定も勝手にしするので(ポート5000)、各クラウドのブラウザから5000番ポートを開けとく
2. 中でgit clone https://github.com/syuntoku14/marlo_headless.git
3. . ./marlo_headless/install/gcp/install.bash
4. . ./marlo_headless/docker/launch_multi_client.sh [number of environment]

 

私はVimmerなので、Jupyter-notebookのvim extensionをセットアップするスクリプトなども別でついてます。

 

肝心の学習ですが、まだやっていないです(無能)。学習させたらまた記事を書きます。おちまい。

 

おまけ

 

Courseraの課題でDQNを実装してGoogle Colab上で動かしました。

 

Gist:

 

先ほど紹介したMarlo用のスクリプトはついでにgym環境もインストールするので、上記のgistを参考にして適当にやればGoogle Cloudで簡単にAtariの学習も出来ます。やったね。

 

Vuexについて説明したい

※この記事は、KCSアドベントカレンダー12月23日の記事です。

はじめに

はじめまして、一年のsupercell(twitter: @undermountainafu)です。この記事では自分が学習しているvuexについて説明していきます。

vue.jsについて

vuexの説明に入る前に、まずはvue.jsについて簡潔に説明しようと思います。vue.jsとは、フロントエンドで用いられるJavaScriptのフレームワークです。他のフレームワークとしては、ReactやAngularがあります。vue.jsの面白いなと思った特徴は、コンポーネント指向です。この指向は、アプリケーションをコンポーネント機能ごとに分割することで、コードの再利用、保守を容易にすることができます。他にも色々な機能がありますが、詳しくはドキュメント見てください。
vuexドキュメント

vuexとは

お待たせしました(?)、vuexについて説明していきます。これは、vue.jsを用いたアプリケーション開発の際に用いられる開発フローです。要するに、データの流れを一方向に決めようってことです。vuexでは、stateをグローバル変数のように設定します。そのため、どのコンポーネントからでもstateの値を参照することができます。stateの状態を変更したい場合は、action->mutation->stateという流れで行います。下図は一連の流れの参考図です。

vuex
図. vuexの流れ

なぜ使う?

アプリケーションでは、view、action、stateで一方向の流れになっています。しかし、共通の値を共有するコンポーネントがある場合や、一つの値を複数のviewに表示させたい場合などでは、コードが複雑になってしまいますし、状態の管理が煩雑になってしまいます。具体的には、vuexを使わない場合propsとして状態を渡しますが、その状態は親から子にしか渡すことができません。
そこで、状態の管理を楽にするためにvuexを使うのです。
vuexがどんなもので、なぜ使うかを理解した後は、各機能について簡潔に説明していきます。

state

stateは、ストアで管理される状態であり、mutation以外では変更できません。

action

actionでは、mutationの登録(commit)や、データの加工などの非同期処理を行います。actionはdispatchにより呼び出されます。また、外部APIとの通信もここで行います。蛇足になりますが、APIとの通信は、axiosを用いることが公式により推奨されています。

mutation

mutationでは、stateを変更する処理や、同期的な処理を行います。commitメソッドによって呼び出すことができます。唯一stateを変更することができる機能となっています。

おわりに

余談ですが、この記事のためにvuexのサンプルコードを書いていたのですが、そのコードが動かなかったため、のせれませんでした(雑魚)。コードを直してくれる方募集しています->Missionapp
では、おつかれ三下~!

順列における二分探索木

二分探索木

とは、お金のなる木と同じようなものです(大いなるウソ)。

とまぁ、誰にもわからないウソをついたのですが。この記事では順列における二分探索木の同型問題について話そうと思います。また、文章だけで説明できるかチャレンジしてみようと思います(絶対ムリ)。二分探索木を知っている人は絵がある所から読んでください。

さて、二分探索木とは、データ構造というものらしいです。現実に植わっている訳ではありません。これはですね、二分木と呼ばれる各ノードが最大で2つの子を持つ木、かつ、すべてのノードが左の子<=親<右の子というルールを持つ木構造のことを指します。何言っているかわかりませんね。

想像してください、絵を一緒に書くと良いでしょう。あなたは数字の神様です。しかし、神様の癖に9,7,10,3,12,8の数字しか持っていません。悲しくなって、これを二分探索木という形で海の上にばら蒔きたくなります。ちなみにあなたは神の視点で海を上から見ています。

数字を海にばら蒔くと沈むので島を作りたくなります。一つ目に作った島を二分木用語ではルート(根)といいます。そして、その島に9を置きたくなり、置きます。

次に、作った島の斜め左右に二本の橋を建てたくなります。そして、あなたは7という数字を置きたくなります。しかし、二分探索木という形で置きたいので、必然的に左の橋の先に島を作って、置きます。なぜなら、7<9であり、左の子<=親<右の子というルールがあるからです。一つ目以外の島をノードといいます。また、ややこしいことに7の島ができたお陰で、9の島は7の島の親であり、7の島は9の島の子供という関係が発生します。親、子供というのも二分木用語です。この7の島にも二本の橋を架けたくなります。

次に10を置きたくなります。9<10なのでルールより、9の島の右橋先に島を作り10を置きます。二本の橋を作っておきます。今度は3を置きたくなります。3は3<9なので9の島から左橋先の島に置こうとしますが、7がいるので置けません。困ったときはルールを思い出します。左の子<=親<右の子です。3<7なので7の島の左橋先に島を作り、置きます。3と7には親子関係が発生します。

次に12を置きたくなります。12は9<12,10<12なので10の島の右橋先の島に置きます。これを繰り返して残り8を置くと

二分探索木
二分探索木

こんなのが出来上がるはずです。たぶん…。キーワードは、二分探索木はデータ構造ということです。あとはググってどうぞ…。

本題

本題はですね、二分探索木の同型問題なのですが。状況設定はですね、1からn番目までの数字列の順列を作りたくなります。このできた数字列1つ1つを二分探索木に収めたくなります。このとき、同じ木の形ができることがあるんですね。それを判断したいのですよ。

例えば、1から3の順列を考えます。123, 132, 213, 231, 312, 321の6通りの数字列ができるわけです。この各数字列を先頭から順に木に収めると、下の絵みたいに同じ木の形になるものがあるのですよ。入力の順番は異なっても。

同じ木の形の例
同じ木の形の例

で、絵を描けば一発でわかるのですが二分探索木を作るプログラム上ではわからんのですよ。ここで記事を書いてる人は考えました。順列においては!順列お・い・ては!ここ重要なので二回言いました。同じ木の形=各ノードの場所に同じ数字がある、この考えを用いると同じ木かどうか判断できるのです。

方針は、二分探索木を回るときに同じ道筋を辿るのですよ。数字は同じ場所にあるのだから、同じ木であれば同じ数字が回った先にはあるわけですね。で、二分探索木の巡回方法には前順、中順、後順があります。中順にまわり各ノードの数字を出力すると、数字の場合は昇順にソートされたものが出てきます。これではすべて123…となって意味がないので、前順または後順でまわり各ノードのを出力すると同じ木は同じ数字列になります。

というのはすぐに思いつきました。では、順列からできた木の異なる形の木だけ取り出して線形リストにしようと思いたちます…C言語で実装したのですが苦労しました。下記の絵のイメージをしていただければいいと思います。idとかは気にしないでください。よかったら実装してみてください。1からnまでの数字列の順列を二分探索木にして、異なる木だけを線形リストにするという実装を。プログラミングの練習になると思います。なんたって、かだi…ゲフンゲフンだもの。二分探索木の挿入や巡回、探索などは再帰呼出しを使うと短いコードで書けるのですが実装するにあたってわざわざ再帰呼出しなしで挿入したり巡回しましたね…

各木を線形リストにするというイメージ
各木を線形リストにするというイメージ

以上、お付き合いいただきありがとうございました。なにか間違っていたらご指摘ください。

学校の先生にクリスマスの予定がないと言ったら爆笑されました。みなさんもうすぐクリスマスですよ!

 

Studio One Prime を用いたDTM入門

この記事はKCS Advent Calender 17日目の記事です。
 
初めまして、生命情報学科3年生の紫藤です。KCSでは音楽班で活動しています。今回はDTM初心者の私が音楽班に入って一曲作れるようになるまで具体的に何を行ったか、利用させて頂いた記事等を紹介していきます。

DTM興味あるけどなんも分かんねーって方は、記事内のリンク集が参考になるかもしれません。
(DTM入門!っていうサイトは星の数ほどありますが、身近な体験談ってことで差別化を一つ。)

使用環境
OS: windows 10
DAW: Studio one 3 prime (現行版は4)

1. DAWインストール

DAWは作曲に使うソフトです。無料で使えるものはいくつかあるのですが、私はStudio One Prime を使用しました。以下のサイトに分かりやすい導入方法が載っています。↓
https://sleepfreaks-dtm.com/for-beginner-studioone/studio-one-4-prime/

このとき追加音源の導入に失敗すると、音がでなくて詰みます。私は一度再インストールしました()
 

2. 設定

 
始める前にまずキーボードショートカットの設定をしておくことをお勧めします。
譜面の再生・停止がデフォルトではテンキーに割り当てられているので、別の触りやすいキーに割り振ると良いと思います。私は停止をF4, 再生をF5に充てました。
設定方法は以下のリンクが参考になります。(再生は”スタート”、停止は”停止”なので、検索窓にそれらを入力)
http://kumagaimashairo.com/archives/7689392.html

3. DAWに触れる

 
操作方法については、検索すれば分かりやすい解説がいくつもあります。「studio one prime 使い方」等で検索するとザクザク出てきます。(studio one 4自体のリファレンスは現状少ないのですが、UIは過去バージョンと大差ないため、3の解説でも十分役に立つと思われます。)

まず↓のサイトにお世話になりました。「新規ソングの作成」「Presenceの立ち上げ:その1」「ピアノロールで打ち込み:その1~4」の辺りの項を読めば、楽器を選んで音を鳴らせるようになります。
https://kaymusic-online.com/index.php?studiooneprime

流れを掴むのに↓の動画も分かりやすいです。
https://www.youtube.com/watch?v=VJnGqfkZhOw&t=1021s

 
とりあえず適当に楽器を選んで音を出せるようになった頃からは、以下のサイトを参考に打ち込みをしました。↓
http://dtm.55-52.com/

「ドラム打ち込み講座」「ベース打ち込み講座」「エフェクト使い方講座」等の記事が役に立ちます。特にドラム打ち込みはDTM始まった感があってすごく楽しかった記憶があるので、おすすめです。
studio one での打ち込みについては↓を参考にすると良いです。
https://abc-musicschool.com/online/2017/04/dtm_lesson4-2/

鼻歌で考えたメロディにドラムを付けてみるだけで一気に曲らしさが増したり。あとはリバーブを付けてみると楽器が艶っぽくなってテンション上がったりします。
(リバーブについては上のエフェクト使い方講座、その使用方法は以下リンク↓)
https://www.studiorag.com/blog/fushimiten/studio-one-mix/2

4. 作曲

 
メロディとドラムがあればだいぶ曲らしくなるのですが、そこから別の楽器の音色を重ねていくのには、少し知識が必要です。

自分が行った作曲の手順での必要知識は、ドレミファソラシドの鍵盤上の位置や、音階の英語名、曲にはそれぞれキー(調)があり使用できる黒鍵や白鍵が決まってること、などです。要するに、「Cメジャースケール」だとか「ト長調」って言われて分かればOKです。
知らなかった方は以下リンクをご参考に
http://music.nonono.jp/composition/composition01
http://joy-music.jp/magazine/articles/compose/key/
https://thesaibase.com/music/theory/alphabet

(そんなの面倒くさいって場合は「ループ作曲法」とかググると良いです。ループ素材の使用方法は↓)
https://www.youtube.com/watch?v=PGEMX4jJWBw&list=PL53836339204520C2&index=16

 
私が一曲目に作ったのは、Koto(琴)とPan Fluteがメロディ、Basic kit(ドラム)があって、他にはFingered Bass(ベース)が低い音を単音で弾き、とGrand Pianoが和音を弾くという構成です。
まずは先ほどのドラム打ち込み講座で打ち込んだドラムのパターンをコピペで増やして、そこに鼻歌でメロディを考えて琴とフルートで鳴らしました。
この次に、メロディからこの曲の調を割り出しを行いました。無意識で歌った鼻歌でも必ず何かしらの調に属しているはずなので、打ちこんだメロディのシャープ・フラットがどこにあるのかを調べて調を確認しました。(ここが難しいかもしれません。参考↓)
http://guitarex.web.fc2.com/knowledge/key_signature.html

調が判明し、その曲中で使用できる音が決まったので、後はその音の中から適当にベースを鳴らしてみて一番良さそうな音に決めて、pianoも鳴らして違和感のない和音を地道に当てはめていって完成しました。

要するにゴリ押しなので、調を判明させる必要は別になかったと思います。調が分からずとも、調に合わない音を鳴らすとどうしても違和感が残るので、手間こそ増えますが、地道に鳴らしてしっくりくる音を探すという同様の方法を使ってピアノやベースを入れられると思います。
また制限をかけるために、pianoの和音にはそこで鳴っているメロディの音を入れた上で他の+1~2音を見繕っていきました。

今回の私の方法はメロディを決めてから和音(コード)を探っていきましたが、コードを最初に決めてからメロディを載せる方法もあります。正攻法は調を決めて、使用できるコードを当てはめていく方法ですが、難しいので、予備知識のいらない方法についてお伝えします。前者に興味があれば「音楽理論 入門」とかでググるとよさげです。下に参考になったサイトを貼っておきます。
http://studay.info/
https://www.studiorag.com/blog/fushimiten/kanon-chord?disp=more
http://sakkyoku.info/theory/diminished-seventh-chord/

予備知識のいらない方法ですが、コード進行のパターンをどこかから持ってきて、それを打ち込むのが手っ取り早いです。分かりやすいのは既存曲のコード進行を調べて載せてみる、など。他には
↓のようなコード進行を載せているサイトを探して、
http://www.masayoung.net/archives/970
↓こういうサイトでその各コードの構成音を調べて、dawに打ち込む、など。そこにメロディ適当につけて、ドラム付けて、ベースでその各コードの根音(AコードならA(ラ)の音)を弾けば曲が完成します。
http://www.piano-c.com/pianoChord_CMa.html

 
また作曲に関して分かりやすい動画を見つけたので、リンクを貼っておきます。
https://www.nicovideo.jp/watch/sm2161286

5. Tips

 
・メトロノーム
https://unko.kpop.jp/studio_one/20180208-4-metronome.php
考えたメロディを打ち込むとき、音符の長さがどこまでか分からずに困ることがあると思います。その時はメトロノームを鳴らしておくとリズムを取りやすくなります。

・ショートカットキー
https://ch.nicovideo.jp/yellow_line/blomaga/ar978623
特にctrl+s, ctrl+z, ctrl+y, Dは必須と言っていい程よく使います。また2. 設定 でショートカットキー登録したスタート、停止も必須です。マウスでカチカチするよりよっぽど楽です。

・ループ機能
https://sleepfreaks-dtm.com/for-beginner-studioone/loop-play/
試しに打ち込んでみた音が曲全体に合っているかどうかを確かめるには、再生してみる以外ありません。その度にわざわざキーを押すのも一手間です。ループ再生の機能でループさせながら、入れる音を決める、という方法がかなり便利です。

・音源
http://gaha2.blog52.fc2.com/blog-entry-766.html
外部音源でメジャーなフォーマットはVSTpluginですが、studio one primeはVSTを使用できません。studio one primeで音色を拡張する方法としては、soundfontというフォーマットがあります。(拡張子はsf2。sfzは無理なので注意!)

・Studio one起動してるとyoutube等の音が出ない
https://sleepfreaks-dtm.com/dtm-trouble/sound-out/

↓あまり関連ないですが、最近感動したTipsを貼っておきます。Studio one professional付属音源のギター打ち込みの記事です。midiデータだとかエディタの画像だとかを用いて再現性の高い情報をくれる記事はとても素晴らしいですね。(遠い目)
https://htmusicm.hateblo.jp/entry/studio-one-3-guitar-uchikomi

 

ここまで調子に乗ってべったべったと他人様のブログのリンクを貼り付けてきましたが、許可は一切取っておりません。もし問題だぞという方が居れば、お手数ですがご連絡をお願いいたします<(_ _)>

あんぱんたべたい

気合いで読むQRコード入門

この記事はKCS Advent Calender 16日目の記事です。

軽い自己紹介
初めまして。J科B3の@kam1tsur3です。セキュリティキャンプ2018にいました。kcsにはB2の時に入りましたが、LTを一度聴講しに行ったことがあるくらいの幽霊部員です。普段はCTFというセキュリティやコンピュータの周辺知識等を競う競技をやったりしています。別に普段からQRコードを読んでいるわけではありませんよ。

概要

記事は題名どおりQRコードをカメラを使わずにゴリゴリ読んでいこうという趣旨のものです。他の部員の記事に比べ実用的ではないですが、どの分野の方でも読める内容になっているので、箸休め程度に思っていただけると幸いです。

URLを貼りさえすれば良いと思ってたので、書くことが決まってからすぐ自分のブログで下書きを書いてしまいました。以下に記事のリンクを貼ります。ちゃんとこの場所用に書き直そうと思ったのですが、最近なかなか元気がないので許してください。直前に目を通すと、記事を書いた当時は元気だったのですごい文面も張り切ってるのが分かるので、とても切ない気分です。みんな頑張ろうぜ

ほんへ

https://kam1tsur3.hatenablog.com/entry/2018/12/16/131108



全くの初心者からの機械学習ロードマップ

この記事はKCSアドベントカレンダー第15日目の記事です!

おはござー!おはござー!おはござー🌻!

ぼく(リンク先:Twitter)自身の記事としてはおよそ1.5年ぶりとなります.12月も中程に差し掛かり学部3年ということもあって研究室選定で右往左往しております.

何かしら技術系の記事を書こうと思っておりましたが,そのネタはコミケ95での部誌に回すとしてここでは自分の1年間の自分語りにしようかと思います.オタク,自分語りしがち.

KCSはいくつかの班に分かれて活動しているのですが,ぼくはAI班とBlender班で主な活動を続けておりました.AI班自体の発足は結構前からあるようですが,ぼく自体がAI班に入ったのは今年度に入ってからですので,おおよそ9ヶ月程度の機械学習を学び始めてから経つことになります.

9ヶ月前までは二進も三進もわからなかった状態から,どのように機械学習の勉強を続けていったのか,その過程を共有することで,同様の立場にいるような人(いるのか?)の助けになれば幸いです.

図です

機械学習関連以外のことは灰色で示しました.

勿体ぶる必要もないので時系列順にやったこととその感想とかを紹介します.

3-4月 Python機械学習プログラミング

81kHmZ62+nL

Amazon

まず第一に,技術書を買った際に自分の手ですべて実装することを目標にしました.何かしらの言語を学ぶ際に,何に応用できるのか,これを覚えて何になるかといった視野を持つことにしています.C++を学ぶ際,クラスやオブジェクト指向,C++11のshared_ptrといったとっつきにくい概念から,どのように実活用されるかなどが全く把握できず仕舞でせっかくのプログラミングに対してやる気が全く出ずに,そのうち習慣が自然消滅してしまうといったことが多々あります.ぼくの場合には「機械学習」を学び「Webアプリケーション」を作りたい.スキルを活かせる「バイト」をしたい等,の目標を定めました.

この本では,機械学習で使われるSVMだとかK-meansだとかのアルゴリズムをある程度網羅的に,なおかつコード量も豊富に記載されており,Pythonと統計学,機械学習を万遍無く学べる良い本でした.無から有を生み出せそうな良書です.

また,TwitterのFF内間で日報/日記を付けるムーブメントが流行っているように見えたことから便乗して,ぼく自身もこの時期から日記/ブログをつけ始めることにしました.

進捗だめです

他人に見せるという体で学んだことをまとめ上げるという行為は,

  • 知識を言語化することで学習の反芻を行え,知識の定着が向上する
  • 他人に見せるための文章を書くことで,自己完結しない知識の表現方法を行える
  • 他人からも「○○ちゃんのブログは為になるなぁ!」とかレスポンスが貰えて習慣化が期待できる

といった役に立つことが盛り沢山だとおもいます.なのでこれを見ている皆さんも日記を付けてください.付けなさい!付けろ!!!

3-5月 Coursera

皆さんはCourseraというサイトを御存知でしょうか.

 

…では,AIdemyという動画教材による学習サービスサイトは聞いたことはありますでしょうか.

 

おそらくAidemyなら聞いたことがあるという方が多いのではないのでしょうか.

国内では個人的にはあまり聞かないの(僕主観ではの話を国家レベルに拡大するな)ですが,動画で学習ができて,なおかつ,時たま出されるプログラミング課題に回答して,全講座を終了させることで,修了証を貰えてLinkedIn等のサイトそれを貼ることで俺ツエーできる様になるというサイトです.動画講座自体は無料で閲覧することが可能であり,実際に演習を行うという場合でも月間6000円弱でコース内の全教材が利用可能となります.

同期で同じクラスのモヤシ炒め界の申し子でUCDavisのK氏がやってたことに便乗してAdvanced Machine Learning Specialization という全40週弱ある講座を申し込みました.しかし,大学が始まった事による忙しさの変化により,思うように進められなくなってしまったため途中で断念しています.しかしながら,機械学習の実力(と,あわよくば英語力)を身につけるには最適な教材です.一回の動画が10分前後で終わるため,空いた時間を有効的に活用ができ,講座数も豊富です.機械学習以外でも制御工学WebデザインVR開発まで非常に多岐にわたります.なかには大学のDegreeなどをも得られるような本格的な講義まであります.

Courseraに関する記事は,上のK氏もロ技研のアドベントカレンダーにて学習方法等を共有しています.細かい学習方法など,具体的な環境の揃え方などに興味がある方はこの記事を参考にしてみてください.

4-7,9-11月 Ian Goodfellowの深層学習邦訳版

61zJusXfyjL._SX258_BO1,204,203,200_

2018年度は,KCSの方針で週に2度ほど集まって,片方はゼロから作るを頭から読んでいく会(初級者向け)と,Ian Goodfellowの深層学習や各種論文を読んでいく会(上級者向け)を開催していました.

前者の方はおおよそ無難な結果で終わることができたのですが,後者の方は読み込み始めてからこの本が上級者向けなどではなく人智を超越した神とそれに匹敵する最強GAN制作おにいさんしか理解できないような代物であることに気付きました.

 

平平凡凡である僕は開いては悶え開いては悶えを繰り返し,全く先に進めずじまいでした.(げに今もそうなのですが.)しかし,間違いなく知識の得られる量としては日本語文献では抜群に豊富のような気がするため,これを理解さえできればおおよその深層学習の基礎については分かったと言い張れるだろうという自信がつきます(ということにしておきます).

4-7月 ゼロから作るDeep Learning ①

picture_large978-4-87311-758-4

内容に関する評価は10万部のセラーを記録したため探せばいくらでも出てくるため文が拙い僕が書くのもアレなので省略します.

KCSでは毎年(といっても先輩いわく2015年ごろからの習慣で)新入生向けの講習会を4-6月にかけて開催しています.その講習会の教材として活用しました.

実装レベルから,Adam等のオプティマイザの説明,CNNの構造まで詳しく説明されており,説明も概ね分かりやすかったです.次年度以降のAI班の活動方針は僕の手中でもないので知る由もないのですが,もし「教科書を作る」となった場合には非常に参考になるのではないか.というような良書です.

8-9月 パターン認識と機械学習

    その日、人類は思い出した。
    ベイズに凌辱されていた恐怖を。
    頻度論の中に囚われていた屈辱を。

    Seid ihr Frequenztheorie? Nein, wir sind der Bayesian!

ベイズに凌辱されました.

日記に日記とは思えない分量を書いたりしたので読んでください.

変分ベイズ(1) 変分ベイズ(2) 多項式回帰(1) 多項式回帰(2)

通年 論文輪読

KCSでは,学習の一環として,有志が集まって自分が読んできた論文をプレゼンにまとめて,知見を共有する回を行っています.

論文を読むことで,最新の知識を入手でき,多くこなしていくことで,論文の書き方や構成といったものがだいたい把握できて,将来の修論だとかを書く際に非常に参考になります.最新鋭の論文でも,Github等に本人の実装や他人による追実装等が挙げられており,写経するといっただけでも応用事例を実際にプログラムでき,最新鋭のアルゴリズムを手元のマシンで再現できるというのは,非常にモチベーションの向上につながるかと思います.

昨今,arXiv等には日に夥しい数の論文が投稿されています.その中から,読みたい論文を発見することは非常に困難だと思います.そこで,Twitter等を利用して他人の腕を借りて追いつくなど,周りの同士と共有して切磋琢磨できる環境を構築することは非常に重要となります.

これから

三田祭にて軽いWebアプリケーションを作った経験から,Web関連のことを学んでいこうかと思います.単一分野だけに留まらずに関連分野に目を向けて学習していきたいと思います.

また,KCS内でも本の輪読会を継続する声が上がっています.非常に嬉しいです.

リアルでも環境構築(特にデュアルディスプレイ)が重要なんだなと感じる一年であったとさ.完.

超解像の基礎


情報工学科3年、AI班班長の渡邉です。研究室の決定の際にメンタルがグワングワンしていましたが今は元気です。

今回は下級生の機械学習の実践として理解しやすく、結果もわかりやすい超解像の分野に関して、その初歩の部分の論文を簡単に解説していこうと思います。

超解像とは?

すごい簡単に言えば画質を上げるやつです。waifu2xなどは有名ですが、最近ではA.I.Gigapixelなどの商品も出てきているので、技術の進歩を感じますね。

最初の論文

機械学習が超解像の分野に用いられたのは2014年のImage Super-Resolution Using Deep Convolutional Networks.が最初だといわれています(確認してないので違ったら教えてください)
この論文内で採用されているモデルは3層と非常に浅く、損失関数は最小二乗誤差となっています。これを図や数式で示すと以下のようになります。尚、モデル図や損失関数の式は上の本論文から引用しています。
srcnn

$$
L(\Theta) = \frac{1}{n}\sum_{i=1}^{n}{|F(\boldsymbol{Y_i:\Theta)}-\boldsymbol{X_i}|}
$$
$$
\Theta = {W_i,W_2,W_3,B_1,B_2,B_3}
$$
このような今からだとチュートリアルにも思えるような簡単なモデルですが、PSNR(ピーク信号雑音比)という指標において既存手法を上回る性能を発揮しています。当時の既存手法と結果を比較したものが論文中に示されているのでこれも提示します。
SRCNN-result
このままだと何も違いが判りませんが、拡大するとわかりやすくなると思います。

そしてこの論文以降、機械学習を超解像に用いるのがブームになっていきました。

SRGAN

機械学習により超解像の分野にはある種ブレイクスルーが訪れたと考えられていましたが、最小二乗法を用いると、CNNで圧縮された値を最小化しようとするため、PSNRベースで見れば確かに雑音が小さいものが出力されますが、人間の視覚的にはあまりそれらしくないという状況が発生していました。これを解決する手法として用いられたのがGANです。要は、GANでは(うまくいけば)それらしいものを生成することができるので、これを使って超解像を行うことで、人間の目から見てそれっぽいものを作れるのではないかと考えられるようになり、実際にうまくいったものととして紹介されたのがPhoto-Realistic Single Image Super-Resolution Using a Generative Adversarial Network(2016)、通称SRGANです。この論文内では、新たな主な取り組みとしては、Pixelshuffler、Content loss、Adversarial lossの採用等が挙げられますが。次はこれらの解説を簡単に行おうと思います。

Pixelshuffler

通常のdeconvolutionでは、生成された画像が格子状になっている箇所があるものが比較的よくみられました。それは、画素ごとに参照回数に差があるためであり、実際にhttps://distill.pub/2016/deconv-checkerboard/にある動画を見てもらうと直感的にわかると思います。


そしてこれを解決するために用いられたのがPixelshufflerであり、Real-Time Single Image and Video Super-Resolution Using an Efficient Sub-Pixel Convolutional Neural Networkに初めて登場しています。これが、実際にはどのような操作を行っているのかというと、各チャネルの画素をその場に展開するという手法をとっています。言葉だけではわかりにくいので、元論文から画像を引用します。
pixelshuffler
画像が小さくなることを忘れていたので言葉でも頑張ってなるべくわかりやすくすることにします。convolution等を行った後のサイズが$$w\times h\times c^2$$であったときに、Pixelshufflerでは、これを$$wc\times hc\times 1$$として出力することで、deconvolutionに相当する操作を行っています。

Content loss

これは、style-transfer界隈から用いられたもので、各画素の値を比較するのではなく、学習済みのVGGに画像を流し、中間層での特徴量を比較することによって、鮮明な画像を出力することができるようにしたものです。数式としてはi番目のMaxPooling層の前のJ番目の畳み込み層(アクティベーション後)の特徴量などを逐次計算しています。(数式が入力できなかったのでこれで許してください、Hackmdで入力できたのになぜ)

Adversarial loss

GANの損失関数です。数式が入力できなくなった(添え字が複数段階つく数式などが表示できない)のでこれもほとんど通常のGANの損失関数と変化がないのでこれだけにしておきます。

SRGANのモデル

いろいろ書きましたが、結局SRGANのモデルは以下のようになっています。
SRGAN-models
また、損失関数に関しては、generatorはContent loss と Adversarial loss を1:0.001の割合で足し合わせて使用しているそうです。
では、SRGANがどの程度の性能を出すことができたのかを比較してみましょう。

SRGANの性能

元論文では、以下のような差が出たことが報告されています。
srganresultimage

確かに、SRGANの性能が他のSRCNN等と比較してよくなっていることがわかります。また、SRGANは特に人間が主観的に判断した際の美しさ(MOS)の値がよいことが知られており、それを示している結果は以下の画像の通りです。
srganresurltable2
尚、これらの画像において、SRGANのAdversarial lossを考慮しないものはSRResNetと呼ばれています。

最近の研究

これらの超解像の技術の進歩の結果、PSNRなどの数式で表すことができるような定量的な指標と、人間の主観で判断するMOSなどの定量的な指標の間にはトレードオフの関係があることがわかっており、どちらかに特化した手法が最近は開発される流れになってきています。具体的な例としては、SRGANの中のAdversarial lossのgenaratorの部分のlossに関しても考慮し、その中間層の特徴を生かすような構造を用いたSRFeatや、PSNRの向上に特化したRCANや、SRGANに対して、さらに他の手法で用いられた手法を取り込むことでさらにMOSの評価を上げたESRGANなどが開発されています。

所感

記事の冒頭にも書きましたが、このような分野の大きな利点は成果を実際に見て確認することができることだと思います。また、自分で記事を書いてみて、改めて基礎分野の重要性を感じました。