サイバーパンク風な世界を30分で作ることができるのか？


この記事は [ABEJA Advent Calendar 2019](https://qiita.com/advent-calendar/2019/abeja) の 24 日目の記事です。クリスマスイブですね。


# はじめに
ABEJA でチームを加速するために、何でもやる的な動きをしてますが、最近、「何をやっているか分からない人」と言われ始めている @endout です。そろそろ引退ですね。

三年ぶりのAdvent Calendarです。

今年は「ディレクターがAIを使ってみたらどうなったのか？」という内容で書こうと思っていたのですが、イケメンの@kousakuadachiさんに ABEJA Platform を利用した画像識別モデルの作成方法を先に書かれてしまったたため、ちょっと切り口を変えて、書くことにしました。


# サイバーパンクな世界が盛り上がりそうな予感
突然ですが、サイバーパンクってしってますか？

[サイバーパンク - Wikipedia](https://ja.wikipedia.org/wiki/%E3%82%B5%E3%82%A4%E3%83%90%E3%83%BC%E3%83%91%E3%83%B3%E3%82%AF)

以下の代表作品や作家のように、1980年代の視点から観た、未来でありつつも、コンピューターやネットワークが浸透した社会に対する反動的なディストピアな物語が多かった気がします。

- [トロン](https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%AD%E3%83%B3)
- [ブレード・ランナー](https://ja.wikipedia.org/wiki/%E3%83%96%E3%83%AC%E3%83%BC%E3%83%89%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC)
- [AKIRA](https://ja.wikipedia.org/wiki/AKIRA_(%E6%BC%AB%E7%94%BB))
- [GHOST IN THE SHELL](https://ja.wikipedia.org/wiki/GHOST_IN_THE_SHELL_/_%E6%94%BB%E6%AE%BB%E6%A9%9F%E5%8B%95%E9%9A%8A)
- [ウィリアム・ギブソン](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A3%E3%83%AA%E3%82%A2%E3%83%A0%E3%83%BB%E3%82%AE%E3%83%96%E3%82%B9%E3%83%B3)
- その他色々

時代背景のため、アジア（東京、香港のような都市）を電脳都市に見立てた場所も多いように思います。


たとえば、こんな世界

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54259/69a93c8d-7202-7686-fa5c-95e9fdbcef30.png)
出典：[サイバーパンク俳優キアヌ・リーブスも登場する「Cyberpunk 2077」E3予告編が登場 - DNA](https://dailynewsagency.com/2019/06/10/cyberpunk-2077-official-e3-b91/)



なぜ、こんな話をしているかというと、来年の4月に「サイバーパンク2077」というゲームが発売されるのですが、まさにこれが「サイバーパンク」感が満載であり、デス・ストランディングのように、俳優も出演しながら制作は進められたので、この作品も仕上がりが楽しみだったりするためです。

また、最近は、テスラが「サイバートラック」も発表していたりして、来年は「サイバーなイヤー」になると、一人で思っています。


# サイバーパンク風な世界を手軽に作る方法を考える
そんな来年に期待を待ちつつ、サイバーパンク風なネオンカラーの世界を手軽に作れないかと思い、以下の処理順序を考えてみました。

<img width="1185" alt="Frame 1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54259/8eaf223d-2ff9-5cf9-cc08-b2edf9af9104.png">


色がネオンぽく光っていれば、それっぽいのかなと。

AIエンジニアのみなさんは、OpenCV を利用して、画像をコネコネすることが得意だと思いますが、今回はビジュアルプログラミング言語で実装してみます。



# 用意するもの
- TouchDesigner
- MacbookPro (Webカメラ付きならMacでなくても良い)

# 全体像

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54259/5d63b1c5-b83c-d551-43f2-61e10d2a25fb.png)



# 手順

## 入力段
MacbookPro の ビデオカメラから入力を受け付けるようにします。
- オペレータTop → Video Device In を選択
- DeviceにFaceTime HDカメラ（内蔵）を選択


## カラー→白黒に変更

オペレータTop→monochrome を使って、白黒にします


## ぼかしを適用
オペレータTop→Blur を使って、ぼかしを適用します


## 輪郭の抽出
オペレータTop→Edge を使って、輪郭を抽出します。

## 輪郭を調整
抽出した輪郭をさらに調整し、わかりやすくします。

## ネオンカラーの作成

オペレータTop→Constant を使って、カラーを出力します。

カラーはサイバーパンクぽいピンク色で、 rgb(251,0,239 にしました。

## 輪郭を調整した出力とネオンカラーをミックス

オペレータTop→Composite を使って、映像をミックスします。

これで輪郭をネオンカラーにしたものが出来上がります。

もう、気持ち悪いですね。


## 白黒の映像にネオンカラーの輪郭線を被せる
オペレータTop→Over を使って、最初に作成した白黒映像にネオンカラーの輪郭を被せます。

ネオンカラーの世界が出来上がります。

# 出力結果

オペレータTop->MovieFileOutを追加し、動画ファイルに出力します。

出力結果がこちら。


![TDMovieOut0.0.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54259/ad1d9d95-391d-cdee-e227-0a6c9d7af770.gif)



# おわりに
今回はビジュアルプログラミングで、ネオンカラーの世界を作ってみました。


TouchDesigner は GUI で操作ができて、視覚的に確認できるのでとても早く楽です。

もちろんC++, Python などで書くことも出来ますし、MIDI連携しながら音楽と絡めつつ、Ableton Liveや3D映像と絡めてみたり、Unityと連携したりすることも出来ます。

冬休みの宿題として、TouchDesignerを触ってみてはいかがでしょうか？


明日は、 @yutakikuc さんが、最後をビシッと締めてくれそうです！

# おまけ

背景をモザイク状にした状態に、エッジ検出したものを組み合わせることもできますよ。

![__TDMovieOut0.0.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/54259/5600489b-41bc-005f-b846-9254468fc34e.gif)



# 参考リンク
https://qiita.com/sanokazuya0306/items/75eeb7009bf4eb5678bc
https://derivative.ca/UserGuide/Main_Page