MGraphics radial gradients appear to be broken

Barney Watson

I've taken a bit of a deep-dive into MGraphics since Max 9 came out with the new v8ui object and ES6 support. Over the past couple of days I've been working on an audio-reactive dial.

I was trying to apply a radial gradient fill to a part of the dial. According to both the MGraphics quick-start guide, and the more thorough Max JS API documentation, pattern_create_radial takes 6 arguments: the x and y coordinates of the centre of the first colour stop, its radius, the x and y coordinates of the centre of the second colour stop, and its radius.

In practice, this does not work - the whole shape is filled with the solid colour set for the second colour stop. For example (with relative_coords = 0)...

with (mgraphics){
	arc(0, 0, 200, 0, 2 * Math.PI);
		
	let inner_gradient = pattern_create_radial(0, 0, 50, 0, 0, 100);
        inner_gradient.add_color_stop_rgba(0, 1, 1, 1, 1);
        inner_gradient.add_color_stop_rgba(1, 1, 0, 0, 1);

        set_source(inner_gradient);
	fill();
}

...displays the bottom-right quarter of a circle, filled with solid red.

However, running pattern_create_radial with four arguments appears to work 'correctly'. The first two arguments are the x and y coordinates of the centre of the gradient. The third argument seems to have no effect. The fourth argument is the radius of the first colour stop of the gradient. For example...

with (mgraphics){
	arc(0, 0, 200, 0, 2 * Math.PI);
		
	let inner_gradient = pattern_create_radial(0, 0, 0, 200);
        inner_gradient.add_color_stop_rgba(0, 1, 1, 1, 1);
        inner_gradient.add_color_stop_rgba(1, 1, 0, 0, 1);

        set_source(inner_gradient);
	fill();
}

...displays the bottom-right quarter of a circle, filled with a gradient from white to red.

Peter Elsea's Drawing with MGraphics in Max guide notes that the pattern_create_radial command was, at least when it was written in 2013, 'not currently working'. I'm unsure whether this bug was eventually fixed - or if I'm experiencing the same issue. At the same time, I might just be misreading the documentation and missing something obvious.

Any help would be greatly appreciated!

Joshua Kit Clayton

Thank you for the report. I can confirm that radial gradients in Max do not conform to the cairo convention (and never have). It appears that neither of the radius terms (arguments 3 and 6) are considered and point 1 (arguments 1 and 2)is the center of the gradient and point 2 (arguments 4 and 5) is assumed to be a point on the circumference of the circle for the gradient. This is due to limitations in the JUCE radial gradient implementation.

If I understand your intentions correctly, You should be able to get something like your initial attempt with

with (mgraphics){
	arc(0, 0, 200, 0, 2 * Math.PI);

        let ignored = 0;	
 	let inner_gradient = pattern_create_radial(0, 0, ignored, 0, 100, ignored);
        inner_gradient.add_color_stop_rgba(0, 1, 1, 1, 1);
        inner_gradient.add_color_stop_rgba(0.5, 1, 1, 1, 1); // keep white to 50% of the way to outer radius
        inner_gradient.add_color_stop_rgba(1, 1, 0, 0, 1); // fade from white to red from radius 50 to radius 100 

        set_source(inner_gradient);
	fill();
}

I've bumped the ancient ticket #3992 for documenting this properly.