mgraphics gradients, more color stops?


    Feb 17 2014 | 10:09 am
    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

    • Feb 17 2014 | 1:55 pm
      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.
    • Feb 19 2014 | 8:18 am
      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