Instructor: Here, we start with a little refactoring for easier use of importing modules later in the lesson. We'll introduce an app.js file, and make sure our index.js file only takes care of loading the app module dynamically.
How can we leverage this now? Let's write a small image library in Rust. We define a struct, color, containing red, green, and blue and unsigned integers. Next up, we implement the image. Our image contains pixel, which is a vector of colors.
We create the function new, and inside it, add two different pixels, one pure red, with the red value 255, green and blue being 0The second one is a dark gray, with a red part of 60, green 70, and blue 90. Then we store the two pixels in the vector and return the image. Finally, we add a function pixel_pointer, returning the pointer to the pixel vector.
We leverage this information by only accessing the first six values out of our buffer, and store them in a typed array representing eight-bit unsigned integers. Here, the amazing part. These six values match exactly the color parts of our two pixels.
This means we can extract the color of the two pixels directly from the memory, without any serialization or deserialization overhead. This is super useful in case serialization and deserialization is your performance bottleneck.
In this example, we leverage this functionality to draw pixels to a canvas. Therefore, we create the helper function, drawPixel, accepting an X and Y position, and an array for the colors, red, green, and blue. Using context field style, we can convert the numbers to a hex code and draw the pixel.
Be aware, instead of drawing just one pixel, we're drawing a larger rectangle in this case, so we can actually see the result. Finally, we can create our canvas, and use our drawPixel function to actually draw the pixels. We slice the array to retrieve the correct pixel colors.