| Reference | Downloads | Github

Approach Avoidance Task - how to make dragging a mouse change the size of an image


I am trying to create an approach avoidance task (AAT) on Psychopy. I need the participants to be able to make a sequence of images progressively larger or smaller by dragging their mouse either towards (approach) or away (avoidance) from themselves.

I have little to no experience with coding, so is this is even possible to do on psychopy?

If anyone knows any info on this matter please get back to me! :slight_smile:


1 Like

Hi @ella96, you can do this using a code component and mouse. In the relevant code tabs:

###### Begin Experiment ######
sizeChange = .5  # Start with default size

###### Begin Routine ######
mouse.setPos((0, 0)) # Set the mouse position to center

###### Each Frame ######
yMove = mouse.getRel()[1]  # Check whether mouse moved on Y dimension

# Increase or decrease sizeChange variable
# depending on direction of movement
# e.g., make smaller if pushing away
if yMove > 0:
    sizeChange -= .01
elif yMove < 0:
    sizeChange += .01

You now have a variable that you can use to control the size of your image, using your mouse.

1 Like

So I’ve just put this code in my loop of trials.
When the image changes the mouse is automatically put back into the center (0,0) of the image which is perfect! However, the image itself doesn’t change in its size as soon as I click to drag the image it jumps to the next one…

Is there something else I can add to stop this happening?
Maybe I haven’t put in the correct mouse properties?

Ah, I did not see that it needed a button press. Try the following code instead:

if mouse.getPressed()[0] == 1:
    if yMove > 0:
        sizeChange -= .01
    elif yMove < 0:
        sizeChange += .01

Also, if not done already, set the size of your image to sizeChange and set it to update on every frame.

Yes that worked thanks!

Now the images are changing in size. Is there a way to have the images always start at its original size, and not the size of the previous image once its been enlarged/minimised?

Sure, in the image component, leave the size as blank and set updates to “constant”. Then, update image size instead:

if mouse.getPressed()[0] == 1:
    if yMove > 0:
        image.size -= .01
    elif yMove < 0:
        image.size += .01

Okay I tried the image.size but it came out a lot more distorted and still had the same issue, so I changed it back to sizeChange which works a lot better but I have screen shot part of the experiment!

As you can see from the images, the size change works great :slight_smile: However, the next image stays the same size as the size change of the previous one which doesn’t work very well…

I think I need the images all to start at their normal size and then the participant can choose to enlarge or shrink the image

Thank you so much for all your help by the way!