FLATV

逃避ケア MV 制作メモ【データモッシュ編】

2021-10-10T15:10:00+09:00

前編逃避ケア MV 制作メモ【制作環境全般編】の続きで、どうやってデータモッシュを作ったかのメモです。

どんなところで使ったか

シーンの切り替え

ランダムでノイズが乗り、複雑な色が出るところ

環境・ツール

基本的にはコードを書いていきます。

OS: Mac
- 試してないですが、Windowsでも同様のことができると思います。
AviGlitch - A Ruby library to destroy your AVI files.
- avi のデータモッシュを行うライブラリ
- Ruby の実行環境が必要
- データモッシング動画を AviGlitch で作る備忘録もその時調べました
ffmpeg: 動画変換のCLIツール
bash: shell script を書いて一連の作業を自動化
ruby や ffmpge のインストールは、MacならHomebrew、Windowsなら Scoop を使うと簡単にできます。
bash は Mac なら標準で使えますし、WindowsならWSL2を入れたら使えます。

ワークフロー

Mac だと AEで avi が扱えないので、別のファイル形式を経由しています。

元となるシーンをAEで画像連番書き出し
ffmpegを使って連番画像からaviを作成 ffmpeg -f image2 -i main_%05d.jpg -y -an -q:v 10 -r 30 temp.avi
AviGlitch を使ってデータモッシュ
ffmpegを使ってデータモッシュ後のaviからmp4に変換
mp4をAEで読み込み、素材として使う

スクリプト

上記ワークフローの一連の流れを実行するもの

mosh.sh

#!/bin/bash
mkdir output
cd render

# q:v ... 固定量子化係数 (Constant Quantizer) でエンコード 小さいほど高画質。大きいほど低画質でデータモッシュ感がある
rename -N 00001 -X -e '$_ = "main_$N"' *.jpg
ffmpeg -f image2 -i main_%05d.jpg -y -an -q:v 10 -r 30 temp.avi

datamosh temp.avi -o ../output/output.avi
cd ../output
now=`date "+%Y%m%d-%H%M%S"`

ffmpeg -i output.avi -y -f mp4 -vcodec libx264 -b:v 4000k -an -r 30 output-${now}.mp4

AviGlitch をライブラリとして利用

AviGlitch は datamosh コマンドで実行するだけでなく、ライブラリとして利用することで特定の法則でデータを壊すことができます。AviGlitch 作者の ucnv さんが gist に上げているもの（Search · require ‘aviglitch’）をいくつか試し、映像的に面白いものを取り入れました。

repeat-random-p-frame.rb

require 'aviglitch'
require 'date'
  
a = AviGlitch.open 'render/temp.avi'       # Rewrite this line for your file.
d = []
a.frames.each_with_index do |f, i|
  d.push(i) if f.is_deltaframe?     # Collecting non-keyframes indices.
end
q = a.frames[0, 5]                  # Keep first key frame.
100.times do |i|
  printf "\r>> %4d/100", i
  x = a.frames[d[rand(d.size)], 1]  # Select a certain non-keyframe.
  q.concat(x * rand(50))            # Repeat the frame n times and concatenate with q.
end
o = AviGlitch.open q                # New AviGlitch instance using the frames.
o.output 'output/repeat-random-p-frame-' + DateTime.now.strftime('%Y%m%d-%H%M%S') + '.avi'

これを使って ランダムでノイズが乗り、複雑な色が出るところ を作りました。

動画の尺が伸びるので、AEでタイムリマップして使うと良かったです。

avi2mp4

./avi2mp4.sh （aviファイル名） で実行

#!/bin/bash
ffmpeg -i $1 -f mp4 -vcodec libx264 -b:v 4000k -an -r 30 ${1%.*}.mp4

おわりに

ということで映像の表現にデータモッシュを取り入れた話でした。元の素材や変換方法によってぜんぜん違うものができるので、試行錯誤しやすい環境づくりが大事だと思いました。

逃避ケア MV 制作メモ【制作環境全般編】

2021-10-10T15:08:00+09:00

作品

【FRENZ 2017】逃避ケア【MV】という映像を作り、 FRENZ 2017 に出展しました。ニコニコ動画にも上げています。

前置き

このブログ記事は4年前に書こうと思っていてPCに書き溜めていたのですが後回しになっていました。 PCを手放すので重い腰を上げて書きます。（動画を見返すのは恥ずかしくてできません。。）

