How to apply gamma correction ?

[JonathanVacher]

Hi,
We plan on doing vision psychophysics using jspsych. We'd like to apply gamma correction after estimating the gamma of the participant screen using a standard procedure. I couldn't find what is the best way to do it. Does anyone know more about this ?
Thanks,

[jodeleeuw]

Hey @JonathanVacher,

I haven't done this before. I suspect the options for gamma correction will depend on what kind of stimuli you want to correct. Are you using image files? Something else?

[JonathanVacher]

Thanks for your answer and sorry for my lack of precision.

Yes, I'd like to apply gamma correction to image files. So far I've found the p5.js library (link) that allows to update pixel values. Yet, I don't really understand how to use it with images loaded with jspsych. Maybe it's super easy but I'm not familiar enough with javascript yet.

[JonathanVacher]

From this (post) on stackoverflow, I start to understand how to do it. If the images are loaded with jspsych and if I modify them in the "on_finish" of an "image-slider-response", will the images be kept modified ?
Thanks

[jodeleeuw]

That post looks like it applies to <canvas> elements. Most jsPsych plugins don't use a canvas.

You'll probably need to apply the correction to images through a CSS filter. From some quick reading on this, it seems like you'll need a custom SVG filter to gamma correct an image. You can then apply this filter through CSS. Here's the most relevant tutorial I could find:

https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/#gamma-corrected-colorizing

Once you create this filter, you can apply it via a CSS class. You can then add this class to all of your images in the experiment.

[JonathanVacher]

Thanks for your reply ! I had to design my own plugin which uses <canvas> so I'll give it a try.
I'll also try your other proposition. Would this also work if images are used in a <canvas> ?

[jodeleeuw]

I think if you are doing the canvas solution my techniques will not work, since the images will be rasterized on the canvas. But using the canvas will probably get you even better control over the color channels, as the examples you found on stackoverflow show.

[ricmo22]

Hi @JonathanVacher I am having the same issue. I want to 1) measure gamma and 2) automatically run gamma correction on all stimuli. Have you figured out a solution by any chance? Many thanks! :)

[JonathanVacher]

Hi ricmo,

Yes, I've found a solution. I use my own plugin and function to adjust the gamma.

This method works on most screen. However, we noticed that it doesn't work on laptop screen. We empirically measured the gamma with a lux meter and used the psychometric task. We found that the psychometric method was underestimating the gamma value. This might due to improper or corrected rendering of banded/checkerboard stimulus.
gamma-survey-histogram.pdf

Here is the code : gamma-example.zip
Pay attention to the jspsych path in gamma-example.html

[JonathanVacher]

Sorry I forgot something. The code above only allows for measuring the gamma. You need to use the measured gammas to estimate the gamma:
gamma_val = (gamma_val1 + gamma_val2 + gamma_val3)/3

Then you apply gamma correction on stimulus presentation which needs to be a javascript function.
// to display the stimulus
function draw_im(canvasId, imageId) {
let c = document.getElementById(canvasId);
let ctx = c.getContext("2d");
let img = document.getElementById(imageId);
var c_w = c.width;
var c_h = c.height;
ctx.drawImage(img, 0, 0);
let all_data = ctx.getImageData(0, 0, c_w, c_h);
adjust_gamma(all_data.data);
ctx.putImageData(all_data, 0, 0);
}

// to adjust the gamma of the stimulus
function adjust_gamma(data) {
const gammaCorrection = 1 / gamma_val;
for (var i = 0; i < data.length; i += 4) {
data[i] = 255 * Math.pow((data[i] / 255), gammaCorrection);
data[i+1] = 255 * Math.pow((data[i+1] / 255), gammaCorrection);
data[i+2] = 255 * Math.pow((data[i+2] / 255), gammaCorrection);
}
}