月 の 上

はてなブログのテーマを自動リロードしながら開発できるツールを作った

f:id:amagitakayosi:20170822133701g:plain

Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。

github.com

目次

インストール

動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。

https://nodejs.org/ja/

ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。

npm install -g @fand/hatena-blog-theme-boilerplate

使い方

hbt の使い方

0. 開発用ブログを作成する

テーマの開発には、開発用のブログを開設しておくと便利です。
既存のブログをエクスポート/インポートするなどして、サンプル記事を作成しておくと良いでしょう。

1. テーマの雛形を作成する

hbt コマンドでは、新しいテーマの雛形 + 開発環境を作成できます。
以下のコマンドを順に実行すると、 my-theme という名前のテーマが作成されます。

hbt my-theme   # my-themeを作成

以下のコマンドを順番に実行して、ライブラリをインストールしておいてください。

cd my-theme
npm install  # ライブラリをインストール

2. 開発用ブログにCSSが読み込まれるようにする

開発用ブログのデザイン設定画面を開きます。
カスタマイズ > デザインCSS の内容を削除し、 カスタマイズ > フッタ に以下の内容を入力してください。

<link rel="stylesheet" href="http://localhost:3000/index.css"/>
<script async src='http://localhost:3000/browser-sync/browser-sync-client.js'></script>

f:id:amagitakayosi:20170822133952p:plain

変更を保存する を押すのを忘れずに!

3. テーマを開発する

テーマのディレクトリで以下のコマンドを実行すると、Sass/Lessのコンパイル及びライブリロード用のサーバーが起動します。

npm start

サーバーを止めるには Ctrl + C を押してください。

テーマのソースコードlib/ にあります。
hbtはデフォルトではSassを利用するので、 lib/index.scss が作成されます。
Lessを使いたい場合は、 lib/index.scss を削除して lib/index.less を作成し、 npm start を再度実行してください。

ブラウザで開発用ブログを開き、 lib/ 内部のファイルを編集すると、開発用ブログのデザインがリアルタイムで反映されるはずです。

(記事冒頭のGIFアニメ) f:id:amagitakayosi:20170822133701g:plain

4. 完成したテーマを出力

テーマのCSSindex.css に出力されます。
テーマを使いたいブログのデザイン設定画面で、 カスタマイズ > デザインCSSindex.css の内容を貼り付けてください。


macでしか動作確認してないけど多分Windowsでも動くはず……?
なんか困ったことがあればお気軽にコメントください。

Kyoto.js 13開催レポート & 次回予告

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

kyotojs.connpass.com

今回は京都だけでなく、なんと東京や長野から来たという方もいらっしゃいました(ありがとうございます!!)。
発表内容もユニークなものが揃っています!

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

発表資料

「Live Coding on Atom」amagitakayosi

speakerdeck.com

1人目の発表は僕 id:amagitakayosi です。
最近ハマっているGLSLのライブコーディングや、自作したAtomパッケージの紹介をしました。

「煩悩の数だけRefluxを回そう(仮)」kamiyam

www.slideshare.net

2人目の発表は id:kamiyam さん。
Fluxフレームワークの一種であるRefluxについて、他のフレームワークの違いや、実際に開発した感想を紹介していました。

「type of typing typescript type」hiroqn

scrapbox.io

3人目は id:hiroqn さんです。
TypeScriptでの型の付け方について、良くある書き方や、ハマりどころを紹介してくれました。

「煩悩レスなコンポーネントテストを目指して」bokuweb

speakerdeck.com

4人目の発表は id:bokuweb さんです。
コンポーネントの見た目をテストする Visual Testing のメリットや、 reg-suit の開発に至った経緯などについて語ってくれました。

「Reason」kuy

speakerdeck.com

5人目は id:kuy さんです。
Facebook製のOCaml用ツールチェイン Reason の紹介と、実際に使ってみた感想を話してくれました。

Gyazoのフロントエンドから煩悩を取り払えているのか」pastak

scrapbox.io

最後の発表は id:Pasta-K さん。
画像共有サービス Gyazo のフロントエンドについて、これまでの変遷を語ってくれました。

LT資料

JavaScript information in English」cawa

www.slideshare.net

LT1人目は id:cawa さんです。
英語の情報を効率よく収集するためのTipsやリリースを紹介してくれました。

Atom パッケージ開発のすゝめ」susisu

speakerdeck.com

LT2人目は id:susisu さん。
Markdownのテーブルエディタやカーソル移動といった、普段の操作を便利にするAtomパッケージを開発した話でした。

「はじめようGLSL」amagitakayosi

はじめようGLSL · GitHub

最後のLTは、ふたたび僕 amagitakayosi が行ないました。
ハンズオン形式で、GLSLで何ができのるか実際に体験してもらいました。

まとめ & 次回予告

発表者ならびに参加者のみなさま、本当にありがとうございました!!

