How to apply a color gradient to a Rectangle primitive?

Question

How can we apply a color gradient (say "Rainbow") to a Rectangle primitive ? Of course, I searched the documentation :

http://reference.wolfram.com/language/ref/Rectangle.html,

and also the site :

How to colorize a rectangle with a given color function? https://stackoverflow.com/questions/8142179/gradient-fill-using-graphics-in-mathematica

but didn't found something clear about the Rectangle primitive. I have the impression that this graphics primitive cannot have a color gradient applied to it.

Here's a MWE code to work with (the Red color in the Rectangle primitive should be remplaced with an horizontal 50% translucent "rainbow" gradient) :

SpectreVisible = Graphics[{Red, Rectangle[{380, -1}, {700, 8}]}];

Manipulate[
Show[
    SpectreVisible,
    PlotRange -> {{0, 1000}, {0, 7}},
    AspectRatio -> 1,
    Frame -> True,
    GridLines -> Automatic,
    GridLinesStyle -> Directive[Gray, Dashed],
    Ticks -> Automatic,
    ImageSize -> {600, 600}
    ],
FrameMargins -> None
]

The Manipulate code isn't essential here, but that rectangle would be used inside a Manipulate box.

EDIT : The possible duplicates aren't helping much. The codes are very complicated there, and doesn't address the issue with a simple Rectangle primitive.

http://i.stack.imgur.com/N5eK4.png, from http://mathematica.stackexchange.com/questions/6562/how-can-i-create-a-rectangular-graphic-with-curved-edges — Michael E2, Mar 16 '16 at 01:49
These codes aren't obvious at all ! I'm unable to define a simple rectangle (with coordinates) using ColorFunction -> "Rainbow", and a transparency. Mathematica is so ackward to use ! — Cham, Mar 16 '16 at 01:54

score 11 · Accepted Answer · answered Mar 16 '16 at 02:46

11

Rectangle cannot have a gradient color.

Here's one way to construct such a gradient. Under the hood it is using Polygon with the VertexColors option.

Graphics[ChartElementData["GradientRectangle", 
   "ColorScheme" -> "Rainbow", 
   "GradientOrigin" -> Left][{{0, 1}, {0, 1}}]]

{{0, 1}, {0, 1}} corresponds to {{xmin, xmax}, {ymin, ymax}} for the rectangle.

answered Mar 16 '16 at 02:46

Brett Champion

20,779
2
64
121

I cannot search ChartElementData in documentation and I can search GradientRectangle either.If you put some specification about how to get it.I'll appreciate you. – yode Mar 16 '16 at 02:54
This code works very well. It's far from obvious, though. – Cham Mar 16 '16 at 02:56
Ok,I have found that. – yode Mar 16 '16 at 03:01

yode · Answer 2 · 2016-03-16T03:58:08.913

4

Perhaps ou mean this?

    Show[SetAlphaChannel[LinearGradientImage["Rainbow"], 0.5], Axes -> True]

The version is derived from J.M.

Graphics[{Opacity[0.5], 
  Raster[{Range[0, 1, 1/100]}, {{0, 0}, {1, 1}}, 
   ColorFunction -> "Rainbow"]}]

edited Mar 16 '16 at 03:58

answered Mar 16 '16 at 01:51

yode

26,686
4
62
167

How do you add a transparency effet (say 50%) ? And how do you define the edges coordinates in a graphics ? – Cham Mar 16 '16 at 01:57
Hmm, MMA 7 doesn't seem to know the LinearGradientImage command – Cham Mar 16 '16 at 01:58
2

