lunar0 log

(転載禁止/許可したものはそれとわかるように書きます)

Vezér + Processing でキーフレーム

概要

  • Processing は便利だが,キーフレーム・音同期のハードルが高い
  • キーフレームだけ別のソフトから送ってあげればよいのでは?
  • Vezér を使って Processing にキーフレームだけ送る

f:id:lunar0:20170919015941p:plain
処理全体の流れ


1. Vezer 側の準備

ダウンロードと初期設定

  • Vezér の体験版をダウンロードします.
  • 起動したら New Project をクリックします.
  • メニュー > Vezér > Preferences > OSC
  • OSC Outputs の Port を 8000 に設定します*1

f:id:lunar0:20170919022130p:plain
送り先のポート番号を確認

トラックを作る(レイヤーのようなもの)

  • 画面下・中ほどの [+] ボタン(図の赤丸)から,新しいトラックを作成します.OSC Value を選びましょう.
  • OSCアドレス(図の赤枠)に /video/key1 と入力します*2

f:id:lunar0:20170919024630p:plain

キーフレームを打つ

  • トラックの適当な場所をダブルクリックすると,キーフレームを打つことができます.
  • キーボードでスペースバーを押すと,カーソルが動いて再生されていることがわかります.

f:id:lunar0:20170919024844p:plain


2. Processing 側の準備

ダウンロードと初期設定

  • Processing 3 をダウンロードします.
  • 起動して,OSCP5 をインストールします.
    • メニュー > Sketch > Import Library > Add Library…
    • 検索窓に oscp5 と入力して,出てきたライブラリをインストール(右下のボタン)

f:id:lunar0:20170919023038p:plain
左上の検索窓からライブラリを検索する

Processing のコード

/* OSCP5を使うための準備 */
import oscP5.*;
OscP5 oscP5;

/* 受信したキーフレームを入れておく変数 */
float oscKey1 = 0.0f;

void settings() {
  size (200, 200);
}

void setup() {
  oscP5 = new OscP5(this, 8000);
  rectMode(CENTER);
}

void draw() {
  background(0);
  // フレームごとに,受信した値の大きさで四角形を描く
  rect(width/2, height/2, width*oscKey1, height*oscKey1);
}

/* キーフレームを受信したときの処理 */
void oscEvent(OscMessage message) {
  if (message.checkAddrPattern("/video/key1")) {
    // 先の変数に受信した値を書き込む
    oscKey1 = message.get(0).floatValue();
  }
}

3. 実行してみる

  • Processing の再生ボタンを押します.
  • Vezér の再生ボタンを押します.
  • うまくいけば,添付画像のように,四角形が打ったキーフレームにしたがって伸縮するはずです.

f:id:lunar0:20170919025122p:plain

*1:実際には,何でもかまいません.ただし, Vezer と Processing で同じ番号を使う必要があります

*2:これも任意に決めて構いません.ただし, Vezer と Processing で同じ文字列にする必要があります

「かえうち」を買った

概要

USBキーボードのキー配列を変換できるハードウェア「かえうち」を買った. 管理者権限のない Windows パソコンでも好みのキーボード配列を使用することができるのが利点.設定画面はやたら難しかったが,高機能な設定ソフトウェアというのはそういうものなのかもしれない.

f:id:lunar0:20170911021142j:plain

使ってみる

設定の目的

  • システムの設定が JIS になっている Windows 環境で US キーボードを使う
  • Cocoa キーバインドWindows でも使いたい
    • Ctrl は Windows の Ctrl として使って Caps を Mac でいうところの Ctrl のように使いたい

設定内容

そもそもどうやって操作するか
  • 画面の下半分でマッピング先のキーを選択
  • その状態で画面の上半分をクリックすると,選択したキーが入る
JIS → US 変換
  • 「修飾キーを押している間の配列面」を,Shift 左右ともに「1」に設定.
  • JISとUSで記号が違っているところを,全てUS基準に変える(ピンク色の部分).
    • Shift を押さない場合の記号は配列面 0 に入れる.
    • Shift を押した場合の記号は配列面 1 に入れる.

f:id:lunar0:20170911015108p:plain

f:id:lunar0:20170911015123p:plain

Cocoa キーバインド
  • Cocoa キーバインドを配列面2に入れる.
    • C-k は Ctrl+Shift+End Ctrl+x のようにマクロを設定する
    • C-o はあきらめる
  • 配列面0で Caps Lock を押したときに配列面2が呼び出されるように設定する.
    • Caps Lock をユーザモディファイヤ0として使う
    • ユーザモディファイヤ0で配列面2が呼び出されるようにする
    • Caps Lock 単体押しは殺しておきたいので,単体押しは「無効」のまま

f:id:lunar0:20170911015229p:plain

f:id:lunar0:20170911015335p:plain

f:id:lunar0:20170911015810p:plain

左Winを殺して,左Win + Caps → Caps
  • 左 Win をユーザモディファイヤ1として使う
  • ユーザモディファイヤ0で配列面2が呼び出されるようにする
  • 配列面2の Caps の位置に,モディファイヤキーなしの Caps を置く
  • 左 Win 単体押しは殺しておきたいので,単体押しは「無効」のまま

f:id:lunar0:20170911020331p:plain

f:id:lunar0:20170911020436p:plain

