I don't understand how to use g.rotate in knob laf

[Mighty23]

I watched both the tutorial on YouTube and the examples in the LAF collection on the forum but I can't figure out how g.rotate works and how to draw a custom colored arc.

My goal is for the knob to rotate all the way around (360°). I believe the starting position is 9.0 if I wanted it to start at "12 o'clock"?
How to define the end of rotation?

laf.registerFunction("drawRotarySlider", function(g, obj)
{
	var a = obj.area;
	
	g.setColour(obj.bgColour);
	g.fillEllipse(a);
	
	g.setColour(obj.itemColour1);
	g.fillEllipse([10, 10, a[2] -20, a[3] -20]);
	
	g.setColour(obj.itemColour2);
	g.fillRect([a[2] / 2 - 8 / 2, 0, 8, 40]);
	
	// !!! g.rotate to rotate & draw arch (textColour) !!!
	/* var startOffset = 9.0;
	   var endOffset = start - ???;
	   g.rotate (end, ????);
	*/ 
});

I would also like to understand how to color the arc during rotation, I found an example on the forum but it is complicated and I would like to try to understand "the logic"
https://forum.hise.audio/topic/6615/laf-collection-for-everyone?_=1722276371692

[ustk]

@Mighty23 you can imagine the canva rotating around the second parameter coordinates [x, y], which should probably be the center of the knob in your case. So in definitive, as your knob's value is increasing, the "sheet" on which you're drawing is rotating.
The angle of rotation (first parameter) has to be in radiant (360° = 2*PI)

Since you probably don't want your knob to make a full revolution (2*pi), you'll need something like for example g.rotate(value * 3/2 * pi + offset, [w/2, h/2])
Offset is here because the starting point might not be where you want, so make it the value you need (i.e. -3/4*pi but I never remember if the starting point is at the top, or elsewhere...)

HISE | Docs

(docs.hise.audio)

[Mighty23]

@ustk Thanks, that's perfect. Now I have to understand how the arch works to which I will assign "textColor"

laf.registerFunction("drawRotarySlider", function(g, obj)
{
    var a = obj.area;
    
    // Draw the background ellipse
    g.setColour(obj.bgColour);
    g.fillEllipse(a);
    
    // Draw the inner ellipse
    g.setColour(obj.itemColour1);
    g.fillEllipse([10, 10, a[2] - 20, a[3] - 20]);
    
    // Calculate the rotation angle
    var start = 0; // Starting at 0 radians
    var end = 2 * Math.PI * obj.valueNormalized; // Ending at 2π radians for full rotation
    g.rotate(end, [a[2] / 2, a[3] / 2]);
    
    // Draw the needle
    g.setColour(obj.itemColour2);
    g.fillRect([a[2] / 2 - 8 / 2, 0, 8, 40]);
});