How do I draw a pixel to a certain position?

[nico-mayora]

Hello! I'm using this library to show the results of my raytracer and haven't been able to wrap my head around how to set a value to the byte array. Say I have some (x,y) position and a colour (R,G,B). How can I translate the (x,y) coordinate to an index in the byte array?

[parasyte]

Hi! This is called pixel plotting and it's a very simple formula, basically structured like this:

fn plot(buffer: &mut [u8], x: usize, y: usize, stride: usize, color: &[u8]) {
    assert_eq!(color.len(), 4);

    let i = x + y * stride * 4;

    buffer[i..i + 4].copy_from_slice(color);
}

Where stride is typically going to be the image width in pixels. On some systems (like old school Windows DIBs) the stride can include some invisible padding. The color length is assumed to be 4 bytes (R, G, B, A). The function itself is agnostic to the component order, but assumes the buffer and color slices use the same ordering.

Adjusting the function slightly allows it to be agnostic to the pixel format, but also allows misuse by passing color slices that are not the size of a single pixel.

fn plot(buffer: &mut [u8], x: usize, y: usize, stride: usize, color: &[u8]) {
    let i = x + y * stride * color.len();

    buffer[i..i + color.len()].copy_from_slice(color);
}

The real problem with this is that it's very slow to call the function for one pixel at a time. A common optimization is called "blitting", which copies rows of pixels at a time. You can extend the second example above to do this, but it's easier to just use a crate that already has all of this worked out. I have had great success with pix for this purpose. Take for instance the ASCII diagram in their documentation: https://docs.rs/pix/latest/pix/struct.Raster.html#method.copy_raster

This is a great primitive to build larger abstractions on, like sprites and even "flip book animations".

[nico-mayora]

Thanks for your reply!
Using the code you provided, I was able to get something up and running, but the image doesn't look quite right...
The following is an image produced by the raytracer, saved in png format, followed by what is shown on the created window:


Any pointers on what I could've done wrong is appreciated.

In case you want to take a look at the code, you can head over to: https://github.com/nico-mayora/RaytracingOneWeekend/blob/real_time_vis/src/viewport.rs

[kiwioGIT]

I think he forgot to multiply the X value by 4.