Thanks for the plugin which helps me to achieve lots of things. I'm now trying to achieve an adjustment task where one can drag an image to move it to a certain location of another background image (imagine the captcha task on some websites). I found your demo mouse_drawing which is very helpful. I adapted it by changing your drawLine function into drawImage, and it works. I have a question about the image presentation:
What I want to achieve is to show the background first for 1000ms, and then you can use mouse to drag an object on top of the background. To achieve this, I try to jsPsychImageKeyboardResponse to show the background first, then use jsPsychPsychophysics to show both the background and the object. Here are my questions:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="https://unpkg.com/@jspsych/[email protected]"></script>
<script src="jspsych-psychophysics-master/jspsych-psychophysics.js"></script>
<link href="https://unpkg.com/[email protected]/css/jspsych.css" rel="stylesheet" type="text/css"/>
</head>
<body></body>
<script>
// 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.
// If you are using pixi mode, https://pixijs.io/examples/#/demos-advanced/mouse-trail.js might be useful.
const jsPsych = initJsPsych({
on_finish: function() {
jsPsych.data.displayData();
}
})
console.log(`jsPsych Version ${jsPsych.version()}`)
const instruction = {
type: jsPsychHtmlButtonResponse,
stimulus: 'Click on the Start button.',
choices: ['Start'],
prompt: "This is a sample program for the jspsych-psychophysics plugin.",
}
let isDrawing;
let x;
let y;
const imgBkgFile = ['./stimuli/02/bkg.png']
const img_obj = {
obj_type: 'image',
file: imgBkgFile,
width: 500
}
// Preloading files are needed to present the stimuli accurately.
const preload = {
type: jsPsychPreload,
images: [imgBkgFile],
}
function drawImage(imageSrc, x, y) {
// Get the canvas element
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
var img = new Image();
img.src = imageSrc;
// Draw the image on the canvas once it's loaded
img.onload = function() {
context.drawImage(img, x, y);
};
// Handle image loading error
img.onerror = function() {
console.error('Failed to load image at ' + imageSrc);
};
}
var bkgshow = {
type: jsPsychImageKeyboardResponse,
stimulus: imgBkgFile,
stimulus_width: 500,
trial_duration: 1000,
choices: 'No_KEYS',
}
const adjust = {
type: jsPsychPsychophysics,
data: jsPsych.timelineVariable('data'),
// canvas_height: 500,
// button_choices: ['YES', 'NO'],
prompt: '<p>Click and move the mouse for drawing.</p>',
// If you don't want to present any stimuli, comment out the stimuli line and enable the empty stepFunc.
stimuli: [img_obj],
// stepFunc: function(){},
response_type: 'key',
choices: [' '],
clear_canvas: false,
on_load: function(){
isDrawing = false;
x = 0;
y = 0;
},
on_start: function(data){
imgBkg = './stimuli/02/bkg.png'//jsPsych.timelineVariable('startImgId');
imgObj = './stimuli/02/obj.png'
},
mouse_down_func: function(e){
x = 0;
y = e.offsetY;
isDrawing = true;
},
mouse_move_func: function(e){
if (isDrawing === true) {
const context = jsPsych.getCurrentTrial().context;
drawImage(imgObj, x, y);
y = e.offsetY;
}
},
mouse_up_func: function( e){
if (isDrawing === true) {
// drawLine(jsPsych.getCurrentTrial().context, x, y, e.offsetX, e.offsetY);
isDrawing = false;
}
},
on_finish:function(data){
data.resp= [x,y];
}
}
/* start the experiment */
jsPsych.run([preload, instruction, bkgshow, adjust])
</script>
</html>