| Reference | Downloads | Github

Clickability of rotated images and polygons

OS : Win10
PsychoPy version : Standalone PsychoPy 2021.1.4 for 64bit Windows (using Python3.6)
Standard Standalone?: yes

What are you trying to achieve?:
The task features multiple bars which the subject can activate and deactivate on click; the bars are laid out in many different orientations.
The offline version works perfectly; however, in the online version, while the bar is correctly displayed as rotated, the relative clickable area does not rotate accordingly: e.g.: setting the rotation to 45° or 90°, the bar is displayed correctly at a 45° or 90° angle, while I can tell that the valid clickable area remains invariably the area of the unrotated bar.
See the visualization below: I have highlighted the valid click areas for two bars; the clickable area for the diagonal bar (in blue) does not follow the rotation set for the polygon.

2021-05-29 (2)

What did you try to make it work?:
I had initially built the bars as copies of a single png image. I was certain I could avoid the issue by using polygons instead, but the problem occurs even with polygons, i.e. narrow rectangles. As a result, I cannot have correctly matching clickable areas when the bars are rotated.

Am I missing something really stupid? I hope I made my issue clear.

@wakecarter, sorry for dragging you into this: I’ve been trying to fix it for days; I’ve read your cribsheet looking for possible mistakes but I can’t work it out.
Do you have any suggestion?

Hi There,

Yes this is a tricky bug that should be fixed in the new release of PsychoPy it is this “rotatePoint” method (but it isn’t out yet unfortunately so you will need a temporary patch!) visual/ShapeStim: rotate vertices not sprite by thewhodidthis · Pull Request #282 · psychopy/psychojs · GitHub to implement the patch try the following:

  1. send your experiment to runner view
  2. select “debug” in runner
  3. that will add a “lib” folder to your directory - rename it “custom-lib”
  4. Add the rotatePoint method to your util.js file and in your visual module replace the corresponding lines of the ShapeStim class.
  5. when you sync your experiment to pavlovia set export html to manual so that you can change the first few lines of your javascript experiment to import from “custom-lib” instead of “lib” then sync.

It is a bit pernickety for now but will be fixed in the new release - if you need further help please do share the link to your github project ! :slight_smile:

Hope this helps,


I’d have to code something from scratch based on mouse coordinates to solve this bug so I’m glad @Becca has come up with a solution for you.

Thank you @wakecarter, and thank you so much @Becca for your help.

I tried to follow your instructions to the letter but I still have issues making the new function rotatePoint to work. There must be some problem with cross-referencing across files.
I get an error when setting the vertices for the very first visual stimulus of the experiment:

when setting the vertices of ShapeStim: dot_pract_1
ReferenceError: rotatePoint is not defined

Here’s my gitlab project:

It would be great if you could give it a look. It’s possible I am missing something.
Thank you very much.

Hello! please could you make your project public so that I can view it?

Sorry. It’s public now :sweat_smile:


I just forked your task to take a look and I don’t get the error message of rotatePoint not being defined, in fact it seems to work pretty well - in the practice trials, but not the main trials. I think this is because I see you updated the practice trials to use polygons for the connecting bars rather than imageStims. Please could you confirm if you are still getting the error message or if this is fixed for you now?


Hi Becca,

sorry for the super late reply. I had to pause the project for a while and I just got back to it. Your method is working perfectly. I don’t think the “rotatePoint” method has been fixed yet, so I am gonna use your custom patch.

Thank you so much for the help.