6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WebAssembly / WasmAdvent Calendar 2024

Day 13

RustとWebAssemblyで絵文字Video作ってみた

Posted at

はじめに

前回(下記)で、WebCameraの映像をAsciiアートに変換してみたので

今回はWebCameraの映像を絵文字に変換するツールを作ってみる。

プロジェクトの作成

大まかな手順としては

指定されたドットサイズでセルに分割して、

セル単位でRGBが各色の絵文字パレットに近いものが出力される。

絵文字の設定

cell に、もし赤っぽい色のピクセルデータが多数含まれるときは

emoji_chk = true の場合、 🟥 を返し、

emoji_chk = false の場合は 😡 を返しますような関数を作成する。

その他の絵文字についても色に近い絵文字を選出して、設定しておく。

(絵文字は環境によって異なるのでデバイスによっては想定外の色になっているかもです🙇‍♂️)

lib.rs

// Cellの色が近い下記の絵文字を返す
fn analyze_cell(cell: &[u8],emoji_chk:bool) -> char {
    let mut r_sum: u32 = 0;
    let mut g_sum: u32 = 0;
    let mut b_sum: u32 = 0;
    let mut count: u32 = 0;

    for i in (0..cell.len()).step_by(4) {
        r_sum += cell[i] as u32;
        g_sum += cell[i + 1] as u32;
        b_sum += cell[i + 2] as u32;
        count += 1;
    }

    if count == 0 {
        return '⬜'; // セルが空の場合は白を返す
    }

    let r_avg = r_sum / count;
    let g_avg = g_sum / count;
    let b_avg = b_sum / count;
    if emoji_chk{
        match closest_color(r_avg, g_avg, b_avg) {
            (255, 119, 99) => '🟥',   // 赤
            (255, 155, 59) => '🟧',   // オレンジ
            (243, 191, 63) => '🟨',   // 黄色
            (131, 211, 19) => '🟩',   // 緑
            (0, 235, 219) => '🟦',   // 青
            (63, 191, 255) => '🟪',   // 紫
            (134, 74, 43) => '🟫',   // 茶
            (0, 0, 0) => '⬛',         // 黒
            (255, 255, 255) => '⬜',   // 白
            _ => '⬜',                // デフォルトは白
        }
    }
    else{
        match closest_color(r_avg, g_avg, b_avg) {
            (255, 119, 99) => '😡',   // 赤
            (255, 155, 59) => '🍊',   // オレンジ
            (243, 191, 63) => '⭐',   // 黄色
            (131, 211, 19) => '🤢',   // 緑
            (0, 235, 219) => '🥶',   // 青
            (63, 191, 255) => '😈',   // 紫
            (134, 74, 43) => '💩',   // 茶
            (0, 0, 0) => '👾',         // 黒
            (255, 255, 255) => '👻',   // 白
            _ => '👻',                // デフォルトは白
        }
    }

}

(まだまだ微妙なところもあるが)とりあえず完成!

今回の成果物

デモURL

デモ画像

RustとWebAssemblyで絵文字Video作ってみた_01.gif

RustとWebAssemblyで絵文字Video作ってみた_02.gif

ソース

まとめ

今回は入力映像を絵文字のVideoにしてみた。

思いのほか、色調整が難しく、照明やカメラの露出などで

色が大きく変わってしまったので、時間があればリベンジしたい。

6
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?