Adding custom shape (arc) via Builder for Pavlovia

Online experiments
1

Hello All, I’m very new to this. Please let me know how I can clarify this!

URL of experiment:
If you tell me how to add this, I will!

Description of the problem:
I have been coding up my experiment, which I eventually hope to post on Pavlovia, using the builder view. I’ve already encountered and gotten around several errors when uploading my working psychopy code online (such as needing to explicitly define cos() as Math.cos(), which makes the builder/psychopy version not run anymore).

I have not yet figured out a way to include a custom shape

I need to add an arc with a varying length (degrees) on every trial. I understand that visual.ShapeStim is the way to do this, but I’m having trouble actually implementing it. In the “custom code” section of my routine I have tried typing:

Test1 = visual.ShapeStim(win, lineColor = ‘green’, vertices = ProgVertices, pos = (0,0), autoDraw = True));

However, this throw a “/* Syntax Error: Fix Python code */” in the right window, and the compiling just doesn’t seem to happen (as there is no error thrown on Pavlovia, but neither is there a stimulus!)
I’ve attempted to add the new stimluls to the .html file, but then it disappears anytime I update the builder view/recompile/try to push to the web, so I have no idea if that might work…

Could someone please help me.
A). add a stimulus, preferably in the builder coder window and
B). have a section of code that takes the two edges of the arc and makes an array of vertices for the ShapeStim, as I have been having trouble with for-loops in py/js (py uses range, which js doesn’t like, and any js version I’ve tried also has thrown up the “/* Syntax Error: Fix Python code */” and doesn’t compile.

Thanks!

2

I don’t know much about shapeStim but it seems like you have an extra close parenthesis in the line of code you share. Perhaps deleting this will solve the translation issue.

3

That did help. I’ve also been making progress. Needed to redefine win as psychojs.window.

4

I use (in the Python Begin Experiment code)

polydart=visual.ShapeStim(
    win=win, name="dart",
    fillColor=blue,
    lineColor=white,
    vertices=[[0,.5],[.01,.48],[.01,.28],[.08,.15],[.05,-.25],[0,-.5],[-.05,-.25],[-.08,.15],[-.01,.28],[-.01,.48]],
    pos = dartoldpos
    )

I have the following in an earlier Begin Experiment Javascript only code block

pi=Math.pi;
win = psychoJS.window;
thisExp = psychoJS.experiment;

plus colours defined in a Both block

**Python**
white=[1,1,1]
blue=[.058,.192,.2]

**Javascript**
white = new util.Color([1, 1, 1]);
blue = new util.Color([.058,.192,.2]);

Best wishes,

Wakefield

5

That util.Color thing is super useful!

Anyone got any ideas on making a for-loop so that I can specify the start and end angles and then create new vertices between them? I think Js uses sytax like:

var i
for (i=#, condition, step){
what you want the loop to do
}

But this won’t compile in the coder.

6

I did have something like the following in Python (but ended up not using it):

for Idx in range(12):
    flankx.append(scale*cos(Idx*2*pi/nflankers)*(dtarget+offset+dflanker/2))
    flanky.append(voffset+scale*sin(Idx*2*pi/nflankers)*(dtarget+offset+dflanker/2))

For the Javascript .append needs to be manually changed to .push

arrays need to be predefined
pi, cos and sin also need to be set up in the starting JScode as per my crib sheet.