Drawing using the mouse as a brush

rockNroll87q · May 14, 2019, 6:21pm

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!
Best,
Michele

drawing_demo

jon · May 14, 2019, 6:34pm

Very nice job of what you’ve done so far! 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
http://www.psychopy.org/api/visual/shapestim.html#psychopy.visual.ShapeStim

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

github.com

psychopy/psychojs/blob/982033a1b9f80332f16adfda4a8e0b616c707099/js/visual/ShapeStim.js#L32

    
      
          * @extends VisualStim
          * @mixes ColorMixin
          * @param {Object} options
          * @param {String} options.name - the name used when logging messages from this stimulus
          * @param {Window} options.win - the associated Window
          * @param {number} options.lineWidth - the line width
          * @param {Color} [options.lineColor= Color('white')] the line color 
          * @param {Color} options.fillColor - the fill color
          * @param {number} [options.opacity= 1.0] - the opacity
          * @param {Array.<Array.<number>>} [options.vertices= [[-0.5, 0], [0, 0.5], [0.5, 0]]] - the shape vertices
          * @param {boolean} [options.closeShape= true] - whether or not the shape is closed
          * @param {Array.<number>} [options.pos= [0, 0]] - the position of the center of the shape
          * @param {number} [options.size= 1.0] - the size
          * @param {number} [options.ori= 0.0] - the orientation (in degrees)
          * @param {string} options.units - the units of the stimulus vertices, size and position
          * @param {number} [options.contrast= 1.0] - the contrast
          * @param {number} [options.depth= 0] - the depth
          * @param {boolean} [options.interpolate= true] - whether or not the shape is interpolated
          * @param {boolean} [options.autoDraw= false] - whether or not the stimulus should be automatically drawn on every frame flip 
          * @param {boolean} [options.autoLog= false] - whether or not to log
          */

rockNroll87q · May 14, 2019, 6:55pm

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!!
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

jon · May 15, 2019, 8:17am

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

dvbridges · May 22, 2019, 10:00pm

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.

smweis · June 30, 2020, 3:48pm

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.

Aridosecco · December 10, 2020, 3:09pm

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!

Gina_Wang · October 1, 2022, 4:16pm

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

Topic		Replies	Views
Brush Component Online Behaviour Differs from Offline Online experiments pavlovia	3	740	February 10, 2021
Brush tool closes automatically in psychojs/online, despite closeShape : false Online experiments pavlovia	9	1196	April 16, 2021
Drawing using the mouse as brush Online experiments	1	614	January 26, 2021
Brush tool/ drawing by mouse changes behavior when adding picture stim to expriment (platform issue?) Online experiments	2	610	January 15, 2021
Storing data for line drawing task using the brush function Online experiments mouse , pavlovia	6	1538	March 16, 2021

Drawing using the mouse as a brush

Related topics