Commit ab69311a authored by Jonathan Peirce's avatar Jonathan Peirce

First commit

parent 2dae7afb
Selectively inspect an image
=======================================
This demo shows the flexibility of dynamic stimuli.
We create an experiment where participants can only see a portion of the image by creating an image (called circleMask.png in this case) that we use to occlude our stimulus images. We set the circleMask to be the "mask" of an image stimulus.
You can see that this sort of dynamic stimulus is useful in various ways:
- you could see what parts of an image people choose to look at while gathering info
- with an eyetracker you could make it a gaze-contingent display and see what happens when the peripheral vision is not permitted (or reverse the mask and see what happens when viewers can *only* use their peripheral vision.
Details: what did we do?
-----------------------------
You can use any image as a mask. When you do this the opacity of the ImageStimulus is determined by the brightness of the pixels in the mask. If you look at the image circleAperture.png you'll see that most of the pixels are white (which will be opqaue) and just a few pixels (a circle in the center of the screen) are black. For this particular mask we've set the image to be 512x512 pixels and then drawn a circle of 20 pixels diameter in the center. We've then smoothed that with a gaussian blur of 10 pixels to give it a nice smooth edge.
We've then applied that image to an Image Component that we've called imageAperture and that has an image set to `color` and the color itself is `white` (meaning that no image is being superimposed, just a white mask). We've set the mask to be our mask image file and we've set the size to be 4x4 in `height` units (so that the outer edges of the mask image are always beyond the screen). You can see how that works by shrinking the size of the imageAperture, as we've done in the `showMeHow` Routine.
The final effect is an aperture that follows the mouse (we've turned on the mouse cursor in the experiment settings so you can see what's happening).
File added
This diff is collapsed.
<!doctype html>
<html>
<head>
<title>inspect_images [PsychoPy]</title>
<meta charset="UTF-8">
<!-- external libraries -->
<script type="text/javascript" src="lib/vendors/seedrandom.min.js"></script>
<script type="text/javascript" src="lib/vendors/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="lib/vendors/jquery-ui-1.11.4.base/jquery-ui.min.js"></script>
<script type="text/javascript" src="lib/vendors/stats.min.js"></script>
<script type="text/javascript" src="lib/vendors/pixi.min.js"></script>
<script type="text/javascript" src="lib/vendors/preloadjs.min.js"></script>
<script type="text/javascript" src="lib/vendors/xlsx.full.min.js"></script>
<script type="text/javascript" src="lib/vendors/log4javascript.min.js"></script>
<script type="text/javascript" src="lib/vendors/Tone.min.js"></script>
<!-- styles -->
<link href="lib/vendors/jquery-ui-1.11.4.base/jquery-ui.min.css" rel="stylesheet">
<link href="lib/psychojs.css" rel="stylesheet">
<!-- PsychoJS library -->
<script type="text/javascript" src="lib/psychojs.3.0.0alpha3.js"></script>
</head>
<body>
<div id="root"/>
<script type="text/javascript" src="./inspect_images.js"></script>
</body>
</html>
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Football images:
credit: Joel Solomon <https://www.flickr.com/photos/mole555/>
licenses all CC-BY (as of 13 July 2018)
links to flickr items:
https://www.flickr.com/photos/52755208@N00/7751347612
https://www.flickr.com/photos/52755208@N00/7751351978
https://www.flickr.com/photos/52755208@N00/7751357630
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment