Processing 1.0 - Processing Discourse - Radial alpha gradient?

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Syntax Questions › Radial alpha gradient

‹ Previous Topic | Next Topic ›

Pages: 1

Radial alpha gradient? (Read 1863 times)

DennisKoks

Radial alpha gradient?
Nov 22^nd, 2008, 12:37pm

I'm looking for a way to create a radial alpha gradient in processing. So instead of a gradient between two colors, it is one color that goes from 0% opacity in the middle to 100% on the edges.

The elements I want to have the gradient in, are made using Ira Greenbergs softbody principle: http://www.processing.org/learning/topics/softbody.html

Who can help?

PhiLho

Re: Radial alpha gradient?
Reply #1 - Nov 22^nd, 2008, 4:09pm

I see at least two ways of doing this...

One is by cheating, drawing an image with the wanted gradient at the right size, and masking it with the shape you need... Not sure it is so easy, anyway.

Another is by doing this programmatically, but it might be slow. I would probably use lerpColor() to help, perhaps by drawing concentric circles.
Mmm, in both cases, you have to mask the result anyway.

Linus

Re: Radial alpha gradient?
Reply #2 - Dec 22^nd, 2008, 1:53pm

The way that I've achieved perfect radial gradients is to treat the area where you're placing your circle as a square (or rectangle). You're filling in each pixel in that grid with colour values according to they're distance from the centre. To get a better idea on how this works have a look at Daniel Shiffman's brightness example:

http://www.processing.org/learning/topics/brightness.html

PhiLho YaBB Moderator Offline Posts: 4190 Near Paris (France)	Re: Radial alpha gradient? Reply #3 - Dec 23^rd, 2008, 3:54pm Sure, but the problem is to use this gradient to fill a random shape. I suppose one can use a mask method as described in fill shape with pattern.

DennisKoks YaBB Newbies Offline Posts: 13	Re: Radial alpha gradient? Reply #4 - Jan 27^th, 2009, 8:26pm Good techniques. Learned a lot. But still, nothing that really works for me. I found a JAVA solution though. Here: http://www.java2s.com/Code/Java/2D-Graphics-GUI/RoundGradientPaintFilldemo.htm Is there something similair in processing? An important characteristic is that the gradient is always in the shape.

PhiLho

Re: Radial alpha gradient?
Reply #5 - Jan 27^th, 2009, 9:35pm

This Java solution uses a custom painter and relies on Java2D to use it to request the right color at the right place. I think it isn't usable in Processing.

Yet, I persist, my "fill shape with pattern" sketch is perfectly usable for this.

I invite you to take the code there, and change / add the following parts:
Code:

PGraphics pgGradient; // In place of pgTexture
//...
void setup()
{
  size(800, 500);

  pgMask = createGraphics(width, height, JAVA2D);
  pgShape = createGraphics(width, height, P2D);
  font = loadFont("AmericanTypewriter-24.vlw");

  // Make gradient
  pgGradient = CreateGradient(width / 3, height / 3, 200, #00FF00, #0088FF);

  // Define a triangle
  v1 = new PVector(50, 50);
  v2 = new PVector(width - 50, 50);
  v3 = new PVector(width / 2, height / 2);
  m1 = m2 = 5;
}
//...
PGraphics CreateGradient(int centerX, int centerY, int radius, color startColor, color endColor)
{
  PGraphics pgGradient = createGraphics(width, height, JAVA2D);
  pgGradient.loadPixels();
  for (int x = 0; x < width; x++)
  {
    for (int y = 0; y < height; y++)
    {
      float d = dist(x, y, centerX, centerY);
      color c = endColor;
      if (d <= radius)
      {
        c = lerpColor(startColor, endColor, d / radius);
      }
      pgGradient.pixels[x + y * width] = c;
    }
  }
  pgGradient.updatePixels();
  return pgGradient;
}

DennisKoks

Re: Radial alpha gradient?
Reply #6 - Jan 27^th, 2009, 10:32pm

The code is part of a really large project and it would take to long to make it work by itself. So I quickly wrote this, which works on the same principle. Only it doesn't float around, but to test that you can play around with the positioning.

int xstart = 60;
int ystart = 60;// x and y coordinates from where to start drawing. Play around with the positioning.

int xlength = 50;
int ylength = 50;

void setup() {
size(400,400);
smooth();
background(24,46,131);
noStroke();
}

void draw (){

int xline = xlength - 20;
int yline = ylength - 20;

beginShape();
vertex(xstart, ystart);
bezierVertex(xstart, ystart, xstart, ystart, xstart, ystart);
bezierVertex((xstart + 3), (ystart + 3), (xstart + xline + 3), (ystart + 3), (xstart + xline), ystart);
bezierVertex((xstart + xline + 10), (ystart - 5 ), (xstart + xline + 25), (ystart + 10), (xstart + xline + 20), (ystart + yline -10));
bezierVertex((xstart + xline + 17), (ystart + yline - 7), (xstart + xline + 17), (ystart + yline + 17), (xstart + xline + 20), (ystart + yline + 20));
bezierVertex((xstart + xline + 25), (ystart + yline + 30), (xstart + xline + 10), (ystart + yline + 45), (xstart + xline), (ystart + yline + 40));
bezierVertex((xstart + xline - 3), (ystart + yline + 37), (xstart - 3), (ystart + yline + 37), xstart, (ystart + yline + 40));
bezierVertex((xstart - 10), (ystart + yline + 45), (xstart - 25), (ystart + yline + 30), (xstart - 20), (ystart + yline + 20));
bezierVertex((xstart - 17), (ystart + yline + 23), (xstart - 17), (ystart + yline - 7), (xstart - 20), (ystart + yline - 10));
bezierVertex((xstart - 25), (ystart + yline - 20), (xstart - 10), (ystart - 5), xstart, ystart);
endShape();
}

seltar

Re: Radial alpha gradient?
Reply #7 - Jan 3^rd, 2010, 5:31am

I found this to be a quite pleasing result

Code:


void applyGradient(int x, int y, int radius, int startColor, int endColor, Polygon poly)
  {
    // get the graphics object
    Graphics2D g2 = (Graphics2D) g.image.getGraphics();

    Paint p;
    p = new RadialGradientPaint(new Point2D.Double(x, y), radius,
    new float[] { 
      0.0f, 1.0f         }
    ,
    new Color[] { 
    new Color((int)red(startColor),(int)green(startColor),(int)blue(startColor),(int)alpha(startColor)),
    new Color((int)red(endColor),(int)green(endColor),(int)blue(endColor),(int)alpha(endColor))	     }
    );
    g2.setPaint(p);
    // this function uses a polygon to draw the gradient within
    // but it can easily be changed to fillOval, fillRect etc
    g2.fill(poly);
  }

I'm bored, therefore I program
http://seltar.org > seltar's special place
http://snippet.seltar.org > seltar's snippet palace
http://libraries.seltar.org > seltar's libraries

Pages: 1

‹ Previous Topic | Next Topic ›