描いた線が、しばらくするとぐにゃぐにゃ動きながら「謎ノ美兎」の線画に変わっていくお絵描きおもちゃを作りました。下のキャンバスで、そのまま遊べます。

なにを描いても謎ノ美兎になるの?



そう! 丸でも波線でも落書きでも大丈夫。手を止めて3秒待つと、線が動き出すよ。
遊び方
- キャンバスに好きな線を描きます。描いた線はぷるぷる揺れ続けます。
- 手を止めて待つと(初期設定は3秒)、線が動き出して、顔のパーツから順に謎ノ美兎の線画へ寄っていきます。待てないときは「すぐ変形!」を押します。
- 変形中や変形後に画面を触ると、線を押しのけて邪魔できます。指を離すと線は戻っていきます。
- 右上のスタンプが完成度です。「続きを描く」で線を描き足すと、完成に近づきます。



線の長さは変わらないから、少しだけ描くと顔の一部だけ、たくさん描くと全身ができあがるよ。
ボタンの説明
| ボタン | はたらき |
|---|---|
| COLOR / SIZE | ペンの色(6色)と太さ(3段階)。描いた線の色は変形してもそのまま残ります |
| 待ち時間 | 手を止めてから変形が始まるまでの時間。「自動で変形しない」も選べます |
| すぐ変形! | 待たずに変形を始めます |
| 続きを描く | 変形した形を残したまま、線を描き足せます。手を止めると全体がもう一度変形します |
| 1つ戻す / ぜんぶ消す | 最後の線を消す / 全部消してやり直す |
| お手本 | 目標の線画(一筆書き)を薄く表示します |
しくみ
動きは3つのルールでできています。
① 線は切らない:一筆書きにつなぎ直す
写真からなぞった謎ノ美兎の線画は、もともと94本のバラバラな線です。これを顔のパーツから順に、移動が短くなるように1本の線につなぎ直してあります。描いた線は、この1本の上の続いた区間にそのまま乗るので、途中で切れません。



線がつながってるのに、ちゃんとパーツごとに見えるのはなんで?



赤い点線の「つなぎ線」は、変形が進むと細く薄くなるからだよ。線は1本のままだけど、目にはパーツごとに見えるんだ。
② 長さを変えない:描いた量=完成度
描いた線を約4pxごとの点に分けて、一筆書きの線画の上に同じ数の点を顔から順に割り当てています。線が伸び縮みしないので、描いた量がそのまま完成度になります。



じゃあ、いっぱい描くほど早く完成する?



そう! 少しだと顔だけ、たくさん描くと体まで埋まるよ。100%を超えた分は、絵の上にもう一周重なっていくんだ。
③ なめらかに動く:変形とずれを分けて計算
1本の線はまとまって動き出し、ゆっくり加速してゆっくり止まります。2本目以降は少しずつ遅れてスタートするので、線が順番に絵になっていきます。触ったときは、変形の動きとは別に「押しのけたずれ」だけをバネで戻しています。



邪魔しても変形が止まらないのは、この2つを別々に計算しているからなんだ。



ピクセルの席替えと似てる?



考え方は近いよ! あっちは「色のマスを1つも足さず消さず並べ替える」、こっちは「線の長さを変えずに置き直す」。どっちも、元の材料だけで謎ノ美兎を作っているんだ。
注意
- 目標の線画は、画像から自動でなぞった試作用のものです。手の周りなど、線が粗いところがあります。
- 謎ノ美兎(月ノ美兎さん)のファンとして作った非公式の作品です。
- スマホでもPCでも遊べます。描いた絵はどこにも保存・送信されません。
いかがでしたか?


描いた線の長さを変えずに、謎ノ美兎の一筆書きの上へ置き直すおもちゃを作りました。少し描けば顔だけ、たくさん描けば全身ができあがるので、ついつい描き足したくなります。



完成度100%になったら、ぜひスクショで見せてね! 動かない環境があったらコメントで教えてね。










コメント