Description of the problem:
Hi,
I would like to do an experiment, in which the participants can change a presented image saturation with a slider. The issue is that I would like to use the original image as 100% saturation level and allow the participants to change the saturation level within the range of 20% to 180%.
My current idea is to hard code in everything in JS but I was wondering if that’s the best solution and thought I would ask if there is an existing solution for this problem and I just could not find it.
Thank you for your input in advance!
Best wishes,
Aniko
Something like this might be what you’re looking for? I use builder with code components over hard coding!
Hi @Becca,
Thank you so much for the quick response. Unfortunately the opacity is not quite right for our project. We would definitely need to change the saturation of naturalistic images and we would need it to work in both directions (under/over-saturation). Previously we used the Pillow library in python,specifically the ImageEnhance.Color functions. I know that CSS filters can also achieve this… But I’m not sure how to implement within PSychoJS…
Best wishes,
Aniko
Hi Aniko,
Opacity is just an example - you can use the same method to manipulate any parameter of the object e.g. RGB values - might that work for what you need to manipulae?
Hope this helps,
Becca
Hi @Becca
Yes so I have tried using the Foreground Color parameter and it seems to still only change the color of the image on the grey scale which make sense since using the RGB values for the object [1,1,1] makes the image appear with it’s original colors and setting the RGB values to lower numbers makes the image uniformly more grey. As an example:
This is the original image:
This is more grey version of it that is the result of using the Foreground Color parameter:
And this is how a lower and higher saturated version would look like and what I would like to achieve:
Btw I took a look at the visual/ImageStim.js source code and realised that there is a color filter implementation in it based on PIXI.filters.ColorMatrixFilter but it is commented out (line 301 - 308).
Hi There,
OK - have you tried using the same approach but with HSV color space? so the second value corresponds to image saturation?
Thanks,
Becca
Hi Becca,
Thank you for your slider - it is really helpful. I would like to use it to change hue values using the HSV. However, although the opacity works, when I try HSV, nothing is changing when I apply it to my image. Do you know why this might be?
Thank you!
Hi there,
HSV color space doesn’t yet work out of box online - but here is a link to a workaround that I hope might help. Hsv color slider - #4 by Becca
Becca
Thanks so much! This is really helpful 
I was just wondering - I’ve had a look at your function and compared it to the color-convert/conversions.js at master · Qix-/color-convert · GitHub function it was adapted from. I was wondering why you converted from v = hsv[2] / 100 in the original function to v = hsv[2] in your function? Just trying to understand each step in order to double check it Thanks a lot for your help.
Secondly, I was wondering if it is possible to use this code to then re-use the function in Python before converting back to JS? Basically, I want to use these functions in Python in an auto->JS code component. I’ve seen that I should define the function at the beginning of the experiment, however I still get the ‘can’t find variable’ error.