毎回なぜか東京からの参加者がいるKyoto.jsですが、次回はなんと東京での開催を企画しています!!!
詳細はまだ未定ですが、開催日時は9月の中頃になる予定。

いずれconnpassやブログで案内するので、今後の更新にご注目ください!!

スクリーンショット/GIFアニメ作成技術が集まるスレ

お題「スクリーンショット/GIFアニメ作成技術が集まるスレ」

最近、仕事でも趣味でもスクリーンキャプチャしまくっている。
結構いろいろツール使ったりしてるので、メモっとくと需要あるかなって。

マイお題も作ったので、皆さまのGIFアニメ作成技術やこだわりを投稿してくれると助かります!😸

目次

キャプチャツール

GIF Brewery 3

gifbrewery.com

macOS向けの高機能なGIF作成/編集ツール。
スクリーンを撮影するだけでなく、Webカメラや動画ファイルからGIFアニメを作成できる。

フレームレートやスピードを簡単に設定できる上、軽量化もできる。
仕事で開発中の画面のアニメを撮影する時はだいたいコレで完結する。

もっとクオリティとサイズにこだわりたいときは、GIF Breweryで撮影したあと、後述のgifsicleやezgifで軽量化したりする。

Quicktime Player

ちょっと長めの動画とか、音声入りでキャプチャしたい時はこれ。
音声出力を取得するにはSoundflowerとかと組み合わせる必要がある。

Licecap

Cockos Incorporated | LICEcap

昔使ってた。
Windows版とMac版がある。

事前に録画する秒数を指定したり、フレームレートを指定してから録画を開始する。

デュアルディスプレイの時に出力がおかしくなることがあった気がする。
もう直ったかな?

GIF Breweryに移行してからは使ってない。

編集/軽量化

Gifsicle

Gifsicle: Command-Line Animated GIFs

CLIツール。
gifsicle -O3 foo.gif > foo2.gif とかやるとサクッと軽量化できる。
オプション覚えるのがめんどくさいのであんまり使ってない。

ezgif.com

ezgif.com

Web上でGIFの操作ができるサービス。
Optimizeメニューでは、普通に圧縮したり、カラーパレットをいじったり、ディザリングしたりできる。
フレーム毎にスキップ指定してファイルサイズを落としたりもできる。

Gifsicleのオプション覚えずに済むので楽。
処理も意外と速い。

ffmpeg

定番動画変換ツール。 Quicktime Playerで録画したやつをGIFアニメに変換する時に使ってる。

PCからTwitterに動画を投稿するとメッチャ失敗するんだけど、こちらの記事にあるオプションを付けてffmpegで変換すると投稿できるようになる。

kivantium.hateblo.jp

高画質なGIFアニメを作る方法については、いろんな記事があるのでそちらを参照。

動画ファイルからより良いアニメーションGIFを作る — Genji App Blog

ffmpeg、とにかくオプションむずすぎる。
僕はオプション勝手に指定してくれるスクリプトつくって ~/bin に入れてるけど、結局あんまり使ってない……

その他小技

  • Retinaディスプレイだと解像度2倍になってキャプチャもカクつくしファイルサイズもでかくなるので、サブディスプレイでキャプチャしたりディスプレイの解像度を落とすと良い
  • Twitterは7.5秒以内の動画だとループ再生してくれるので、GIF Breweryとかでフレームを調整してキレイな無限ループにしてあげると良い
  • 頑張って高画質GIF作ってもTwitterに投稿するとメチャメチャになったりするのでmp4の方が良かったりする
  • 仕事でUIのキャプチャする時は 5fps くらいで充分

キャプチャデバイス買おうか迷ってる

最近はGLSLを書いたりVJっぽい活動をしてることもあり、キャプチャ専用デバイスを買おうか迷ってる。
一番の候補はこれ。

av.watch.impress.co.jp

レビューの記事では「音が小さい」って書いてあるけど、オーディオインターフェースあるからどうにかなるのではって思ってる。

使ってる人とか、オススメのデバイスとかあったら教えてほしいです!

AtomでVJできるパッケージを作った #GLSL #livecoding

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

GLSLでVJやライブコーディングができるAtomパッケージを作りました。
その名も glsl-livecoder !!!

atom.io

この記事では、glsl-livecoderの使い方や機能を説明します。

目次

このパッケージでできること

AtomでこんなVJができちゃいます!

この動画は、先日僕が glsl-livecoder を使ってVJした時のものです。
動画素材や画像素材をロードしつつ、GLSLで加工したり動きを付けたりしています。
動画素材をロードしてMIDIコントローラーで操作きるので、コードをほぼ書かずにVJすることも可能です。

GLSLはOpenGLWebGLといった3Dグラフィックで用いられる言語です。
GPUで実行されるため、高画質なグラフィックをリアルタイムに描画できるという特長があります。

AtomにはTidalCycles等、ライブコーディングで音楽を演奏するパッケージがいくつか存在しているので、組み合わせると一人でDJ/VJ両方できたりもします。
TidalCyclesについては以前記事を書きました。

