見出し画像

デスクトップ璃奈ちゃんボードを作りたい

Val

みんな璃奈ちゃんボード好きですよね

アニガサキ２期の第２回SIF告知動画作ってるシーンのどこかで部室のパソコンのデスクトップがAEC璃奈ちゃんボードみたくなってる場面がありました。
公式がYouTubeに上げてる１話の25:35あたりです。


やりたいですよね
デスクトップ璃奈ちゃんボード

ほんとなら装着できるAEC璃奈ちゃんボードがほしいところですが、それは財団Bの方に任せておきましょう。でもあれ発表時の画像、表情の描画が正方形じゃなくて丸でしたよね。あれAEC璃奈ちゃんボードに似た別物では？ 書いてるの9月24日なんですが、まだ夏なんでしょうか。暑いですからね。
予約開始のときに四角になってないかなぁ……
書き終わりは10月3日になりました。まだですか？

それは一旦置いといて、デスクトップ璃奈ちゃんボードを作りたいんです


はじめに

私はソフトもハードも初心者なのでもっといい方法があるのかもしれませんが自分の思いつく形でやっていこうと思います。現代は便利になったものでGoogle先生や対話型AIなどわからないことを調べれば結構情報が出てたりします。しかも私には恵まれたことにソフトハード両面につよい友人がいます。そういうところにも頼りながら勧めていこうと思います。

さっそく

とりあえず、エクセルでボードの表情を作りました。１つの正方形の一辺が36ピクセルにしてあります。全体で21*26の正方形で構成されています

多分一番基本の顔  表示する媒体によって格子線の太さが違うのなんでかな？

これをデスクトップに表示させてみます。私のノートパソコンのディスプレイの解像度は1920*1080です。元画像では目の上に４マス、口の下に５マスの空白があるのを確認してください。実際にデスクトップに表示した画像がこちら

ズレる

ズレるというか、画像が画面全体に映るように自動で修正されたので画像中心を軸にして拡大された感じですかね。ちなみに画像をフォトか何かで開いて、実際のサイズに拡大すると同じように表示されます。ですが、思っていたものと違う表示がされていることも事実です。これではいくら顔を量産してもデスクトップ璃奈ちゃんボードにできません。このズレを計算に入れた上で顔を作らないといけないようです。では何がどのくらいズレるのかを調べましょう。そこでこんなものを用意しました。

目に悪い

これをデスクトップに表示させれば上下左右がどう切れるのか数えればわかる状態にできます。右端が黒いのは、背景と混同しないためです。この画像も72ピクセルの正方形21*26個で構成されています。これをデスクトップ背景に設定するとこんな感じになりました

相変わらず目に悪い

まず、横幅は変わっていません。問題の縦幅ですが、上が2マス、下は5マス削り取られている事がわかりました。まさか5マスも削り取られるとは。多分タスクバー非表示にしたら4マス消滅になりそうですね。つまり、描画領域は下の画像のようになるとわかりました


わかりにくい

公式でもAEC璃奈ちゃんボードは揺れの激しい代物です。マスの数が違うものから、格子のないものまで様々です。媒体によって髪色が変わるヨハネと同じくらい変わります。その中で最も多いマスの数が21*26だったのですが(バル調べ)、デスクトップ璃奈ちゃんボードを作る上では15*26でやったほうが良さそうですね。ただし、一番下まで作るとタスクバーとくっつくことは頭に入れておいたほうがいいでしょう。

一つわからないのが、72ピクセルを15個とか26個とか繋げてもPCのディスプレイの解像度の数と一致しないことです。どうして？ 誰か教えてください

ボードの手動量産

ここまで分かればあとは表情を量産するだけですね。私はExcelで作ってるので、一応やり方書いときますか

