Qiita Engineer Festa20242024年7月17日まで開催中！

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

Last updated at 2024-07-29Posted at 2024-07-04

はじめに

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

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

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

プロジェクトの作成

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

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

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

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

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とか知らないメソッド多いので勉強になる。）

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
}

// 省略