音楽の視覚化について、発見したものとUnityで作ってみたもの
音楽を視覚化について、発見したものと、それをみて実際に自分で作ってみたものをまとめました。
- Music Animation Machine 〜共感覚と音楽の構造の視覚化〜
- Music:Eyes 〜アニメーションで音楽を学ぶeラーニングプラットフォーム〜
- Keita Onishi 氏
- フロクロ氏
- YouTubeのピアノ演奏動画でよくみるもの
- Unityで作ってみたもの
Music Animation Machine 〜共感覚と音楽の構造の視覚化〜
音楽の視覚化においては自分の中で第一人者である、Stephen Malinowski ステファン・マリノフスキー氏。
主な作品は、YouTubeにある動画と、視覚化についてのノートがあるWebサイトです。
基本的にピアノロールと同じように、縦を音の高さ、横を時間軸として、1つの音を色付きの図形で表します。彼が作成したアニメーションのシステムは「Music Animation Machine」と呼ばれます。曲の特徴により、音の図形や色、図形の動き方が異なり、一番古いものは約17年前に動画としてYouTubeに今でも投稿され続けています。
彼は、音楽家であり、ソフトウェアエンジニアであり、発明家です。作品は彼自身がプログラムしており、音をどのような形でどのような動きをさせるべきか、その試みをWebサイトに記録しています。たとえば、以下のようなものがあり、1日では全てを読み解けない程の量があります。大半は古く、1974年頃の記録もあります。
- Renderers Music Animation Machine Renderers
- ここの一覧をみると、彼が多くの手法を試していることがわかります
- 例：ボロノイ実験 Voronoi experiments
- Techniques Music Animation Machine Techniques
- Tips
- 五線譜を色分けしてみた Music Animation Machine: History
- 楽器によって形を変えてみた Music Animation Machine: History
- 音程に色を付ける、五度圏への色の割り当て Harmonic Coloring
- ”今”聞いているものを強調するために魚眼レンズを使用する Music Animation through a Fish-eye Lens
こちらのTEDでの動画では Music Animation Machine: Stephen Malinowski at TEDxZurich - YouTube、実際の演奏と映像を同期するために、彼がハンドルのようなもので早さをコントロールしている様子が伺えます。
この作品において私が感じる特色は以下の通りです：
Music:Eyes 〜アニメーションで音楽を学ぶeラーニングプラットフォーム〜
Music:Eyesは、アニメーションで音楽を学ぶeラーニングプラットフォームです。先ほど紹介したStephen Malinowskiによる視覚化が使われており、学習者は自分でゼロから独自のアニメーションを作成できます。
このツール1つで、音楽教育としてのカリキュラムが成立しています。ただ教室でCDの音楽を聴くより、このツールの方が心に残る体験になると思います。
興味のある方はまずは、サインアップのページにあるコンテンツを体験してみてほしいです。学習者がどのようなことができるかは、YouTubeの動画を見ると一目瞭然です。
例えば、パートごとに音の色を変更したり、
音の形を、菱形や3Dの形にしたり、
背景の色を変えたり、雨や星の効果を追加したり、カメラのアングルを変えたり、
フレージングを設定して、音の塊を表現したり、
任意のタイミングで詩をつけたりと、いろいろな表現ができます。
曲の数は16個用意されていて、それぞれでアニメーションを作成して保存もできます。ワークシートによる設問もあります。
これはおまけのような気がしますが、リズムゲームもできるようになっています。
このツールを使うことで、例えばこのようなカリキュラムが思い浮かびます。ドビュッシーの月の光をアニメーションとともに聴く、パートごとにON/OFFを切り替えながら聴いてみる、ワークシートの設問に答えながらどのような曲なのかを分解してみる、自分でアニメーションを作成してみる、他の人が作成したアニメーションを見てみる…などです。
サイト上でアカウントを登録して無料で始められます。言語は英語で、スイスのチューリッヒの非営利団体によって提供されています。
Keita Onishi 氏
大西景太／映像作家 音の質感、音楽の構造をアニメーションで表現する手法でミュージックビデオ、映像インスタレーションなどを制作します。
音楽の構造が明確に映像として表現されています。私のお気に入りは、Bach's 14 Canons | Keita Onishi などのバッハの視覚化です。また、note.comで公開されているノートも参考になります。
フロクロ氏
曲が良いことに加え、ボカロと音楽の構造で実験をされている様子が窺えます。
- ことばのおばけがまどからみている／重音テト - YouTube
- 同時に韻を踏んでいます
- ただ選択があった／重音テト - YouTube
- コードの選択を映像としても楽しめます
- Sound of Elements - YouTube
- 字画で音を表しています
YouTubeのピアノ演奏動画でよくみるもの
YouTubeのピアノ演奏動画でよくみるピアノロールは、以下のツールなどで生成できます。"MIDI Visualizer"などのキーワードで検索すると、他にもたくさん見つかります。
- SeeMusic
- Synthesia
- kosua20/MIDIVisualizer: A small MIDI visualizer tool, using OpenGL
- Concert Creator
- AIで手の動きを生成するツール、現在は新規利用をストップしている模様
手元が光っているのは、”Piano LED Visualizer” というもののようです。細長いバーを鍵盤に設置し、MIDIから特定の位置を光らせているように見えます。
- YouTube Piano LED Visualizer
- Piano LED Shop
- うーん、気軽に試すには高い
- Raspberry PiでDIYする方も onlaj/Piano-LED-Visualizer
Unityで作ってみたもの
一つ目：Music Animation Machine と演奏の合体
冒頭のMusic Animation Machineを自分で実装してみようと、Unityで作った動画です。オブジェクトは楽譜のデータであるMusicXMLから生成し、タイミングの同期は演奏のデータであるMIDIを使用しました。
MIDIの音とMusicXMLの音のマッピング方法は、単純に音の高さが一致するものを順番に探すというものです。なので、間違えて演奏すると成り立ちません。
ホログラムな見た目にしたのは、コンサートにおいてもこんな風に演奏を見られたらいいなーという願望からでした。
動画の合成については、動画もオブジェクトもオーディオもUnity上でせーので再生して録画しました。泥臭い方法です。
二つ目：3DCGのみ
Music:Eyesに触発されて、実際の演奏の様子は省いて、音楽の構造だけを動画に表そう思って作成した動画です。
この水族館という曲は、右手が8連符、左手が6連符という特徴があるので、それを形で表現しました。それにプラスして、水族館の魚や泡やきらきらした光を組み合わせました。ただ、このときは演奏を洗練させる余裕がなくて、音はMIDIをただ再生しただけの聴くに耐えないものになってしまったのが悔やむところです。この動画を作って、3DCGのスキルが欲しいなと感じました。
三つ目：ピアノロールを斜めのアングルで
斜めの動画でもピアノロールを表示してみたい、ということで作ったものです。先日、別の記事としてまとめました：Unityを使ってピアノロールと演奏動画を合成する方法 - miso_soup3 Blog
