複数のM5CameraでWigglegramカメラを作ってみた part1

## こちらの記事を見て自分も作ってみたいと思いました！

https://elchika.com/article/1692f70c-a942-4158-8445-d985fb74739d/

Wigglegramカメラという用語が初耳で面白そう

## 調査

* http://www.jtt.ne.jp/products/original/3dcamera/
    * 以前自分が作ったVRカメラと呼称したカメラと同じようなことしている
    * 2枚の画像だがその差分がすごくスムーズ
    * https://akiba-pc.watch.impress.co.jp/docs/news/news/1094171.html
        * 3万くらいしてる
        * M5Camera二個だと4000円しないくらいですが…

[![Image from Gyazo](https://i.gyazo.com/4982454326012e39c9624180de670841.gif)](https://gyazo.com/4982454326012e39c9624180de670841)

## 要件、目標
* いったん同時っぽくなくていいのでサンプルコードの「CameraWebServer」のcaptureの機能でやってみる
* GIF作ってみる
    * なれてるNode.jsでやる
* 2枚の画像差分を埋めてくれるようななにかも調べてやってみたい
* おまけで動画挑戦

## 環境、使ったもの
* M5Camera 4台（持っている分だけやる）
* 固定台
    * 100均　有孔ボード
    * 100均　有孔ボードにぶら下げるS字フック
* Node.js v14.15.0
* Mac OS 11.4

[![Image from Gyazo](https://i.gyazo.com/68f96df9f13465f248808637e7775793.png)](https://gyazo.com/68f96df9f13465f248808637e7775793)

[![Image from Gyazo](https://i.gyazo.com/b91127836960e31188eee2aebe93a9e6.gif)](https://gyazo.com/b91127836960e31188eee2aebe93a9e6)

完全に固定しないS字フックを使うことで自然のスタビライザー

[![Image from Gyazo](https://i.gyazo.com/aee352561702b67229da636a752bcabf.png)](https://gyazo.com/aee352561702b67229da636a752bcabf)

のちにケーブルをつけたら張力でバラバラになったので、結局テープで固定…

これも有孔ボードの有孔部分を有効的に使っていきたい

参考記事のように3Dプリンタできたらいいなぁ

レゴでもいいのか…探すか

## 作ってみる

### M5Camera側

https://github.com/tkyko13/M5CameraMDNS

自分が作ったMDNSに対応させたM5Camera用のプラグラムです

M5Cameraと同じLAN内であれば、「m5camera_1.local」、「m5camera_2.local」などでアクセスできるようにしていきます

最初にあったコードに追記する形なのでできることは変わりません

### Node.js側

#### まず2枚撮影して画像保存

```js
const axios = require('axios');
const fs = require('fs');

axios.get('http://m5camera_1.local/capture', {
  'responseType': 'arraybuffer',
  'headers': {
    'Content-Type': 'image/png'
  }
}).then(function (res) {
  fs.writeFile('cam1.png', res.data, (err) => {
    if (err) console.log(err);
  });
});
axios.get('http://m5camera_2.local/capture', {
  'responseType': 'arraybuffer',
  'headers': {
    'Content-Type': 'image/png'
  }
}).then(function (res) {
  fs.writeFile('cam2.png', res.data, (err) => {
    if (err) console.log(err);
  });
});
```

![cam1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/49f0793f-3744-686b-547d-c955334b3c11.png)
![cam2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/76572/25d23da8-4447-ab09-cb3b-f023530329b6.png)

#### 動的じゃなくてもいったんこの2枚をGIFにする

https://syncer.jp/gif-maker

こちらのサービスを利用する

[![Image from Gyazo](https://i.gyazo.com/4c11b9ef866e260a021d28da4ad450ff.gif)](https://gyazo.com/4c11b9ef866e260a021d28da4ad450ff)

#### 4枚でやってみた

[![Image from Gyazo](https://i.gyazo.com/95b6e89a988c41a874d66bce4f42ec8f.gif)](https://gyazo.com/95b6e89a988c41a874d66bce4f42ec8f)

横に移動した感はんぱねぇー

設置するカメラをすこし内側にするとよいのかなぁ

でも撮影するものの距離によって角度違うよなぁ

[![Image from Gyazo](https://i.gyazo.com/6d99890fa0e06fb1263351c45553493f.png)](https://gyazo.com/6d99890fa0e06fb1263351c45553493f)

↑現状

[![Image from Gyazo](https://i.gyazo.com/b0ed1e153f2720dc464615afabe55fd3.png)](https://gyazo.com/b0ed1e153f2720dc464615afabe55fd3)

↑被写体が近い場合、被写体に向けたいので外側のカメラの角度が大きくなる

[![Image from Gyazo](https://i.gyazo.com/6bca40aac288a1c8640e39a51b032670.png)](https://gyazo.com/6bca40aac288a1c8640e39a51b032670)

↑被写体が遠い場合は逆

記事一番上の参考サイトでは並行に並べているが、遠い被写体を撮っているためいいっぽい

けど、複数枚写真から被写体を中心としたトリミングをすることで、撮影後に調整できるのではないか

また、距離も後から決められそう！よさそう！

であれば、広角の魚眼レンズバージョンがよかったか

## いったん結果

遠いものを撮影する用にするか、被写体までの距離を決めカメラの角度をつけるか、トリミングなど撮影後に処理をすることで色々な距離に対応するか…

一番簡単な`被写体までの距離を決めカメラの角度をつける`　これで次回試してみようと思います