「たのしいお絵描き」を作った【描くと何かが現れる】

たのしいお絵描きのアイキャッチ
謎ノ美兎技術部 / NZM-004

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

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

ミコンスキー

そう! 丸でも波線でも落書きでも大丈夫。手を止めて3秒待つと、線が動き出すよ。

目次

遊び方

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

線の長さは変わらないから、少しだけ描くと顔の一部だけ、たくさん描くと全身ができあがるよ。

ボタンの説明

ボタンはたらき
COLOR / SIZEペンの色(6色)と太さ(3段階)。描いた線の色は変形してもそのまま残ります
待ち時間手を止めてから変形が始まるまでの時間。「自動で変形しない」も選べます
すぐ変形!待たずに変形を始めます
続きを描く変形した形を残したまま、線を描き足せます。手を止めると全体がもう一度変形します
1つ戻す / ぜんぶ消す最後の線を消す / 全部消してやり直す
お手本目標の線画(一筆書き)を薄く表示します

しくみ

動きは3つのルールでできています。

① 線は切らない:一筆書きにつなぎ直す

写真からなぞった謎ノ美兎の線画は、もともと94本のバラバラな線です。これを顔のパーツから順に、移動が短くなるように1本の線につなぎ直してあります。描いた線は、この1本の上の続いた区間にそのまま乗るので、途中で切れません。

バラバラになぞった線画を、顔から順に1本の線につなぎ直すなぞった線画(94本)1本につないだ線=つなぎ線(変形が進むと細く薄くなる)

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

ミコンスキー

赤い点線の「つなぎ線」は、変形が進むと細く薄くなるからだよ。線は1本のままだけど、目にはパーツごとに見えるんだ。

② 長さを変えない:描いた量=完成度

描いた線を約4pxごとの点に分けて、一筆書きの線画の上に同じ数の点を顔から順に割り当てています。線が伸び縮みしないので、描いた量がそのまま完成度になります。

描いた線の長さだけ、謎ノ美兎の線画が顔から順に埋まる少しだけ描く完成度 15%もう少し描く完成度 50%たくさん描く完成度 100%赤い波線=描いた線の長さ。同じ長さだけ、顔から順に埋まる

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

ミコンスキー

そう! 少しだと顔だけ、たくさん描くと体まで埋まるよ。100%を超えた分は、絵の上にもう一周重なっていくんだ。

③ なめらかに動く:変形とずれを分けて計算

1本の線はまとまって動き出し、ゆっくり加速してゆっくり止まります。2本目以降は少しずつ遅れてスタートするので、線が順番に絵になっていきます。触ったときは、変形の動きとは別に「押しのけたずれ」だけをバネで戻しています。

線は時間をずらしてなめらかに動き、触ってずれた分はバネで元に戻る線の動き方触ったとき目標元時間 →1本目2本目ゆっくり加速して、ゆっくり止まる本来の位置ずれ押しのけた分だけバネで戻る
ミコンスキー

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

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

ミコンスキー

考え方は近いよ! あっちは「色のマスを1つも足さず消さず並べ替える」、こっちは「線の長さを変えずに置き直す」。どっちも、元の材料だけで謎ノ美兎を作っているんだ。

注意

  • 目標の線画は、画像から自動でなぞった試作用のものです。手の周りなど、線が粗いところがあります。
  • 謎ノ美兎(月ノ美兎さん)のファンとして作った非公式の作品です。
  • スマホでもPCでも遊べます。描いた絵はどこにも保存・送信されません。

いかがでしたか?

いかがでしたか?と大きく表示されるパチンコ風アニメーション

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

ミコンスキー

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

たのしいお絵描きのアイキャッチ

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次