Feel so sorry to hear you use 7.0 – yode Mar 16 '16 at 02:04
Well, nobody is perfect. Upgrading MMA implies that I upgrade the whole computer with its OS. It is too costly. Not worth all the troubles for me. So does that mean that there is no solution in my case ? I can't believe that I can't do a simple rectangle inside a graphics with an horizontal gradient applied to it ! – Cham Mar 16 '16 at 02:06
If you use 7.0,that mean the option of ColorOutput does works? – yode Mar 16 '16 at 02:18
@Cham, if you're stuck on 7, then why not use Raster[]? That will still work. – J. M.'s missing motivation Mar 16 '16 at 02:59
@J.M., I wasn't able to make it to work. The code appears to be pretty complicated, to add the Rainbow gradient, with a transparency, etc... At least, the code below is working great. – Cham Mar 16 '16 at 03:02
@Cham, I'm not at a computer right now, but try this: Graphics[Raster[Range[0, 1, 1/100], {{0, 3}, {0, 1}}, ColorFunction -> "Rainbow"]]. – J. M.'s missing motivation Mar 16 '16 at 03:10
@J.M., well, it gives a simple white square. Nothing is visible inside. What is the meaning of the Range numbers ? – Cham Mar 16 '16 at 03:13
@J.M., the ChartElementDatais working very nicely. It may be the solution that I'll adopt. This thing is very new to me, and I don't understand what it is, yet. – Cham Mar 16 '16 at 03:15
@Cham I have update the J.M.'s Raster – yode Mar 16 '16 at 03:15
Sorry, I missed a necessary brace, @Cham. Try Graphics[Raster[{Range[0, 1, 1/100]}, {{0, 3}, {0, 1}}, ColorFunction -> "Rainbow"]]. First argument is for generating the gradient; second argument dictates the size of the rectangle. – J. M.'s missing motivation Mar 16 '16 at 03:18
@J.M. Invisible still~ – yode Mar 16 '16 at 03:19
@J.M., yep, I confirm that it's still a white square. – Cham Mar 16 '16 at 03:20
@Cham The J.M.'s meaning maybe Graphics[Raster[{Range[0,1,1/100]},{{0,0},{1,1}},ColorFunction->"Rainbow"]].It very clean.You take the all credit.And thanks for your guidance. – yode Mar 16 '16 at 03:32
@yode, and J.M., ok, now it's working. But adding a transparency (say Opacity[0.25]) gives a problem : the gradient is now made of lots of thin rectangles with their edges visible. It's really ugly ! – Cham Mar 16 '16 at 03:42
Alright, I'll try on my computer later; clearly I did not get the syntax of Raster[] right. – J. M.'s missing motivation Mar 16 '16 at 03:42
@J.M., as I just said, try this to add a transparency : Graphics[{Opacity[0.25], Raster[{Range[0, 1, 1/100]}, {{0, 0}, {1, 1}}, ColorFunction -> "Rainbow"]}]. This is terrible ! – Cham Mar 16 '16 at 03:43
@Cham Really?It's beautiful in here like this.Or you can change the 1/100 be more smaller like 0.001.Then the picture will like more smooth. – yode Mar 16 '16 at 03:46
@yode, just resize that block. Don't you get this : http://s17.postimg.org/4chebkzlb/yuk.jpg ? Changing to 0.01/100 is actually worst (darker tones). – Cham Mar 16 '16 at 03:49
@Cham I couldn't reproduce your black block. – yode Mar 16 '16 at 03:55
@yode, it's probably a bug or a limitation of my version 7. Anyway, the ChartElementDatais working perfectly. So I do have a complete solution. – Cham Mar 16 '16 at 04:07

score 2 · Answer 3 · edited Mar 10 '17 at 09:42

I may have found a solution, but it needs some improvements :

Spectre = RegionPlot[380 < x < 700, {x, 380, 700}, {y, -1, 8}, ColorFunction -> Function[{x, y}, ColorData["Rainbow"][x]]];

Manipulate[
    Show[Spectre,
    PlotRange -> {{0, 1000}, {0, 7}}, 
    AspectRatio -> 1,
    Frame -> True,
    GridLines -> Automatic, 
    GridLinesStyle -> Directive[Gray, Dashed],
    Ticks -> Automatic, 
    ImageSize -> {600, 600}
],
FrameMargins -> None]

Preview :

gradient fill

The problem with this code is that the color region doesn't show the grid behind it. The grid should be above it.

Also, the color tones are much too strong. How do you add a transparency effect to the gradient ?

And lastly, I had to define the range {y, -1, 8} instead of {y, 0, 7}. Is there a better way of doing this, so the rectangle doesn't have a white "margin" below and above it ?

If you specify PlotRange inside RegionPlot you won't get the white margin. You also won't get it if you set PlotRangePadding -> None inside Show. — Brett Champion, Mar 16 '16 at 03:20

How to apply a color gradient to a Rectangle primitive?

3 Answers3