Adjusting the brightness and contrast of an image

[crofty]

Hello 👋,
I have an image that I've loaded into th-ing/pixel buffer. I trying to add some controls to a web page to adjust the brightness/contrast/exposure of the image.

Currently I'm looping through all the pixels in the buffer and doing something like:

	for (let y = 0; y < buf.height; y += 1) {
		for (let x = 0; x < buf.width; x += 1) {
                         let col = rgb(abgr(buf.getAt(x, y)))
                         let new = abgr32(transform(nil, brightnessMat(0.1), col)).first.deref()
			buf.setAt(x, y, new);
		}
	}

It seems to work but is very slow so I'm sure there must be a much better way of applying these transformations to an image?

[postspectacular]

Hi & welcome @crofty!

The best way to do these kind of matrix-based color transformations is to use a floating point pixel buffer rather than int's and also to operate on the underlying typed arrays directly (so avoiding the overhead of .getAt() and .setAt())...

I'd already started preparing an example to illustrate this a while ago, but I just now updated/finished it and you can find it here:

https://demo.thi.ng/umbrella/pixel-colormatrix/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/pixel-colormatrix/src/index.ts

I hope the comments in the source are sufficient to explain the overall approach. If not, then please get back to me here...

Hope that helps!

[crofty]

Oh wow, I'm so glad I asked rather then continuing to poke around. Your example is exactly the reference I needed, thank you so much for the help!

[postspectacular]

Great — glad that worked for you! 👍

(Ps. It's also quite impressive to see how much more snappy this is in Chrome vs Firefox or Safari...)