月 の 上

Kyoto.js 13を開催します

f:id:amagitakayosi:20170726143849p:plain

今週の日曜 7/30 、Kyoto.js 13を開催します。
特設サイトも作った。テーマは煩悩。

Kyoto.jsは京都のJavaScriptコミュニティです。
たまに勉強会を開催したり、Slackで交流したりしています。

京都以外にも、大阪や神戸、東京から参加するメンバーもいたりします。 お近くの方は是非チェックしてください!

JavaScriptコミュニティといいつつ、テーマはだいたい何でもOKです!
今回のイベントでは、JS以外にもGLSLやOCamlに関する話があるみたいですね。

まだまだ人数に空きがあるので、ぜひ参加してください!!

f:id:amagitakayosi:20170726143403p:plain

参加登録はこちら

TidalCyclesでライブコーディングに挑戦しよう⚡

とにかくこの動画を見てくれ!

たった20~30行くらいのプログラムで音楽がつくれる!
それがTidalCycles!

この記事ではTidalCyclesについてザッと紹介し、さっきの動画で演奏している内容について解説します。
僕自身もTidalCyclesに入門したばかりなので、TidalCycles仲間が増えたらいいなって思ってます😸。

対象読者

  • 音楽が好きな人
  • DAWで作曲するのに飽きた人
  • Sonic PiやSuperColliderは触ったことあるけど……という人
  • 好奇心旺盛なプログラマー

目次

TidalCyclesとは

TidalCyclesは、音楽を自動で作曲・演奏するためのシステムです。
プレイヤーは演奏内容を表すプログラムをリアルタイムに作成し、次々とシンセサイザーの演奏を変更していきます。
普通の音楽演奏に例えるなら、楽譜をリアルタイムで書いていく感じでしょうか。

このように、リアルタイムにプログラミングすることを ライブコーディング と呼びます。

他のライブコーディング用システムとの違い

ライブコーディング用システムは他にもいろいろ存在しています。
他のシステムと比較したとき、TIdalCyclesは何がどうちがうのでしょうか?

個人的にしばらく使ってみた結果、、以下のようなメリット・デメリットがあると感じました。

  • メリット
    • 非常に短いコードで音楽を作れる
    • サンプラーを簡単に使える
  • デメリット
    • インストールが難しい

メリット: 非常に短いコードで音楽を作れる

ここでいう「コード」とは和音のことではなく、プレイヤーが書くプログラムのことです。
プレイヤーは、プログラミング用のテキストエディターを利用して、コードを書くことで演奏内容を指定します。

例えば、キックの4つ打ちを Sonic Pi で表現しようとすると、以下のようなコードになります。

live_loop :kick do
  sample :bd_haus
  sleep 1
end

ところが、TidalCyclesだと、たった1行で表現できてしまいます!

d1 $ sound "bd bd bd bd"

見た目にも直感的な感じがしますね。

サンプラーを簡単に使える

TidalCyclesは、デフォルトではSuperDIrtというサンプラーを利用するようになっています。
このサンプラーには200種類以上のサンプルが含まれています。
ベーシックなTR-808/909の音色や、ガバキックなども入ってたりする。

f:id:amagitakayosi:20170629223855p:plain

TR-808のキックだけでもたくさんある。

サンプルを使うには、 d1 $ sound "808bd" とするだけ!
自作のサンプルを使うときも、サンプルのフォルダに新しいフォルダを追加して、 bd808bd の代わりにフォルダ名を書くだけで良いです。便利!

インストールが難しい

TidalCyclesはまだ歴史が浅く、日本語情報もほとんどないので、環境構築がちょっと大変かもしれないです。
ProcessingやopenFrameworksで有名なyoppa氏が、TidalCyclesのインストール方法を解説されているので、そちらをご覧ください。

第9回 Live Coding入門 – TidalCycelsのセットアップと基本 | yoppa org

動画の解説