どのように作ったかを箇条書きで書いていきます
- 備忘録として（4年以上前なのに備忘録とは…）
- 自分が作る前に知っておきたかったことを盛り込みたい

自己紹介

昔はFlashで映像を作っていた
AEは少し触っては忘れる程度の初心者
プログラムはそこそこ書ける
絵は全然描けない
ここ数年は自分の作品を作ってなかった
- 他の人のお手伝いで素材作る程度

作品のテーマから使いたい技術を選定

曲【初音ミク】逃避ケア【オリジナル】 - ニコニコ動画
曲を聞いてノイズっぽい感じ、壊れた感じを表現したかった
- データモッシュという意図的に動画を破壊する表現を使いたかった
  - データモッシュのワークフローは後編【データモッシュ編】で解説します
歌詞のイメージを表現したかった
- 曲のイラストに棒人間があったので2Dでいい感じに動かしたい
- → AEのシェイプレイヤーやインバース・キネマティクス（IK）を使うと効率良さそうなのでAE使うことに

制作環境

OS: Mac
使用ソフト
- After Effects CS5.5: 映像編集
- Animate: 映像素材作成
  - CS5.5 のFlashがありましたが、なぜか起動しなくなったのでAdobe CCを契約しました
  - 以降は慣れてるのでFlashと呼びます
- Illustrator CS5.5: 素材作成
- Aseprite ドット絵アニメーション

制作スケジュール

2013年ごろ Flashで作ろうとして挫折
2014/8 また作ろうとメモを残すも挫折
空白の期間
2017/6〜8 作成
- 絵コンテのようなもの: 紙に雑にイメージを書く
- Vコンテ: Flashでブラシツールを使って音同期とかを考える
- AEチュートリアルをこなす
- データモッシュを試す
- とにかく作る

作り方

注意：自分なりの方法なので、もっといい方法などがあると思います

大まかな流れ

VコンテをFlashで雑に作る
タスク管理ツールで作りたいシーン等をメモる
- Trello で管理していました
- 作業が残っているところを頭の中から追い出せるので、精神安全上嬉しい
ツールの基礎的な使い方を勉強する
作りたい表現を調べつつ作る… の繰り返し

AEの準備・基礎勉強

特に参考になったものを載せています。

基本的な操作、動画書き出し
- After Effects Style｜After Effectsを楽しむチュートリアルサイト
  - After Effects 入門（公式）も試したけど、After Effects Styleがわかりやすいです。
コンポジションの概念
- After Effectsの作業スピードを上げるコンポジションの組み方 - コンポジゴク
シェイプレイヤー
- シェイプレイヤーのススメ（紹介編） at AEP Project
- 【AEオフ3】シェイプレイヤー特論 - YouTube
  - プリセットについて公式 After Effects のエフェクトおよびアニメーションプリセット
- 鳥が歩くチュートリアルが良かった

マスク
- Flashにあるマスクみたいなのどうやるのか気になってた
- トラックマット After Effects でのアルファチャンネル、マスクおよびマットの使用
エクスプレッション
- 自分は効率化厨なので一通りどんなことができるかこちらのサイトをざっくり目を通した
  - エクスプレッション目次
- 逆引きでできることを手元にメモ、ストックしておくといい感じ
プラグイン
- 無料で使えるものをとりあえず入れておいた
  - 別に入れなくてもいいけど、入れておくと表現の幅が広がることもある
- Duik（詳しくは後述）
標準プラグインが一覧できるサイトを常に開いてた
- 英語チュートリアルを見るときに、プラグイン名をすぐ調べることができて便利
ショートカット
- よく使うもの
  - 便利なAfter Effectsショートカット一覧｜After Effects Style｜初心者からはじめるAfter Effectsの使い方
  - ayato@web のショートカット＆裏ワザ
  - フレーム操作系（折りたたみ） KDblog（仮）: AfterEffectsメモ：タイムライン上でのレイヤーの扱い方を覚えよう。
- 公式はこちら After Effects のプリセットおよびカスタマイズ可能なキーボードショートカット
コンポジション、プロキシ
- やっておくとレンダリングが早くなって便利
- 細かすぎて伝わらないプリレンダリング最適化選手権 - Qiita

勉強・その他

公開されている.aepを見る
- AEP Project
- 百舌谷さん (@mozuya_) / Twitter の aep
YouTubeのチュートリアルが充実している
- それっぽい単語でググるといい感じにヒットする
- Particularなど有料プラグイン使ってるものもあり、全て真似できるわけではない

