2020-12-15

CSSチュパカブラチャレンジ

こちらはD@NPEN Advent Calendar 2020 15日目の記事です。

adventar.org

前日12/14はうしぺんくんのミリオンライブのアニメ - waka_pen_cowのブログの記事になります。

さて、タイトルを見て思ったことでしょう。

CSS チュパカブラチャレンジって何？？？？？？

1つずつ説明していきます。

今年の4月ごろにちょっとしたお遊びが流行りました。

twitter.com

このハッシュタグや流行り元のQiita記事を見れば分かると思いますが、要は「CSSでつくった図形を組み合わせてぴえん🥺を再現しよう」ってことです。

そしてチュパカブラ。これはミリシタが生み出したクリーチャー(マスコット)です。

f:id:kitos_ma09:20201215142810j:plain

今回はこのチュパカブラをCSSで再現しよう！という記事です。

ただ、1から作ると結構時間がかかりそうだったのでドット絵という形を取ることにしました。お許しを。

・流れ

① 元となる絵を用意する。

② それをドット絵に変換する。

③ 各ピクセルの情報をCSSに移して表示する。

① 元となる絵を用意する。

f:id:kitos_ma09:20201215144208j:plain

② ドット絵に変換する。

import cv2
import csv
import numpy as np


# 画像の色数を減らす
def Dec_color(src, K):
    # 列数を3にし、行数は自動推測
    # kmeansが読み込むfloat32型に変換
    data = np.float32(src.reshape([-1, 3]))

    # 繰り返し処理の終了条件を定義
    criteria = (cv2.TERM_CRITERIA_EPS + cv2.TERM_CRITERIA_MAX_ITER, 10, 1.0)

    # K-meansクラスタリング
    ret, label, center = cv2.kmeans(
        data, K, None, criteria, 10, cv2.KMEANS_RANDOM_CENTERS)

    center = np.uint(center)

    res = center[label.flatten()]

    # 配列の次元数を元に戻す
    return res.reshape((src.shape))


# モザイク処理
def Mosaic(img, alpha):
    # 画像サイズとチャンネル数
    height, width = img.shape[:2]

    # 縮小 → 拡大でモザイク加工
    # 画像サイズは64*64にする
    img = cv2.resize(img, (int(width*alpha), int(height*alpha)))
    img = cv2.resize(img, (64, 64), interpolation=cv2.INTER_NEAREST)

    return img


# ドット絵化
def Pixel_art(img, alpha, K):
    # モザイク処理
    img = Mosaic(img, alpha)

    return Dec_color(img, K)


# 入力画像読み込み
img = cv2.imread("ringoro.png")

# ドット絵化
# Kの値で使われる色の数が変わる
dst = Pixel_art(img, 0.3, 6)

# 各ピクセルの色情報をCSVへ書き出し
with open('color_rgb.csv', 'w', newline="") as f:
    writer = csv.writer(f)
    writer.writerows(dst)

これでCSVにRGB情報が記載されました。

③ CSSに落とし込む。

これはいくつかやり方があります。<table>で作っていくのもアリっちゃアリなんですが64*64と言えどしんどそうです。

そこでSASS(SCSS)マップという超便利な方法でやっていきます。SCSSはCSSの拡張版みたいなもので通常のCSSより効率的に書くことができる構文です。

各色を特定の文字に置き換えて、それらを並べるだけで描けちゃうスグレモノなんですね～

(Resultの表示倍率を0.5にすると全体が映るはずです)

See the Pen SCSS_chupacabra by まだい (@kitos_ma09) on CodePen.

CodePenの埋め込みサイズが小さいので分かりにくいかもしれませんが、"a"~"f"までのアルファベットが64*64個ぎっしり書かれています。これにて右に出ているようなチュパカブラが完成しました。

本来のチャレンジとは多少ズレてしまいましたが(S)CSS(ドット絵)チュパカブラチャレンジ成功です！！

・おまけ

デビ太郎

See the Pen SCSS_devil by まだい (@kitos_ma09) on CodePen.

りんごろう

See the Pen qBarXdG by まだい (@kitos_ma09) on CodePen.

・感想

突貫で書いた記事をここまで読んでくださりありがとうございます。

それとOpenCVはBGRがデフォなの混乱するのでやめて欲しいです。

明日はyayaさんのナチュラルハーモニーの記事です。お楽しみに！

それでは。

・参考記事

Fun Times With CSS Pixel Art
【Python/OpenCV】写真・動画をドット絵風に変換

2020-12-10

ようこそミリシタへ。~デレミリ3Dモデル比較~

こちらはD@NPEN Advent Calendar 2020 10日目の記事です。

adventar.org

前日12/09は腹いーたーさんのデレ大阪2日目の感想 - hara_eaterのメモ書きの記事になります。

