continuous transparency

General Discussion Other

mathieu_r

in General Discussion • Other • 1 year ago

Hi,

I'd like to create multiple rectangular shapes with different widths and heights and colors and with a continuous transparency from the top (20% transparent) to the bottom (opaque).

Is there an easy way to do so? Or do I have to create as many rectangles as transparency levels?

Thanks!

Mathieu

Replies(3)

PhiLho

Re: continuous transparency

1 year ago

No easy way, I fear. Processing doesn't even have a simple gradient facility (except perhaps in the SVG module, but it isn't usable without a SVG file).

hellochar

Re: continuous transparency

1 year ago

You can do this with the P3D renderer; something like this:

void setup() {
size(500, 500, P3D);
noStroke();
}
void draw() {
background(128);
beginShape(QUADS);
fill(255, 0, 0, .2*255);
vertex(100, 100);
vertex(300, 100);
fill(255, 1, 0, 255);
vertex(300, 300);
vertex(100, 300);
endShape(CLOSE);
}

This is really weird actually; if you change the second fill to (255, 0, 0, 255) instead of (255, 1, 0, 255) as it is now, the vertex's colors won't change. Feels like a bug to me.

PhiLho

Re: continuous transparency

1 year ago

Ah, I always forget this textured shape feature! The problem of not doing much 3D, perhaps...
Otherwise, I have an old example of drawing a gradient the manual way:

final color START_COLOR_TOP = #335533;
final color START_COLOR_BOTTOM = #55AA55;
final color END_COLOR_TOP = #333355;
final color END_COLOR_BOTTOM = #5555AA;
final int MAX_FRAME_NB = 200;
color InterpolateColor(color startC, color endC)
{
return lerpColor(startC, endC, (float) (frameCount % MAX_FRAME_NB) / (float) MAX_FRAME_NB);
}
void DrawBackground()
{
color topColor = InterpolateColor(START_COLOR_TOP, END_COLOR_TOP);
color bottomColor = InterpolateColor(START_COLOR_BOTTOM, END_COLOR_BOTTOM);
for (int l = 0; l < height; l++)
{
color sc = lerpColor(topColor, bottomColor, (float) l / (float) height);
stroke(sc);
line(0, l, width - 1, l);
}
}
void setup()
{
size(500, 300);
}
void draw()
{
DrawBackground();
}