madbutter

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:

//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);

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

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

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


mgraphics-gradients-more-color-stops

's offset argument is a float between 0 and 1.

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.


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.

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

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

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


mgraphics gradients, more color stops?