ここでは、記事冒頭で紹介した動画のうち、僕が作ったほうについて解説していきたいと思います。

YoutubeでTidalCyclesの解説動画を見てる内に、ブレイクビーツが以外に簡単に作れる事がわかり、ランダムに音を加工したりアニソンをサンプリングするだけでBreadkcoreが作れるのでは?と思って試してみたのでした。

この動画で使ったコードは以下の通りです。
(解説の都合で一部省略しました)

-- breakcore.tidal
cps (140 / 120)

d1 $ sound (samples "amen*8" (irand 12))
    # crush 4.5
    # cut 1
    # up (rand * 10)

d2
    $ s (samples "anime" (irand 22))
    # cut 8
    # up 2
    # gain 0.9
    # crush 3

テンポを設定

まず、1行目で曲のテンポを設定しています。

普通のDAWソフトだとBPMを指定しますが、TidalCyclesでは CPS という単位で指定します。
ちょっと奇妙な感じがしますが、これはTidalCyclesが拍単位 (beat) ではなく、サイクル (cycle) 単位で実行されるからです。
このため、5拍子や7拍子の曲を作ったり、ポリリズムの曲を簡単に実現できるというメリットがあります。

アーメンブレイク

次の段落では、いわゆるブレイクビーツを演奏しています。
TidalCyclesの基本的な文法は次のようになります。

f:id:amagitakayosi:20170629231221p:plain

トラック番号を指定して、パターンを指定して、エフェクトをかける……という順番ですね。

d1 $ sound (samples "amen*8" (irand 12))  -- "amen" サンプルをランダムに8回再生
    # crush 4.5  -- ビットクラッシャー
    # cut 1 -- サンプルの長さを調整
    # up (rand * 10)  -- サンプルのピッチをランダムに変更

今回は自分で用意した音声ファイルを利用しましたが、TidalCyclesにはデフォルトでいくつかドラムループ音源が入っているので、そちらを利用するのも良いでしょう。

カーソルをこの段落に移動し、 ⌘ + return (Windowsの場合は Ctrl + Enter)を押すことでプログラムを実行しています。
動画内では段落が光るところがありますが、そのタイミングでプログラムが実行されています。

アニソンをサンプリングして再生

最後の段落でも、やってることは先程の段落とだいたい同じです。
ただ、サンプルの再生スピードがあまりに速いと困るので、サンプルの再生回数と長さを調整しています。

たったこれだけのプログラムで、ちょっとしたブレイクコアができてしまいました……!!

おわりに

この記事をみて興味を持っていただけたら、是非TidalCyclesを触ってみてください!
いい演奏ができたら、TwitterYoutubeに演奏動画を公開してみてくださいね ⚡⚡

28歳になった

無事に28歳を迎えることができた。ロックミュージシャンに生まれなくてよかった……
最近ブログあんまり書けてないので、まとめて近況報告しよかな。

!!!!! ほしいものリスト http://amzn.asia/haHW5vX !!!!!

引っ越した

2月のことだけど、下京区のマンションから、鴨川の近くの一戸建てに引っ越した。
木造で築50年なので、床が凹んでいたり冬は異常に寒かったりするけど、広いし部屋の感じが好みだったのでほぼ即決した。
生まれて初めての一軒家で、家具を買ったりテーブルを作ったりして楽しんでいる。

新居、1帖ほどの広さだけど庭がある。
庭には前の住人が置いていった蹲居セットが設置されており、電源を入れると京都人になりきることができる。

会社からはちょっとだけ遠くなったが、自転車でいろんな所に行ったり、同居人の友達を呼んだりできるようになった。
気に入っているので長く住むかもしれない。

椎間板、痛めてた

3月にハーフマラソンに参加した所、親指の筋に痛みを感じるようになった。

大学時代からずっと左足の感覚が麻痺してて、でも診断が下されることで自分の病気が確定してしまうのが怖くて病院に行くのを避けてたんだけど、流石に日常生活に支障が出たのと、いよいよマズいんじゃないかと焦りを感じた事もあり、会社近くの整形外科で診て貰うことにした。

整形外科は会社の同僚も複数人世話になっている町医者で、なるほど午前9時にもかかわらず満員であり、受付から診察室に通されるまでに90分待たされたが、診察自体は5分で終わってしまった。 症状を告げるなり、「それは腰のL5の神経だね〜」と即答され、椎間板がヘタっていること、ヘルニアとは違うこと、運動する時にはコルセットを着けないといけないこと、指圧マッサージは絶対にダメということを立て続けに説明された。 指圧マッサージ、その翌週くらいに初体験しようかな〜って思ってたので残念。

帰る前にリハビリ室に呼ばれ、腰の牽引をしたり、低周波治療器だとか腰の体操を行なった。 昔部活で膝をやった時、お年寄りが並んでじっと牽引されているのを見て不思議に思っていたけど、まさか自分がこんな若さで牽引されることになるとは思わなかった。

コルセット、採寸したあと「じゃあ来週3万円もってきて」って言われて仰天した。 保険の制度上、コルセットの代金は先に自腹で払って、あとから還付申請?をする必要があるらしい。 今後のことを考えると絶対に必要だから仕方ないけど、金欠だったので給料日まで待ってもらったりした。

バランスボールを導入

整形外科で勧められたのでバランスボールを導入した。

会社ではアーロンチェアやバロンチェアが支給されるので、どちらかを使っている人が多い。
僕は高級椅子よりも堅い椅子のほうが好みだったので、安いスタッキングチェアをずっと使っていたんだけど、もしかしたら腰には良くなかったのかもしれない。

購入したのはこの商品。 どの商品も似たり寄ったりなので、一番レビュー多そうなやつにした。
バランスボール、なんでどれもテカテカして青とかピンクとかなんだ、もうちょっとシンプルなやつはないのか、無印あたりがシュッとしたやつ出してくれないかな……

1月くらい使った感想はこんな感じ。

  • メリット
    • 柔らかい
    • 音楽に合わせてポヨポヨしてるとコーディングが捗る
  • デメリット
    • 空気を入れる音がうるさい
    • ポヨポヨしてるの、同僚がイライラしてないか心配
    • 尻が蒸れる

空気を入れる時、リバーブのかかった不思議な音がする。

f:id:amagitakayosi:20170624121855p:plain

腰に良いかどうかはまだわからない(左足は相変わらず痺れている)。

GLSL/TidalCycles入門してる

amagitakayosi.hatenablog.com

この前記事を書いたとおり、最近ずっとGLSLを書いている。
この後も更に9個のアニメーションを追加した。

fand.github.io

段々ハマる時間が長くなってペースが落ちてきている……。
レイマーチングは面白いけど処理が重く、ライブコーディングには向かないので、もっとライブコーディング向けの表現も練習していかないといけない。

手応えがあったやつはShadertoyにも投稿したりしている。
Shadertoy、誰にも見られないかと思ったけど、意外とコメント付くし、便利ライブラリを教えてくれたりして感動している。

Tシャツも作って自分で着ている。
みんな買ってくれ!!!

suzuri.jp

最近はTidalCyclesにも興味がでてきた。
TidalCyclesは音楽を演奏するためのライブコーディング環境。
コードはHaskellで書くため、他のライブコーディング環境と比べると圧倒的に短いコードで演奏でき、魔術感があって楽しい。

DJ/VJイベントにライブコーディング枠で参加したい!!!

Kyoto.js 13やります

connpass.com

7/30(日) にやります、皆様の募集をお待ちしております!!!!!!!!!!!!!!1


この一年は人生が大きく変わったけど、今年はこれからも変化がつづいていきそう。

毎日GLSLでアニメーションを作ってる

最近GLSLやWebGLの世界に入門して、毎日こんなアニメーションを作っている。

4月末、東京に出張する機会があり、ついでに何か面白いイベントや展示がないか探していると、チャネルというイベントを見つけた。
以前から気になっていたBRDG/VRDG方面のイベントらしい。
会場は六本木のSuperdeluxe。出張先のオフィスからも近いので、少し早退して行ってみる事にした。

そこではハードな電子音に合わせて、GLSLやHaskellのライブコーディングによるVJが行われていた。

そのあまりのクオリティの高さに衝撃を受け、GWごろから少しずつ、ほぼ毎日GLSLを書いている。

GLSLとは

OpenGL Shading Languageの略。
OpenGLWebGLなどの3Dグラフィックス環境において、オブジェクトの影や色を計算するために作られた言語だ。
GPUのパワーを簡単に引き出すことができ、複雑なアニメーションをリアルタイムに実現できる。

元々は影を計算したりテクスチャを貼ったりするための物だったけど、GPUパワーに目をつけた人たちがGLSL単体でアート活動をし始めて、現在では独特なコミュニティを形成している。
GLSL SandboxShadertoy には、異常な努力と才能によって書かれたアニメーションが溢れている。

GLSLはいわゆるメガデモ界隈でも愛用されている。
日本のデモパーティTokyo Demo Festでは、GLSLだけで作品を作るコンテストがあったりする。

tokyodemofest.jp

僕の活動

GLSLを書いたり、GLSLからGIFアニメを生成するツールを作ったりしているので見てくれ!!

fand/webgl-study

fand.github.io

これまでに作ったアニメーションとその制作メモをGitHub Pagesにまとめている。

GLSLを動作させる環境は、Three.jsを利用して自分で実装した。
Shadertoy等を利用することも考えたが、いずれGLSLだけでなくWebGL全般について学んでいきたいと思っているので、GLSL環境から自分で構築することにした。

技術的には、glslifyとWebpackを組み合わせている。
glslifyはGLSLのコードをbrowserifyのようにバンドルするためのツール。
Webpack用のloaderも提供されていたり、glslifyを前提としたライブラリがnpmで公開されていたりする。

glslifyと関連ライブラリのお陰で、うろ覚えでも気軽にレイマーチング入門できた。 これまでに覚えたテーマとしてはこんな感じ。

レイマーチング

Web Audio APIを使った、FFTと連動するアニメーション

シェルピンスキーのギャスケット

ビルド済みのGLSLファイルは、このレポジトリの docs/shaders/ 以下に置いてある。

github.com

fand/glsl2img

amagitakayosi.hatenablog.com

GLSLのコードからPNG画像やGIFアニメを生成するツール。 webgl-studyの開発フローに組み込んで、サムネイル画像を簡単に作れるようにしている。

技術的には、headless-glを利用してNode.js上でWebGLを動作させ、pngjsやgifencoderで画像を出力している。

glslifyにPullReqを出した (WIP)

Atomにはlinter-glslというパッケージがあり、GLSLの構文エラーを教えてくれる。
しかし、glslifyには対応していないので、glslifyを利用したコードでは本質的ではないエラーが大量に表示されてしまう。

これを解決するには、linter-glslをglslifyに対応させるだけでなく、glslifyをsourcemapsに対応させる必要がある。
単純にglslifyを通すだけでは、linter-glslはビルド済みのコードに対してlintを実行することになるので、エラーの行数がズレてしまうからだ。

というわけで、glslifyのコードを読んで、sourcemapsに対応するPullReqを作ってみたんだけど、今のところ反応がない……

[WIP]Sourcemaps support by fand · Pull Request #6 · stackgl/glslify-bundle · GitHub

学習リソース

以下のWebサイトや書籍を読んで、色々学んでいる。
GLSLはあまり情報が豊富ではないが、幸いにもいくつかWeb書籍などが存在する。

wgld.org

wgld.org

WebGLに関する情報が大量にまとまっているサイト。
GLSLカテゴリでは、レイマーチングの基本が丁寧に解説されている。

