You can view and edit the source code on the CodePen page.
Please see Presenting gabor patches in online/web experiments first.
- draw-gabor-patches.html-CodePen This file demonstrates how to present gabor patches.
- drifting-gabor.html-CodePen This file demonstrates how to present a drifting gabor patch.
- gabor_tilt.html-CodePen This file demonstrates how to change the tilt of the gabor by pressing keys.
twoImagesWithSOAinFrames-CodePen This file is nearly same as the twoImagesWithSOA.html except for that the display durations are specified in frames not in ms. The first image is presented for 5 frames (about 83 ms in a 60 Hz monitor), and the second image is presented for 20 frames (about 333 ms in a 60 Hz monitor) with a 60-frame SOA.
mask_filter.html This file demonstrates how to apply masking and filtering to the image file.
draw_part_of_image.html-CodePen This file demonstrates how to use the
drawFuncwith the image object. You need not to use the drawFunc when you present intact images. But if you want to modify the images, for example, if you want to present a part of the image, the drawFunc is useful.
This file demonstrates how to present two sounds with a 1000-ms SOA.
Note that the experimental files (html, js, and audio) must be uploaded in a web-server to run.
This file demonstrates how to play the sound by pressing a key. This program doesn’t use the Web Audio API.
I’m sorry, but this program will not work with jsPsych 6.3.0 and above. Please use the play_html5_sound_by_key.html instead.
This file demonstrates how to play the sound by pressing a key. This program uses the Web Audio API. The Web Audio API should be used for time-accurate presentation, but the code would be a bit more complex compared with the play_html5_sound_by_key.html.
This file demonstrates how to specify the keyboard-event functions. Pressing the ArrowUp/ArrowDown key, the luminance of the circle will change. Press the space key to finish the program.
This file demonstrates how to specify the mouse-event functions. As you move the mouse, the slope of the line segment changes. By changing the direction of the mouse in motion, the direction of rotation of the line changes. This also demonstrates how to use buttons as a response.
This file demonstrates how to specify the mouse-event functions. This demo is like a drawing application. Note that the
clear_canvas property is set to false.
This file demonstrates how to use the
raf_func which is called by the requestAnimationFrame method. The elapsed time after begging of a trial is presented both in milliseconds and in frames.
A circle moves on a virtual circumference.
This file demonstrates how to use the raf_func which is called by the requestAnimationFrame method, and excuted synchronized with the refresh of the display.
You can directly access the canvas (of which the context) using the raf_func. You can draw complex visual stimuli.
- Advanced! draw_two_images_repeatedly.html-CodePen This file demonstrates how to present two images repeatedly until a participant responds to them. This demonstration can be applied to the study on like the change blindness.
lines.html-CodePen This file demonstrates how to present lines. There are two ways to define a line; one is to specify the
line_length, the other is to specify the start (x1, y1) and end (x2, y2) positions of the line. Note that you can not specify both the angle and positions for the same object.
This file demonstrates how to present (moving) rectangles.
The ‘Hello world!’ demonstration. You can start a new line using the ‘\n’. Texts can be moved as the same as rectangles.
This file demonstrates how to present a text message, a rect, and a circle with SOAs
This file demonstrates how to present moving circles. There are three ways to define motion.
- Using the distance and time.
- Using the distance and speed.
- Using the time and speed.
Note: You can not specify the speed, distance, and time at the same time.
This demonstration is the same as the movingCircles.html except for specifying the timing information in terms of frames.
show_start(end)_frame property is used instead of the
the motion_start(end)_frame property is used instead of the
Note that if you define motion using the distance and time, you have to specify the time in milliseconds not in frames.
A visuals timulus graduated from white to black moves from left to right. This program uses the
This file works as the same as the twoImagesWithSOA.html, but the use of the jsPsych.timelineVariable function is slightly different. When you want to use the timeline_variables property with the jspsych-psychophysics plugin, see this file first.
This file demonstrates how to respond using a mouse. This can be made by specifying the
This file demonstrates how to present objects using a coordinate with the center of the window as the origin. Set the origin_center property to true (The default is false).
This file demonstrates how to randomize the show_start_time of a image stimulus. The stimulus image is presented from 500 to 3000ms after the fixation point.
If you are using a Mac which has a retina display, the resolution may not match the number of pixels of the canvas. Using this demo, you can know the number of pixels of the canvas.
This demo explains how to specify different start time of presentation of an image for each trial, and how to get the reaction time based on the start time.