Functions used to arrange stimuli in a circle

[chenyu-psy]

Hi Ajit,

This function serves the general functions displayStimuli and displayButtons #21 . It arranges all of the stimuli in a circle.

Parameters

1. stimuli: an array of objects, including all necessary information for displaying, except for location.
2. centre: an array([x, y]), the centre position of the circle, the default value is the centre of the screen.
3. radius: a number, the radius of the circle
4. border: an object, an array of objects, or null. If it is an object, it draws a border for each object according to the properties we have set. If it is an array of objects, it draws a border for each object according to the properties we have set for each one.

Details for stimuli

We expect four different types of stimuli: images, text, rectangles and circles. They can be saved in the save array such as [image1, image2, circle1, text1, circle2, ...]

Image properties

1. imagePath: the path of the image.
2. background: the background colour of the image (HEX code).
3. width: the width of the image
4. ratio: the ratio between width and height. The default value is the original ratio.
5. angle: a number, the angle of rotation of the object

Text properties

1. content: the content of the text
2. colour: the font colour of the text (HEX code).
3. size: the font size of the text
4. family: the font family of the text
5. angle: a number, the angle of rotation of the object

Rectangle properties

1. width: the width of the rectangle
2. height: the height of the rectangle
3. fillColor: the filled color of the rectangle
4. angle: a number, the angle of rotation of the object
5. lineType: the type of the contour (solid, dash, ...)
6. lineWidth: the width of the contour
7. lineColor: the color of the contour

Circle properties

1. radius: the radius of the circle
2. fillColor: the filled color of the rectangle
3. lineType: the type of the contour (solid, dash, ...)
4. lineWidth: the width of the contour
5. lineColor: the color of the contour

Details for border (the same properties as the rectangle)

1. width: the width of the border
2. height: the height of the border
3. background: the background colour of the border
4. angle: a number, the angle of rotation of the object
5. lineType: the type of the contour (solid, dash, ...)
6. lineWidth: the width of the contour
7. lineColor: the color of the contour

Output

The output of this function should be the same array as stimuli, but each object involves the location information.

[icourage]

Hi Ajit,

I thought a cool add-on to this function might be that there is a 5th parameter (lets call it _startposition) with which you can indicate where exactly on the “imaginary” circle the first stimulus will be presented.

As far as I know these functions that present stimuli in a circle often present the first item at the right-most position of the circle (I believe because cos and sin of 0° is at that position). It would be nice if with this additional 5th parameter you can indicate that the first stimulus should not be presented at where cos and sin is 0° but maybe for example cos and sin of 30°. This could give you some flexibility to control where exactly these stimuli are positioned on the “imaginary” circle.

So in this case, the 5th parameter would be a number, in degrees or radians, that indicates the shift of the first stimulus item on the circle.

Feel free to just write if this explanation was not clear enough. Thank you! :)

Best, Isabel

[ajit283]

Hi Chenyu, hi Isabel, I have added a first version of the circle and line functions in the dev branch. I haven't released them as a new version on npm yet, as I want to hear your thoughts about it first. To test, you can run the example experiment (arrangeInCircle-test) that is also on the dev branch. Be sure to run npm i before running the experiment. Let me know if you have feedback or any problems running the experiment!

[chenyu-psy]

Hi Ajit, it looks very cool! That is what we want. Just want to know, how can I present additional stimuli on that screen? For example, a question or some instruction to tell participants what they should do on the screen.

[chenyu-psy]

One idea just came to my mind: maybe we can add a property "position" for stimuli. When we want to have a specific layout, we only need to have a simple function to calculate the position for each stimulus. Based on this idea, we can simplify the arrangeCircle function to arrange function (or other name, like displayStimuli) and use it to display any stimulus that we want to present. In the meantime, the border property can also be a property for stimuli.

What do you think, Ajit?

[icourage]

Hi Ajit,

