Quantcast
Channel: マルシテイア
Viewing all 186 articles
Browse latest View live
↧

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

October 17, 2017, 7:00 pm
$
0
0

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までお気軽にご連絡ください！

↧
Search

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

November 5, 2017, 4:30 pm
$
0
0

f:id:amagitakayosi:20171105232758g:plain

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

github.com

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

インストール方法

npm i -g @fand/kao

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

使い方

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

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

使ったnpmパッケージ

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

thx

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

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

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

↧
↧

薬指で思い出す

November 19, 2017, 4:00 pm
$
0
0

f:id:amagitakayosi:20171111221027j:plain

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


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

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


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


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


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


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

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


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


例のやつ

↧

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

November 20, 2017, 2:04 am
$
0
0

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

nodefest.jp







……えっ？まだ！？







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



AlibabaでのNode.js利用事例も聞けるのに！？ ？！



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



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



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





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





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





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

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



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

11/25のチケット

11/26のチケット

↧

12月の活動: Algorave Tokyo 2017, SMTP++, GLSLスクール

November 27, 2017, 4:37 am
$
0
0

こんにちは id:amagitakayosiです。最近は東京行く機会がめっちゃ多い……
12月はVJを2件、講師を1件やります。

VJ

SMTP++ #3

SMTP++ screenshotSMTP++ #3 （少し盛り上がるときめきパーティー） 2017.12.01 京都木屋町 cafe la siesta

  • 日時: 2017/12/01 20:00 - 25:30
  • 場所: 京都 木屋町 cafe la siesta

毎度おなじみ京都のぼんやりパーティです。
京都在住のDJやVJやエンジニアっぽい人が集まります。

関西の方は来てみてください！

Algorave Tokyo

Algorave screenshotAlgorave Tokyo 2017

  • 日時: 2017/12/22 19:00 - 23:30
  • 場所: 東京 神楽坂 KGR(n)

アルゴリズムによるレイヴミュージックイベント Algorave に出演します。
プログラミングやライブコーディングによる演奏、VJを楽しめます。

本当に豪華なメンバーですでに緊張してます……！是非！

講師

GLSLシェーダスクール2017

webgl.souhonzan.org

doxasさん主催のGLSLスクールで、一日だけ講師をやります。
GLSLによるVJやライブコーディングについて話します。

僕自身も経験長くはないですが、頑張って資料作ります。よろしく！

↧
↧

インターネット溶かすボタンできた

December 13, 2017, 2:00 am
$
0
0

twitter.com

f:id:amagitakayosi:20171213170638p:plain

インストールはこちらから。

chrome.google.com

Post Internetは、任意のWebサイトによるポストエフェクトをかけるChrome拡張です。
ボタンをクリックすると、現在のページのスクリーンショットを取得し、エフェクトをかけて表示します。

エフェクトはGLSLで書かれています。
ボタンを右クリックして設定画面を開くと、GLSLを編集してエフェクトを変更できます。

f:id:amagitakayosi:20171213175441p:plain

実装にはVEDA.jsを使っています。

f:id:amagitakayosi:20171213184753g:plain

f:id:amagitakayosi:20171213183647g:plain

f:id:amagitakayosi:20171213183757g:plain

はじめにFlashがあった。
中学では、PCの得意な同級生はPalaFlaやSuzukaでFlashを作っていて、それはしょうもない内容だったけど、彼らの操作するマウスとキーボードがインターネットを光らせていた、そんな実感があった。


大学では情報系の学部に進んだ。
インターネットをもっと知りたかった。

初めて感動したのは、JavaScriptで画面を光らせたときだった。
僕はやっとインターネットを光らせる、そのスイッチに触れたような、そんな気がした。


大人になり、Web開発を学ぶにつれて、世界は全く変わっていった。
インターネットには高クオリティなコンテンツが溢れ、無秩序な光は淘汰されてしまった。
ユーザーは正しくフィルタリングされたタイムラインをただ眺める。
僕は有益なソフトウェアばかり身につけるようになった。
FlashbackもYOU ARE AN IDIOTも忘れてしまった。


そんな中、GLSLと出会った。
衝撃だった。
4kbのコード片が世界を作る。
キーを叩く指が、スクリーンに複雑な模様を描く。

久しぶりに魔法を見た気がした。


気がついたら今年はGLSLばかりやっていた。
ライブコーディングの世界を知った。
もっと便利にGLSLを書くためのAtom拡張を作った。
みんなに魔法を見せたかった。
目に映るインターネットのすべてを光らせたかった。

そのためにまず、ブラウザを光らせるChrome拡張を作ることにした。


インターネットが退屈だったら、あなたが光らせれば良い。

この記事は はてなエンジニア Advent Calendar 2017の13日目の記事です。 前日は id:Windymeltの Common Lisp開発序ノ口 〜プロジェクトの作成と実行〜でした。

↧

ShadertoyのSound ShaderをThree.jsで実装してみた

December 15, 2017, 8:31 am
$
0
0

ヤッターGLSLで音が鳴るぞ！！

codepen.io

この記事はWebGL Advent Calendar 2017の15日目の記事です。

こんにちは、 id:amagitakayosiです！ AtomでGLSLをライブコーディングできるパッケージを作ったりしています。

今日はShadertoyのコードを読んで、Three.jsで真似してみる、ということをやってみました。

経緯

ShadertoyにはGLSLで音声を出力できる機能があります。（以下 Sound Shaderと呼びます） デモ用の効果音を生成したり、以下のようにガッチリ曲を作ったりできます。

qiita.com

しかし、その仕組みがどのようになってるか、どこにも解説されていない！ というわけで、Shadertoyのコードを読みつつ、ちゃんと理解するためにThree.jsで実装してみました。

解説

ShadertoyのSound Shaderは、以下の2つのメソッドを読むと仕組みが分かります。

  • EffectPass.prototype.Create_Sound
  • EffectPass.prototype.Paint_Sound

Create_Sound

(https://www.shadertoy.com/js/effect.jsの243行目〜)

ここでは、Sound Shaderを実行するための準備を行っています。

Sound Shaderではメイン関数を vec2 mainSoundとして書きます。 xが左、yが右チャンネルです。

Create_Soundでは、ユーザーが書いたSound Shaderに、main関数を含む文字列を結合します。 main関数を読むと、ピクセルごとに異なる引数でmainSoundを呼び出していることがわかります。

レンダリングするテクスチャのサイズは 512x512であることがわかります。 音声のサンプルレートは 44100なので、SoundShaderは1回のレンダリングで約6秒の音声データを作成できるようですね。 (512 * 512 / 44100 ≒ 5.94)

また、 this.mPlayTime = 60*3;とある通り、Sound Shaderが生成できる音声には180秒までの制限があるようです。

Paint_Sound

(https://www.shadertoy.com/js/effect.jsの1900行目〜)

Paint_Soundは、シェーダーの変更後はじめてPaintが実行されたとき呼ばれるようになっています。 つまり、Paint_Soundは1回の実行で180秒分の音声データをすべて作成します。

uniform変数をガチャガチャ設定してる部分はどうでもいいので読み飛ばすと、forループがネストした箇所が見つかります（2053行目〜）。 ここが音声生成のコア部分です。

やってることは単純です。 外側のループは、180秒分の音声データが生成し終わるまでレンダリングを繰り返す、というループです。 内側のループでは、レンダリング結果の各ピクセルの値を音声データに変換し、AudioBufferに詰める、ということをやっています。 この時、 bufL[off+i] = -1.0 + 2.0*(this.mData[4*i+0]+256.0*this.mData[4*i+1])/65535.0;とある通り、一つのサンプルを2バイトで表現しています。 mainSoundが返すのはvec2でしたが、Create_Soundで追加されたmain関数の中身をよく見てみると、 以下のように上位ビットと下位ビットに分けて出力していることがわかります。

  vec2 vl = mod(v,256.0)/255.0;
  vec2 vh = floor(v/256.0)/255.0;
  gl_FragColor = vec4(vl.x,vh.x,vl.y,vh.y);

これはおそらく、GLSLの世界では音声はfloatとして表現されるけれど、出力すると1バイト (0 ~ 255) に丸められてしまい、音声として使い物にならないという問題があったのだと思います。 そのため、1サンプルをr+g or b+aの2バイトを使って表現することで、より精度の高い音声出力を実現したのでしょう。

ループが終わったら、AudioBufferSourceNodeをstartして、音声を再生しています。

感想

Three.jsでもシュッと実装できて楽しかった。 あとShadertoyのコード意外と読みやすい。

やり方はわかったので、VEDAにも機能追加しようと思います。 音声をループ再生したり、音声の長さを指定できたりすると、ライブコーディングでの音楽パフォーマンスが楽しくなりそうですね。

↧

ライブコーディングの祭典「Algorave Tokyo」に出演しました

December 30, 2017, 4:45 pm
$
0
0

12/22(金)、神楽坂で開催されたAlgorave TokyoにVJとして出演しました。
楽しかった〜

Algoraveとは

Algorave Tokyo 2017

一言でいうと、プログラミングによる音楽や映像パフォーマンスを行うイベントです。
Max/MSPのような音楽プログラミング環境や、SuperCollider等のライブコーディングシステムを用い、パフォーマンスを行います。
中には独自のシステムを開発している人もいます。

これにより

ミュージシャンは自分たちの音楽をアルゴリズムとして作曲し、そのまま生演奏することができる

ということです。

Algoraveは2012年頃に始まり、イギリス、ドイツ、カナダ、スペインといった世界中の都市で開催されてきました。
日本でもこれまでに4回開催されていたようですね。

今回のイベント

今回のAlgorave Tokyoは、東京神楽坂のKGR(n)で開催されました。
21組ものアーティストが集まり、2トラック並列で進行しました。

僕は当初出演する予定は無かったんですが、はてブで「行きたすぎる！！！」とコメントしたところ、なんと運営の方からお誘いをいただき、出演できることになりました。 メチャクチャ豪華なメンバーだったので緊張しました……！！

僕のパフォーマンスについて

僕はRenick Bellの演奏にあわせてVJしました。
VJに利用したコードはこちらで公開しています。

GitHub - fand/algorave2017: VJ set for Algorave Tokyo 2017

僕は自作のVEDAというソフトを用いてパフォーマンスしました。
VEDAはGLSLでライブコーディングを行うためのAtomパッケージです。
上のレポジトリをAtomで開きVEDAを実行すると、以下のような映像を出力できます。

f:id:amagitakayosi:20171231094821p:plain

今回は、マルチパスレンダリングで図形の描画とエフェクト追加を行なっています。
1パス目では頂点シェーダーで図形を描画し、2パス目のフラグメントシェーダーでエフェクトを追加するという流れです。
本番では、Renickの演奏に合わせて頂点の数を切り替えたり、音声入力に反応してレイアウトを切り替えたりしていました。
パフォーマンス後半では、レイトレーシングで回転するオブジェクトを描画し、表面に図形を貼り付けたりもしました。

あと、動画素材を使ってディスプレイスメントマップのような事もしていました。
事前に練習の段階では良い感じだったんですが、本番のスクリーンだとあんまりわかりませんでしたね……

普段のVJでは、VJ用の動画素材を切り替えつつフラグメントシェーダをガリガリ書いてエフェクトかけるという流れなんですが、今回はAlgoraveということで、ほぼ完全にシェーダーだけで表現できるように心がけました。
頂点シェーダによる表現は、先月の8時間耐久VJでも使ってみてたんですが、今回でスタイルとして形になってきた手応えがありました。
次のパフォーマンスでは、また新しい表現方法を考えないとなあ〜。

感想

これまでにいろんな所でお世話になった人が沢山出演していて、直接会話できる機会ができて嬉しかったです。
僕がライブコーディングを始めたのはkzrさんのKODELIFEによるパフォーマンスを見たからだし、Sascacciさんには東京Node学園祭でもお世話になったし、グリッチはucnv/aviglitchを写経して理解したし、Fuyamaさんには今年の夏に京都でライブを見て影響受けたし、田所先生にはopenFrameworksやTidalCyclesの入門記事でお世話になったし……！

今回のVJは全員自分でVJシステムを組んでた（！）事もあり、パフォーマンスを見ててすごく参考になった。
谷口さんは、今年の春の個展を見に行ったこともあり、どんな感じになるか楽しみだったけど、いつも通り日用品と自身の3DモデルがUnity上で動き回ってて、異様な空間になっていた……
GRAINnoirさんのVJソフトは、対話式にコマンドを実行していろいろ映像を生成する感じで、めちゃくちゃギークっぽかった。

Hexlerさんは、サブ会場でNintendo 64コントローラーを使ってVJしていて、これがめちゃくちゃクオリティが高かった。
KODELIFE上で動画素材+シェーダーでパフォーマンスしていたんだけど、エフェクトとコントローラーの使い方次第であんなにいい感じになるのか……！

お誘い頂き本当にありがとうございました！！

今後も機会があったらガンガン出演していきたい。
なんなら関西でもAlgoraveできたらいいな。

↧
Search

USB-CをMagSafeにする奴買った、良い

January 4, 2018, 8:59 pm
$
0
0

買ったのはコレ。某Sn*pn*torのパチもんっぽいやつ。

f:id:amagitakayosi:20180105125725p:plain

Baseus Type C To Type C Magnetic Elbow Adapter For Macbook Nexus 5X 6P OnePlus 2 3 Fast Charging Magnet USB C Cable Adapter-in Adapters from Cellphones & Telecommunications on Aliexpress.com | Alibaba Group

去年の暮に会社のMacBookProを買い替えて、MagSafeコネクタが使えなくなって困っていた。 USB-CのコネクタをMagSafeっぽくするSn*pn*torという製品があるのだけど、id:moznionの感想を見て買うのを躊躇していた。

moznion.hatenablog.com

ところが、ある日プロモツイートかなんかでAliexpressのURLが流れてきた。 たった11ドルなら良いか〜と言うことで買ってみた。

感想

  • pros
    • 磁力強い
    • 出っ張りが小さい
  • cons
    • 一方向からしか接続できない
    • 紛失しやすい！

磁力

磁力は旧MacBookProのMagSafeより強い。 机の上で動かすのはもちろん、膝の上に乗せて作業しても何ら支障がない。

出っ張りが小さい

f:id:amagitakayosi:20180105135738p:plain

2mmくらい？ ぶつけて壊れることは多分ないでしょ。

一方向からしか接続できない

商品写真でわかる通り、5本の端子が W字状に並んでいる。 そのため、ポートに上下の概念が生まれ、USB-Cの利点が潰れてしまっている。

ちょっと残念だけど、実用上で困ることはない。 僕は常に左上のUSB-Cポートに後ろから接続するようにしている。

f:id:amagitakayosi:20180105135657p:plain

間違った方向に接続しようとすると磁石で弾かれるので、「接続してたつもりが方向逆で充電できてなかった」という事態にはならなくて済む。

紛失しやすい

コレは困る…… 勉強会での発表やVJパフォーマンス時、もしもの充電切れを防ぐためにこのアダプタを外すけど、其の度に「アレ！？どこやったっけ！！」となりメッチャ焦る。

ポート側は空きポートに挿しておけば良いけど、コネクタ側はなくさないように注意しよう……

というわけでオススメです。 一ヶ月使ったけど壊れる様子はない。

Amazonでは売ってない模様。 Aliexpressのアフィ付け方わからんけどドンドン買ってくれ。

Baseus Type C To Type C Magnetic Elbow Adapter For Macbook Nexus 5X 6P OnePlus 2 3 Fast Charging Magnet USB C Cable Adapter-in Adapters from Cellphones & Telecommunications on Aliexpress.com | Alibaba Group

↧
↧

削ぎ落として余裕を持つ

January 9, 2018, 8:30 pm
$
0
0

年始になると、毎回やりたいことリスト作るんだけど、やりたいこと多すぎるんだよな。

できることは少ない。
かといって、何ができて何ができないかは、その時になってみないとわからない。

去年のテーマは「切り替えをがんばる」だった。
いろいろと変化の大きい年だったから、その中できちんと生き抜く、みたいな所を目標にしていた。

今年のテーマは「削ぎ落とす」だ。
やりたいこと、やらなきゃいけないことを見極めて、不要なものは削る。
必要な時に動けるマージンを確保する。

自分に付いた余分な属性を振り落として、本当にできることを形にする。

2017年振り返り

結婚

2016年に交際を始めた相手と結婚した。 昔は自分が結婚するとは思ってなかったけど、なるようになるもんだな。

毎日一緒に料理したり旅行したり、楽しく生活してます。

VJ活動

VJというより、GLSL活動なんだけど。

「フロントエンドのスキルを増やすぞ」という理由でWebGL学習を始めたら、GLSLの世界にどっぷりにハマってしまった。

VJツール VEDAを開発し、DJイベントに出演したり、Node学園祭のパーティを開催したり、GLSLスクールの講師をやったりした。

去年の目標で「趣味開発を増やす」というのがあったんだけど、今度は見事に趣味活動に全振りになったなあ……。

去年の記事のブクマ数ランキング

累計1668ブクマでした。 GLSLの記事ばっかり……

タイトル
1AtomでVJできるパッケージを作った
2インターネット溶かすボタンできた
3expo.ioを使ってリアルタイムにReact Nativeアプリを開発する
4毎日GLSLでアニメーションを作ってる
5http://blog.gmork.in/entry/kao=CLIで顔文字検索してクリップボードにコピーする奴作ったヾ(๑╹◡╹)ﾉ"♡
6Atom用VJ環境 VEDA 1.0リリース
7Scala入門としてCLIツールを作り、Scala.js, React, ScalaCSSでサイトを作った
8スクリーンショット/GIFアニメ作成技術が集まるスレ
9AtomエディターでVJしました
10Markdown→はてな記法変換ツール『md2hatena』を作った

generated by 年間ブックマークランキングジェネレーター

2018年は？

今年の具体的な目標は立てません。
やりたいことはたくさんあるけど、本当にやりたいことをやりたい時にやる。

技術的には、UnityとかTouchDesignerとか、パフォーマンス/インスタレーション系の技術を新たに身に着けようと思ってる。
余裕があれば、TidalCycles経由でHaskellを覚えたりするかもしれない……けど、まあ別にできないならできないでいいや。

変に焦って勉強して時間なくなるより、日々に余裕をもって、インプットを増やしたいな。


今週のお題「2018年の抱負」

↧

VEDA 2.4: GLSLで音楽を演奏できるようになったぞ！！！

January 10, 2018, 9:09 pm
$
0
0

こんにちは id:amagitakayosiです。
Atom用GLSL実行環境 VEDA を開発しています。

github.com

昨日リリースしたVEDAの最新版で、GLSLで音楽を演奏できるようになりました！

VEDAでは、この機能を Sound Shaderと呼んでいます。
mainSound関数に時刻から音声を合成する処理を書くことで、GPU上で音声合成できてしまいます！

Sound Shaderの使い方

  • mainSound()関数を定義
  • alt-enterで実行
  • alt-.で停止

普通のフラグメントシェーダーや頂点シェーダーを ctrl-enterで実行すると、映像と音声を同時にGLSLで生成できます。

Shadertoyとの違い

Sound Shader機能は、ShadertoyのSoundバッファと同様の機能です。
基本的にShadertoyのコードがそのまま動きますが、以下のような違いがあります。

長さを変更できる

Shadertoyでは、生成する音声の長さは180秒固定でした。
VEDAでは、実行したいGLSLファイルの先頭に /*{ soundLength: 10 }*/等と指定することで、生成する音声の長さを変更できます。

ループ再生される

Shadertoyでは、180秒を過ぎたら音声が停止してしまいます。
VEDAでは、音声は soundLengthの長さでループするようになっています。

ループ再生しつつ徐々に演奏内容を変更できるため、よりライブコーディングに向いた仕様となっています。
音声を停止したい時は alt-.を入力してください。

音声ファイルをロードできる

mp3及びwav形式のファイルをテクスチャとして読み込み、GLSL上で利用できます。

loadSoundにテクスチャ名と時刻を渡すと、音声ファイルのその時刻の値が取得できます。 時刻の値を変更することで、再生速度を変更したりもできます。

実装解説

先月のWebGLアドベントカレンダーの記事で、ShadertoyのSound Shaderの実装について解説しました。

blog.gmork.in

VEDAでは、レンダリングのタイミング等は少々異なりますが、基本的にはShadertoyと同じ処理をしています。
大まかな流れは以下の通りです。

  1. 必要なサンプル数を計算する
  2. 音声バッファを作成し、再生を開始する
  3. 必要なサンプルが集まるまで、以下を繰り返す

1. 必要なサンプル数を計算

soundLength から、必要なサンプル数を計算します。
soundLength = 10, sampleRate = 48000の時、必要なサンプルは 480000 個となります。

2. 音声バッファを作成し、再生

次に、生成したデータを格納するための音声バッファを作成します。

Web Audio APIの AudioBufferSourceNodeでは、Uint8Arrayで音声を生成できます。
今回は Uint8Array(480000)することになります。

AudioBufferSourceNodeでは、再生開始後にバッファにデータを詰める事もできます。
そのため、レンダリング前に再生を開始することで、ユーザーの操作から再生までのタイムラグを抑えています。

3. レンダリング

続いて、GPUで音声のレンダリングを開始します。
一度のレンダリングでは必要なサンプルが集まらないので、繰り返しレンダリングする必要があります。

VEDAでは、アニメーションのラグを回避するため、一度にレンダリングするサイズを小さくしています。
具体的には 32x64としているので、音声をすべて生成するには 234 (= 480000 / (32 * 64)) 回のレンダリングが必要です。

レンダリングでは、各ピクセルごとに mainSound(time)を実行し、各時刻に対応する音声サンプルを計算します。
timeの値は、ピクセルの位置とレンダリング回数から求めます。 例えば、(x,y) = (10, 20) のピクセルの3回目のレンダリングでは、

10 + (20 * 32) + (32 * 64 * 3) = 6794

より、6794個目のサンプルを計算することになります。

レンダリング結果はRGBAで出力されるので、計4byteとなります。
mainSoundの結果はステレオであり、floatの値が2つ生成されますが、画像に出力する際に1byteずつ出力してしまうと精度が悪くなってしまいます。
そのため、次のようにして、各チャンネルの値を2byteに分割して保存するようにします。

vec2 v = mainSound(t);
vec2 h = floor(v/256.0)/255.0;
vec2 l = mod(v,256.0)/255.0;
gl_FragColor = vec4(h.x, l.x, h.y, l.y);

画像を生成したら、これを再度JSで音声に変換してあげます。

outputDataL[i] = (pixels[i * 4 + 0] * 256 + pixels[i * 4 + 1]) / 65535 * 2 - 1;
outputDataR[i] = (pixels[i * 4 + 2] * 256 + pixels[i * 4 + 3]) / 65535 * 2 - 1;

これを繰り返すことで、VEDAで alt-enterを押したら即再生を開始し、アニメーションを続けつつ音声を生成することができるのです。

音声ファイルをロードする実装

音声ファイルは、JS側で画像に変更してテクスチャとしてGPUにロードしています。
この時、画像から音声に変換するのとちょうど逆の処理をしてあげれば良いのです。

// 音声データを格納するUint8Arrayを作成const array = new Uint8Array(_constants.SAMPLE_WIDTH * _constants.SAMPLE_HEIGHT * 4);

// 音声を画像に変換for (let i = 0; i < c0.length; i++) {const off = i * 4;

  // -1〜1 の値を 0〜65536 に変換const l = c0[i] * 32768 + 32768;
  const r = c1[i] * 32768 + 32768;

  // 4bytesに分割
  array[off] = l / 256;
  array[off + 1] = l % 256;
  array[off + 2] = r / 256;
  array[off + 3] = r % 256;
}// Uint8Arrayからテクスチャを作成const texture = new THREE.DataTexture(array, _constants.SAMPLE_WIDTH, _constants.SAMPLE_HEIGHT, THREE.RGBAFormat);

簡単ですね！

現在、音声テクスチャのサイズは 1280x720固定にしています。
その為、ロードできる音声の長さは19.2秒までとなっています (サンプルレートが48000の場合)。

AtomがDAWになる日も近い……！！！

ところで

VEDAはもうすぐ100 stars！！
いますぐ fand/vedaを Star してください！！！

↧

VEDAのサイトを作った

February 14, 2018, 6:25 am
$
0
0

VEDA.glのスクリーンショット

veda.gl

VEDAはVJやGLSLのライブコーディングを行うソフトウェアだ。
Atomのパッケージとして実装されており、ユーザーは編集したGLSLコードをリアルタイムに実行して表示できる。

このブログでもこれまでに何度か紹介している。

blog.gmork.in

VEDAは去年の夏から開発を始めて、ドキュメントは全てREADME.mdに書いてきたんだけど、機能が増えてくるにつれてREADMEが読みにくくなってきた。
また、GLSLのフレームワークということで、実際に動作するコードをユーザーに見せたいという気持ちがでてきた。

というわけで作ったのが今回のWebサイト。

veda.gl

veda.glは、VEDAプロジェクト全体のドキュメントになっている。
VEDAのインストール方法や使い方、機能紹介に加え、FAQやコントリビュート方法をまとめている。

PCでは画面右上の 日本語ボタンを押すと日本語版ドキュメントが表示される。

f:id:amagitakayosi:20180214232125g:plain

機能紹介のページでは、ブラウザの音声入力とかキーボード入力を使った実例が見れます。

f:id:amagitakayosi:20180214234108g:plainf:id:amagitakayosi:20180214234118g:plain

ドキュメントに貢献するには

ドキュメントは現在、英語と日本語で書いてます。
足りないドキュメントを追加したり、他の言語に翻訳していただける方がいたら、是非ご協力をおねがいしたいです🙇

veda.glはNext.js + VEDA.jsで開発して、GitHub Pagesにホストしてる。
レポジトリはこちら。

GitHub - fand/veda.gl: VEDA Website

ドキュメントはMarkdownで書かれています。
Next.jsでMarkdownを読み込んだり多言語対応してたりするため、ちょっと複雑なしくみになってしまった。

例えば、トップページの中国語版を追加する場合、まず pages/index.cn.mdを追加し、次にpages/index.jsを編集してロードしてあげるようにします。

// https://github.com/fand/veda.gl/blob/master/pages/index.jsimport cn from './index.cn.md';

const article = {  
  en: parse(en),  
  ja: parse(ja),
  cn: parse(cn),
};

この辺のコード変な感じになってるのはわかってる……😅

まあ変なところは直してくつもりなので、とりあえずドキュメントみてわかんない所あったら気軽にissue立てていただけると助かります！！

https://github.com/fand/veda.gl/issues

もしVEDAプロジェクトに興味をもってくれたら、 CONTRIBUTINGをみてissue立てるなりPRくれたらメッチャ嬉しいです！！
他にも、わからないことはTwitterとかで聞いてくれたらすぐ答えます🤘

twitter.com

よろしく〜〜

↧

『君はGPUの歓声を聴いたことがあるか』という発表をした

March 26, 2018, 1:00 am
$
0
0

speakerdeck.com

WebGL/GLSLで音声処理したり、音声ファイルをGPUにロードしたりといった内容です。
これらの技術を駆使することで、GLSLだけで以下のような演奏が可能になります。

この記事は Kyoto.js 14 での発表の解説です。
当日の様子は ハッシュタグ #kyotojsでご覧になれます。

また、他の発表資料はconnpassページにあるので、そちらも合わせてどうぞ。

Kyoto.js 14 - 資料一覧 - connpass

Sound Shaderとは？

GLSLはOpenGLやWebGLで陰影やテクスチャを計算するための言語です。
しかし、出力された画像を音声に変換することで、無理やりGPU上で音声処理を行なうことができます。
この技術を僕は Sound Shader と呼んでいます。

Sound Shaderは、主にメガデモやShadertoy界隈で用いられてきた技術です。
先日のメガデモ勉強会でも発表があったり、Qiitaに記事が上がってたりします。

このブログでも、過去に何度か紹介してきました。

今回の発表について

今回の発表では、Sound Shaderの原理から、WebGLでの実装方法を紹介しました。
また、音声ファイルを読み込んで利用する方法についても解説しています。

発表で使ったデモは以下のページで公開しています。
（実行にはVEDAのインストールが必要です）

blog.gmork.in

たとえば、 basic.fragをAtomで開き、VEDAで alt-enterを押すと、次のような音が再生されます。

www.youtube.com

GLSLのフラグメントシェーダーでは、基本的に1ピクセルにつき1回main関数が実行されます。
今回の実装では、1ピクセルを音声の1サンプルに割り当てて音声処理をしています。
つまり、 sin(440.0 * time * PI2)と書くだけで、440Hzのサイン波を鳴らす事ができるのです。

また、 samples.fragを実行することで、冒頭の動画のような音楽が再生されます。

音声ファイルのロードでは、音声ファイルを一度画像に変換し、GPU上で処理した後、出力された画像をもう一度音声に変換する、という手順を踏んでいます。

質疑応答

音声ファイルを画像に変換したのってどういう見た目か見れますか？

  • 今は見れないけど、それを利用して映像も生成したら面白そうですね

VEDA起動しながら仕事してますか？

  • たまにやってます
  • 他にも、昼休みにTidalCyclesで音楽つくって、午後垂れ流しながら仕事したりする

というわけで、Atomユーザーの皆様は是非お手元でお試しください。 質問は @amagitakayosiまでお気軽にどうぞ！

そのうち京都でもGLSLのワークショップとかやりたいなあ……。

↧
↧

4/28(土)、GLSLライブコーディングのワークショップを開催します

April 22, 2018, 9:06 pm
$
0
0

f:id:amagitakayosi:20180423123311p:plain

こんにちはアマギです。
VEDAというライブコーディングVJシステムを開発しています。

この度、TOPLAP JP主催で、GLSLライブコーディングのワークショップを開催することになりました！

お申込みはこちら: http://toplap.jp/post/2018-04-28

TOPLAPは世界中に支部があるライブコーディングコミュニティです。 今回は日本支部のmoxusさんからお誘いがあり、京都でワークショップを行うことになりました。 moxusさんはAlgorave Tokyoに出演したり、Tokyo SuperColliderを運営されていたりと、東京のライブコーディングコミュニティで活躍されている方です。

http://tokyosupercollider.blogspot.jp/

ワークショップの内容

GLSLはWebGL等の3DCGで利用するシェーダー用の言語です。 本来は3DCGのライティング計算のために作られましたが、現在ではGLSL単体で映像を生成したり、VJソフトで映像エフェクトとして利用されたりと、幅広い分野で使われています。

今回のワークショップでは、ライブコーディングに特化したGLSL表現を学びます。 おおまかな内容としては以下を予定しています:

  • GLSLの基礎
  • フラグメントシェーダーの基礎
  • 画像/動画にエフェクトをかける
  • 頂点シェーダーと組み合わせる
  • 音声入力やMIDI入力を利用した表現

初学者でも学べるように心がけます。 時間に余裕があれば実習とか、GLSLで音楽を生成する話もできれば良いな。

VEDAについて

veda.gl

講義では、拙作のライブコーディングシステム VEDA を使います。 Atomのパッケージとして動作し、スムーズなGLSLのコーディングを可能にします。

VEDAは以下のような特長があります:

こちらは実際にVJをした時の様子です。 GLSLでリアルタイムにエフェクトを書いて実行しています。

www.youtube.com

他にも、3Dモデルを利用するとこのような表現も可能です。

www.youtube.com

このブログでは、これまでもVEDAについて紹介してきましたので、興味のある方はご覧ください。

というわけで

GLSLやライブコーディングに興味のある方はぜひご参加ください！！ また、ワークショップという形式ではありますが、関西のクリエイティブコーディング系の方々で集まって交流できたら良いなーと思っています。

よろしくお願いします！！

お申込みはこちら: http://toplap.jp/post/2018-04-28

↧

VEDA最近のアップデート: 3Dモデル読み込み、Floatテクスチャ、全画面モード

April 24, 2018, 8:16 pm
$
0
0

こんにちはアマギです。
WebGL/GLSLでVJシステム VEDA を開発しています。

VEDAを使うと、Atomでこんなパフォーマンスが出来るようになります↓

www.youtube.com

最近ブログに書いてなかったけど、いろいろとおもしろ機能を追加してました。
この記事では最近のアップデート内容を紹介します。

過去のアップデート内容については以下の記事をご覧ください。

目次

新機能

3Dモデル読み込み

3Dモデルを読み込んでシェーダーを当てられるようになりました。 モデルを読み込むと、頂点シェーダー内で attribute vec3 positionや attribute vec3 normalが利用可能になります。

モデルを読み込むには、設定コメントに MODELプロパティを追加して下さい:

/*{
    PASSES: [{
        MODEL: {
            PATH: "./foo/bar.obj"
        }
    }]
}*/

現在サポートしているファイル形式は次のとおりです:

  • OBJ
  • JSON (Three.js用に生成されたファイル)

OBJファイルの場合、別途 MTLファイルを指定することで、テクスチャをまとめて読み込むことができます。 また、JSONファイルの場合、テクスチャがjpgなどで指定されていれば自動で読み込まれます。（ddsなどChromiumで表示できない形式は対応していません。）

具体的な利用方法はサンプルファイルをご覧ください。

今後、glTFやfbx等への対応も検討しています。 ゆくゆくはアニメーションにも対応したい……！

3Dモデルのファイル形式に詳しい皆様、PullRequestお待ちしております😹

Floatテクスチャ

これまでのVEDAでは、レンダリング先のバッファはRGBA/UNSIGNED_BYTE形式で固定でした。 つまり、RGBA各チャンネルに8bitずつしか使えないので、パーティクルの計算などを行なうには精度が足り無いという問題がありました。

今回のアップデートにより、設定コメントの PASSES内に FLOAT: trueと書くことで、RGBA各チャンネルの情報を32bitの浮動小数点数として保存できるようになりました。 これにより、いわゆるGPGPU1的な計算ができるようになります。

Floatテクスチャについて詳しく知りたい方は、 wgld.org の記事をご覧ください。

wgld.org | WebGL: 浮動小数点数テクスチャ |

全画面モード

ctrl-escapeを入力すると、シェーダーの描画結果だけをAtomのウインドウいっぱいに表示できるようになりました。 キーボード入力を利用したシェーダーを表示する際や、スクリーンショットを撮影するのに便利です〜。

今後の開発について

今後は、ひとまず以下に挙げる機能の開発を進めていこうと思っています。

  • 3Dモデルの対応ファイル形式を追加
  • 任意のuniform変数を追加/設定できるGUI

↑のどっちかが落ち着いたら v3.0 リリースかな。

WebGL2.0に対応するためにVEDAのコア部分をPure WebGLで書き直そうとしたりもしてたけど、最近Three.jsのWebGL2.0開発が盛り上がってきてるっぽいので、そっちを待つことにしました。

今後のアップデートもお楽しみに！
機能の要望や質問などあれば、TwitterやGitHubで気軽にお声がけください！

【宣伝】GLSLワークショップやります

今週の土曜（2018-04-28）、京都でGLSLライブコーディングのワークショップを開催します！ GLSLやライブコーディングに興味のある方！ぜひご参加ください！！

お申込みはこちら: http://toplap.jp/post/2018-04-28

  1. 最終的な計算結果は画面に描画されるだけなので、世間一般に言うGPGPUとしては使えないが、WebGL界隈ではCompute Shaderを用いた表現をGPGPUと呼ぶことが多い↩

↧
Search

GLSLライブコーディングについて講義しました

April 30, 2018, 1:47 am
$
0
0

去る2018/04/28(土)、GLSLライブコーディングのワークショップを開催しました。

資料について

speakerdeck.com

サンプルファイル: GitHub - fand/veda-toplapjp02

ワークショップは、こちらの資料を参照しつつ、サンプルファイルを手元で実行して学習する、というスタイルで進行しました。 サンプルファイルには、あらかじめ様々な処理がコメントアウトされた状態になっています。 これらのコメントを一つずつ外して実行することで、講義内容を段階的に学べるようになっています。

講義はまず、GLSLとは何か？から始まり、フラグメントシェーダーによるシェーダーアート1の基礎、動画エフェクトとしてのGLSLの利用法を学びます。 続いて、頂点シェーダーを利用したシェーダーアートについて紹介し、最後に音声入力を利用したエフェクトについて学びました。 GLSLを書いたことがない人でも、ライブコーディングパフォーマンスが出来るようになる、というのを目標にしています。

動画素材はbeepleから、3Dモデルはturbosquid等からライセンスフリーのものを拝借しました🙏

もっと詳しく学びたい方へ

GLSLを触るのが初めてという方は、The Book of Shadersを読みましょう。 こちらはWebサイト上でコードを編集しつつ実行して学べる教材になっています。

The Book of Shaders

より高度な表現を学びたい方は、wgld.orgのGLSLに関する記事を読むと良いです。 シェーダーアートで頻繁に使われるレイマーチングという手法を学べます。

wgld.org | GLSL |

また、つい最近東京でUnity向けシェーダーアートについての発表がありました。 こちらはGLSLではなくHLSLとなりますが、基本的な考え方はGLSLでも通用しますので、参考にしてください。

setchi.hatenablog.com

講師として心がけたこと

今回のワークショップは、moxusさんとDMして「1時間だと厳しいので2時間で行きましょう」と決定したのですが、資料を作り始めると（あれ……？2時間で教えるのメッチャ厳しくね……？）という事に段々気がついてきた……。 GLSLは奥が深く幅の広い技術ですが、今回はライブコーディングに的を絞り、本来の3DCGにおける役割や、OpenGL/WebGLでの利用法の解説は完全に省きました。 また、なるべく時間を節約するため、受講者にはあらかじめVEDAのインストールをお願いしておきました。

（ハンズオン等では、最初の環境構築に時間を取られることが多いので、自己紹介の前に資料URLやサンプルファイルを共有しておくと便利です）

僕は昨年末にも GLSLスクールの講師を行った事があるのですが、その時とはかなり状況が異なるので、資料はほぼ一から作り直すことになりました。 GLSLスクールでは、受講者はGLSLの基本文法については把握しているという前提だったので、僕はライブコーディング文化や、VJパフォーマンスを行うためのTipsを教えることに集中できたのです。

今回は、講義のはじめに「わからなくても気にしない」というスローガンを掲げました。 GLSLはC言語ライクな文法と言いつつ、いろいろと独特な言語なので、初歩でつまりがちです。 文法について一々説明しておくと時間が足りませんし、あとでゆっくり資料を参照すれば済む話です。 せっかくワークショップに参加していただいているので、言語についての知識よりも、どのようにパフォーマンスを行うか、体験で掴んでもらうということを目標にしました。

（メチャクチャ雑に言うと、「GLSLには様々な関数があり、様々なことができる」ということを体験してもらえれば良い）

なんかこれデジャヴュ感あったので、去年のReactハンズオンの資料を見直してみたら、だいたい同じこと言ってた。

資料作成、意外と手間取ってしまって、当日の朝7時まで徹夜で作ってたので、後半は口調がフランクになったり解説が雑になってるかもしれない……

僕がGLSLライブコーディングを知って1年が経った

僕がGLSLライブコーディングの世界に興味を持ったのは丁度一年前。 2017/04/29に六本木でチャネル#16を観たことがきっかけでした。

blog.gmork.in

それから一年、ライブコーディングの世界に惹かれて、GLSLの学習やVEDAの開発を続けてきました。 たった一年ですが、色々なイベントに出演させていただいたり、ワークショップの講師として声をかけていただくことがあり、幸甚の至りです。

今回のワークショップは、初心者にGLSLの世界を広めるだけでなく、僕自身にとってもライブコーディング文化について知る良い機会となりました。 参加者の皆様、主催の moxus 様、ありがとうございました！

  1. 僕はGLSLなどのシェーダーを用いたアート作品やパフォーマンスを「シェーダーアート」と呼んでいます。参考: GLSLによるシェーダーアートことはじめ↩

↧

GWでHaskell入門した

May 8, 2018, 9:56 pm
$
0
0

日記です。 GWの自由研究でHaskell入門してた。

動機

一つに、同僚の影響がある。 弊社の社員は皆さまざまな言語を書く。 たまに「これはHaskellでいうと○○で〜〜」みたいな会話がされたりして、いつかはやらねばな〜と思っていた。 今年入ってきた後輩もHaskellとかOcamlをバリバリやっていたらしい。 今のチームではScalaを使っているので、関数型言語の概念とか考え方を一度ちゃんと学んだ方が有利に違いない。 入社から丸3年が経過した今、せめて同僚たちの会話をなんとなく理解できるようになりたい。

もう一つの理由は、ライブコーディング界隈でHaskellがよく使われていることだ。 現在ライブコーディング音楽で最も盛り上がっているTidalCyclesや、AltGLSLのHylogenなど、なぜかライブコーディング界隈ではHaskellが好まれている。 簡潔な文法や抽象的な操作が得意なことから、ガリガリ書いて実行していくライブコーディングに向いているのかもしれないが、まあ理由はどうでもいい。

TidalCyclesを使いこなしたりパッチを当てたりするには必須だし、Haskellを書けるようにならんとな〜と考えていた。

やったこと

すごいHaskellたのしく学ぼう!

すごいHaskellたのしく学ぼう!

まず、大学生の時買って積んでた「すごいHaskellたのしく学ぼう」（通称「すごいH本」or 「LYAHFGG」）をガッと読んだ。 Kindleには5年前に書いたメモとか残ってて便利。 仕事で1年間Scalaを書いたことで、学生時代よりもスッと理解できた感じがする。

すごいH本を読んで、色々な概念が登場することはわかったけど、まだ動くものを書ける気がしなかった。 というわけで、 Haskell チュートリアルとかでググって出てきた以下の教材をやってみることにした。

48時間でSchemeを書こう - Wikibooks

「48時間でSchemeを書こう」(以下「WYAS48」)は、簡単なSchemeの実行環境を作りつつ、Haskellの書き方を身につける、という教材。 そもそもSchemeの文法がわからない（大学でちょろっとやった）くらいなので、Gaucheで動作を確かめながら写経していった。

レポジトリはこちら。 「IOプリミティブの作成」の章までやってある。

github.com

ただ写経するだけじゃつまらないので、Stackでレポジトリを構成し、Hspecでテストを書いた。

Stackとは

StackはNode.jsでいうnpm、Scalaでいうsbtのようなもの。 ghcのバージョンを指定したりできるので、どちらかというとsbtに近い。 stack buildでビルド、stack testでテストが走る。

Haskellのパッケージマネージャーは、昔はCabalというものが使われていた。 HaskellのライブラリはHackageに公開され、 cabalコマンドでインストールできた。 ただし、Cabalは依存ライブラリを管理するファイルが独自フォーマットだったり、ライブラリの相性が悪いときに依存関係を管理するのが大変だったりした、らしい。

StackはCabalをラップして使いやすくしてくれる。 （正確には、StackはHpackというCabalラッパーを利用している）

StackにはStackageという仕組みがあって、これを使うとライブラリの相性を考える必要がなくなる。

Stackage は Stable Hackage の略で、どんな組み合わせでも依存関係でエラーが起きないように調整されたパッケージの集合 (スナップショット) を提供しています。

頭いいなー。 Stackageのバージョンは、stack.yamlで resolver: lts-9.21のように指定できる。

環境構築

まずstackをインストール。

$ brew uninstall --force cabal-install ghc # 紛らわしいので事前に消しておく
$ brew install stack

次にAtomにHaskell関連のパッケージを入れる。 Atom-Haskellというプロジェクトがあって、Haskell用の便利パッケージがいくつも公開されている。 （コード補完、Linter、型チェック、コード変換、ドキュメント検索など）

atom-haskellパッケージを入れると、関連パッケージをまとめてインストールしてくれる。

atom-haskell.github.io

続いて、パッケージが依存しているライブラリをstackでインストールする。

$ stack install stylish-haskell
$ stack --resolver lts-9 install ghc-mod

ghc-modは最新のStackageだと動かないので (ghc 8.2に対応していない)、 --resolver lts-9を指定する必要がある。

最初、↑のWebサイトの存在に気付かず、自力でghc-modとかをインストールした所エラーが出まくってめっちゃ詰まった……

WYAS48学習メモ

  • ghc-modハマった
    • stack.yamlで resolver: lts-9.21としないとビルド通らない
    • dist/ があるとghc-modが動かないので消しとく
  • Control.Monad.Error 使ってるとこに Use Control.Monad.Except instead とメッセージ出るけど、こういうことっぽい
  • Hlintの声に従ってコードを整理していくと、どんどんコードの密度が高くなる……
    • liftM List $ load filenameが List <$> load filenameになる
  • maybe関数の引数の順序難しい
    • maybe (失敗した場合に返す値) (成功した場合に値を適用させる関数) (Maybeモナド)の順番
    • Scalaの foldに似てる？
  • モナド変換子、頭爆発するかと思った
  • doブロックで別のモナドを使うと怒られる
  • IORef使うと何故かHaskellの世界の外にグローバル変数みたいなのを作れる
  • テストでは unsafePerformIO使ってIOモナドの中身を取り出してる
    • doブロックを抜けるとIORefで作った参照も壊れる？

感想

いろんな新しい概念を覚えるのは楽しいですね。 モナドとか型クラスとかは、Scalaでなんとなく存在を理解してたつもりだったけど、Haskellの方が実装が素直な気がする。 （Scalaの型クラス、ノールックで実装できない……クソザコ人材なので……）

すごいH本に出てきたZipperとかは、言語というより実装の知恵という感じで、デザインパターンを初めて学んだときと似た感じを受けた。 こういう先人の知識を組み合わせて問題を解くの、遊戯王カードやってるみたいな気持ちになる。

あとAtomでの開発環境構築はScalaの500倍楽だった。

やりたいこと

とりあえず夏のあいだにどれかやりたい:

  • CLIツールかなんか作る
  • Webアプリ作る
  • PureScript (Haskell風AltJS) で遊ぶ
  • TidalCyclesにPR送る

今年は他にもMUSTで学ばないといけない事があるので、目標は低め……。 （仕事でUnityとかTouchDesignerをやる可能性がある）

なんかオススメのタスクあったら教えてください。

参考URL

↧
↧

未だ遠いフロントエンド

May 12, 2018, 10:06 pm
$
0
0

f:id:amagitakayosi:20180512053433j:plain

金曜が最終出社だった。 社内wikiにお別れの言葉を書いていたら、とうに日の出の時間を過ぎてしまっていた。

午前五時の烏丸通りは生暖く、鳥類の他にはタクシーと、夏でも冬でもない湿度だけが道路を満たしていた。 日付が変わったからといって、この身体の所有者が変わるでもなく、両足にこれまで通りの命令を送り、ゆっくりと歩道を歩く。 去年左京区に引っ越すまで毎日通った道。 京都に来た頃はどんな思いで歩いたのだっけ、思い出せないけど、烏丸御池交差点の空は確かに、初めて訪れた時から変わらない広さと速度で、人々を循環させていた。

インターン最終日の朝、ここから京都駅まで歩いたことを思い出す。 伊勢丹の階段を登って朝日を浴び、知らない街の景色を見下ろした瞬間に、自分の世界が広がったように感じたのを覚えている。

あれから5年。 京都の街はどう変わったんだろう。 僕がこれから進む道は、新しい世界を見せてくれるんだろうか。

こんど京都駅に行ったら、またあの階段を登ってみよう。

5月一杯で株式会社はてなを退職し、1-10drive, Inc. へ転職します。

次の会社は、インスタレーションを制作したり、ハードウェア製品のプロトタイプを開発したりする会社。 僕が何をやるかはまだ決まっていないけど、案件ごとに違う技術を使うことになると思う。

つまり、「Webエンジニア」という肩書ではなくなる。

僕は学生時代からずっと、Webフロントエンドエンジニアを自任していた。 はてなにはフロントエンドエンジニアという役職は無かったけど、社内でフロントエンド会を作ったりしていた。

Webフロントエンドの発展は止まらない。 Extensible Webの旗のもとに、Web技術とフロントエンドの可能性は広がり続けている。 一方で、社会人になって3年、自分の技術にどこか停滞感のようなものを感じていた。

関西のWeb系勉強会に参加すると、東京と比べて、いわゆる「Web屋」が多いように思う。 これまで自分が接してきたフロントエンドエンジニアとは違う「フロントエンド」像があった。 そして、僕の世界と、Web屋や元FLASHerが切り開いてきた世界との間に、大きな断絶があるように見えた。

去年の春、東京出張のついでに行ったライブで、GLSL/ライブコーディングの世界に引き込まれてしまった。 その過程で、WebGLやクリエイティブコーディング界隈の人々と交流するうち、自分の知らない技術の世界があると知った。

もう一つのフロントエンドの世界を見てみたい。 まだ知らない技術を、可能性を手に入れて、いつかWebの世界を広げていきたい。

そう思って、行動することにした。

はてなには、2013年のインターンに参加してから、5年間お世話になった。
当時の僕は何も作れない学生で、運良く拾ってもらったという感覚が強い。

それまでただ利用するだけだったインターネットの世界が、目の前で作られるのを見た。

プログラミングを始めた頃は、作りたいものを考えるのが苦手だった。
けれど、最近は作りたい物もやりたい事も、どんどん増えている。

僕が今自分の意志で、コードを書いたり、技術を学びたいと思えるのは、はてなの優秀で面白い人々に囲まれて、作ることの楽しさを学んだお陰だと思う。

はてなで働けてよかった。
3年間、ありがとうございました。


頼りない胸は痛む 置いてきた手紙もある だけど静かなマジックアワー
Special Favorite Music - Magic Hour




引き続き京都にいるので、これからもよろしく。 ウィッシュリスト

↧

Unityで縁をボカすだけのアセット作った

July 7, 2018, 12:33 am
$
0
0

https://user-images.githubusercontent.com/1403842/42360534-5743042c-8124-11e8-940f-9ddc4eb040b0.gif

Unityアプリをプロジェクタで投影する際、画面を丸くボカしたいことって良くありますよね……？ 画像とかシェーダーでマスク作ったは良いものの、現場で投影してみると微妙で、パラメータ変えてビルドして、NGが出てまたビルドして……みたいな経験ある方もいるのでは無いでしょうか。

という訳で、現場でキー操作だけで見え方を調整できるアセットをつくりました。 一度設定を変更したら、再起動後も自動でロードされます。

github.com

使い方はREADMEに書いてあるとおりです。

実装でやった事としては、シェーダー書いて、PlayerPrefsで設定を保存して、テスト書いた、くらい。 Uniyのテスト、公式のドキュメントだけで書けるようになるのはだいぶ厳しいので、もうちょいまとまった情報がほしい気がする……

Unity歴1ヶ月だけどまだまだ全然分かってないので、「PlayerPrefsの使い方はこう」とか「キーの選びかたおかしくない？」「テストもっといい書き方あるよ」等々、マサカリお待ちしてます！！！！！！！

↧

YOKOITO INC.のWebサイトリニューアルを手伝いました

July 21, 2018, 1:45 am
$
0
0

f:id:amagitakayosi:20180721171934p:plain

yokoito.co.jp

こんにちは天城です。 縁あって、YOKOITO INC. のWebサイトリニューアルのお手伝いをしました。

僕はトップページのWebGLアニメーションを実装しました。 他にもJSちょっと弄ったり、OGP設定したりした。


YOKOITO Inc. について

YOKOITO Inc. は、いわゆるFab系の京都のベンチャー企業です。 3Dプリンタの販売や関連サービスを提供したり、Autodesk製CADツールのワークショップを開催したりしている。

京都の伝統産業である西陣織の職人の方と組んで、機織りの部品を3Dプリントで作ったりもしてたみたい。

yokoito.co.jp

東京・京都でFab系に興味のある方はぜひチェックしてみてください！

実装について

Three.jsです。 TubeBufferGeometryでガガガっと球やウニャウニャを作ってる。 あと携帯だとデバイスの傾きを取得してグルグル回ったりする。

Three.js、関連ツールが現代のフロントエンド開発に全く追いついてなくてメッチャ厳しい。 ちょっと凝った事しようとすると、ES3時代かな？みたいなコードを書くことになる。

とはいえ、WebGL系のライブラリだとThree.jsがデファクトなんだよな。 Three.js最高！！はやくWebGL2対応PRをマージしてくれ！！！！！いま見に行ったらGLSL ES 3.0対応のPRがマージされてた！！！！！最高！！！！！うおおおおおおおおお！！！！！

https://github.com/mrdoob/three.js/pull/13717:

裏側はWordPress。 WordPress部分は僕はほとんど触っていないんだけど、やっぱ良く出来てるな〜って感動した。 良く出来てるというか……なんかこう……世界中の人々が頑張って仕事をやっている……

感想

僕はずっとWebサービスの会社にいたんだけど、今回はじめて、いわゆる「Web屋」っぽい仕事をした事になる。 規模はとても小さい仕事だけど、Three.jsやSVG Animation、WordPressを「仕事で触ったことがあります」と言えるようになったのは、とても良い経験ができた、と思っている。

また、デザイナーやディレクターと意見交換しながら進めたら、結構時間がかかってしまったのも印象的だった。 前職でWebサービスを開発してた時は、根本的なUXについてはデザイナーとエンジニア間で意見をすり合わせて実装を始めるが、最終的なルック&フィールは、機能の実装完了後にデザイナーが調整することができた。 WebGLの場合、実装とビジュアルが密接に結びついているので、うかつに実装を初めてしまうと、エンジニア→デザイナー→エンジニア……みたいな調整の無限ループが発生することになる。

まあそれはそれで楽しいんだけどね。

もしこの記事を読んで興味を持ってくれた方、WebGLを利用した面白Webサイトを作りたい！という方がいらっしゃれば、ぜひ声をかけてください〜

天城孝義 (@amagitakayosi)

↧
Viewing all 186 articles
Browse latest View live
Search