Many items in search display

JasperdeWaard

Hello there,

I'm creating an online visual-search experiment with a 12x8 stimulus grid. Maybe I'll make this grid even larger at some point.

For simplicity, let's assume all 96 items are identical, a simple dot, but their locations are jittered.

I would prefer to not have to create 96 variables that specify each dot's x and y position. Is there a way to iterate over a list in the sketchpad? Or at least access an indexed item in a list?

Or is there some other elegant way to display these items in a sketchpad?

Thanks in advance,

Jasper

lvanderlinden

Hi @JasperdeWaard ,

Thanks for all your help on the forum! :)

But no, sorry, I can't think of an easy solution to your question. (Assuming that you are using OSWeb and therefore can't make use of Canvas objects...)

Maybe @sebastiaan or @eduard ?

Cheers,

Lotje

JasperdeWaard

Hi Lotje,

No problem, I enjoy it :)

And yeah, I was afraid you would say that. For the time being, I think I'll just show the target on its own and use a background image for distraction.

Cheers,

Jasper

eduard

Hi Jasper,

Well yeah, canvases don't work, but creating arrays, randomizing them and extract values from it to use in sketchpads does work.

I won't be able to give you a complete script here, because I haven't done it myself (and have limited experience with javascript), but the general procedure should be following:

1) Create an array with all the x s and y s that correspond to the grid coordinates. Depending on how you run your randomization, you might want to shuffle the list of coordinate pairs

2) Add some random noise to each coordinate, to create that jitter effect you mentioned. Somehting like this, should do the trick:

vars.x1 = vars.x1+parseInt(Math.random()*10) # adds a jitter of up to 10 pixels

3) In the beginning of every trial, you have to extract as many values as you have coordinates and assign them to variables. If exp.set is implemented for osweb that can easily be done in a loop:

# python syntax for simplicity, should be quite similar in js
for i in range(length_of_coordinate_list):
    exp.set("x"+str(i),  coordinate_list[i][0])
    exp.set("y"+str(i), coordinate_list[i][1])

If not supported, you might be able to do something like this:

(vars.x1, vars.y1), (vars.x2, vars.y2), ... , (vars.xn, vars.yn) = coordinate_list

Which is quite annoying to write, but at least you would only need to do it once. You can also try to combine this step with step 2).

These variables can then be used in the sketchpad.

4) You need to create one with all the dots you have in mind and set their x and y coordinates to corresponding variable (e.g. [x1] and [y1]).

I am quite sure the operations you need to do to create the lists can be done in javascript.

This discussion might further help in getting javascript inspiration. I suggest you give it a try and if you get stuck somewhere, you get back to us and we try to help. Yes?

Good luck,

Eduard

JasperdeWaard

Hi Eduard,

Thanks for the detailed explanation! I think I understand the logic of it, and I agree that creating the list in javascript won't be the problem. I was just hoping to avoid the creation of 96 separate dots, each with its own x and y variables, but I guess it wouldn't be the end of the world :)

Cheers,

Jasper

lvanderlinden

Perhaps you can write a little script to write the script... ;-)

JasperdeWaard

That sounds like a smart idea :)

sebastiaan

Perhaps you can write a little script to write the script... ;-)

That was going to be my suggestion too, yes. For example, the Python script below will generate 10 textline elements with their identities and positions defined in terms of variables. You can then copy-paste this into the script of a sketchpad . (So copy-paste the output of the Python script below, not the Python script itself!)

lines = [
    f'draw textline center=1 color=white font_bold=no font_family=serif font_italic=no font_size=32 html=yes show_if=always text="[stim{i}_text]" x=[stim{i}_x] y=[stim{i}_y] z_index=0'
    for i in range(10)
]
print('\n'.join(lines))