Merge pull request silvia-odwyer#162 from benliao/benliao

Support random noise by import js_sys::Math::random function

README.md

@@ -230,6 +230,7 @@ Contributors include (be sure to add yourself to the list if you submitted a PR)
 * **Arnav Jindal** - [@Daggy1234](https://github.com/Daggy1234)
 * **NorbertGarfield** - [@NorbertGarfield](https://github.com/NorbertGarfield)
 * **bboshoven** - [@bboshoven](https://github.com/bboshoven)
+* **benliao** - [@benliao](https://github.com/benliao)
 * **Future You(?)** - (See Contributing above)
 
 ## License

crate/src/noise.rs

@@ -2,17 +2,25 @@
 
 use image::Pixel;
 use image::{GenericImage, GenericImageView};
-use rand::Rng;
-// use wasm_bindgen::prelude::*;
+
 use crate::helpers;
 use crate::iter::ImageIterator;
 use crate::PhotonImage;
 
+#[cfg(feature = "enable_wasm")]
+use wasm_bindgen::prelude::*;
+
+#[cfg(target_family = "wasm")]
+use js_sys::Math::random;
+
+#[cfg(not(target_family = "wasm"))]
+use rand::Rng;
+
 /// Add randomized noise to an image.
 /// This function adds a Gaussian Noise Sample to each pixel through incrementing each channel by a randomized offset.
 /// This randomized offset is generated by creating a randomized thread pool.
-/// **[WASM SUPPORT NOT AVAILABLE]**: Randomized thread pools cannot be created with WASM using the code used currently, but
-/// a workaround is oncoming.
+/// **[WASM SUPPORT IS AVAILABLE]**: Randomized thread pools cannot be created with WASM, but
+/// a workaround using js_sys::Math::random works now.
 /// # Arguments
 /// * `img` - A PhotonImage.
 ///
@@ -24,15 +32,23 @@ use crate::PhotonImage;
 /// use photon_rs::noise::add_noise_rand;
 /// use photon_rs::PhotonImage;
 ///
-/// let img = open_image("img.jpg").expect("File should open");
-/// let result: PhotonImage = add_noise_rand(img);
+/// let mut img = open_image("img.jpg").expect("File should open");
+/// add_noise_rand(&mut img);
 /// ```
-pub fn add_noise_rand(mut photon_image: PhotonImage) -> PhotonImage {
-    let mut img = helpers::dyn_image_from_raw(&photon_image);
+#[cfg_attr(feature = "enable_wasm", wasm_bindgen)]
+pub fn add_noise_rand(photon_image: &mut PhotonImage) {
+    let mut img = helpers::dyn_image_from_raw(photon_image);
+
+    #[cfg(not(target_family = "wasm"))]
     let mut rng = rand::thread_rng();
 
     for (x, y) in ImageIterator::with_dimension(&img.dimensions()) {
+        #[cfg(not(target_family = "wasm"))]
         let offset = rng.gen_range(0, 150);
+
+        #[cfg(target_family = "wasm")]
+        let offset = (random() * 150.0) as u8;
+
         let px =
             img.get_pixel(x, y).map(
                 |ch| {
@@ -46,13 +62,12 @@ pub fn add_noise_rand(mut photon_image: PhotonImage) -> PhotonImage {
         img.put_pixel(x, y, px);
     }
     photon_image.raw_pixels = img.to_bytes();
-    photon_image
 }
 
 /// Add pink-tinted noise to an image.
 ///
-/// **[WASM SUPPORT NOT AVAILABLE]**: Randomized thread pools cannot be created using the code used currently, but
-/// support is oncoming.
+/// **[WASM SUPPORT IS AVAILABLE]**: Randomized thread pools cannot be created with WASM, but
+/// a workaround using js_sys::Math::random works now.
 /// # Arguments
 /// * `name` - A PhotonImage that contains a view into the image.
 ///
@@ -66,14 +81,22 @@ pub fn add_noise_rand(mut photon_image: PhotonImage) -> PhotonImage {
 /// let mut img = open_image("img.jpg").expect("File should open");
 /// pink_noise(&mut img);
 /// ```
+#[cfg_attr(feature = "enable_wasm", wasm_bindgen)]
 pub fn pink_noise(photon_image: &mut PhotonImage) {
     let mut img = helpers::dyn_image_from_raw(photon_image);
+    #[cfg(not(target_family = "wasm"))]
     let mut rng = rand::thread_rng();
 
+    #[cfg(not(target_family = "wasm"))]
+    let mut rng_gen = move || rng.gen();
+
+    #[cfg(target_family = "wasm")]
+    let rng_gen = || random();
+
     for (x, y) in ImageIterator::with_dimension(&img.dimensions()) {
-        let ran1: f64 = rng.gen(); // generates a float between 0 and 1
-        let ran2: f64 = rng.gen();
-        let ran3: f64 = rng.gen();
+        let ran1: f64 = rng_gen(); // generates a float between 0 and 1
+        let ran2: f64 = rng_gen();
+        let ran3: f64 = rng_gen();
 
         let ran_color1: f64 = 0.6 + ran1 * 0.6;
         let ran_color2: f64 = 0.6 + ran2 * 0.1;

webpack_demo/index.html

@@ -262,6 +262,10 @@ <h4>Conv</h4>
                 <li class="effect" id="sharpen">Sharpen</li>
                 <li id="hue_rotate">JavaScript</li>
 
+                <h4>Noise</h4>
+                <li class="noise" id="add_noise_rand">Add Noise Rand</li>
+                <li class="noise" id="pink_noise">Pink Noise</li>
+
                 <h4>Multiple</h4>
                 <h5>Blend</h5>
                 <li class="blend" id="blend">Blend</li>

webpack_demo/js/index.js

@@ -51,6 +51,12 @@ import("../../crate/pkg").then(module => {
     button.addEventListener("click", function(){applyEffect(event)}, false);
   }
 
+  let noise_buttons = document.getElementsByClassName("noise");
+  for (let i = 0; i < noise_buttons.length; i++) {
+    let button = noise_buttons[i];
+    button.addEventListener("click", function(){applyEffect(event)}, false);
+  }
+
   let blend_buttons = document.getElementsByClassName("blend");
   for (let i = 0; i < blend_buttons.length; i++) {
     let button = blend_buttons[i];
@@ -174,6 +180,8 @@ import("../../crate/pkg").then(module => {
                       "text": function() {return module.draw_text(rust_image, "welcome to WebAssembly", 10, 20)},
                       "text_border": function() {return module.draw_text_with_border(rust_image, "welcome to the edge", 10, 20)},
                       "test": function() {return module.filter(rust_image, "rosetint")},
+                      "pink_noise": function() {return module.pink_noise(rust_image)},
+                      "add_noise_rand": function() {return module.add_noise_rand(rust_image)},
                     };
 
     // Filter the image, the PhotonImage's raw pixels are modified and