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
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