RustとWebAssemblyで目玉Art作ってみた




# はじめに

下記でRandomArtを作った際に、

なんとなく目玉に見えてきたので目玉アートに挑戦してみようと思います。

前回作ったRandomArtについて

https://qiita.com/shisojuice/items/75611d854ffa65613a43

# プロジェクトの作成

Rustで片目の画像に用意。これを２つ並べる想定。

白目の円を描画する。

黒目の円を用意し、矢印の向きで黒目を動かす。

最後に、Base64の文字列を返す。

```rust:lib.rs

// 省略

#[wasm_bindgen]
pub fn trick_png(arrow: u32) -> String{
    let mut img = DynamicImage::new_rgba8(160,160);
    draw_filled_rect_mut(&mut img,  Rect::at(0, 0).of_size(160, 160), Rgba([255, 228, 196, 255]));
    // 目の描画
    let eye_x = img.width() / 2;
    let eye_y = img.height() / 2;
    draw_filled_circle_mut(&mut img, (eye_x as i32, eye_y as i32), 45, Rgba([255, 255, 255, 255]));

    if arrow == 0
    {
        draw_filled_circle_mut(&mut img, (eye_x as i32, eye_y as i32), 15, Rgba([0, 0, 0, 255]));
    }
    // 左
    if arrow == 1
    {
        draw_filled_circle_mut(&mut img, (eye_x as i32 - 15, eye_y as i32), 15, Rgba([0, 0, 0, 255]));
    }
    // 下
    if arrow == 2
    {
        draw_filled_circle_mut(&mut img, (eye_x as i32, eye_y as i32 + 15), 15, Rgba([0, 0, 0, 255]));
    }
    // 上
    if arrow == 3
    {
        draw_filled_circle_mut(&mut img, (eye_x as i32, eye_y as i32 - 15), 15, Rgba([0, 0, 0, 255]));
    }
    // 右
    if arrow == 4
    {
        draw_filled_circle_mut(&mut img, (eye_x as i32 + 15, eye_y as i32), 15, Rgba([0, 0, 0, 255]));
    }

    let mut buffer = Cursor::new(Vec::new());
    img.write_to(&mut buffer, ImageFormat::Png).unwrap();
    let base64_string = general_purpose::STANDARD.encode(buffer.get_ref());
    // データURL形式で返す
    format!("data:image/png;base64,{}", base64_string)
}


// 省略

```

Javascriptで上記の関数を呼び出して動かす。

```Javascript:index.js

// 省略

    document.getElementById("mainImgL").src = trick_png(0);
    document.getElementById("mainImgR").src = trick_png(0);

    document.getElementById("left_arrow").addEventListener("click",()=>{
        document.getElementById("mainImgL").src = trick_png(1);
        document.getElementById("mainImgR").src = trick_png(1);
    });
    document.getElementById("down_arrow").addEventListener("click",()=>{
        document.getElementById("mainImgL").src = trick_png(2);
        document.getElementById("mainImgR").src = trick_png(2);
    });
    document.getElementById("up_arrow").addEventListener("click",()=>{
        document.getElementById("mainImgL").src = trick_png(3);
        document.getElementById("mainImgR").src = trick_png(3);
    });
    document.getElementById("right_arrow").addEventListener("click",()=>{
        document.getElementById("mainImgL").src = trick_png(4);
        document.getElementById("mainImgR").src = trick_png(4);
    });

// 省略

```

これで実装完了！！👀

# 今回の成果物

デモURL

https://shisojuice.github.io/Rust_EyesArt/


デモ画像

![RustとWebAssemblyで目玉Art作ってみた_001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/f35646df-7e1c-1512-5d44-6b41259916db.jpeg)

![RustとWebAssemblyで目玉Art作ってみた_002.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/27941f6a-25f2-f6aa-4fdc-3e19f2a51364.jpeg)

![RustとWebAssemblyで目玉Art作ってみた_003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/155b8c19-c54f-3171-017b-83134b40a82d.jpeg)

![RustとWebAssemblyで目玉Art作ってみた_004.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/05aacabc-c241-bbe7-2763-a5b984f1fc2c.jpeg)

![RustとWebAssemblyで目玉Art作ってみた_005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3777149/dcc60588-7711-ce80-1189-fdb106c527a7.jpeg)


ソース

https://github.com/shisojuice/Rust_EyesArt


# まとめ

今回はRustを使って目玉アートに挑戦してみました。🧑‍🎨

imageprocが便利で使いやすかったです！🎨

https://docs.rs/imageproc/latest/imageproc/

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