# 墨流し制作記録 #4｜筆を動かし、水面を映す

> Log — IE3 / https://ie3.jp/log/suminagashi-4
>
> Published: 2026-09-22

水路や配管を作るのと並行して、ソフトウェアにも手を入れていた。筆を動かすロボットアームの操作と、水面を撮って別の画面へ送る仕組み。その両方にVueを使っている。

## 操作画面はちゃんとVueで

筆を動かすのはmyCobot 280 M5。Vue Fesなので、操作画面はちゃんとVueで作った。NuxtとVueの画面からPythonのFlaskで作ったAPIを呼び、pymycobotというライブラリでアームと通信する。

画面では関節を動かしたり、動きを記録・保存して再生したりできる。6つの関節角度を数字だけで見ても筆がどこへ向くかはつかみにくいので、Three.jsで姿勢を3D表示するようにした。

![Vueで作った関節角度と速度の操作画面、右側にアームの3D表示](https://cms-media.ie3.jp/suminagashi-vue-control-t2jnbz5b.jpg)

    _操作画面。掲載用にローカルで起動したもの。実機は未接続。_

## 手で動かして、姿勢を記録する

まずサーボの保持を解除し、アームを手で動かす。筆の位置が決まったら保持を戻し、そのときの6つの関節角度を保存する。実物を動かしながら、筆をどこへ運ぶか決めていく。最初から角度を数字で決めるのではなく、手で探した姿勢をあとからデータにする。

姿勢をひとつずつ残すほか、設定した間隔で連続記録する画面も作った。速度や各ステップの時間も含めてJSON形式で保存し、順に再生するとひとまとまりの動きになる。

![手で動かしたアームを連続記録する画面](https://cms-media.ie3.jp/suminagashi-vue-recorder-nw1qvnze.jpg)

    _連続記録の画面。記録する間隔を設定できる。_

## 動きに名前をつけて残す

保存した動きにはichimonji、hane、osoujiといった名前がついている。たとえばichimonjiは37個の姿勢の連なりだ。関節の角度や速さを並べたデータも、名前がつくとひとつの動きとして扱える。

画面でパターンを選び、まずは3Dで動きを確認する。繰り返し再生するときは、順番やパターンの間の待ち時間も設定できる。

![保存した動作パターンを選ぶVueの画面](https://cms-media.ie3.jp/suminagashi-vue-patterns-wn7dun6o.jpg)

    _保存済みの動作データを読み込んだ画面。_

保存した9種類の動作データ保存名記録された姿勢dot53姿勢hane44姿勢ichimonji37姿勢marumaru37姿勢oasobi50姿勢osouji31姿勢straight38姿勢stright162姿勢zigzag35姿勢ichimonjiの最初の1ステップを見る

```
{
  "angles": [
    -90,
    46.14,
    41.22,
    90.79,
    -86.13,
    8.08
  ],
  "speed": 40,
  "duration": 0.53,
  "description": "Step 1"
}
```

![床で転がりながら動くロボットアーム](https://cms-media.ie3.jp/suminagashi-experiment-arm-6pc8halg.gif)

    _床で転がりながら動くアーム。なかなかシュール。_

## 作った動きを本体へ渡す

PCから動かす仕組みとは別に、myCobotのM5Stackだけで再生するプログラムも作った。Vueの画面で保存したJSONを、PythonでC++の配列に変換する。それを本体のプログラムへ組み込めば、USB接続なしでも再生できる。

Vueの画面動きを記録・保存→JSON角度・速度・時間→Pythonで変換C++の配列を生成→M5Stack本体だけで再生画面で作った動作データを、本体のプログラムへ渡す。ホーム位置や再生設定も一緒に変換する。動きを調整するたびに、本体側の数字を手で書き直さずに済む。作るときは画面を使い、再生するときは本体だけ。その間をデータでつないだ。

再生するときには、実物が動く時間も考える必要がある。コードはすぐ次へ進めても、アームはまだ移動中かもしれない。次の角度を送る前に、動作が終わるのを待つようにした。

本体側では50ms間隔で状態を見て、停止を3回連続で確認したら完了とする。待ち続けないよう、待機の上限は30秒にしている。

ランダム再生、一時停止と再開、ホーム位置へ戻る操作も用意した。画面には「SUMINAGASHI」の文字を載せて墨流し仕様に。水路や配管と並行して、こういうところにも手を入れていた。

![墨流し仕様にしたロボットアーム本体の画面](https://cms-media.ie3.jp/suminagashi-process-4504-agjqcc6s.jpg)

### 筆を持たせる部品も作る

アームの先端には筆ホルダーを取り付ける。制作データには12、15、17と名前の違う形状が残っている。アタッチメントのCADは、小林竜太さんの[「自作myCobot」（ProtoPedia）](https://protopedia.net/prototype/2116)も参照した。

ほかにもホースを支える部品や排水部品、カメラやRaspberry Piを固定する部品など、小さな部品をいくつも作っている。

## 紙への転写を、デジタルで

水面の模様を写真や動画にすることで、紙への転写をデジタルで行う、という考えもあった。見ている間にも流れていく模様を、映像として残したい。

その水面をVue Fesのサイネージへリアルタイムで届けようと、カメラ用の画面もVueで作った。

### WebRTCやHLSで映像を送る

カメラの送信も、いくつかの構成を試していた。ブラウザ同士をWebRTCでつなぐ版では、Socket.IOで接続に必要な情報を交換し、映像そのものはWebRTCで送る。PythonでUSBカメラを読み取り、aiortcで送る版も作った。

MediaMTXを使う構成では、カメラの取り込みと配信をそちらに任せる。Vueには、WebRTCで受け取る画面と、HLSの映像をhls.jsで再生する画面を用意した。

![カメラ配信用に作ったWebRTC、aiortc、MediaMTXの3構成](https://cms-media.ie3.jp/suminagashi-camera-streaming-3thyaf1f.png)

    表示する映像の拡大・位置・反転もVue側で調整する。その設定をURLから読み込めるようにして、同じ見せ方を再現できるようにした。接続が切れたときの再接続処理も入れている。映像を送るところから、画面にどう収めるかまで作っていた。

## 繰り返す動きと、一度きりの模様

記録しているのは関節の角度や速さで、水面の模様そのものではない。同じパターンを再生しても、水の状態や筆に残る墨の量まで同じにはならない。前に流れた水の影響も残っている。

アームには同じ動きを繰り返してもらい、その先で毎回変わる模様をカメラで映す。
ロボットに任せたのは墨を届けるところまでで、描いているのは水と墨だ。

## ものづくりの相談も、ぜひ

僕ら[IE3](https://ie3.jp/about/)は、デザインや映像、ソフトウェア、ハードウェアを組み合わせて体験をつくるチームです。

アイデアを形にする0から1も、すでにあるものを育てて広げる1から100も。一緒に考え、手を動かします。
まだ「こんなことができたら」という段階から、気軽に相談してもらえるとうれしいです。

[IE3に相談する](https://ie3.jp/contact)

## 墨流し制作記録シリーズ

- [墨流し制作記録 #1｜墨流しを、動き続ける作品に](https://ie3.jp/log/-1)
- [墨流し制作記録 #2｜水を捨てずに、墨だけ捨てたい](https://ie3.jp/log/-2)
- [墨流し制作記録 #3｜幅500mmに、水と墨を流す](https://ie3.jp/log/-3500mm)
- [墨流し制作記録 #4｜筆を動かし、水面を映す](https://ie3.jp/log/suminagashi-4)