はじめに（背景）

はじめに、この記事の内容を書いた経緯を軽く記載します。

ネコのイラストを使ったアニメーション

以前、ネコのアイコンのジェネレータで生成した画像と、p5.js の描画を組み合わせて、以下のような試作を行ったことがありました。

その当時、さらに AI・機械学習系の処理（MediaPipe JavaScript で実装した顔のキーポイント検出）と、p5.js での描画を組み合わせて、自分の表情に簡易に連動させるようなこともやっていました。

●p5.js で猫のイラストの VTuber【MediaPipe Holistic を使った動き連動を実装】（ver.4） - YouTube
https://www.youtube.com/watch?v=rSHwoGAMbTM

他の方の作品での目・口のパーツを使ったアニメーション

またその後に見かけた以下の記事で出てきていたような、図形ベースで描画した目と口を使った表情の変化を、p5.js などの描画で作りたいと思ったことがありました。

●あなたのデスクにかわいい相棒！スマートペンスタンドを作る | fabcross
https://fabcross.jp/category/make/20230509_smart_pen_stand.html

今回の記事で書くこと

上記の話とは別に、直近でモノづくり系の展示イベントに個人で作品展示を行う予定があり、そこで使えそうな内容をいくつか考えていこうと思っている状況があります。

その中で上記の流れを思い出し、何らか展示イベントの来場者とのインタラクションができる、上記の要素を使ったキャラクターを作れたら面白そうかと思いました。

それで、展示作品の試作に使えそうな情報を自分用にまとめたのが、今回の記事です。

調べてみた情報やその他の情報など

ちびキャラ（ミニキャラ、デフォルメキャラ）の描き方

探してみた情報の 1つに、ちびキャラ（ミニキャラ、デフォルメキャラ）の描き方のノウハウがあります。

適当に検索している中で、よく名前を見かけるペイント系アプリの 1つ「MediBang Paint」の関係で、公式が記事を出していそうなのが分かりました。

●ちびキャラ site:medibangpaint.com - Google 検索
https://www.google.com/search?q=%E3%81%A1%E3%81%B3%E3%82%AD%E3%83%A3%E3%83%A9+site%3Amedibangpaint.com

●【初心者向け】ちびキャラの顔の描き方【目や髪を描くコツも】 | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use/2021/10/how-to-draw-a-chibi-characters-face/

当初、上記の記事に行き当たったのですが、さらに見ていくと以下の記事一覧のページがあるのも分かりました。

●ミニキャラの描き方の記事一覧 | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use_tag/how-to-draw-a-mini-character/

記事の内容をピックアップしてみる

上記の記事一覧から、自分が気になった記事と気になった箇所を掲載してみます。

まずは、以下の表情に関する記事です。

●デフォルメキャラの表情を描いてみよう | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use/2021/10/how-to-draw-a-deformed-characters-facial-expression/

当初、探そうとしていたものとしては想定していなかったですが、「漫符」の活用の話が出てきていて、これも活用できそうです。

次はこちらです。

●かわいいマスコットキャラを描いてみよう | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use/2022/01/how-to-draw-cute-mascot-characters/

シンプルな図形をベースに発展させる、というところは、あまり複雑すぎない描画を考えるのに良さそうでした。

以下のような段階と、さらに色付けや詳細化をした段階のものが掲載されていましたが、プログラミングの描画で扱う際は工夫が必要そうかもしれません。
（ベースの複雑性の高いところは画像にして、他を動的な描画ベースのものにする、というのでも良いかもですが）

以下も気になる部分があった記事です。

●絵が苦手でも描ける！ゆるキャラ・ゆるイラストを描いてみよう！ | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use/2021/02/easy-wat-to-draw-mascots/

以下のあたりは、シンプルな描画で扱う時に気を付けるポイントなど、役立ちそうです。

あと、以下も上記の要素を使った具体例として、見てみるのが良さそうでした。

●ゆるキャラ風のイラストを描くコツ！ | MediBang Paint – 無料のイラスト・マンガ制作ツール
https://medibangpaint.com/use/2020/03/tips-for-drawing-mascots/

アイコンジェネレーター

さらに、冒頭の試作で使われていただいていた、以下のジェネレーターをあらためて見てみました。

●猫アイコン作成アプリ -CHARATねこメーカー-
https://charat.me/nyanko/

パーツのリストを見てみる

とりあえず、目と口は使いたい必須パーツと考えているため、その一覧を見てみます。

以下は目のパーツ一覧ですが、すごい数のバリエーションです。

以下が口のパーツです。

目・口のアニメーションについて

また、目や口を閉じたり開いたりというアニメーションについて、こつが書かれたページをメモしてみます。

●ブログ記事「p5.jsでまばたきアニメーションをつくったよ」投稿しました｜reona396
https://note.com/reona396/n/n2d266f2ecf9a

●listeningside sideA
http://listeningside.net/a_side07.html

上記 1つ目の記事は、冒頭の作品を作るきっかけにもなった記事です。

おわりに

とりあえず、試作に活かせそうな情報をいくつか見つけられたような感じがします。

とりあえず手を付けてみる

「とりあえずベースになるものを作らねば」と思い、p5.js で少し作り始めてみました。

【追記】気になった情報

記事を公開した後に見かけた情報で気になったものを追記します。

画像生成AI でのプロンプト

以下は、ちびキャラ／ミニキャラ／デフォルメキャラではない話ですが、目の見た目にどのような特徴を持たせると、特定の感情を表現できるのかという作例のヒントを得られる話になるかもしれないと思い、追記しました。

●画像生成AIの目のプロンプト集（効果のあったものだけ画像あり）｜はいぱーさんかく
　https://note.com/vivid_walrus6061/n/n622e88873b1f