Apologies for my belated response and thanks a lot for implementing so quickly already a first version as well from my side! It seems to work for me as well in general. Can I ask you something about the start_position argument, do I understand it correctly so far that you can type there an integer and this basically indicates what position is selected for the 1st item? Greetings

[ajit283]

One idea just came to my mind: maybe we can add a property "position" for stimuli. When we want to have a specific layout, we only need to have a simple function to calculate the position for each stimulus. Based on this idea, we can simplify the arrangeCircle function to arrange function (or other name, like displayStimuli) and use it to display any stimulus that we want to present. In the meantime, the border property can also be a property for stimuli.

What do you think, Ajit?

I tried this approach just now, but I noticed a problem. Only the circle shape is defined using explicit position coordinates, all the other shapes use css flexbox and other layout methods where the position isn't explicitly calculated. That's why it's difficult to have one function that generates all the positions and another that generates the html. I will try to factor out as many similarities as possible, however I think it's best to keep the functions seperate at the moment. From a user perspective, the differences should not be that large.

[ajit283]

Hi Ajit,

Apologies for my belated response and thanks a lot for implementing so quickly already a first version as well from my side! It seems to work for me as well in general. Can I ask you something about the start_position argument, do I understand it correctly so far that you can type there an integer and this basically indicates what position is selected for the 1st item? Greetings

Hi Isabel, that's exactly how it works! Let me know if this is intuitive enough.

[ajit283]

Hi Ajit, it looks very cool! That is what we want. Just want to know, how can I present additional stimuli on that screen? For example, a question or some instruction to tell participants what they should do on the screen.

Hi Chenyu, the function generates html as a string, so you could just add any other html string before or after it:

stimulus: "<div>hello world</div>" + arrangeInCircle({ stimuli: [ ], centre: [0, 0], radius: 350, border: { lineWidth: 5, lineColor: "red", lineType: "dashed" }, start_position: 2, }),

I can also add a property like center_html to display HTML in the center of the circle, let me know if that's a good solution

[chenyu-psy]

Hi Ajit, thank you for your responses. They look good. I don't think we need to add a property to display HTML. Instead, introducing a new function like arrangeElement could be a good idea. This function will be used to display a single element at a specific position. Or could we use arrangeLine to do this thing?

[ajit283]

Hi Chenyu, you're right, arrangeLine with a single element in the stimulus array should be able to do this!

[icourage]

Hi Ajit,

First of all, Happy New Year! :) And thanks for the elaboration. Using an integer is perfect, I think it's intuitive enough.

[icourage]

Hi Ajit,

I'm not sure if you still have open hours with regards to your work contract, but I wondered whether you would be able and have time to add an argument for this function. I thought it would be a cool add-on that there is a parameter (rotation) with which you can indicate how much the position of the stimuli locations should be rotated on the imaginary circle. As I understand it the start_position argument only shifts stimulus 1 for example from location 1 to location2, but you can't change and rotate the locations 1 and 2 on the circle.

It would be nice if with this additional parameter you can indicate that all the locations should be rotated by for example 45° on the imaginary circle. I guess it would be the easiest if the argument would be presented as a number, in degrees or radians indicating the rotation. I attached an image to make a little bit clearer what I mean.

But what do you think of this Ajit? Is it possible to do this already in a different way and do you have time left to implement this?

Best, Isabel

[ajit283]

Dear Isabel, sorry for the late response! I had to prepare for exams. I just added a optional parameter (rotateDegrees) to the function to do this. A demo for this is in the arrangeInCircle-test experiment in the dev branch. Let me know if this is what you thought of!

Best, Ajit

[icourage]

Dear Ajit,

No worries at all! As you can see I'm a little belated myself. But I had a look at the new implementation and played around with it. This was exactly what I had in mind and so far everything seems to work perfectly from what I can tell.

Thank you very much! (And I hope the exams went well or wish you good luck if you are not through with them yet)

Best, Isabel