How to create a filled circle in javascript

Online experiments
1

Hello,
I am trying to create a fixation dot for my experiment.
I tried to use Polygon on the Interface, but I just found out it cannot create circles.

Is there another way to create it in the interface?
What is the alternative way in Javascript?
Can I do it while keeping the units as “Height”?

Thanks

Mauro

2

Hi @Mauro83, circles are possible online using the polygon stim. Set your shape as a regular polygon with 99 vertices.

3

Hello,
I tried with this Polygon but I still get a rectangle instead

Screenshot 2020-05-15 at 20.38.29
Screenshot 2020-05-15 at 20.38.291452×1104 196 KB

4

Hi,

I’ve created circles using Shapestim and Polygon but not Circle.

e.g.

target = visual.Polygon(
    win=win,
    name="target",
    fillColor=yellow,
    lineColor=white,
    edges=36,
    pos = [0,voffset],
    size=scale*dtarget
    )
5

@Mauro83, what version of PsychoPy are you using?

6

PsychoPy v2020.1.2

7

This should work, perhaps try refreshing your browser cache.

Example of working circle: https://run.pavlovia.org/dvbridges/test_mousemove/html/

8

36 sides should be plenty

9

@wakecarter, I find that the smaller number of vertices is not scalable to larger circles, you end up with flat edges on a circle, thats why I recommend to use 99 vertices in PsychoPy .

10

Could you please spell it out a bit more? There are a lot of unknown variables (win, yellow, scale, etc.) and I did not manage to implement it

11

Here is some code used for the circle in the example:

polygon_2 = new visual.Polygon ({
    win: psychoJS.window, 
    name: 'polygon_2', units : 'height', 
    edges: 99, 
    size:[0.25, 0.25],
    ori: 0, 
    pos: [0, 0],
    lineWidth: 1, 
    lineColor: new util.Color([1, 1, 1]),
    fillColor: new util.Color([1, 1, 1]),
    opacity: 1, depth: -1, interpolate: true,
  });
12

Thanks!
But is says:

  • TypeError: visual.Polygon is not a constructor
13

@Mauro83, would you mind sharing the URL for your project?

14

Sure, https://run.pavlovia.org/mauro83/karin2/html/

15

Thanks @Mauro83. The code is set to use PsychoJS version 3.0.6, so if you have PsychoPy 2020.1.2, then you need to set the version of PsychoPy in the Experiment Settings dialog, either use blank, latest, or set the version to 2020.1.2/3 or some other latest version. After you have recompiled/resynced the code with the new version, you should be able to just use Builder to create your circle, as with the original suggestion.

16

It works! Thank you SO much!

17

win, and the colours are on my crib sheet.

scale is a constant to change the size of the circle (and other objects on the same screen)

1 Like
18

That crib sheet is a life saver!! Thanks :wink: