月 の 上

今週土日は東京Node学園祭!!なんとDJパーティ付きだぞ!!

今週末の 11/25(土), 26(日) は東京Node学園祭ですね!
皆さんチケットは買われましたか?

nodefest.jp







……えっ? まだ!?







Node.jsでの仮想通貨実装について聞けるのに!?!?



AlibabaでのNode.js利用事例も聞けるのに!? ?!



JSによる量子コンピューティングの話も聞けるのに!??!?



体にチップを埋め込んだハッカーも来るのに!?!?!



他にも豪華スピーカーによるトークが2日間聴き放題だというのに!!?!??!!?!??!





……そしてそしてなんと!!今回は………





Web技術によるライブ演奏やDJ・ライブコーディングがあるというのに!!!!!????!??






という訳で、今回のNode学園祭では、11/25(土)の夜にちょっと変わったパーティをやります。

場所は五反田のfreee株式会社さん。
昼間の会場からちょっと離れてるけど、貸切バスで移動します。



チケットまだの方は是非!!こちらからご購入ください〜〜🙏🙏🙏

11/25のチケット

11/26のチケット

薬指で思い出す

f:id:amagitakayosi:20171111221027j:plain

7月にプロポーズをして、11/3に婚姻届を提出した。
「婚約指輪はいらない」と言うので、二人で大阪の店に行き、結婚指輪のオーダーメイドを依頼した。


先日、本製作前の仮リングが届いた。
仮リングを着けた状態で一週間ほど生活してみて、サイズやデザインについて気になる事があれば修正し、本製作へと進む。

指を通してみると、少し大きすぎたようだ。
付け根の部分では2mm以上余裕がある。
関節で止まるのでそう簡単には外れないのだけど、不安定だし、他の指や荷物に干渉することになる。


そうして、日常のあらゆる場面で、少しずつ気を遣うようになった。


階段を降りるときは右側の手すりを掴む。
ノートPCは右脇に抱える。
バスの吊革には手首を通す。


大事なものを庇うように振る舞うことで、自分に大事なものがあることを知る。


時々リングが抜けてしまいそうになると、これまで積み上げてきたものを失うような気持ちになる。
慌てて手を引き戻し、大切な思い出を掴むように、指を握りしめる。

関節のあいだで遊ぶリングを、気がつくと右の指で触っている。
その度に、自分がそれをしていることを、二人で指輪を買いに行ったことを、その人とこれからずっと生きていくことを思い出す。


本制作のリングは、少し大きいままにしておこうと思った。



例のやつ

CLIで顔文字検索してクリップボードにコピーする奴作ったヾ(๑╹◡╹)ノ"♡

f:id:amagitakayosi:20171105232758g:plain

作った (੭•̀ᴗ•̀)੭

github.com

絵文字の入力には普段 mojibar を使っている。 GitHubkaomoji で検索すると、IME用の辞書はたくさんあるけど、mojibarのようなアプリは見つからなかったので、作ってみることにした。

インストール方法

npm i -g @fand/kao

これで kao コマンドがインストールされます (๑╹◡╹๑)

使い方

  1. ターミナルで kao を入力
  2. ほしい顔文字の読みを入力したり、 キーで探す
  3. 顔文字で Enter 押す
  4. クリップボードに顔文字がコピーされる