先月に行われたデレミリコラボの第一弾「Legit Crossover」お疲れ様でした！初の越境コラボということで運営の本気度が伝わってくるイベントでしたね。

f:id:kitos_ma09:20201208151653p:plain

目玉はなんといってもフレデリカ・志希の新規モデルです。

f:id:kitos_ma09:20201208152234j:plain

すげぇ～～！！！デレの子がミリシタで動いてる！！！

わざわざ新しく3Dモデルを製作してくれるなんてミリシタ運営くんスゴイ、スゴすぎる

というわけでこの記事ではデレステとミリシタのフレデリカ・志希両モデルの比較を行っていきます。

・顔

まずは真っ先に視界に飛び込んでくる顔、印象が決まります。めちゃくちゃ重要。

・フレデリカ

f:id:kitos_ma09:20201209194740p:plain — 左: ミリシタ右:デレステ

一番の違いは「目」ですね。

ミリシタは卵型、デレステはまん丸。虹彩の位置や割合も異なっていて、目だけ見たらちょっと別人かと思ってしまいそうです。それだけデレデリカは「眼力」が凄い。なんだか狙われているような感覚に襲われます。

それでもやはりミリモデルでもフレデリカと認識できるのは髪、輪郭、まつ毛などの細部へのこだわりがあったからでしょう。顔のパーツ配置もほとんど一致しておりミリシタの画風に上手く落とし込まれていると思います。

・志希

f:id:kitos_ma09:20201209194807p:plain — 左: ミリシタ右: デレステ

これまた凄いのが出来ましたね。

デレ志希は丸い顔や目、顔のパーツが中央寄りであったりと童顔(ドール)の特徴が多くあります。それに対しミリ志希は鼻の位置が高く、口との距離も離れているので全体的に「お姉さん」度が強い印象です。「かわいい」よりも「美人」に振った感じ。髪のテクスチャがデレよりもシンプルな分、アイシャドウや下まつ毛が全面に押し出されてバッチリお目々になってます。

デレミリ両者ともに2Dのイラスト再現を重視しています。イラスト的に見えるアウトラインを出すために、モデルの反転ポリゴンを描画するという手法を取っています。これに加えてデレステは明度の調整をすることでより「ぽく」見せることに成功しました。ですがこれはあくまでモデルのMV特化型の性質をもつデレステの話。

一方でミリシタはセルルックに徹したモデルづくりをしています。コミュを始めとする多く場面で使用するため日常に溶け込むようになっているんですね。なので口や髪のハイライト、影をアニメ調にしているわけです。目なんてまるでアニマスみたい。

ところで志希の髪のボーン数どうなっているんでしょうね？CEDEC2020の資料によるとミリシタで一番多い紗代子でも50本となっています。志希は毛先が細かく分かれていて、加えてうねっているので結構な数になっていそうですが....

f:id:kitos_ma09:20201208172112p:plain — 左: 紗代子右: 志希

・体

ポリゴン数において最も違いが出ているのは体部分です。

デレステは約7000ポリゴンに対しミリシタは5500ポリゴンでつくられています。(ちなみにミライアカリは胸だけで2万ポリゴンあるらしい)

数が多ければそれだけ造形できるので華やかに見えますが、スマホで動く限界もあるのでテクスチャで補完しています。

f:id:kitos_ma09:20201209211457p:plain — 左: ミリシタ右: デレステ

衣装【レイジーレイジー】がデレステに実装されていないので厳密に比較することはできませんが、装飾の違いは明らかでしょう。宝石や真珠などを細かく作っているデレのモデル凄いですが、レースや生地の質感をテクスチャでカバーして上手く見せているミリシタのモデルも凄いです。

先程の「デレステのモデルはMV特化型」というのがこのこだわりに繋がっているのだと思います。カメラワークがアイドルに寄ることが多いためどれだけリッチに見せられるかが重要なポイントです。

ミリシタはその点どアップで描画することが少なく、どちらかと言うとステージにいるアイドル全体に目がいくことが多い印象です。こうした最適化の積み重ねのおかげで最大39人でのライブが実現したんですね。(デレは最大15人)

ミリシタがどのように最適化したか気になる方はこちら↓

【Unite Tokyo 2018】なんとっ！ユナイト！ミリシタをささえる『ＡＫＡＮＥ大作戦』とは？

・まとめ

デレキャラのミリシタへの越境は革新的なことでした。デレユーザーも割と好意的で、ミリシタも普段よりイベントアクティブ数が3割ほど増加。お互いにゲームの新たな拡張ができたということで非常によい足掛かりになったと思います。

来年2月にはD/Zealが出張してコラボイベントが開催されます。どの程度の内容なのかはまだ不明ですが、新規モデルが実装されるかどうかは気になる点です。サイゲくん頼んだ。

それではまた。