I need help from a trigonometry wizard

[A Former User]

I am in need of assistance here. I need some trigonometric advice. Thinking about this one really makes my brain hurt!

So. I have a panel and a knob. The paint routine is inside the knob callback and is setting the upper value for the loop that will rotate and paint the little circles, a maximum of 11 of them for now. You can see it in the video.

Now I want to set up a mouse callback that colors the clicked circles with a different color.

Now the first ellipse always stays in the same place, but... the rest of them change slightly, of course, depending on the knob (that sets the rotation angle). My problem is how to find those ellipse areas with a mathematical operation that takes care of the ever-changing rotation?

I thought of storing the areas for each ellipse in an array of its own... of course for each knob position... but I think there might be a possibility to do it all in one swoop using a loop or something...

See the attached video down below!

Thanks in advance to the trigonometry wizards who might have a solution to this!!!

Content.makeFrontInterface(980, 540);

const var Panel1 = Content.getComponent("Panel1");

const var knbPoints = Content.getComponent("knbPoints");

inline function onknbPointsControl(component, value)
{
    Panel1.setPaintRoutine(function(g)
    {
        g.fillAll(Colours.lightblue);
        g.setColour(Colours.black);
        g.drawEllipse([0, 0, this.getWidth(), this.getHeight()], 5);
        g.fillEllipse([this.getWidth()/2-2.5, this.getHeight()/2-2.5, 5, 5]);
        
        var a = [20, 20, Panel1.getWidth()/2, Panel1.getHeight()/2];
    
        for (i = 0; i < knbPoints.getValue(); i++)
            {
                g.fillEllipse([a[3]-a[1]/2, a[4], a[1], a[1]]); 
                g.rotate(Math.toRadians(360 / knbPoints.getValue()), [Panel1.getWidth() / 2, Panel1.getHeight() / 2]);       
            }  	
    });

};

Trigonometric problem.mp4

Google Docs (drive.google.com)