rust/comprehensive-rust
1
0
Fork 0
mirror of https://github.com/google/comprehensive-rust.git synced 2025-05-23 10:50:18 +02:00
Code Issues Releases Activity

Fix formatting errors and remove font

Browse Source
This commit is contained in:
sakex 2023-08-09 22:12:24 +02:00
parent 37ebf83603
commit 5cb15f12a4
9 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/exercises/webassembly/camera.md
View File

@ -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 (`<select>`) that will change which transformation to apply to the image.
6. `(BONUS)` 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.
4. _Bonus question:_ 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 (`<select>`) 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.

15
src/rust-wasm-template/README.md
View File

@ -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

4
src/rust-wasm-template/static/exercises/camera/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>comprehensive-rust camera exercise</title>
<title>Comprehensive Rust 🦀 camera exercise</title>
<link rel="stylesheet" href="/index.css">
<style>
video, canvas {
@ -21,7 +21,7 @@
</head>
<body>
<h1>
comprehensive-rust camera exercise
Comprehensive Rust 🦀 camera exercise
</h1>
<video src=""></video>
<canvas></canvas>

4
src/rust-wasm-template/static/exercises/game_of_life/index.html
View File

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>comprehensive-rust Game Of Life exercise</title>
<title>Comprehensive Rust 🦀 Game Of Life exercise</title>
<link rel="stylesheet" href="/index.css">
<style>
canvas {
@ -15,7 +15,7 @@
</head>
<body>
<h1>
comprehensive-rust Game Of Life exercise
Comprehensive Rust 🦀 Game Of Life exercise
</h1>
<button id="start-button">START</button>

8
src/rust-wasm-template/static/index.css
View File

@ -1,12 +1,8 @@
@font-face {
font-family: SourceCodePro;
src: url(/source-code-regular.otf);
}
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
body {
background-color: #282c34;
font-family: "SourceCodePro";
font-family: 'Source Code Pro', monospace;
}
h1 {

4
src/rust-wasm-template/static/index.html
View File

@ -2,13 +2,13 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebAssembly Template</title>
<title>Comprehensive Rust 🦀 WebAssembly Template</title>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<h1>
WebAssembly Template
Comprehensive Rust 🦀 WebAssembly Template
</h1>
<p>
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.

BIN
src/rust-wasm-template/static/source-code-regular.otf
View File

Binary file not shown.

2
src/webassembly.md
View File

@ -8,4 +8,4 @@ Rust is often considered as one of the best languages to compile to WebAssembly
There are multiple frameworks to create WASM libraries from Rust. We will focus on [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/introduction.html) and [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/).
WebAssembly needs to be run in a Browser or a VM, therefore we will use a different set up for this class. Please navigate to [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) to view the installation instructions. Feel free to either clone the repository to run it locally, or open a new [Codespace on Github](https://codespaces.new/google/comprehensive-rust)
WebAssembly needs to be run in a browser or a VM, therefore we will use a different set up for this class. Please navigate to [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) to view the installation instructions. Feel free to either clone the repository to run it locally, or open a new [Codespace on Github](https://codespaces.new/google/comprehensive-rust)

6
src/webassembly/load-wasm-module.md
View File

@ -17,7 +17,7 @@ wasm-pack build --target web --out-dir static/wasm
Webassembly has to be loaded from an HTTP server in order to be loaded on the brower.
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
@ -28,7 +28,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
@ -36,7 +36,7 @@ And run
```
cd rust-wasm-template/static
cargo-server
cargo server
```
Open the web page on port `8000`. HTML and JS files are provided at [rust-wasm-template/static](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/static).