The Book of Shaders

thebookofshaders.com

GLSLについて、WebGLの事を何一つ知らなくても学べるWeb書籍。
文中にあるGLSLコードは編集可能になっていて、結果をリアルタイムに確認しながら学習できるようになっている。

初めてのThree.js

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ

オライリーのThree.jsの本。
日本語でサッと把握できて良いかな〜という事で購入したけど、まだあんまりThree.jsを活用できてない。
MMDの解説もあるので、そのうち初音ミクとか表示してなんか出来たら楽しそうだなあ。

Moleman 2

メガデモ文化を追ったドキュメンタリー映画
日本語字幕つきでYouTubeに公開されている。

www.youtube.com

いろんなすごいデモやすごい人達が紹介されていて、やる気が高まる。
僕はこれ見てコモドール64ほしくなった。ヤフオクで16万……。


ここまで読んでくれたあなたは、きっと今頃GLSLを書きたくて仕方ないはず。
みんなGLSLやろうぜ、そしてライブコーディングしたりデモ作ったりしよう!

桜2017

ことしも桜の時期ですね v(^-^)v

蹴上

このあとユーフォ2期見たらOPに蹴上インクライン出てきて興奮した。

穴場

写真は暗いけど、綺麗だし静かでよい所だった。
穴場なので場所は内緒です。

上賀茂神社の西

中学生がブラバンやってて和む。 鴨川、本当に金管楽器の練習してる学生がおり、これまでそういった人々とは無縁な子供時代を送ってきた僕は「これが川か……」と感激する。

デルタ

ジョギング中に撮ったやつ。 この時、調子に乗って斜面に乗り出してたらiPhone落として液晶割れた……。

岡崎

通勤路

みなさん京都に引っ越しましょう

シェーダーからGIFアニメを生成するツール作った

f:id:amagitakayosi:20170509074747g:plain

github.com

シェーダーは、本来は3Dプログラムで物体に影をつけたり、視覚的なエフェクトを与えるための仕組みだ。
しかし、シェーダーだけで複雑なグラフィックを表現する事もでき、GLSL SandboxShadertoyには大量の作品が投稿されている。

今回は、フラグメントシェーダーのファイルからGIFアニメを生成するツールを作成した。
これを使うと、冒頭のGIF動画のようなものが作ることができる。
また、npmパッケージになっているので、フロントエンド開発のフローに沿ってシェーダーのサムネイルを作成できる。

実装はgistに転がってたスクリプトを参考にしている。

offscreen rendering with three.js and headless-gl, in coffee-script · GitHub

使い方

npm install -g glsl2img すると、 glsl2png コマンドと glsl2gif コマンドがインストールされる。

glsl2png

フラグメントシェーダのファイルを読みこんで、PNG画像を生成する。

$ glsl2png foo.frag             # out.pngを出力
$ glsl2png foo.frag -o foo.png  # foo.pngを出力
$ glsl2png foo.frag -s 640x360  # 画像サイズを指定

出力結果はこんな感じ。

https://cloud.githubusercontent.com/assets/1403842/25777407/30317b7c-3317-11e7-8dd1-b293f6a6091f.png

uniform変数は、デフォルトで time, resolution を受け取れる。
time-t オプションで指定できる。
それ以外のuniform変数を指定する場合は、 -u オプションでThree.jsのuniformの形式のJSONを受け取れる。

# どっちも同じ結果になる
$ glsl2png foo.frag -t 10
$ glsl2png foo.frag -u '{"time": { "type": "f", "value": 10.0 } }'

glsl2gif

フラグメントシェーダのファイルを読みこんで、GIFアニメを生成する。
デフォルトでは、15fps / 長さ1秒のアニメを作成する。
fpsと長さは -r -l オプションで指定できる。