作り方

  1. まずセルの大きさを正方形にします。Ctrl+aで全選択したあとに行と列の長さ変えるとこ引っ張って72ピクセルにします

  2. ホーム→フォント→罫線から線の色をピンクにして格子を入れます。このときも全選択してます。ピンクはカラーコードの#E66CBCで指定してもいいでしょう

  3. 任意の場所で15*26になるように太枠で囲っておきましょう。なくても良いですが、やっといたほうがわかりやすいです。色は何色でもいいです

  4. 実際のAEC璃奈ちゃんボードの表情を見ながら顔を作ります。口から作るとやりやすいように思います。具体的にはセルを塗りつぶして表情を作っていきます。色は先程と同様のピンク(#E66CBC)です

  5. ピンクが2つ以上縦横に並ぶところに白で線を入れていきます。ホーム→フォント→罫線→線のスタイルを一番小さいのにして手作業で線を入れていきます。ここが一番きつかった

  6. ボードの背景(白色の部分)は実は背景透過になっているので白で塗りつぶす必要があります。面倒なのでマクロを組みました。マクロの使い方は書きませんが案外簡単なのでもし必要なら、下の方に貼っとくので、コピペして使ってください。多用するのでボタンにしておくと便利です

  7. 作ったボードをpngで保存しましょう。ボードの範囲を選択してCtrl+C→Ctrl+V→Ctrl→Uの順に押すと保存が楽です

  8. いい感じのフォルダにボードを複数枚保存して、設定からデスクトップ背景をスライドショーにするとまさにデスクトップ璃奈ちゃんボードって感じになります

Sub 色なしセルだけ選択()
    Dim sel As Range

    ' セル範囲をループ
    For Each sel In Selection
        ' 色なしだったら
        If sel.Interior.ColorIndex = xlNone Then
            sel.Interior.Color = RGB(255, 255, 255) ' 白色に変更
        End If
    Next sel
End Sub

番号付きリストの中にコード書けないんですね。それはそうと、そういう感じでボードを42枚作りました

結構疲れた

気づき

ここで気づくわけです。目と口、頬のありなしでパターンがあるな、と。特殊な目(画像でいうと31枚目や36枚目)を除いて全パターンの組み合わせがAEC璃奈ちゃんボードなのではないだろうか。璃奈ちゃんともあろうものが電子ボードを1枚1枚手作りするだろうか。自動で全パターンの組み合わせをする方法はないだろうか？

ボードの自動量産

電子で自動といえば、そう、プログラミングですね。頑張りましょう。今回はPythonを使っていきます。いろいろ調べてみたところ、PILというものを使えば自動量産ができそうです。正直何やってんのかわかんないんですが、プログラミングなんて必要なときに必要なものを調べて、コピペするくらいがちょうどいいですからね。やっていきましょう。
私のディレクトリパスはなんか知られるの嫌なのでパスは省きますが、コード内のパスは全部絶対参照で書いてるので、もしやろうと思う人がいたらそこだけ修正してください。

描画領域の分割

まずは、右目と左目、口を分ける必要があります。というのも、今回の自動量産の方法が、すでにある枠に目とか口とかを貼っていくような感じで行うからです。逆に言うと分割したものさえ作ってしまえば自動量産できるってことです。頑張っていきましょう。
今回用意した42枚の中で一番大きいもののマス目を計測します。目：縦最大６マス、目：横最大７マス、口：縦最大６マス、口：横最大１２マスとなりました。これを参考に描画領域を分割していきましょう。

この顔結構好き

分割線を入れるとこんな感じでしょうか。ピンクで分割線入れても見えにくかったので黒にしました。頬の部分は、口の形によっては同じ行にあるときもあるので口と一緒にしました。ということで分割した状態でpng保存しましょう。

バラバラになっちゃった

こんな感じですね。これをプログラムを使って組み上げていきます。

ファイル結合テスト

プログラムの説明を書くつもりはありませんが、璃奈ちゃんボードを組み上げるコードは以下の通りです。

from PIL import Image

im1=Image.open('右目1.png').convert('RGBA')
im2=Image.open('左目1.png').convert('RGBA')
im3=Image.open('口1.png').convert('RGBA')

def concat(im1,im2,im3,color=(0,0,0)):
    dst=Image.new('RGB',(im1.width+im2.width,max(im1.height,im2.height)),color)
    dst.paste(im1,(0,0))
    dst.paste(im2,(im1.width-1,0))
    dst2=Image.new('RGB',(max(dst.width,im3.width),dst.height+im3.height),color)
    dst2.paste(dst,(0,0))
    dst2.paste(im3,(0,dst.height-1))
    return dst2

concat(im1,im2,im3).save('Rina_chan_board.png')

これを実行すると以下のようになります

テスト用なので分割線が入っている

このコードでとりあえず璃奈ちゃんボードを組み上げることができることができるようです。あとはこれを使って量産していきましょう。具体的には、プログラムをループで回していきます

ループテスト

連番ファイルの取得をしながらループ回すのはやったことないのでこっちもテストしときましょう

import pathlib
import os

dir = pathlib.Path("CURRENT_DIRECTORY_PATH")
folder_names = ["right_eyes","left_eyes","mouths"]

files = []

for folder_name in folder_names:
    folder_path = pathlib.Path(os.path.join(dir,folder_name))
    files.append(list(file for file in folder_path.iterdir()))
    print(f"{folder_name}:{files[folder_names.index(folder_name)]}")

こんな感じに書けば回るようです。ChatGPT様々ですね。あとはさっきの結合のプログラムをこの中にコピペするだけですね！

自動璃奈ちゃんボード作成プログラム

コピペするだけで終わると思ってたのに、結構苦労しました。具体的に3日かかりました。まぁ1日中やってたわけではないんですけど。この記事を書き始めて9日目になっちゃいました。そして、3回くらいコード書き直してます。まぁ完成したので良しとしましょう。コードはこんな感じになりました

import pathlib
import os
from PIL import Image

def concat(im1,im2,im3,color=(0,0,0)):
    dst=Image.new('RGB',(im1.width+im2.width,max(im1.height,im2.height)),color)
    dst.paste(im1,(0,0))
    dst.paste(im2,(im1.width-1,0))
    dst2=Image.new('RGB',(max(dst.width,im3.width),dst.height+im3.height),color)
    dst2.paste(dst,(0,0))
    dst2.paste(im3,(0,dst.height-1))
    return dst2

count=0
dir = pathlib.Path("Desktop_Rina_Chan_Board")
folder_names = ["right_eye","left_eye","mouth"]

files = []

for folder_name in folder_names:
    folder_path = pathlib.Path(os.path.join(dir,folder_name))
    files.append(list(file for file in folder_path.iterdir()))
    #files[0]がright_eye,files[1]がleft_eye,files[2]がmouth

for i in range(0,len(files[0])):
    for j in range(0,len(files[1])):
        for k in range(0,len(files[2])):
            im1 = Image.open(files[0][i]).convert('RGBA')
            im2 = Image.open(files[1][j]).convert('RGBA')
            im3 = Image.open(files[2][k]).convert('RGBA')
            count+=1
            result_image=concat(im1,im2,im3).save(f"desktop_Rina_Chan_Board//board//Rina_Chan_board{count}.png")

動作確認は終わっています。めちゃ疲れました。慣れないことはやるものじゃないですね。あとは右目、左目、口でそれぞれ分割して、所定のフォルダに入れて、このコードを実行するだけです。
ようやく、これで、璃奈ちゃんボードが量産できる……
とりあえず分割した画像を用意しました。

左目
右目
口

さて、この状態でコードを実行してみましょう。

多すぎん？

思ってたよりたくさんのボードが出力されました。6975枚て……
でも変な顔もありますね。

問題点

どういう感情だろう？

うるうる？目を含めたのは間違いだったような気がしないでもないんですが、どうなんでしょうね。特殊目は省くべきか、コードを書き換えて左右が特殊目で揃ったときだけボード作るようにするか。いや、もう疲れたな。元気が出たら修正するかもしれません。
目とか追加したときに同じボードも作ってしまうことも問題ですね。同じ表情のボードをDeleteするコードを書けばいいんでしょうが、どうすればできるんだろう？今後の自分に期待します

解決案

上に挙げたような不思議な表情を消して、ボードを厳選していくのは現実的ではありません。というかやろうとして挫折しました。ではどうするか。コードを書き換えるしかありませんね。2つのコードを順に手動で実行していくことでボードを作成しましょう。
また、同じボードを出力してしまうことは杞憂でしたね。名前が同じなので、過去のものは上書きされます。どんどん追加しても無駄なものは一切ない。素晴らしい！

そんなこんなで、まず１つ目のコードです。

import pathlib
import os
from PIL import Image

def concat(im1,im2,color=(0,0,0)):
    dst=Image.new('RGB',(im1.width+im2.width,max(im1.height,im2.height)),color)
    dst.paste(im1,(0,0))
    dst.paste(im2,(im1.width-1,0))
    return dst

count=0

dir = pathlib.Path("Desktop_Rina_Chan_Board")
folder_names = ["right_eye","left_eye"]

files = []

for folder_name in folder_names:
    folder_path = pathlib.Path(os.path.join(dir,folder_name))
    files.append(list(file for file in folder_path.iterdir()))
    #files[0]がright_eye,files[1]がleft_eye

for i in range(0,len(files[0])):
    for j in range(0,len(files[1])):
        im1 = Image.open(files[0][i]).convert('RGBA')
        im2 = Image.open(files[1][j]).convert('RGBA')
        count+=1
        result_image=concat(im1,im2).save(f"eye{count}.png")

このコードでまず目を組み合わせます。右目と左目でチグハグになる表情も多いですからね。実行するとこんな感じになります。

十分多い

ここから相性の悪い目の組み合わせを消します。

不思議な組み合わせはこの段階で削除

36枚にまで減りました。全通りの組み合わせは抜けがないのがいいところですが、今回の場合は余分のほうが多かったみたいですね。そして、2つ目のコードです。

import pathlib
import os
from PIL import Image

def concat(im1,im2,color=(0,0,0)):
    dst=Image.new('RGB',(max(im1.width,im2.width),im1.height+im2.height),color)
    dst.paste(im1,(0,0))
    dst.paste(im2,(0,im1.height-1))
    return dst

count=0

dir = pathlib.Path("Desktop_Rina_Chan_Board")
folder_names = ["eye","mouth"]

files = []

for folder_name in folder_names:
    folder_path = pathlib.Path(os.path.join(dir,folder_name))
    files.append(list(file for file in folder_path.iterdir()))
    #files[0]がeye,files[1]がmouth

for i in range(0,len(files[0])):
    for j in range(0,len(files[1])):
        im1 = Image.open(files[0][i]).convert('RGBA')
        im2 = Image.open(files[1][j]).convert('RGBA')
        count+=1
        result_image=concat(im1,im2,).save(f"Rina_Chan_board{count}.png")

このコードで、目と口を合わせていきます。Excelから画像保存したときに、なぜか画像のサイズが変わってることがあったので、目は1874*505ピクセル、口は1874*577ピクセルにリサイズしてからコードを通してます。まず、口はこんな感じ。

21通りの口を用意しました

そして、コードを実行すると目と口が合わさります。こんな感じに。

3456種類の顔を用意しました

いい感じにボードを作ることができました。まぁまだ不思議な表情があったり、口一つに頬の組み合わせで5種類にしたりとかさ増し感ありますが、完成です。これで、ようやく、デスクトップが、璃奈ちゃんボードに！

さらなるボードを求めて

璃奈ちゃんボードって電子だけじゃないんですよ。というか紙ボードのほうが使用頻度高いです。そこで思うわけですね。1マスを小さくすれば紙ボードも電子で作れるんじゃね？と。難しいのが電子より紙のほうが描画が細かいことなんです。まぁ手書きだから当たり前ですよね。そして、紙ボードにあって電子ボードにないものがもう一つ。髪です。紙ボードには手書きで髪も書いてます。ややこしいですね。でも、やってみましょう。

と思ったのですが、ディスプレイは横長なのでどう考えても無理ですね。スマホの背景用に１個くらい作るか？どうしよう。
1マスを16ピクセルの正方形まで小さくしたらいい感じにできるかなぁと思ったのですが、無理でした。16ピクセルだと、117*68マスとかになるんですけど、私のヨワヨワノートPCだとExcelが落ちました。つらい。誰かツヨツヨPCください。

最後に

今回、やっとの思いでデスクトップ璃奈ちゃんボードを作ることができました。コード考えるのは疲れますね。自動とか言いながら下準備は手動で結構めんどくさかったり。表情を全自動で作るのは無理かなぁ。機械学習で顔を学習させればできたりするのかなぁ。まぁ私には無理ですね。
最後の最後に、なんでデスクトップ璃奈ちゃんボードを作ろうと思ったかについて書こうと思います。AEC璃奈ちゃんボードほしいなぁ。自作するしかないかなぁ。ディスプレイ搭載するなら表示させる表情の画像いるよな。作るか。です。軽率ですね。AEC璃奈ちゃんボード自作勢の先駆者方とのコネクション作れないかなぁ。愚行ですね。Twitter(私はそう呼び続ける)のリプ飛ばすのは公式アカウント宛でもなかなかできないのが私です。いま3D CADの勉強してます。独学つらいです。ラズパイとか電子系の知識ゼロだからなぁ。無理かも。誰かDMかなんかで教えてください。



なんやかんや言ってますが、皆さんもデスクトップ璃奈ちゃんボード作ってみてください。顔のデータを配布する気はありません。作るのが楽しいですからね。

お読みいただきありがとうございました。


いいなと思ったら応援しよう！