Storing data for line drawing task using the brush function

URL of the experiment:

Code in: Sign in · GitLab

Description of the problem:

Dear all,
I’m trying to run an online experiment in which participants are presented with a variety of different occluded images and are instructed to fill in the occluded portions with some line drawings. I created the task by implementing the brush function in the psychopy builder. Everything is working, however, I am unable to collect data for participants’ line drawings - as in the various mouse positions. When I run my experiment in psychopy I see the data I want in the log data file (screenshot) but I need to convert this into the actual data file.
Any suggestions?

Thanks in advance!

Hi There,

Firstly, whilst playing with this I noticed a bug that you might encounter for a short period - note that a permanent fix is on the way for that Brush tool closes automatically in psychojs/online, despite closeShape : false

To save data though, can I recommend you add a mouse component that saves data on every frame. Here is a demo file :slight_smile:

Hope this helps,

This works perfectly thank you! :slight_smile:

Hi @Becca I have just started developing a creativity task where the participant is required to draw inside 30 circles, is there a way to save the drawings that they do? Or is it only possible to save x y coordinates as per your basic brush demo? Many thanks

If you add a mouse component at each frame alongside the brush component in psychopy, the data file will save participants’ screen coordinates at every frame(mouse.x, mouse.y) as well as whether a participant was actually drawing at that given frame(mouse.leftbutton). So then when you’re turning your coordinates back to images, using python, you just have to write an additional piece of code to only use coordinates when mouse.leftbutton = 1.
However, if you’re running your experiment online to pavlovia and are scared that the sheer amount of data will crash the database, you probably only want to only store relevant coordinates where participants are actually drawing in the first place. To do this you have to manually edit your js file.

First you have to create 2 new variables:
mouse.xdraw = []
mouse.ydraw = []

then in the code where you see the original variables mouse.x and mouse.y being populated
mouse.x.push(_mouseXYs[0]); mouse.y.push(_mouseXYs[1]);

you have to add or (simply replace it) with the following:
if(_mouseButtons[0] == 1){mouse.xdraw.push(_mouseXYs[0])};
if(_mouseButtons[0] == 1){mouse.ydraw.push(_mouseXYs[1])};

And then finally just make sure you save your data you just have to add the following where everything else is being saved:
psychoJS.experiment.addData(‘mouse.x_draw’, mouse.xdraw);
psychoJS.experiment.addData(‘mouse.y_draw’, mouse.ydraw);

Here’s the code I wrote for my experiment which did this and worked perfectly. I know it’s really long but just look for the variables mouse.xdraw and mouse.ydraw and hopefully you should understand what’s being done.


Hi @Becca, I can not see the demo file in gitlab on this link you shared,
it gives a 404 error, can you help ?

Hi There,

Ah that will be a temporary issue due to the pavlovia disruptions. Here is a new link you should be able to access. Pavlovia