Subject:

Distortion


Date: Message-Id: https://www.5snb.club/posts/2020/distortion/
Linked-From: 5snb.club
Tags: #art(7)

When writing a box blur implementation, initially I had a fun bug where the rolling sum for values on the left were incorrect, since I did not include early values in the blur. It looks really cool so I kept the code for it.

If you just want to try it out on your own images, I wrote a JS version.

Below is the code, with the required fix commented out. This does a box blur on a single row of the image, with a specified width.

fn blur_row(img: &mut Image, row: usize, width: usize) -> Result<(), Error> {
    let mut acc = Pixel::default();
    let mut amount = 0;

    let mut scratch = Vec::new();

//  for col in 0..width {
//      acc += *img.get(col, row).ok_or(Error::WidthError(width))?;
//
//      amount += 1;
//  }

    for col in 0..img.width() {
        if let Some(head) = img.get(col + width, row) {
            acc += *head;
            amount += 1;
        }

        if col >= width {
            let tail = img.get(col - width, row).expect("was checked above??");
            acc -= *tail;
            amount -= 1;
        }

        scratch.push(acc / f64::from(amount));
    }

    for (col, item) in scratch.iter().enumerate() {
        *img.get_mut(col, row).unwrap() = *item;
    }

    Ok(())
}

I won’t go too much into the details of why a box blur is useful in this post, since I’ll probably make that a new post.

But for now, look at some neat distortions!

To some degree, JPEG compression might contribute to some of the distortion, but I didn’t want to triple the size of this page. If you want, you can run the tool (linked above) on the images yourself.

The first two have been done on default settings, a width of 5 and a iteration count of 1.

Also, all original photos are from Unsplash, and as such are used under the Unsplash License. The modified works, I have no idea what license they fall under, the Unsplash License is not very clear about derivative works (I’m writing this paragraph in 2023 when cleaning up the licenses of this site). I don’t care what you do with them, but they may still fall under the Unsplash License, in which case go follow those rules. Or go run the tool above on your own images.

City skyline during night time

Picture by Mohammad Amin on Unsplash

A city at night with lots of blue lights on the buildings reflecting on a mostly calm lake. One building is mostly orange.

A distorted version of the above image, with dark lines going across it.

Yellow leaf tree under blue daytime

Picture by Wolfgang Hasselmann on Unsplash

A tree with yellow leaves in a yellow grassy field. There’s a deep blue sky, with clouds near the horizon

A distored version of the above, the colours are more saturated and the tree’s shadow is darker

Brown and black cat in blanket

For this one, I adjusted the settings to have an iteration count of 2 and a width of 1.

This has more colour distortion and less blurring.

Picture by LILNAV99 on Unsplash

A cute cat with their eyes closed in a blanket. You can only see their head.

A distorted form of the above, any shadows in the blanket have been made completely black, and you cannot make out any detail in the cat’s face.