あとは適当に利用してくれ ٩(๑`^´๑)۶

使ったnpmパッケージ

sindreプロダクトばっかやな……

thx

顔文字の辞書は tiwanari/emoticon を利用しています。 使用許可してくれてありがとうございます。

GitHub - tiwanari/emoticon: Google日本語入力の顔文字辞書∩(,,Ò‿Ó,,)∩


という訳でみんな使ってくれよな!
PullRequest待ってます ∩(,,Ò‿Ó,,)∩

Atom用VJ環境 VEDA 1.0リリース #VEDAJS #GLSL

https://user-images.githubusercontent.com/1403842/28673275-1d42b062-731d-11e7-92b0-bde5ca1f1cae.gif

これまでglsl-livecoderとして開発してきたAtomパッケージを、VEDA としてリリースしました。

glsl-livecoderは元々ライブコーディングのために開発したパッケージですが、徐々にVJソフトとしての機能も追加されて来ました。 後述するサーバーモードが実装されたことで、VJソフトとして充分な機能を備えたと判断し、新たに VEDA としてリリースすることにしました。

この記事では、改めてVEDAの機能を紹介しつつ、前回の記事からのアップデートをお知らせします。

前回の記事↓

blog.gmork.in

目次

VEDAとは

atom.io

VEDAは、GLSLによるVJ/ライブコーディングパフォーマンスを行なうためのAtomパッケージです。 編集中のGLSLを実行し、生成された映像をAtomの背景として表示します。

GLSLはOpenGL/WebGLにおけるシェーディング言語ですが、単体でアニメーションを生成したり、VJソフトで映像エフェクトをかけるのに使われたりしています。 GPUパワーを活用できるため、非常に高度な処理が行えるという特長があります。

こちらはVEDAで実際にVJパフォーマンスを行なった様子です。 2時間ぶっ続けでVJしたけどメチャクチャ楽しかった……!

www.youtube.com

blog.gmork.in

最近のアップデート

前回記事を書いた時点では、主な機能として以下の3つがありました。

  • 動画/画像のロード
  • 音声入力
  • MIDI入力

ここからは、最近追加された機能について紹介していきます。

Webカメラ対応

twitter.com

v0.5.0で追加された機能です。 Webカメラの入力を取得し、テクスチャとして利用できます。 純粋に映像として利用することもできるけど、センサーとしてテルミンみたいに使うのが個人的にはオススメ。

twitter.com

ゲームパッド対応

twitter.com

v0.6.0で追加された機能です。 PCに接続されたゲームパッドの入力を取得し、テクスチャとして利用できます。

上の動画ではNintendo SwitchのProコンを使ってます。 最近のゲーム機のパッドはBluetoothでつながるので便利。

キー入力対応

twitter.com

v0.7.0で追加された機能です。 キー入力の状態を取得し、テクスチャとして利用できます。

頂点シェーダーに対応

twitter.com

v0.8.0で追加された機能です。 フラグメントシェーダーだけではなく、頂点シェーダーを利用した表現も可能になりました。

GLSLによるシェーダーアートの世界では、フラグメントシェーダーを利用するのが一般的です。 頂点シェーダーではより高度な技術を要しますが、使いこなせばパーティクルや線による表現が可能になります。

ファイル単位で設定を切り替えられるように

ファイルの先頭にJSON形式のコメントを書くことで、ファイル毎に設定を切り替えられるようにしました。 これにより、頂点シェーダーの描画モードをファイルごとに切り替えたり、特定のファイルでだけWebカメラを有効にするといったことが可能になりました。 また、必要なファイルでのみ各機能を有効にすることで、パフォーマンスを大幅に改善できました。

コメントで設定を切り替えるというアイデアは、VDMX等のVJソフトで用いられるInteractive Shader Formatを参考にしています。 こんなニッチな世界にも偉大な先人がいるものだ……。

glslify

v0.10.0で追加された機能です。 glslifyを用い、複数のGLSLファイルをバンドルして実行できるようになりました。

glslifyは、一言でいうとGLSL版のbrowserifyのようなものです。 GLSLは元来、includeのような機能はなく、すべてのコードを1枚のファイルにベタ書きする必要があります。 glslifyを用いると、自動でファイル間の依存関係を解析して連結してくれるため、GLSLの開発が圧倒的に快適になります。

また、npmにはglslify専用のGLSLライブラリが数多く公開されているため、ライブラリを用いた高度な表現がより簡単に行えるようになりました。

packages with keyword ‘glsl’ | npm

マルチパスレンダリング

twitter.com

v0.11.0で追加された機能です。 シェーダーは通常1フレームに1度実行され、レンダリングされた画像がそのまま画面に描画されますが、レンダリング結果にさらにエフェクトをかけたい場合など、1フレームに複数回実行することがあります。 これをマルチパスレンダリングと言います。

VEDAでは、各レンダリングパスの設定を表す配列でオプションに指定することで、マルチパスレンダリングを行えるようにしました。 当然マシンパワーはより必要になりますが、これによってレンダリング結果にエフェクトをいくつも重ねがけしたりできるようになります。

頂点シェーダ―/フラグメントシェーダーを組み合わせて使えるように

twitter.com

v0.12.0で追加された機能です。 頂点シェーダーの場合はフラグメントシェーダーの、フラグメントシェーダーの場合は頂点シェーダーのファイル名を指定することで、1回のレンダリングで両シェーダーを組み合わせて使うことができます。

上の動画では、頂点シェーダーでパーティクルを生成し、各パーティクルの色をフラグメントシェーダーで調整したあと、さらにマルチパスレンダリングによって画面全体にエフェクトをかけています。

Server Mode

twitter.com

v0.13.0で追加された機能です。 オプションの server にポート番号を指定すると、localhost上にWebサーバーが立ち上がります。 ブラウザでこれを開くと、シェーダーをAtomの背景ではなく、ブラウザ上で実行することができます。 ブラウザとAtomはWebSocketで通信しており、Atomでシェーダーを書き換えて実行すると、即ブラウザに反映されます。

この機能は、VEDAをライブコーディングイベントだけではなく、普通のDJイベントで使いたいという思いから実装しました。 ソースコードが表示されるのは、プログラマーからすると魅力的ですが、普通のDJイベントでは邪魔ですからね。

そういえば、ngrokとか使ってlocalhostに外部からアクセスできるようにすれば、お客さんのPCでシェーダーを実行するとかもできるかもしれない……?

実装の工夫

MIDI入力やキー入力等に関しては、ブラウザのAPIで取得したあとGLSLに渡すためにいろいろ工夫してます。 ToKyoto.jsで発表した以下の資料で解説してるので、よかったら見てください。

speakerdeck.com

今後

今後の新機能としては、OSCプロトコルへの対応などを考えています。 他に、VJ界隈でよく使われるTouchDesignerやVDMXを触ってみて、必要な機能を調査していこうと思ってます。

また、VEDAのGLSLエンジン部分を vedajs としてnpmにリリースしたので、近々こちらの解説記事も書くつもりです。

github.com

機能のリクエストや質問は @amagitakayosi までお気軽にご連絡ください!

AtomエディターでVJしました

f:id:amagitakayosi:20170925232054p:plain

先日予告した通り、この度VJデビューしました。
VJ行為には自作のAtomパッケージ glsl-livecoder を利用しています。

これまでのあらすじ

GLSLとは、OpenGLWebGLといった3Dグラフィックスで用いられるシェーディング言語である。 シェーダーはその名の通りライティングや影の計算に用いられるが、単体でもパワフルなグラフィックス表現が可能であり、シェーダーアートという分野が存在する。 僕は今年GLSLにハマり、AtomでGLSLのライブコーディングできるパッケージを作った。 そしてこの度晴れてVJデビューすることになったのだ。

pastak生誕祭 @東京

初VJです。

動画は無音で失礼。

2時間半という長丁場なので、ライブコーディング成分は控えめに、普通にVJ素材を入れ替えつつGLSLでちょちょいとエフェクトをかける、という方針。 友人の誕生祭というフレンドリーな場であったため、途中でバグを踏んだらラッキーくらいの気持ちで臨んだ。

DJのうち一人がWindows95のアイコンをプリントしたTシャツでDJしていたので、おもむろにChromeを開いて Windows 95 で画像検索し、テスクチャとしてロードして背景に表示する、といったパフォーマンスも披露。

キャプチャ動画を見返してみると、f.luxを切り忘れて画面全体が黄色くなってしまっていたり、Atomをフルスクリーン表示するのを忘れてメニューバーが見えてしまっている……。

あんまりがっつりコードを書いたりエフェクトをかける余裕はなかったけど、初めての割に目立ったトラブルなくやり遂げる事ができて良かった!

SMTP++ @京都

わずか1週間後に2度目のVJ。こんどは2時間。

前回の準備不足を反省し、今回は担当DJのアイコンや写真をあらかじめ用意しておいた。 また、僕の前のVJがDJネームを画面いっぱいに表示してるのが良いなと思ったので、急遽SketchでDJネームを入れた画像素材を用意したりした。

f:id:amagitakayosi:20170925224907p:plain

今回はちゃんとAtomをフルスクリーンにしてたんだけど、途中ちょっと集中力が切れた時、いつものクセで Cmd + Tab を押してしまってChromeが表示されるという失態をさらしてしまった 😇

今回の会場は外国人観光客が多く、かつ何故かプログラマーの人が多くて、2回ほど「それってOpenGLでやってんの?」とか「なんて言語?GLSL?知らねえw」みたいに話しかけられて良い体験だった。よい旅を!

課題

今回のVJで、いくつかglsl-livecoderに欲しいと感じた機能がある。

まずは、映像を別ウインドウや別ディスプレイに表示する機能。 現在のglsl-livecoderではコードの背景に映像が表示される。 ライブコーディングという用途ではこれでバッチリだけど、普通のVJソフトとして使うにはコードが邪魔になるので、別ウインドウに表示する機能が必要なのだ。 別ウインドウにWebGLのキャンバスを置いたり、Fullscreen APIに対応することで実現できるだろう。 一時的にコードを隠す機能があれば尚良いけど、これは何も書かれていない新規タブを開くことで実現できる気がする。

あとは、任意のHTMLを表示できるようになったら良いなあと思った。 定番VJソフトのVDMXだと、テロップを簡単に流せる機能がある。 glsl-livecoderでもテロップを流したいけど、テロップだけのために専用の機能を作るのは筋が悪い気がする。 設定ファイルで表示したい .html ファイルを指定し、ユーザーが任意のJS/CSSを利用出来るようにするのが良さそうだ。 テロップしたかったらCSSとかmarqueeで良いしね。

あとは個人的に気をつけたいこと。

  • フルスクリーンにする
  • f.luxをオフにする
  • macをおやすみモードにして通知を防ぐ

なかなか忘れがち……MacBookProのパームレストにサインペンで書いとこうかな。。

まとめ

VJめっちゃ楽しかった!

今回は初めてだった & 時間が長かったので、普通に動画素材を使ってVJしたけど、GLSLだけで自力で映像を作るVJもやってみたい。 もっと短い時間で、テーマを決めて、レイトレーシングを使ってアニメーションをガリガリ作ってみたいなあ。

これからもガンガンやっていきたい!
VJやライブコーディングのオファーお待ちしてます!!! 🔥🔥🔥⚡⚡⚡

ToKyoto.js(Kyoto.jsの出張版)を開催しました

こんにちは! Kyoto.js主催の id:amagitakayosi です。
先日開催した ToKyoto.js のレポートをお送りします。

kyotojs.connpass.com

ToKyoto.jsはKyoto.jsの特別編として、メンバーが東京にあつまって開催したイベントです。
アウェイでの開催ということで人が集まるか心配でしたが、蓋を開けてみれば70人を超える方々にご応募いただき、当日は12人が発表を行なうなど、予想外の大盛況となりました!!🎉🎉🎉

会場は白金高輪のKaizen Platformさんのオフィスをお借りしました。
会場設営や入り口での案内など、何から何までお世話になりました、ありがとうございました!🙇🙇🙇

当日の様子はTwitterハッシュタグ #kyotojsでご覧になれます。

contents

一般発表

ToKyoto.jsのタイムテーブルは、Kyoto.jsメンバーと関東の発表者で 3 on 3 トークバトルという体で組みました。
当日は id:hiroqn が事情により欠席しましたが、なかなかマニアックな発表があつまったのではないかと思います!

「Tasks to release Extension for Edge」pastak

scrapbox.io

トップバッターは京都から参戦の id:Pasta-K です。
ブラウザ拡張をEdgeに対応しリリースするまでの道のりを紹介してくれました。
Edge向けの拡張機能はまだ64個しか存在しないそうなので、貴重な知見ですね……!

「Vue.js Extend with Compiler」kazupon

speakerdeck.com

2人目は kazupon さんです。
Vue.jsのテンプレートコンパイルの各段階をフックし、様々な拡張を行なう方法を紹介していました。
コンパイラーのフックはvue-loader等で利用されているようですが、他にも色々マジカルな事ができそうですね!

「TypeScript Transformerについてのお話」Quramy

qiita.com

3人目の発表は id:Quramy さん。
TypeScriptのASTを操作してコードをゴニョゴニョできるCustom Transformerについての発表です。
estreeとの互換性が無くて難しいという話ですが、estree周りのツールでもっとTypeScript対応が進むと良いですね……!

「APIs for VJ-ing」amagitakayosi

speakerdeck.com

4人目の発表は僕 id:amagitakayosi です。
最近はAtomでVJできるパッケージを作っているのですが、このパッケージで使っている各種ブラウザAPIを紹介しました。
9/17には実際にこれを使ってVJしたので、またレポート記事を書こうと思います!

「今、我々は、 GUI の設計について 何を考えるべきか」mizchi

speakerdeck.com

発表ラストは id:mizchi さん。
古典的なWebアプリからMVC、Fluxと、フロントエンド開発がGUI開発に近づいていく中で、設計がどう変わってきたかをまとめていました。
最近はNext.jsのようなフレームワークも増えてきたので、SSRやIsomorphicアプリの作成がめっきり簡単になったりと、時代の流れを感じますね……。

LT資料

今回のLTはなんと7人の方が参加くださり、GraphQLからWebVRまで盛りだくさんでした。
LTの順番は忘れてしまったので、順不同で紹介します。

「Data feching and caching on Apollo Client 」joe_re

speakerdeck.com

id:joe-re さんの発表は、GraphQLクライアント実装であるApollo Clientの紹介でした。
Relayとは違い、Apollo Clientは様々なフレームワークや環境から利用できるようです。
fetch, updateといった基本的な操作やページネーションの方法などを、コード例を交えて紹介していました。

「WebVR with Windows Mixed Reality」ikkou

speakerdeck.com

id:ikkou さんは、WebVRの開発方法や、WebVRでどういうことができるのかを紹介していました。
この発表はなんとVRヘッドセットを装着した状態で行われました。
WebVR APIはまだEdgeとFirefoxでしか利用できないようですが、これからの発展が楽しみです!

「IntersectionObserverはいいぞ」Leko

speakerdeck.com

id:leko さんの発表では、DOM要素が画面内にあるかどうかを取得できるIntersectionObserverについて紹介されました。
IntersectionObserverは現在、IE/Safari以外の主要ブラウザですでに利用できるようですね。
スクロールすると固定されるヘッダなど、活用出来る場所を見ない日はないので、早くpolyfillなしで使えるようになりたいものです。

Ecmascript proposal-realms」brn

speakerdeck.com

brnさんの発表はRealm proposalについての紹介です。
RealmはNode.jsのvmモジュールのように、JSのコードを安全に実行するための仕組みです。
まだあまり知られていないプロポーザルですが、必要とされる業界は多いんでしょうね〜。

「console.animate」katashin

speakerdeck.com

katashinさんの発表では、ブラウザの開発者ツールのコンソールにアニメーションを表示する方法を紹介していました。
Firefoxの開発者ツールのパフォーマンスが良いとのことですが、Firefoxの開発者ツールは他にもDOMの重なりを3Dで見れたり、Web Audio APIのノードの図が見れたりと謎に豪華ですよね……😅

「What I did to improve performance score on Lighthouse」yayoc

speakerdeck.com

yayocさんの発表は、Google製のパフォーマンス測定ツールLighthouseを利用しつつ、アプリケーションのパフォーマンスを改善した話でした。
HTTP/2採用やCode Splitting, IntersectionObserverを利用した遅延ロードなど、色々な施策についてものすごい早足で紹介されていました。
細かい話もじっくり聞いてみたい気がします!

「Nekogata Drum Sequencer written in Scala.js」nkgt_chkonk

speakerdeck.com

LT最後は id:nkgt_chkonk さんでした。
Scala.jsにまつわる様々な困難に直面しながらもScalaを貫き通す姿勢は圧巻でした……。
Scala.jsを試してみてハマった時は、今回の資料をみてみると参考になるのではないでしょうか。

感想 & まとめ

平日の夜開催だったため、懇親会でしっかり会話できるか心配していましたが、Kaizenさんのご厚意により23:30頃までたっぷり議論できました。
(ありがとうございました! > id:axross id:lacolaco id:jmblog

2次会でもまだまだ盛り上がり、なぜかAM 2:20からLTが行われたりしました。
さすが眠らない街東京……。

今回は、普段のKyoto.jsとはまた違った、色々なコミュニティの話が聞けて最高でした!
ふだん勉強会などに来ないという人も何人かいらしたようで、とても嬉しかったです。

参加者の皆さま、発表者の皆さま、ありがとうございました!!
京都観光の際には、是非Kyoto.jsにいらしてください!

もしまた東京で開催することがあれば……よろしくお願いします🙏🙏

今月VJを2回やります

最近GLSLにハマっておりますが、この度ちゃんとした場所でVJすることになりました。

  • 9/17 pastak生誕祭 @東京
  • 9/22 SMTP++ @京都

僕はどちらもGLSLのライブコーディングによるVJパフォーマンスを行ないます。
2時間 x 2回。スパルタ……!!!

pastak生誕祭 @東京

twitter.com

id:Pasta-K の誕生日を祝う」という名目で、各地のWebエンジニアや界隈の人々が東京に集まってDJ/VJパフォーマンスを行ないます(og:image最悪だな……)。

  • 日時: 2017/09/17 15:00 - 21:00
  • 場所: 渋谷 WHITE SPACE LAB

近隣の皆さまは是非ふらっとお立ち寄りください!

SMTP++ @京都

smtppp.club

京都のぼんやり系パーティです。 京都在住のDJやVJやエンジニアっぽい人が集まって少し盛り上がる会をやります。

  • 日時: 2017/09/22 20:00 - 24:00
  • 場所: 木屋町 cafe la siesta

関西の皆さまは是非いらしてください!