RustとWebAssemblyでドット絵Generator作ってみた




# はじめに

過去記事でRustとWebAssembly使ってAsciiアート生成ツールに挑戦した際に

ドット絵生成ツールにも挑戦したいと思ったので、

今回は、RustとWebAssembly使ってドット絵生成ツール的なのを作成しようと思います。


https://qiita.com/shisojuice/items/2413580f72244a4823c7



# プロジェクトの作成

wasm-packのテンプレートから作成。

今回は、wasmでimageのdataを受け取り、ドット絵調に画像加工して出力する関数を作成する。

出力ベース画像は縦横比 512px x 512px とし、

押下されたButtonの内容と同じドット絵の比率に合わせたセル数に加工してみる。


```rust:lib.rs
// 省略

  // セルのサイズ
    let dot_size:u32 = input_size.parse().unwrap_or(8);
    let cell_size:u32 = 512/dot_size;
    let mut output_img = ImageBuffer::new(img.width(), img.height());
    // セルごとに処理
    for y in 0..img.height() / cell_size {
        for x in 0..img.width() / cell_size {
            // セルを切り出す
            let cell = img.sub_image(
                x * cell_size,
                y * cell_size,
                cell_size,
                cell_size,
            );

            // セルを解析
            let recognized_rgba = analyze_cell(cell.to_image());
            for b in 0..cell_size  {
                for a in 0..cell_size {
                    output_img.put_pixel(a+(x*cell_size) , b+(y*cell_size),recognized_rgba);
                }
            }
        }
    }

// 省略

```


セルの色の判定ロジックは切り出したセルで出現回数が最多の色を採用する。

（Gemini1.5proにHashMapの使い方覚えるついでに下記ロジックを教えてもらった。max_by_keyとか知らないメソッド多いので勉強になる。）


```rust:lib.rs
// 省略

 fn analyze_cell(cell: ImageBuffer<Rgba<u8>, Vec<u8>>) -> Rgba<u8> {
    let mut counts = HashMap::new();
    // ピクセルごとにRGBAをキーとして出現回数をカウント
    for pixel in cell.pixels() {
        *counts.entry(pixel).or_insert(0) += 1;
    }
    let result_rgba =  counts
        .into_iter()
        .max_by_key(|&(_, count)| count)
        .map(|(rgba, _)| rgba).unwrap();

    *result_rgba
}

// 省略

```


# 今回の成果物

デモURL

https://shisojuice.github.io/Rust_DotArt/


デモ画像

・元画像

![RustとWebAssemblyでドット絵Generator作ってみた_001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/f4116c39-695f-124f-5cb5-97443deb7bf9.jpeg)

![RustとWebAssemblyでドット絵Generator作ってみた_000.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/13b933c1-d3e3-93b2-568f-29cfe23e2d76.jpeg)

4x4で生成

![RustとWebAssemblyでドット絵Generator作ってみた_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/ea259a9f-417e-b6ca-cd7f-b9aa2ea1f61b.png)

8x8で生成

![RustとWebAssemblyでドット絵Generator作ってみた_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/cfe81204-5c85-a38d-b20d-f5de784cdb12.png)

16x16で生成

![RustとWebAssemblyでドット絵Generator作ってみた_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/033f4d3d-4928-b33b-dcab-3675756d6bd0.png)

32x32で生成

![RustとWebAssemblyでドット絵Generator作ってみた_005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/dbd1e067-37e0-a12b-2048-fa1b77fb94ba.png)

64x64で生成

![RustとWebAssemblyでドット絵Generator作ってみた_006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/5f232d96-cc6a-78e9-151a-238f65751d82.png)

128x128で生成

![RustとWebAssemblyでドット絵Generator作ってみた_007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/35dd3e6a-ea5e-eeb6-6942-40c021e578ca.png)


ソース

https://github.com/shisojuice/Rust_DotArt



# まとめ

成果物の中だと、16x16と32x32がドット絵の懐かしい感じがして好きでした。🎮

あと、4x4と8x8は粗すぎて何が何だか状態でした、、、

Rustにまだ慣れておらず、メソッドがわからない際はGemini1.5proを利用したが、

AIに頼らなくてもいいようにコツコツとメソッドを覚えていきたい。💪

※間違い等ありましたら、ご指摘いただけると助かります。