$ glsl2gif foo.frag             # out.gifを出力
$ glsl2gif foo.frag -o foo.gif  # foo.gifを出力
$ glsl2gif foo.frag -s 640x360  # 画像サイズを指定
$ glsl2gif foo.frag -r 30       # 30fps
$ glsl2gif foo.frag -l 10       # 10秒

結果はこんな感じ

f:id:amagitakayosi:20170509075058g:plain

この記事の冒頭のGIFは、このシェーダーに -r 30 -l 2 を指定して作った。

shader sample · GitHub

expo.ioを使ってリアルタイムにReact Nativeアプリを開発する

f:id:amagitakayosi:20170417212408j:plain

1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。
何がどう便利かっていうと、

  • ケーブルなしで、実機の動作確認ができる
  • もちろんコード変更も即座に反映される
  • 開発版アプリの配布がワンタッチでできる
  • 便利なReactコンポーネントもついてくる

youtu.be

expo.io とは

React Nativeでのアプリ開発を支援するサービスです。
公式サイトはこちら。めっちゃ素朴……

expo.io

expoは create-react-native-app XDE expo client といったツールを公開しています。

  • create-react-native-app: アプリの雛形を作るCLIツール
  • XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる
  • expo client: 開発中のアプリを実機にインストールするためのクライアント

今回はこれらを使ってReact Nativアプリケーションを開発する方法を紹介します。

事前準備

インストールするものは多いけど、設定はほぼ不要です!

開発フロー

基本的な開発の流れはこんな感じ。

  1. create-react-native-app でアプリの雛形を作成
  2. npm start して、実機で確認しつつ開発
  3. リリースビルドを作ってストアに公開

create-react-native-app

create-react-app みたいなやつです。
基本的な操作は create-react-app と同じ。
facebook公式みたいな名前なのはちょっと邪悪な感じする……;;)

$ create-react-native-app my-app とすると、 my-app ディレクトリにアプリの雛形が作成されます。
雛形はかなりシンプルになっており、 .xcodeproj ファイルすら存在しません。
expoでは、アプリケーションの配布・ビルドを独自のしくみで行なうため、これだけで充分なようです。

f:id:amagitakayosi:20170417222536p:plain

実機で確認しつつ開発

npm start すると、react-nativeのパッケージャーにより、JSのビルドが始まります。
同時に、ターミナルに巨大なQRコードが出現します。かっこいい。

f:id:amagitakayosi:20170417223418p:plain

手元のデバイスにインストールした expo client でこのQRコードを読み取ると、開発中のアプリケーションがexpo clientにインストールされます。
これによって、ケーブルなしでも実機で動作確認しつつ開発を進めることができます。

ReactでふつうにWeb開発してるような気分。

開発中のアプリを配布

XDE上にある「Publish」ボタンを押すと、開発中のアプリを配布するためのリンクが生成されます。
これにより、アプリを社内リリースしたり、友達にだけリリースしたりといったことができます。

f:id:amagitakayosi:20170417224311p:plain

ほぼ雛形の状態でPublishを押したのがこちら。
インストールにはexpo clientが必要です。

my-app — Expo

リリースビルド

Building Standalone Apps | Expo v15.0.0 documentation

expo clientなしで、普通にApp Storeから配布するためには、exp というツールでビルドする必要があります。
今回はリリースまでやってないけど、iOS版のリリースビルドを作成する手順はこんな感じみたいです。

  1. $ npm i -g exp && exp login
  2. exp.json を作成
  3. exp start
  4. 別のターミナルで exp build:ios を実行

便利コンポーネントがついてくる

create-react-native-app で作ったアプリには、最初から expo がインストールされている。
わかりやすいところだと、画像を選択するImagePickerや、地図を表示する MapViewOpenGLの描画を行なうGLViewなどがある。

感想

前回React Native入門した時は全然ビルドできなくてハマってたんだけど、今回はexpoのおかげでめっちゃ気軽に開発を開始できた。
FAQにも「いまのところ有料にする予定はない」って書いてあるし、良いんじゃないですかね。