diff --git a/src/exercises/webassembly/camera.md b/src/exercises/webassembly/camera.md index c386b6b2..a926a5d7 100644 --- a/src/exercises/webassembly/camera.md +++ b/src/exercises/webassembly/camera.md @@ -34,7 +34,7 @@ pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) { ``` We want to edit the function `edit_bitmap`. `image_data` is a reference to the [Uint8ClampedArray](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Uint8ClampedArray.html) being rendered on your screen. `Uint8ClampedArray` is a flat array of unsigned int of `8` bits. -It represents `srgb` image, which means that each pixel is represented as a vector of 4 elements [red, green, blue, illumination]. +It represents _srgb_ image, which means that each pixel is represented as a vector of 4 elements [red, green, blue, illumination]. The image can be thought of as a matrix of dimension `(width, height, 4)`, it is row-major. We will reuse our different implementations. So do not erase them when going from one exercise to the next. @@ -44,7 +44,7 @@ First off let's implement some methods that modify the video live: 1. Paint the top half the image to black. 2. Paint the left half of the image to white. 3. Create an X-ray effect. This is done by mapping colors to their opposite, for instance `0<->255`, `100<->155`. Beware of illumination. -4. `(BONUS)` Now feel free to implement other transformations such as `greyscale` or adding `random noise`. -5. Let's now add functionalities to our page. In the `setup` function create a dropdown (``) that will change which transformation to apply to the image. +6. _Bonus question:_ Track moving objects. This can be done by figuring out only the pixels that didn't change between multiple frames. For instance, you could compute the standard deviation of the pixel and black out below a threshold. While this can be achieved without touching Javascript, I recommend editing it. diff --git a/src/rust-wasm-template/README.md b/src/rust-wasm-template/README.md index 91628ad6..d7448476 100644 --- a/src/rust-wasm-template/README.md +++ b/src/rust-wasm-template/README.md @@ -2,13 +2,11 @@ This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and WASM as well as the javascript boilerplate needed to load WASM. -- `/static` contains the static files including compiled webassembly. -- `/src/lib.rs` contains the Rust code. +- `static` contains the static files including compiled webassembly. +- `src/lib.rs` contains the Rust code. ## Installation -Note: If you are running from a devcontainer, you only need to install wasm-pack. - ### Rust Recommended: @@ -29,7 +27,7 @@ Alternatively, see the [installation page](https://rustwasm.github.io/wasm-pack/ ## Run the local server -If you have python on your machine, you can simply +If you have Python on your machine, you can simply ``` cd rust-wasm-template/static @@ -40,7 +38,7 @@ python3 -m http.server Otherwise a Rust alternative exists and you can install it with ``` -cargo install cargo server +cargo install cargo-server ``` And run @@ -48,11 +46,10 @@ And run ``` cd rust-wasm-template/static -cargo-server +cargo server ``` -- On a devcontainer, go to `PORTS` and open the link under `Local Address` for Port `8000` -- Locally, visit http://localhost:8000 +Visit http://localhost:8000 ## Build WASM and copy target to the correct path diff --git a/src/rust-wasm-template/static/exercises/camera/index.html b/src/rust-wasm-template/static/exercises/camera/index.html index 53c7d567..bf31ff5f 100644 --- a/src/rust-wasm-template/static/exercises/camera/index.html +++ b/src/rust-wasm-template/static/exercises/camera/index.html @@ -2,7 +2,7 @@ - comprehensive-rust camera exercise + Comprehensive Rust 🦀 camera exercise