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】写真・動画をドット絵風に変換