amagitakayosi.hatenablog.com

機能一覧

glsl-livecoderは、GLSLファイルを実行してAtomの背景に表示するパッケージです。
linterやautocompleteといった既存のパッケージを利用し、快適なコーディング環境を実現しています。

GLSL実行環境としては、以下のような機能をもっています。

  • GLSL Sandbox互換の uniform 変数
  • 音声入力対応
  • MIDI入力対応
  • 任意の画像/動画をロードできる

インストール

glslangValidatorのインストール

glsl-livecoder の動作には glslangValidator が必要です。
先にインストールしましょう。

macOSの場合

macの場合はhomebrewでインストールできます。
homebrewが入っていない場合は、まず以下のページに従ってインストールしてください。

Homebrew — The missing package manager for macOS

その後、ターミナルで brew install glslang を実行すると glslangValidator コマンドを使えるようになります。

glslangValidatorを自分でビルドする場合は、21-3さんの記事を参考にしてください。
(21-3さんありがとうございます!)

r21nomi.log — Art & Tech log

Windows, Linuxの場合

glslangValidator はVulkan SDKに含まれています。
こちらからVulkan SDKをインストールしましょう。

LunarG® Vulkan™ SDK - What's in the SDK - Where to Download

Windowsの場合は C:/VulkanSDK/(バージョン番号)/Bin/glslangValidator がインストールされるので、こちらに環境変数PATHを通してください。

glsl-livecoderのインストール

Atomの設定画面、または apm より glsl-livecoder をインストールします。

Failed to require... というエラーが出た時

場合によっては以下のようなエラーが表示されるかもしれません。

Failed to require the main module of 'glsl-livecoder' because it requires an incompatible native module.
Run `apm rebuild` in the package directory to resolve.

この場合は、画面下部の虫アイコンをクリックし、 Rebuild Packages を実行してください。

使い方

glsl-livecoderをインストールすると、Atomに以下のコマンドが追加されます。

  • glsl-livecoder:toggle
    • glsl-livecoder を起動/停止する
  • glsl-livecoder:load-shader (key: ctrl-enter)
    • 現在のタブのGLSLファイルを実行する
  • glsl-livecoder:watch-shader (key: ctrl-shift-enter)
    • 現在のタブを監視し、内容が変更されたら自動で実行する
  • glsl-livecoder:watch-active-editor (key: ctrl-alt-enter)
    • アクティブなタブを監視し、 watch-shader を実行する
  • glsl-livecoder:stop-watching (key: ctrl-.)
    • watch-shaderwatch-active-editor を停止する

実際にサンプルコードを手元で動かしてみましょう。

まず、glsl-livecoder-examplesをcloneし、Atomで開きます。

git clone https://github.com/fand/glsl-livecoder-examples
cd glsl-livecoder-examples
atom .

コマンドパレットを開き、glsl-livecoder:toggle を実行してください。
glsl-livecoderが起動し、デフォルトのGLSLコードが評価されます。

f:id:amagitakayosi:20170804140250g:plain

このディレクトリにはサンプルコードが沢山入っています。
試しに sample2.frag を開き、 ctrl-enter で実行してみましょう。
GLSLが実行され、次のような画面になるはずです。

f:id:amagitakayosi:20170804145503g:plain

GLSLを書き換えて実行すると、すぐに反映させることができます。
例えば、7行目に p *= fract(time); を追加して実行すると、画面全体をアニメーションさせることができます。

f:id:amagitakayosi:20170804162040g:plain

次は動画のロードを試してみましょう。
video.frag を開いて ctrl-enter で実行すると、複数の動画がミックスされた画面が表示されます。

f:id:amagitakayosi:20170804162728g:plain

動画のパスは .liverc で指定しています。
.liverc を編集することで、任意の画像や動画をロードすることができます。
.liverc を保存すると即反映されるので、動画の入れ替えも簡単に行なえます。

// .liverc
{
    "IMPORTED": {
        // 動画ファイルは videos/ 内にに保存されている
        "video1": {
            "PATH": "./videos/1.mp4",
        },
        "video2": {
            "PATH": "./videos/2.mp4",
        },
        "video3": {
            "PATH": "./videos/3.mp4",
        },
    },
}

もちろん、動画をGLSLで加工することもできます!
21行目の // uv *= uv; のコメントを外して、再度 ctrl-enter してください。
画面全体が左右対象にグニャッと歪んで表示されると思います。

f:id:amagitakayosi:20170804163206g:plain

以上、おおまかな使い方を紹介しました。
音声入力やMIDI入力の使い方に関しては、それぞれ audio.fragmidi.frag を参考にしてください!

今後の開発

今後は以下のissueに取り組んでいこうと思います。

  • パフォーマンス向上
  • カメラ入力対応
  • glslify対応

他に機能のリクエストやバグ報告があれば、TwitterGitHubでお気軽にご連絡ください!

それでは、よいVJライフを!

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


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