Changing image colour online

Hi all,

I’m having trouble conditionally changing the colour of Image stim when running demos on Pavlovia.

Offline, I can do this easily using something like:
if …(button is clicked)
…stimName.color = ‘red’

However, when manually converting this code into JS, I’ve only managed to get this to work online when Polygon stim are used (Image stim simple won’t change colour):
stimName.fillColor = new util.Color(‘red’);

I have zero experience with Javascript (and little with Python, as I mostly use the Builder view), so I’m probably missing something very simple in my JS coding… But if anyone is able to help me out here, that should be enough to get my experiment going online!

Many thanks :slight_smile:

Thanks for the post Jamie, indeed, even if you set the color to change for you image in Builder, the image color does not change online (but does locally on your desktop). WIll flag this as a bug on GitHu - see https://github.com/psychopy/psychojs/issues/29

1 Like

Hi! Do you have any suggestions to how overcome this bug? I think it is still not working…

^ I’m also curious if this issue has been resolved or if there is a workaround? I still seem to be having this issue too.

If I understand the issue correctly, this is about changing the colour behind a mask.

You could present a coloured polygon behind an image with a transparent foreground rather than using the mask feature.

Hi, I’m wondering if this has been resolved or anyone found a way around it. I’m trying to recolour an empty white image by setting a new colour. Works brilliantly locally, fails online. Unfortunately using a Polygon is not an option as I need a mask on the image.

Please could you upload some screenshots of what it should look like (and your empty white image)?

Hi, thanks for the quick reply!

Locally, it looks like this: Dropbox - screenshot_local.png - Simplify your life
You should to see two little bright red eggs in the bottom right.

Online, it looks like this:

Link to a quick psyexp demo:

In an nutshell, the idea is that I wish to create a shaded object, i.e. the colour stays the same while the luminance varies. Given that I cannot do much matrix calculations and logical maps in Javascript up in the cloud, my workaround is to have a dark image as background and a light image as foreground (they only differ in luminance, colour is the same) and apply an alpha channel on the foreground image. At bright regions the alpha channel is opaque, at dark regions it’s more transparent, etc. As you can see, it works well offline, no luck online.

My Javascript is extremely elementary, but I did try some workaround-workarounds. I see that when new visual.ImageStim() is called, it’s color attribute is automatically set “new util.Color(‘white’)”. Then later down, the object is supposed to be re-coloured by setColor(new util.Color([(- 0.25), (- 1), (- 1)])); (in this arbitrary case the colour is -0.25,-1,-1).

Fair enough, I thought, instead of doing it like this, I left the image at default and inserted code below that overwrites the visual.ImageStim() but this time with a new util.Color(‘whatever’). Didn’t work, everything stayed white (or whatever colour my images originally are), it looks like new util.Color() doesn’t do much…

I wonder whether this is a bug or a feature of Javascript (or the implementation of visual.ImageStim()) and either way, is there a potential workaround? As I wrote in my previous post, unfortunately polygons aren’t an options as I do need to have something that accepts a mask… Thank you for any advice / insight!

1 Like

Forgot to add that I also tried a version where I tested whether masking with values between 0 and 1 works at all. Here the foreground is a black square image, the background is the same old white one, and there is a mask on the foreground. There is no colour manipulation in software whatsoever, images should displayed as they are. Works locally, online I get plain white…

Link to demo: Dropbox - shading-demo2 - Simplify your life

This is weird because I managed to “holes” (completely transparent patches) displayed on images with a coloured polygon visible through them…

Bumping as I am also having this issue. I managed to get by previously using a colored polygon behind the transparent images as mentioned above, but now my stimuli are much more complex and partially overlap with other stimuli where it would be ideal if I could directly change the color of an image stim in the way that it works locally (i.e. not online).

@laztalas Have you found a workaround yet?

Hi, sorry for the late reply… no I haven’t found a solution yet and currently working to organise everything “offline” where things work brilliantly. I’m yet to talk to someone in web design whether this is something that JS can do at all.

Hi, this is quite an old topic but I didn’t want to create a new thread for the same issue. Basically, I have a series of grayscale images like this:
image

that I want to be able to dynamically adjust online. I can do it locally using the Python Imaging Library but there doesn’t seem to be a straightforward Javascript equivalent.

Has anyone figured out a solution?