f:id:lunar0:20170911020152p:plain

IoTを作った

IoTでビッグデータディープラーニングTシャツ,略して IoT を作ったので,買わなくていいですよ. 届いたらまたこのあたりに写真を貼ります.

Linkis をスキップする

たまにタイムラインで Linkis を踏む人がいるので Linkis をスキップするスクリプトを書いた.

iframe の要素を取ってきて(どうやらログ取り用と本体用があるらしい),idを見てそれっぽいものにアクセスするように設定. そのうち対策されそうだし,いつまで持つかはよくわからないが,気休めということで. とりあえず linkis を呪っておく.

// ==UserScript==
// @name         Linkis Skipper
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Skip Linkis.com cushon Page
// @author       You
// @match        *://linkis.com/*
// @grant        none
// ==/UserScript==

// License: Public Domain

(function() {
    'use strict';
    var iframes  = document.getElementsByTagName("iframe");
    var orig_URL;
    Array.prototype.forEach.call(iframes, function(element){
        if(element.id.match(".*source.*")){
            orig_URL = element.src;
        }
    });
    if (orig_URL !== undefined) {
        window.location.href = orig_URL;
    }
})();

書体雑感

最近使った書体を,ウエイトを揃えてベタ組みで4つほど並べてみた.このなかでは,縦組みでは本明朝(新がな)が一番好みに思える.書体は本文の内容なども考えて選ぶべきもので,どれが好みで,また好みでないというのは,実際には比較的どうでもいい部類に入るかもしれない.

f:id:lunar0:20170117025827p:plain


さて,本明朝には Book というウエイトが設定されている.概ね L と M の中間のウエイトとのことだが,どうもかなだけでなくて漢字の形も随分違うようだったので,重ねてみた.単なる L と M の補間ではなく,例に出した「飾」の偏を見ても,各部の重心や向きがかなり調整されているのが見てとれる.

f:id:lunar0:20170117025839p:plain


何の情報もない組見本で考えたほうが幸せな場面もあるかもしれない.便宜上番号をふったが,本当は冊子の形にして,ページ番号と書体名の対照表でもどこかに置いておけば済む話である.

f:id:lunar0:20170117032220p:plain

Unity で DDS を読む

概要

Unity で画像をランタイムに読み込みたいとき,速度を重視するならば DDS 形式が便利.Mac では変換に使えるソフトが少ないが,圧縮率を試行錯誤する必要がなければ crunch-osx が便利.

追記: fnord software がDDSを読み書きできるオープンソースの Photoshop プラグインを公開している.ありがとう fnord software 😊😊😊🙏🙏🙏

経緯

問題

Unity に100枚くらいのスカイボックス(=600枚の4K×4K画像)を読み込ませたらデータが壊れた.10枚くらいのときは動いていたのでバグなのだろうが,泣いていてもしょうがないのでワークアラウンドを考える.

方法1: WWW.LoadImageIntoTexture()

Unity - Scripting API: WWW.LoadImageIntoTexture

利点
  • 簡単
  • JPG, PNGが使える
  • テクスチャをあらかじめ DDS に変換しておく手間がない
欠点
  • 遅い(小さな画像では気にならない)

方法2: Texture2D.LoadRawTextureData

Unity - Scripting API: Texture2D.LoadRawTextureData

利点
  • 読み込みが圧倒的に速い
欠点
  • 使い慣れたファイル形式が使えない
  • DDSに変換するのが遅い

結果

方法1を試したらテクスチャのロード時間が体感的に長かったので,方法2を使うことにした.面倒なので測定はしていないが,体感的に問題にならなさそうだったらわざわざ DDS に変換する必要はないだろうと思われる.画像を DDS に変換するにはそこそこ時間がかかる.1枚30秒〜1分くらい? 少なくとも Unity が JPEG を読み込むよりも遅い.

DDS を読み込む具体的な方法は Can you load dds textures during runtime? - Unity Answers を参照のこと.

注意点

そのまま Unity に読み込むとテクスチャが上下反転されるので, crunch-yflip オプションを使う.たぶん OpenGL が左下原点なのと関係があるのだろう.

$ crunch -dxt1 -fileformat dds -mipmode none -yflip -file inputimage.tga

FRENZ 2012

Scripted Fireworks from lunar0x on Vimeo.

 

今更書くのもなんだけれども,古いブログに書いていた記事がブログ削除とともにインターネッポヨの海に消滅したので,思い出しながら書いておきます.

これ何

線香花火のシミュレータです.以下のものがシミュレートされています.

  • パーティクルの空気抵抗
  • レンズブラー
  • 破裂した後に再び破裂するパーティクル

C++製です.たしか,次のような構成だったと思います.

  • 配列は OpenCV を覚えたかったという理由で cv::Mat を使用
  • 書き出しは OpenEXR のライブラリを使用

京都の友人の家に遊びにいった帰り,JRに揺られながらコードを眺めて唸っていたのが思い出される.冷房の効いた電車の窓から見た草の波が美しくてなんとなく眺めていたのだった.

あの頃はひと夏をこれに賭けるくらいの情熱で打ち込んでおり,今これを書けといわれたら普通に Blender とかのスクリプトを書いていたと思うし,なんなら既存のパーティクルシステムでこういうのあるよと探してきたかもしれない.