Loading...
Logo
Processing Forum

Another gradient.

in Programming Questions  •  2 years ago  
Hey Folks,

how can I make a Background gradient from Black to Alpha = 0 from Top to Bottom.
I know this should be easy and others had already asked similiar questions, but not actually this one.

Somehow I am twisted in my Head.
Please help me.

Regards

Replies(6)

Re: Another gradient.

2 years ago
What you're asking doesn't really make any sense. There's no reason to specify an alpha value (which normally make colors seem transparent) when coloring the background, as there's nothing behind the background to see anyway!

You want a background that has a gradient on it, but what two colors do you want the gradient between? Black and black? Black and white?

Re: Another gradient.

2 years ago
tfguy44 is right, doesnt make much sense.
But there are different ways to create color gradients. one is to use the set() function.


could like like this for example :

Copy code

  1. void setup() {
      size(500, 500);
      smooth();
    }

    void draw() {

      for (int i = 0; i<height; i++) {

        color c = lerpColor(#ffffff, #000000, i/float(height));
        for (int j = 0; j<width;j++) {
          set(j, i, c);
        }
      }
    }

Re: Another gradient.

2 years ago
Thanks for the answer, your actually both are right, sorry.

I will explain my case:

i have points travelling up the black stage, drawing lines (background(0); in void setup). 
I want to fade them out, the higher (on the y axis) they get.
Either I change the alpha of the points depending on their y position or I draw a "black to transparent" gradient from top to bottom to fade the top out.

I decided to do it the second way, because the oppacity of the points is less variable. ( one can see the steps of fading) 

So the question is: how can I make a gradient from top to bottom, that still reveals a part of the drawing beneath?

Re: Another gradient.

2 years ago
You can just draw a bunch of horizontal lines across the sketch's area, from top to bottom, changing a bit the stroke() color for each line.

Re: Another gradient.

2 years ago
Consider that the gradient will also accumulate in an aggregate drawing (no background call). Comment out the background call in the example below to see what I mean. There are different ways to draw gradients and place them on top. You could use the pixel array or a PImage/PGraphic. However in the example below I just use a beginshape-endshape with vertices that have different colors or technically only different opacity.

Copy code
  1. void setup() {
  2.   size(500,500,P2D); // Gradient beginshapes only work in P2D, P3D and OPENGL
  3.   stroke(255);
  4. }

  5. void draw() {
  6.   background(0);

  7.   fill(255);
  8.   for (int i=0; i<50; i++) {
  9.     ellipse(noise(i+frameCount*0.1)*width,(sin(i+3+frameCount*0.01)*height),5,5);
  10.   }

  11.   noStroke();
  12.   beginShape();
  13.   fill(0); // black for the two top points
  14.   vertex(0,0);
  15.   vertex(width,0);
  16.   fill(0,0); // black and transparent for the two bottom points
  17.   vertex(width,height);
  18.   vertex(0,height);
  19.   endShape();
  20. }

Re: Another gradient.

2 years ago
Hello Folks,
thanks a lot. Problem is solved.
I made smoke.