Drawing using the mouse as a brush

URL of experiment: demo [PsychoPy]
Code in: Michele Svanera / demo_drawing · GitLab

Dear all!
I’m trying to run an online experiment in which the subject has to draw some figures with the mouse (see GIF below).
Nothing really complicated: I created the python code, I imported in the builder, and now I’m trying to create the online experiment.
Everything is working, except I have an annoying closing effect, in which the code tries to close the polygon I create (run the online experiment and you’ll see it).
I checked: any browser does that.

Any suggestion?

Thanks in advance!



Very nice job of what you’ve done so far! :slight_smile: When this works I think we should definitely include it as a demo of what can be achieved with a bit of code (if that’s OK with you?)!

ShapeStim in PsychoPy has an argument closeShape which defaults to True

and it looks like that has been implemented identically in PsychoJS:

Amazing @jon! It’s working inserting closeShape: false .
Thanks a lot!
It’s strange that with python (builder or code) it’s working anyway, even if the default is closeShape=True.

Of course you can use it: I would be proud of it!! :slight_smile:
Let me share also the python code for the #coder mode: GitHub - rockNroll87q/pyDrawing: Toy example on how to use the mouse to draw stuff in python

Thanks. Actually, I’m thinking a step further now - your code coud be the beginning of a Pen Component in Builder!


Hey @jon, I have a working version in Python based on @rockNroll87q nice work. Happy to get working on the Builder implementation if you or @rockNroll87q are not planning on making a pull request.

1 Like

Hi all - this functionality looks great. I’m wondering about this implementation though - it’s a little buggy. If you click on the demo above (and in my code), and move the mouse somewhat slowly with the mouse held down, the ‘shape’ draws with intermittent pixels (screen shot attached). The top line was drawn quickly and smoothly. The bottom line was drawn slowly and smooth, with increasing speed toward the end. But note, even where the drawing is smooth, there are gaps when direction is changing quickly.

Any ideas for how to fix this in JS? This problem does not occur in the Psychopy standalone.


Hi all,

I am having the same issue, using essentially exactly the same code as this, but javascript tries to close the shape even with closeShape:false. The experiment runs fine offline in python, but in javascript is dotted when moving the mouse slowly, and closes the shape by itself. The same thing happens when I use the new dedicated Brush component. With the brush component, the automatically generated javascript code states closeShape : false, but alas the shapes are still being closed!
Here is my experiment URL:

And the code:

Any suggestions very welcome!

Hello, I met exactly the same issue. I am wondering how did you fix this problem?