Background texture drawing

General JUCE discussion
1

I am experimenting with JUCE drawing and try to draw a background like this:

[attachment=1]Gradient.png[/attachment]
This was created using illustrator with a solid gray background and a gradient layer from black to white with low opacity on top of that. To the gradient layer a noise effect was added.

After a some experimenting I got the screenshot below with JUCE using setTiledImageFill with the noise and a radial gradient fill.

[attachment=0]My-Background.png[/attachment]
It seems Illustrator applies the gradient to the noise as an opacity mask. My JUCE drawing just draws the radial gradient on top of the noise.

Does anyone have an idea how to draw a background like the Illustrator one with JUCE?

2

Allocate a Image object, get access to the Image::BitmapData and write to each pixel yourself.

3

Sure, I can draw each pixel myself. But I am not sure how to combine the pieces (background, gradient, noise) to achieve the desired effect.

I was thinking this is what Illustrator does:

[code]void BackgroundPanel::paint(Graphics& g)
{
juce::Rectangle r = getLocalBounds();

// Background

g.setColour(Colour::fromRGBA(20, 20, 20, 255));
g.fillRect(r);

// Opacity Mask

juce::Image mask(juce::Image::SingleChannel, getWidth(), getHeight(), true);
Graphics maskG(mask);

ColourGradient cg(Colour::fromFloatRGBA(1.0f, 1.0f, 1.0f, 0.2f), r.getX() + (r.getWidth() / 2), r.getY() + (r.getHeight() / 2),
			  Colour::fromFloatRGBA(0.0f, 0.0f, 0.0f, 0.2f), r.getRight(), r.getY() + (r.getHeight() / 2), true);
maskG.setGradientFill(cg);
maskG.fillAll();

// Noise
	
juce::Image noise(juce::Image::ARGB, getWidth(), getHeight(), true);
Graphics noiseG(noise);

AffineTransform t;
noiseG.reduceClipRegion(mask, t); // Apply opacity mask

File noiseFile = sc::Resources::ResourcePathFromName("Grain.png");
Image noiseTile = ImageCache::getFromFile(noiseFile);
noiseG.setTiledImageFill(noiseTile, 0, 0, 1.0f);
noiseG.fillAll();

// Draw masked noise on top of background
g.drawImageAt(noise, 0, 0, false);

}[/code]

But this is what I get:

[attachment=0]My-Background.png[/attachment]

The radial gradient can still be seen clearly. Its close but not (yet) a background texture that can be used. In the Illustrator example the radial gradient is not visible at all.