Polygons and images not displaying online

URL of experiment: https://pavlovia.org/Wake/ebbinghaus-darts

Description of the problem:

I now have an experiment that doesn’t give an explicit error message but it doesn’t work either. There is supposed to be a yellow circle surrounded by 6 to 12 white circles. I’m currently using builder components for both. The code in the javascript looks like this.

// Initialize components for Routine "trial_components"

flanker_1 = new visual.Polygon ({
    win: psychoJS.window, name: 'flanker_1', 
    edges: 36, size:[1.0, 1.0],
    ori: 0, pos: [0, 0],
    lineWidth: 1, lineColor: new util.Color([(- 1.0), (- 1.0), (- 1.0)]),
    fillColor: new util.Color([1.0, 1.0, 1.0]),
    opacity: 1, depth: -4, interpolate: true,
  });
  
  target = new visual.Polygon ({
    win: psychoJS.window, name: 'target', 
    edges: 36, size:[(scale * dtarget), (scale * dtarget)],
    ori: 0, pos: [0, 0],
    lineWidth: 1, lineColor: new util.Color([(- 1), (- 1), (- 1)]),
    fillColor: new util.Color(1.0),
    opacity: 1, depth: -5, interpolate: true,
  });

// update component parameters for each repeat

   for (var Idx = 0, _pj_a = 12; (Idx < _pj_a); Idx += 1) {
        pic.push([((scale * cos((((Idx * 2) * pi) / nflankers))) * ((dtarget + offset) + (dflanker / 2))), (voffset + ((scale * sin((((Idx * 2) * pi) / nflankers))) * ((dtarget + offset) + (dflanker / 2))))]);
    }
    
    flanker_1.setPos(pic[0]);
    flanker_1.setSize([(scale * dflanker), (scale * dflanker)]);

    // *flanker_1* updates
    if (t >= 0.0 && flanker_1.status === PsychoJS.Status.NOT_STARTED) {
      // keep track of start time/frame for later
      flanker_1.tStart = t;  // (not accounting for frame time here)
      flanker_1.frameNStart = frameN;  // exact frame index
      
      flanker_1.setAutoDraw(true);
    }

    
    // *target* updates
    if (t >= 0.0 && target.status === PsychoJS.Status.NOT_STARTED) {
      // keep track of start time/frame for later
      target.tStart = t;  // (not accounting for frame time here)
      target.frameNStart = frameN;  // exact frame index
      
      target.setAutoDraw(true);
    }

Also, the dart displays correctly at the start of the routine but then disappears as soon as it is touched.

dart = new visual.ImageStim({
    win : psychoJS.window,
    name : 'dart', units : undefined, 
    image : 'dandelion_dart.png', mask : undefined,
    ori : 0, pos : [0, 0], size : 1.0,
    color : new util.Color([1, 1, 1]), opacity : 1,
    flipHoriz : false, flipVert : false,
    texRes : 128, interpolate : true, depth : -17.0 
  });

   dartpos = [0, (- 0.35)];
    dartsize = [0.25, 0.25];
    dartv = [0, 0];
    dartoldpos = [0, (- 0.35)];


    dart.setPos(dartpos);
    dart.setSize(dartsize);

   // *dart* updates
    if (t >= 0.0 && dart.status === PsychoJS.Status.NOT_STARTED) {
      // keep track of start time/frame for later
      dart.tStart = t;  // (not accounting for frame time here)
      dart.frameNStart = frameN;  // exact frame index
      
      dart.setAutoDraw(true);
    }

Happy Easter

Wakefield

Here’s what the screen is supposed to look like

And then this after a dart has been flicked

This is what it looks like using Pavlovia. The dart dissappears when touched. Touching the rectangle then moves to the next trial which looks identical (because the petals are the aspect that change between trials).

no expert on the java stuff, but there’s lots of other threads on the forum that talk about issues arising from images being presented locally (python) but not online (java) (**if my response doesn’t help and you haven’t already done so then have a search on the forum for past issues).

I had a similar issue - I had a conditions file in which the co-ordinates were like so: (205,150).
Apparently the browser likes separate co-ordinates, so I changed my conditions file to something like this:

If this isn’t what you are after then apologies, just thought it might be relevant.

Cheers,
Tom

Thanks for the suggestion. I’ve tried to look at this already, to no avail.

I’m not using a conditions file and the things not being displayed are polygons rather than images. There is only one image, which disappears when it is supposed to move, so I’ll have another look at that.

In the code it says:
dartpos = [0, (- 0.35)];

dart.setPos(dartpos);

dartpos = (dartpos + dartv);
dartv = (dartv * drag);
dartsize = [(dartsize[0] * 0.99), (dartsize[1] * 0.98)];
dart.pos = dartpos;
dart.size = dartsize;

I will try to separate dartv into dartvx and dartvy and see if that helps.

Best wishes,

Wakefield

Maybe use an image instead of a polygon for your flanker circles? I mean, I thought the Polygon stim works, but it would be easy enough to switch it out for a test, right?

I finally have a nearly working version of Ebbinghaus Darts. What I have learned is:

The objects need to be defined in Begin Experiment, not Begin Routine. Since I wanted to have 6, 8 or 12 petals, I defined all 26 and then switched them on and off in each routine using .setAutoDraw(True)

The colours to be used by the objects need to be defined in Begin Experiment to avoid having to constantly retranslate. For example, green=[-1,0,-1] in Python manually translated to green = new util.Color([-1, 0, -1]); in Javascript allows the object colour to be set to green (without quotes).

The main problem with my petals was failure in the Math trig functions. I originally had something like pos = [scalecos(Idx2pi/nflankers)(dtarget+offset+dflanker/2),voffset+scalesin(Idx2pi/nflankers)(dtarget+offset+dflanker/2)] but this was resolving to NaN.

I solved this by creating arrays in Excel:
pointsx = [1,0.86603,0.5,0,-0.5,-0.86603,-1,-0.86603,-0.5,0,0.5,0.86603,0.70711,-0.70711,-0.70711,0.70711]
pointsy = [0,0.5,0.86603,1,0.86603,0.5,0,-0.5,-0.86603,-1,-0.86603,-0.5,0.70711,0.70711,-0.70711,-0.70711]

Cheers,

Wakefield

1 Like

Nice one Wakefield. Glad you managed to solve the issues. :slight_smile:

That sounds sensible, although I don’t know why it would cause any real failure

That’s a very good idea for efficiency

best wishes,
Jon

Hmm, the other thing is that your study looks like it might be cool/interesting for a wide audience. And you know I’m always trying to encourage people to run more interactive studies (in the belief that PsychoPy allows more than the average package in terms of generating interesting experiments). Maybe we should be highlighting people’s cool studies on twitter. Let me know if you want us to tweet about it when it’s ready to go. You could get some free participants out of it (although they might be flaky)!

Hi Jon,

If I can get it working on mobiles then I’m sure that the student would appreciate the extra participants, and I’d be happy for you to use it to showcase PsychoPy online. Her original experiment was going to have people throwing real darts at Ebbinghaus illusion targets either from ground level on from the top of a wall (to induce anxiety).

Cheers,

Wake

1 Like