勉強か、作るか

勉強する時間は取っておくと表現の幅が広がって良さそう
ただ、勉強できる時間に限りがあるので、ある程度わかるようになったら作り始めるのが良さそう
- 基礎がわかっていないと行き当たりばったりになるし、ずっと勉強してチュートリアルしてても作品作れないし、このあたりのバランスが難しい
- いろんな記事や動画がヒットするので検索すれば大抵の問題は解決するかも
- 表現を言語化できると答えにたどり着きやすい。
困ったら詳しそうな人に聞くのが良い

ワークフロー

VコンテをFlashで作る
- AEでswfを読み込んでガイドレイヤーとして表示することもできます
- 先人もおすすめ
  - yama_koさん [Flashオフ] 4Kの倒し方 - YouTube
  Flashのプレビュー能力は本当に高い Flashで試行錯誤、AEで一括処理、JSFLで省力化
  - mt.ptさん Mt.POETRONICA - Computer Overture 動画制作メモその１
  まずはラフムービーをFlashで作成する。ラフムービーや絵コンテを作るにはFlashが最強であると信じて疑わない。音同期がやりやすく、プレビューが高速なのでタイミングがつかみやすい。他のソフトで動画作ってる人も、ラフはFlashで作ることを強くお勧めする。
シーン分割
- SceneSplitter が便利
  - オーディオレイヤーにつけたマーカーからシーンを切り出して子コンポ自動生成するAEスクリプト
- 歌詞をマーカーに打って表示するエクスプレッション
  - 確か自作
  - ソーステキストに指定する

// マーカーにつけたコメントをソーステキストに反映させるやつ
function getPrevMarkerComment() {
  var nKey = marker.nearestKey(time);
  var cIndex;
  if(time < nKey.time){
    cIndex = nKey.index-1;
  } else {
    cIndex= nKey.index;
  }
  return cIndex ? marker.key(cIndex).comment : "";
}

getPrevMarkerComment()

シーンの中を作る
書き出す

個別メモ

色が反転するところ
- 白黒で作って「色合い」で調整
棒人間のモーション
- Duik
  - 片方の腕と足を作って、ポジションをエクスプレッションでループ
- シェイプレイヤーで腕や足ごとにパスを作っておいて、終了点をアニメーション
- 腕が交差するところなどはシェイプレイヤーでうまく扱う方法が分からなかったのでFlashで手描き

他

アイデア出ないとき
- 素材サイトでキーワード検索して着想を得る

バックアップ等

作業中のデータが吹っ飛ぶと萎えるので備えておく
- MacのTime Machineでバックアップが良かった
スクリプトやaepをgitでバージョン管理
- 素材などの重いファイル以外をバージョン管理することで安心感を得る
- プログラマー以外だとなじみがないと思うのでgit自体の説明は割愛

後編【データモッシュ編】に続く

SWF2PNGSequence のソースコードを公開しました

2018-11-25T09:29:00+09:00

SWF2PNGSequence のソースコードを公開しました。ライセンスは MITです。

https://github.com/hushin/SWF2PNGSequence

理由など

PCのファイル整理していて、ソースコードはgitで管理したくなった
自分が作ったものをgithub に公開しておきたかった
世界の何処かで機能追加したいひとがいるかもしれない

アプリを公開したのが 2012年2月なので、作っていた時期を考えるともう7年前のコードですね。

ActionScript, Flexの書き方も忘れてしまいました。（OSS化にあたり Flash Builder でのビルド設定やライブラリパスを通すに一苦労しました…）

自分ではもうメンテナンスする予定もないので、興味ある方はforkして触ってもらえたらと思います。

FRENZ 2017 一日目昼の部に出展します

2017-09-15T21:36:52+09:00

http://frenz.jp/

久しぶりにサイト更新。FRENZ 2017 一日目昼の部に出展します。明日です〜よろしくお願いします。

SWF2PNGSequenceを無料化します

2013-12-15T18:21:18+09:00

先日のFlash オフで発表したように、 SWF2PNGSequenceを有料（$20）で販売していましたが、無料化します。

SWF2PNGSequenceの説明、ダウンロードはこちらに書いています。是非使ってみてください！

Flashの塗りの縁取りを一発で行うJSFL

2013-12-10T21:31:15+09:00

Flashの塗りの周りに線で縁取りたいときがあると思いますが、インクボトルツールで何回もクリックする手間を解消してくれるJSFLを書きました。

↑の [view raw] を右クリックで保存できます。

