mgraphics gradients, more color stops?

Feb 17, 2014 at 2:09am

mgraphics gradients, more color stops?

I’m trying to create a gradient using mgraphics that goes through 5 colors. The documentation says to define “influence points” as parameters to pattern_create_linear. All the examples show a gradation between only two colors, using influence point 0 and influence point 1. It doesn’t seem to work when I add extra influence points. I guess the workaround would be to make multiple adjacent rectangles with each portion of the gradient but I’m hoping I can create this more easily and elegantly with one rectangle and multiple stops.
Here is the javascript I put in a js object that gets sent out to a jit.mgraphics object:
function makegradient() {
//make 40px x 8px rectangle
outlet(0, “rectangle”, 0., 0., 40, 8);
//create linear gradient with 5 influence points x0, y0, x1, y1, x2, y2, x3, y3, x4, y4
outlet(0, “pattern_create_linear”, “grad”, 2, 0, 10, 0, 18, 0, 26, 0, 34, 0);
//add color stop colors
outlet(0, “pattern_add_color_stop_rgba”, “grad”, 0, 1.0, 0.0, 0.0, 1.); //first color: red
outlet(0, “pattern_add_color_stop_rgba”, “grad”, 1, 1.0, 1.0, 0.0, 1.); //second color: yellow
outlet(0, “pattern_add_color_stop_rgba”, “grad”, 2, 0.0, 0.0, 1.0, 1.); //third color: blue
outlet(0, “pattern_add_color_stop_rgba”, “grad”, 3, 1.0, 0.0, 0.0, 1.); //fourth color: red
outlet(0, “pattern_add_color_stop_rgba”, “grad”, 4, 0.0, 0.0, 1.0, 1.); //fifth color: blue
//do the fill
outlet(0, “set_source”, “grad”);
outlet(0, “fill”);
//show it
outlet(0, “bang”);
}

Does anyone see an error with this syntax or is it just not supported? In Flash using ActionScript, for instance, you use a similar syntax to define multiple gradient “stops”.
Thanks, Bob

#281350
Feb 17, 2014 at 5:55am

There were a couple of problems, pattern_create_linear only takes 2 pairs of xy, and pattern_add_color_stop_rgba‘s offset argument is a float between 0 and 1.

Attachments:
  1. gradient-test.zip
#281370
Feb 19, 2014 at 12:18am

Thanks so much Emmanuel, that’s exactly what I was looking for.

Looking back at the MGraphics Quick Start Guide, however I would suggest some changes to the documentation to make this clearer.

For pattern_create_linear, The documentation says the parameters are “an influence point for each gradient section” when isn’t it more like defining the range of *all* the gradient sections? If I change the fifth line in the js to outlet(0, "pattern_create_linear", "grad", 0, 10, 100, 10); then the five color gradient runs over half the 200 px wide rectangle we are drawing.

Then in pattern_add_color_stop_rgba, it says this “will define a color value for one of the influence points of the pattern. The index parameter determine[s] which influence point is being defined.” But, actually this “index” parameter does not refer to one of the earlier-defined influence points (I assumed incorrectly, as you can see, that it was an index into an array of “influence points”, which in turn de-marked the different color stops) – its a float, as you point out, marking the extent of each color stop as a percentage of the total distance.

But anyway, thx again for clearing it all up for me.
-bob

#281534

You must be logged in to reply to this topic.