Added the change_attr function to change attributes of the object dyn…

…amically.
kurokida · Oct 24, 2020 · 3d2e9ab · 3d2e9ab
1 parent 1147e61
commit 3d2e9ab
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 1 deletion.
diff --git a/demos/change_attributes.html b/demos/change_attributes.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="../jspsych.js"></script>
+  <script src="../jspsych-psychophysics.js"></script>
+  <link rel="stylesheet" href="../css/jspsych.css"></link>
+</head>
+<body></body>
+<script>
+    let color = 0;
+
+    var text_object = {
+      obj_type: 'text',
+      startX: 0,
+      startY: 100,
+      origin_center: true,
+      content: 'RGB = [0, 0, 0]',
+      font: "22px 'Arial'",
+      text_color: 'white',
+      change_attr: function(stim){ // Change the content dynamically
+          stim.content = `RGB = [${color}, ${color}, ${color}]`
+      } 
+    }
+
+    var rect_object = {
+        obj_type: 'rect', // means a rectangle
+        startX: 0, // location in the canvas
+        startY: 0,
+        origin_center: true,
+        width: 100, // of the rectangle
+        height: 100,
+        line_color: 'rgb(0,0,0)',
+        fill_color: 'rgb(0,0,0)',
+        change_attr: function(stim, times, frames){ // called by the requestAnimationFrame
+            const frequency = 0.05;
+            const sin_value = Math.sin(2 * Math.PI * frequency * times/1000) // The times are in terms of milliseconds
+            const normalized_value = sin_value/2 + 1/2; // from 0 to 1
+            color = Math.floor(normalized_value * 255) // An integer between 0 and 255
+            stim.fill_color = `rgb(${color}, ${color}, ${color})`
+        }
+    }
+
+    var trial = {
+        type: 'psychophysics',
+        stimuli: [text_object, rect_object],
+        choices: ['y', 'n'], // The participant can respond to the stimuli using the 'y' or 'n' key.
+        canvas_width: 600,
+        canvas_height: 600,
+    }
+
+    jsPsych.init({
+        timeline: [trial],
+        on_finish: function(){jsPsych.data.displayData();}
+    });
+</script>
+
+</html>
diff --git a/docs/objectProperties.md b/docs/objectProperties.md
@@ -38,6 +38,7 @@ This code means that a white rectangle is presented at coordinates (200, 150) in
 |line_width|numeric|1| The width of the line.|
 |lineJoin|string|'miter'|[The type of the corner when two lines meet](https://www.w3schools.com/tags/canvas_linejoin.asp)|
 |miterLimit|numeric|10|[The maximum miter length](https://www.w3schools.com/tags/canvas_miterlimit.asp)|
+|change_attr|function|null|You can change the attributes of the object dynamically. The first argument is the stimulus, the second is the elapsed times in milliseconds, and the third is the elapsed times in frames. See [the demos/change_attributes.html](https://www.hes.kyushu-u.ac.jp/~kurokid/jspsychophysics/demos/change_attributes.html).| 
 
 NOTE: The *horiz(vert)_pix_frame(sec)* can be automatically calculated using the *startX(Y)*, *endX(Y)*, *motion_start_time*, and*motion_end_time*.
 
@@ -119,7 +120,7 @@ This object would be used as the fixation point.
 
 |Property name|Type|Default Value|Description|
 |---|---|---|---|
-|drawFunc|function|undefined|You can draw whatever the `<canvas>` supports.| 
+|drawFunc|function|null|You can draw whatever the `<canvas>` supports.| 
 
 If you want to draw something that the jspsych-psychophysics does not provide the method, you can draw it using the drawFunc function. 
 

diff --git a/jspsych-psychophysics.js b/jspsych-psychophysics.js
@@ -98,6 +98,12 @@ jsPsych.plugins["psychophysics"] = (function() {
             default: null,
             description: 'This function enables to move objects horizontally and vertically.'
           },
+          change_attr: {
+            type: jsPsych.plugins.parameterType.FUNCTION,
+            pretty_name: 'Change attributes',
+            default: null,
+            description: 'This function enables to change attributes of objects immediately before drawing.'
+          },
           is_frame: {
             type: jsPsych.plugins.parameterType.BOOL,
             pretty_name: 'time is in frames',
@@ -834,6 +840,7 @@ jsPsych.plugins["psychophysics"] = (function() {
         if (stim.drawFunc !== null) {
           stim.drawFunc(stim, canvas, ctx);
         } else {
+          if (stim.change_attr != null) stim.change_attr(stim, elapsedTime, sumOfStep)
           present_functions[stim.obj_type](stim);
         }
         stim.is_presented = true;