Image Stim opacity - set every frame - causes black screen / crash online

Online experiments
1

URL of experiment:
https://run.pavlovia.org/j.adams/subjective-judgments-for-photographic-stimuli-2/html/

Description of the problem:

Hi all,

I kept encountering a black screen and/or browser crash (in Chrome and Firefox) - always about 40 seconds into my experiment - which was seemingly not associated with any particular routine. After MUCH experimentation trying to narrow down the cause (JS console didn’t give much indication), I have discovered this happens when setting the opacity of an ImageStim to update every frame.

I use this code throughout my whole experiment, on all pages, and it works fine locally. An example of why I do this is button hover (some feedback if the mouse hovers over one of the buttons): if I have an ImageStim button named “Welcome__Next”, I populate the opacity field with a unique var “Show____Welcome__Next”. This var is controlled in my code component: at the start of the Routine, this is set to == 1, but if the mouse hovers on the button, Show____Welcome__Next == 0.6. I use a similar method to show ‘clicked’ versions of buttons too, so users can see which button they have pressed within a scale and have the option to change their choice (unclicked button opacity == 0, whilst clicked-version-of-the-button opacity == 1).

When the ImageStim opacity is set to be a unique variable, and set to update every frame, the experiment will crash / get a black screen online after about 40 seconds. This happens even when I don’t yet have any conditionals in the code component - simply having “Show____Welcome__Next = 1;” in the every frame tab is enough to cause the crash.

I strongly suspect this is something to do with performance or graphics card? The only computer I do not encounter this error online is on my Macbook Pro (2017) - which is where I created the experiment. I can get through to the end on Chrome and Firefox there. But on older Macs or any of the Windows PCs at my Uni, the crash happens. Though my code could also be completely inelegant.

Any help would be appreciated. My experiment is otherwise finished and I was super eager to start collecting data (especially as it works so well online on my Macbook)…it was very frustrating to find it wouldn’t run online anywhere else :frowning: . If you click the link and wait a max of around 40 seconds, you should encounter the error.

2

I cannot get the error to show unfortunately, but how about only changing the opacity if the mouse is over the button, and the opacity has not been changed. This way you only change the opacity once for each hover event, rather than on every frame

for (let stimulus of [Welcome__Next]) {
      if (stimulus.contains(Welcome__Mouse) && stimulus.opacity === 1) {
          Show____Welcome__Next = 0.6;
          stimulus.setOpacity(Show____Welcome__Next)  // You dont really need to create a new variable here now
      }
      else if (stimulus.opacity === .6)) {
          Show____Welcome__Next = 1;
          stimulus.setOpacity(Show____Welcome__Next)
      }
  }

This may reduce the load of having to keep updating the opacity on each frame. Also, remember to set the opacity as constant in the button component dialog.

2 Likes
3

Perfect, that seems to have fixed it - no more black screen or crashes. Many thanks! :slight_smile: I might be seeing things, but it also seems much more responsive now too!

I took your advice and ditched the unnecessary variable:

for (let stimulus of [Welcome__Next]) {
    if (stimulus.contains(Welcome__Mouse) && stimulus.opacity === 1) {
        stimulus.setOpacity(0.6);
    }
    else if (stimulus.opacity === 0.6) {
        stimulus.setOpacity(1.0);
    }
}
1 Like