使い方

塗りを選択して実行すると縁取ります。

JSFLはダブルクリックで実行できます。もしくは以下公式ヘルプを参照ください。 Adobe Flash Professional * JavaScript API の操作

Flashオフ開催します

2013-12-06T11:50:16+09:00

明日開催です！主催します！

Flash オフ

データモッシング動画を AviGlitch で作る備忘録

2013-10-20T20:50:30+09:00

データモッシング動画が作りたくなってさまよっていたら AviGlitch というRuby のライブラリが便利そうなので使ってみました。コーデックが Xvid の AVI にする必要があるようです。

AviGlitch - A Ruby library to destroy your AVI files.

以下、swf ファイルをデータモッシングする手順をメモしていきます。例によって環境はMacですが、Windowsでも同じようなことはできるはず。

Swivel を使って swf -> mp4
- 参考：【紹介】SWF を動画に変換するフリーソフト「Swivel」がスゴい！ | FLATV
ffmpeg を使って mp4 -> avi
- ffmpeg のインストールの参考：Mac OS XでFFmpegのインストールとWebM動画の作り方 - くじらぶろぐD
- 以下のコマンドで変換。フレームレート等は動画に合わせて変える。
- ffmpeg -i input.mp4 -y -vcodec libxvid -acodec libfaac -b 1500k -ac 2 -ab 160k -r 30 temp.avi
- たぶんWindowsだとFlashから直接avi書き出しできるので1,2の手順は不要かも。
AviGlitch で壊す
- コマンド
- datamosh temp.avi -o output.avi
- 他にもrubyでコードで書いて自分の好きな感じになるように壊し方を調整する。
（必要なら）ffmpeg を使って avi -> mp4
- ニコニコ動画に上げるときなど。
- コマンド
- ffmpeg -i output.avi -y -f mp4 -vcodec libx264 -acodec libfaac -b 800k -ac 2 -ab 128k -r 30 output.mp4

試したもの

上のやつが下のように変換されました。楽しい！！

Mac で BPM を調べるやつ Scratch Live

2013-10-09T01:05:57+09:00

いつも忘れるのでメモ。

映像制作のお供に。

使い方

調べたい曲をD&D
左上の Analize Files をクリックして待つ
bpm がリストで表示される

参考：BPMを調べて、iTunesに一括登録する ’12冬（win・mac両対応） | 乱雑モックアップ

備忘録：Flash のキーボードショートカットの設定ファイルを共有

2013-06-08T13:33:05+09:00

以下のパスの中にある mfx ファイルを他のPCへコピーすると使える

Windows XP: Hard Disk\Documents and Settings\user\Local Settings\Application Data\Adobe\Flash CS5.5\language\Configuration\Keyboard Shortcuts

Windows Vista: Hard Disk\Users\user\Local Settings\Application Data\Adobe\Flash CS5.5\language\Configuration\Keyboard Shortcuts

Macintosh: Hard Disk/Users/user/Library/Application Support/Adobe/Flash CS5.5/language/Configuration/Keyboard Shortcuts

Adobeさん、こういう情報はヘルプに書いて欲しい。

FLATV

逃避ケア MV 制作メモ【データモッシュ編】

どんなところで使ったか

シーンの切り替え

ランダムでノイズが乗り、複雑な色が出るところ

環境・ツール

ワークフロー

スクリプト

上記ワークフローの一連の流れを実行するもの

AviGlitch をライブラリとして利用

avi2mp4

おわりに

逃避ケア MV 制作メモ【制作環境全般編】

作品

前置き

自己紹介

作品のテーマから使いたい技術を選定

制作環境

制作スケジュール

作り方

大まかな流れ

AEの準備・基礎勉強

勉強・その他

勉強か、作るか

ワークフロー

個別メモ

他

バックアップ等

SWF2PNGSequence の ソースコードを公開しました

理由など

FRENZ 2017 一日目 昼の部に出展します

SWF2PNGSequenceを無料化します

Flashの塗りの縁取りを一発で行うJSFL

使い方

Flashオフ開催します

データモッシング動画を AviGlitch で作る 備忘録

試したもの

Mac で BPM を調べるやつ Scratch Live

備忘録：Flash の キーボードショートカットの設定ファイルを共有

SWF2PNGSequence のソースコードを公開しました

FRENZ 2017 一日目昼の部に出展します

データモッシング動画を AviGlitch で作る備忘録

備忘録：Flash のキーボードショートカットの設定ファイルを共有