Rustのrand使ってRandomArt作ってみた

はじめに

下記でアナログ時計を作った構成を利用し、

Rustのrandを使ってRandomArt挑戦してみようと思います

前回作ったアナログ時計について

プロジェクトの作成

Rustで縦横320の無地の画像に用意。

320内におさまるランダムな大きさのランダムな色の円を4つほど書いてみる。

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

lib.rs

// 省略

#[wasm_bindgen]
pub fn trick_png() -> String{
    let mut img = DynamicImage::new_rgba8(320,320);
    // 円の中心座標
    let center_x = img.width() / 2;
    let center_y = img.height() / 2;
    let mut rng = rand::thread_rng();
    for _i in 0..=4 {
        draw_filled_circle_mut(&mut img, (center_x as i32, center_y as i32), rng.gen_range(0..=155), Rgba([rng.gen_range(0..=255), rng.gen_range(0..=255), rng.gen_range(0..=255), 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のsetIntervalで上記の関数を呼び出して動かす。

なんとなく秒数べつに用意してみる。

index.js

// 省略

setInterval(()=>{
    document.getElementById("mainImg1").src = trick_png();
}, 10);
setInterval(()=>{
    document.getElementById("mainImg2").src = trick_png();
}, 100);
setInterval(()=>{
    document.getElementById("mainImg3").src = trick_png();
}, 1000);

// 省略

これで実装完了！！

今回の成果物

デモURL

デモ画像

ソース

まとめ

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

作っている最中に目が回りました😰

randについて

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