HSV gradient

[Steven Sørensen]

Hi there.
I'm having a bit of trouble finding a way to generate an HSV gradient...
sRGB and Linear RGB gradients are simple enough, as they're predefined in the java.awt.MultipleGradientPaint class and whatnot. But I can't for the life of me find a way to use the HSV (or HSB or HSL) colorspace to blend two colors. (And frustratingly, java.awt.color.ColorSpace isn't implemented out-of-the-box for common colorspaces. Arg.)

RGB gradient? Easy enough, it's implied:

BufferedImage buffer = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffer.createGraphics();
g.setPaint(new GradientPaint(0,0, color1, width,0, color2));  // or whatever
g.fillRect(0, 0, width, height);

But the HSV colorspace? There certainly doesn't seem to be any obvious way to to use it. Am I missing something right in front of me?

The best I could dig up with Google was this page: http://users.erols.com/ziring/java-samp-jgd.html It's pretty good, and the source code is very clean, but it's doesn't use the java.awt.Paint interface. I'm not sure how to retrofit it with Graphics2D compatibility.
Everything else I saw on Google was trivial algorithms to convert one colorspace to another. Not helpful.

Any pointers?



Edit: Okay, now this is extra sad. This post comes up in spot #1 in a Google search for java gradient hsb OR hsv OR hsl ...

[Steven Sørensen]

URGENT!!! plz sir send teh codez god bless

Or "bump" or something.

I'm guessing this means there isn't a nice built-in way to create these gradients...

[Rob Spoor]

http://faq.javaranch.com/java/PatienceIsAVirtue
(I'll ignore the mistyped words since that was obviously meant as a joke )

[Campbell Ritchie]

It was 1½ weeks before he asked for a bump, Rob.

You can convert HSB to RGB with methods in the Color class; you might be able to use those to pass H, S and B values to Color objects and use those objects. Another Color link here.

[Rob Spoor]

Campbell Ritchie wrote:It was 1½ weeks before he asked for a bump, Rob.

You're right, it should have been Ease Up. My bad.

[Steven Sørensen]

Yeah, I know bumping isn't considered good form, but I've lurked* here for a while and seen it accepted, so I thought I'd give it a shot.
(*Unintentionally: Google often correctly suggests this place for the solutions to a quite a number of problems I've run into. So kudos for that.)

Campbell Ritchie wrote:You can convert HSB to RGB with methods in the Color class; you might be able to use those to pass H, S and B values to Color objects and use those objects. Another Color link here.

I have tried that, but actually it's just for converting values into the Color class's RGB storage form. (I checked the source code to be sure!) The GradientPaint class is what does the blending dirty work.
Just yesterday I started playing around with the Processing framework/library/API/whathaveyou. It's pretty great and has a really easy-to-use (read: made-for-n00bs) color handling that can easily blend on in HSB space.
Although I'm a bit disappointed that there seems to be no out-of-the-box Java way of doing this, I'll be using the Processing methods from now on, which are entirely sufficient.

[Rob Spoor]

Steven Sørensen wrote:Yeah, I know bumping isn't considered good form, but I've lurked* here for a while and seen it accepted, so I thought I'd give it a shot.

Bumping is allowed after 24 hours, but the "URGENT" was what I wanted to address. I just posted the wrong link.

[Scott Phan]

Here's an example of an HSV gradient track I wrote using the relationships between RGB and HSV found here: Wiki (HSV and HSL)

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import javax.swing.*;

public class HSVColorTrack extends JPanel
{
	private final Color H0 = new Color( 255, 0, 0 );
	private final Color H1 = new Color( 255, 255, 0 );
	private final Color H2 = new Color( 0, 255, 0 );
	private final Color H3 = new Color( 0, 255, 255 );
	private final Color H4 = new Color( 0, 0, 255 );
	private final Color H5 = new Color( 255, 0, 255 );
	
	private final Color[] BASE = { H0, H1, H2, H3, H4, H5, H0 };
	
	public HSVColorTrack()
	{
		super();
	}
	
	@Override
	public void paintComponent( Graphics og )
	{
		super.paintComponent( og );
		Graphics2D g = (Graphics2D) og;
		
		Insets insets = getInsets(); Dimension size = getSize();
		final double width = size.getWidth()-insets.left-insets.right, height = size.getHeight()-insets.top-insets.bottom;
		Point2D start = new Point2D.Double( 0, 0 ), end = new Point2D.Double( 0, height );
		float[] pts = { 0f, 1f/6, 2f/6, 3f/6, 4f/6, 5f/6, 1f };
		LinearGradientPaint linGrad = new LinearGradientPaint( start, end, pts, BASE );
		
		g.setPaint( linGrad );
		g.fill(new Rectangle2D.Double( 0, 0, width, height ));
	}
	
	public static void main( String... args )
	{
		JFrame f = new JFrame( "Linear HSV Color Track" );
		f.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
		
		f.getContentPane().add( new HSVColorTrack(), BorderLayout.CENTER );
		f.setSize( 20, 250 );
		f.setVisible( true );
	}
}

[eric aro]

here is my best solution :

Override GradientPaint (easy part) to HSVGradientPaint
copy paste/ GradientPaintContext into HSVGradientPaint (easy part)

there is an ugly code from sun that I can't get rid of (if someone has a deep knowledge on how to work on raster ...)

and replace the interp array filling (in the construcor) with one that matches HSV color.

here is the master piece, use this function to fill the "interp" array instead of the original code.

/**
	 * @param c1
	 * @param c2
	 * @param cyclic
	 */
	private void colorStuff(Color c1, Color c2, boolean cyclic) {
		// adapted from sun codes, this is ugly, but I'm trying to make it as close as original as possible
		// morph using hsv instead of rbg
		
		float[] hsv1 = Color.RGBtoHSB(c1.getRed(), c1.getGreen(), c1.getBlue(), null);
		float[] hsv2 = Color.RGBtoHSB(c2.getRed(), c2.getGreen(), c2.getBlue(), null);
		int a1 = c1.getAlpha() ;
		float h1 = hsv1[0] ;
		float s1 = hsv1[1];
		float v1 = hsv1[2];
		float da = c2.getAlpha()- a1;
		float dh = hsv2[0] - h1;
		float ds = hsv2[1]- s1;
		float dv = hsv2[2] - v1;
		
		//fill the interp
		interp = new int[cyclic ? 513 : 257];
		for (int i = 0; i <= 256; i++) {
		    float rel = i / 256.0f;
		    // do the morph
		    int rgb = Color.HSBtoRGB(h1+dh* rel, s1+ds*rel, v1+dv*rel) ;
		    rgb +=(((int) (a1 + da * rel)) << 24) ; 
		    interp[i] = rgb;
		    if (cyclic) {
			interp[512 - i] = rgb;
		    }
		}
	}

and BTW I would realllllllly like to find a better solution.

eric

(ps: attachement does not work, here is a copy paste of the whole solution )

import java.awt.Color;
import java.awt.PaintContext;
import java.awt.geom.AffineTransform;
import java.awt.geom.NoninvertibleTransformException;
import java.awt.geom.Point2D;
import java.awt.image.ColorModel;
import java.awt.image.DirectColorModel;
import java.awt.image.Raster;
import java.awt.image.WritableRaster;
import java.lang.ref.WeakReference;

//huuu, yes I know...
import sun.awt.image.IntegerComponentRaster;

class HSVGradientPaintContext implements PaintContext {
	
    static ColorModel cachedModel;
    static WeakReference cached;

    static synchronized Raster getCachedRaster(ColorModel cm, int w, int h) {
	if (cm == cachedModel) {
	    if (cached != null) {
		Raster ras = (Raster) cached.get();
		if (ras != null &&
		    ras.getWidth() >= w &&
		    ras.getHeight() >= h)
		{
		    cached = null;
		    return ras;
		}
	    }
	}
	return cm.createCompatibleWritableRaster(w, h);
    }

    static synchronized void putCachedRaster(ColorModel cm, Raster ras) {
	if (cached != null) {
	    Raster cras = (Raster) cached.get();
	    if (cras != null) {
		int cw = cras.getWidth();
		int ch = cras.getHeight();
		int iw = ras.getWidth();
		int ih = ras.getHeight();
		if (cw >= iw && ch >= ih) {
		    return;
		}
		if (cw * ch >= iw * ih) {
		    return;
		}
	    }
	}
	cachedModel = cm;
	cached = new WeakReference(ras);
    }

    double x1;
    double y1;
    double dx;
    double dy;
    boolean cyclic;
    int interp[];
    Raster saved;
    ColorModel model;

    public HSVGradientPaintContext(ColorModel cm,
				Point2D p1, Point2D p2, AffineTransform xform,
				Color c1, Color c2, boolean cyclic) {
	// First calculate the distance moved in user space when
	// we move a single unit along the X & Y axes in device space.
	Point2D xvec = new Point2D.Double(1, 0);
	Point2D yvec = new Point2D.Double(0, 1);
	try {
	    AffineTransform inverse = xform.createInverse();
	    inverse.deltaTransform(xvec, xvec);
	    inverse.deltaTransform(yvec, yvec);
	} catch (NoninvertibleTransformException e) {
	    xvec.setLocation(0, 0);
	    yvec.setLocation(0, 0);
	}

	// Now calculate the (square of the) user space distance
	// between the anchor points. This value equals:
	//     (UserVec . UserVec)
	double udx = p2.getX() - p1.getX();
	double udy = p2.getY() - p1.getY();
	double ulenSq = udx * udx + udy * udy;

	if (ulenSq <= Double.MIN_VALUE) {
	    dx = 0;
	    dy = 0;
	} else {
	    // Now calculate the proportional distance moved along the
	    // vector from p1 to p2 when we move a unit along X & Y in
	    // device space.
	    //
	    // The length of the projection of the Device Axis Vector is
	    // its dot product with the Unit User Vector:
	    //     (DevAxisVec . (UserVec / Len(UserVec))
	    //
	    // The "proportional" length is that length divided again
	    // by the length of the User Vector:
	    //     (DevAxisVec . (UserVec / Len(UserVec))) / Len(UserVec)
	    // which simplifies to:
	    //     ((DevAxisVec . UserVec) / Len(UserVec)) / Len(UserVec)
	    // which simplifies to:
	    //     (DevAxisVec . UserVec) / LenSquared(UserVec)
	    dx = (xvec.getX() * udx + xvec.getY() * udy) / ulenSq;
	    dy = (yvec.getX() * udx + yvec.getY() * udy) / ulenSq;

	    if (cyclic) {
		dx = dx % 1.0;
		dy = dy % 1.0;
	    } else {
		// We are acyclic
		if (dx < 0) {
		    // If we are using the acyclic form below, we need
		    // dx to be non-negative for simplicity of scanning
		    // across the scan lines for the transition points.
		    // To ensure that constraint, we negate the dx/dy
		    // values and swap the points and colors.
		    Point2D p = p1; p1 = p2; p2 = p;
		    Color c = c1; c1 = c2; c2 = c;
		    dx = -dx;
		    dy = -dy;
		}
	    }
	}

	Point2D dp1 = xform.transform(p1, null);
	this.x1 = dp1.getX();
	this.y1 = dp1.getY();

	this.cyclic = cyclic;
	
	
	model = ColorModel.getRGBdefault();
	//COLOR STUFF (put the color stuff in a private function so that I can test it
	colorStuff(c1, c2, cyclic);
    }

    
    
    
	/**
	 * @param c1
	 * @param c2
	 * @param cyclic
	 */
	private void colorStuff(Color c1, Color c2, boolean cyclic) {
		// adapted from sun codes, this is ugly, but I'm trying to make it as close as original as possible
		// morph using hsv instead of rbg
		
		float[] hsv1 = Color.RGBtoHSB(c1.getRed(), c1.getGreen(), c1.getBlue(), null);
		float[] hsv2 = Color.RGBtoHSB(c2.getRed(), c2.getGreen(), c2.getBlue(), null);
		int a1 = c1.getAlpha() ;
		float h1 = hsv1[0] ;
		float s1 = hsv1[1];
		float v1 = hsv1[2];
		float da = c2.getAlpha()- a1;
		float dh = hsv2[0] - h1;
		float ds = hsv2[1]- s1;
		float dv = hsv2[2] - v1;
		
		//fill the interp
		interp = new int[cyclic ? 513 : 257];
		for (int i = 0; i <= 256; i++) {
		    float rel = i / 256.0f;
		    // do the morp
		    int rgb = Color.HSBtoRGB(h1+dh* rel, s1+ds*rel, v1+dv*rel) ;
		    rgb +=(((int) (a1 + da * rel)) << 24) ; 
		    interp[i] = rgb;
		    if (cyclic) {
			interp[512 - i] = rgb;
		    }
		}
	}

    /**
     * Release the resources allocated for the operation.
     */
    public void dispose() {
	if (saved != null) {
	    putCachedRaster(model, saved);
	    saved = null;
	}
    }

    /**
     * Return the ColorModel of the output.
     */
    public ColorModel getColorModel() {
        return model;
    }

    /**
     * Return a Raster containing the colors generated for the graphics
     * operation.
     * @param x,y,w,h The area in device space for which colors are
     * generated.
     */
    public Raster getRaster(int x, int y, int w, int h) {
	double rowrel = (x - x1) * dx + (y - y1) * dy;

	Raster rast = saved;
	if (rast == null || rast.getWidth() < w || rast.getHeight() < h) {
	    rast = getCachedRaster(model, w, h);
	    saved = rast;
	}
	
	// HERE I SHOULD GET RID OF THIS DEPENDENCY
	IntegerComponentRaster irast = (IntegerComponentRaster) rast;
	WritableRaster wrast = (WritableRaster) rast; 
	int off = irast.getDataOffset(0);
	int adjust = irast.getScanlineStride() - w;
	int[] pixels = irast.getDataStorage();	

	if (cyclic) {
	    cycleFillRaster(pixels, off, adjust, w, h, rowrel, dx, dy);
	} else {
	    clipFillRaster(pixels, off, adjust, w, h, rowrel, dx, dy);
	}
	
	return rast;
    }

    void cycleFillRaster(int[] pixels, int off, int adjust, int w, int h,
			 double rowrel, double dx, double dy) {
	rowrel = rowrel % 2.0;
	int irowrel = ((int) (rowrel * (1 << 30))) << 1;
	int idx = (int) (-dx * (1 << 31));
	int idy = (int) (-dy * (1 << 31));
	while (--h >= 0) {
	    int icolrel = irowrel;
	    for (int j = w; j > 0; j--) {
		pixels[off++] = interp[icolrel >>> 23];
		icolrel += idx;
	    }

	    off += adjust;
	    irowrel += idy;
        }
    }

    void clipFillRaster(int[] pixels, int off, int adjust, int w, int h,
			double rowrel, double dx, double dy) {
	while (--h >= 0) {
	    double colrel = rowrel;
	    int j = w;
	    if (colrel <= 0.0) {
		int rgb = interp[0];
		do {
		    pixels[off++] = rgb;
		    colrel += dx;
		} while (--j > 0 && colrel <= 0.0);
	    }
	    while (colrel < 1.0 && --j >= 0) {
		pixels[off++] = interp[(int) (colrel * 256)];
		colrel += dx;
	    }
	    if (j > 0) {
		int rgb = interp[256];
		do {
		    pixels[off++] = rgb;
		} while (--j > 0);
	    }

	    off += adjust;
	    rowrel += dy;
        }
    }
}