gradients between two arbitrary colors

I'm really struggling to finish this program... It's eating me away. It was for a lab that we did earlier today, but there was hardly enough time to do what I have, let alone learn the new topics needed and complete the code. The lab is over and done with, but my code isn't and I want it to be so, can someone offer help?

The user chooses two colors from a color swatch palette and the java applet shows the gradients from the first color to the second. In this code, there are 20 "frames" to do this... I just can't figure out the last part... Here's what I have written so far

Code:

package lab05; /** * Class ColorBlend - Draws a color blend using * two colors that the user selected. * * @author Me * @version February 8, 2011 */ import java.awt.*; import javax.swing.*; public class colorBlend extends JApplet { Color left, right; /** * Called by the browser or applet viewer to inform this JApplet that it * has been loaded into the system. It is always called before the first * time that the start method is called. */ public void init() { // Allow the user to select two colors. left = JColorChooser.showDialog(colorBlend.this, "Pick the first color", Color.WHITE); right = JColorChooser.showDialog(colorBlend.this, "Pick the second color", Color.BLACK); } /** * Paint method for applet. * * @param g the Graphics object for this applet */ public void paint(Graphics g) { // Clear the background to a nice neutral color. (Color.GRAY) g.setColor(Color.GRAY); g.fillRect(0,0, this.getWidth(), this.getHeight()); g.setColor (left); // g.fillRect (0, 0, 100, 100); g.setColor (right); //g.fillRect (100, 0, 100, 100); //values for left color float Lr = left.getRed(); int Lg = left.getGreen(); int Lb = left.getBlue(); //values for right color int Rr = right.getRed(); int Rg = right.getGreen(); int Rb = right.getBlue(); int count = 0; // Left = ((steps-1)-count) / (count -1) Right = 1/(steps -1) Left * % + right * % int steps =20; float leftP; float rightP; int x = 0, y =0; //this loop does the computations to fill each rectangle appropriately with the gradient colors while(count<=20) { //these two lines were a "hint" from the TA.. I don't know how accurate or anything they are leftP = ((steps - 1) - count); rightP = 1/(steps - 1); g.setColor(right); g.drawRect(x, y, 20, 100); g.fillRect(x, y, 20, 100); g.setColor(Color.BLACK); //rectangle overlays g.drawRect(x, y, 20, 100); x+=20; count ++; } } }

So what's the problem: finding the colour that linearly "interpolates" between two given colours? or getting the colour to display at the right place? or something else?

You might want to google "linear interpolation", or "Parametric line". They're basically the same concept. The basic equation is:

y=(y2-y1)*t+y1

when t=0, y=y1. When T=1, y=y2. it varies linearly inbetween, simple as that!

Uhh I'm not totally sure why you're drawing the borders like that (esp. since there won't be 20 when steps=20), but basically, this should give you a hint:

Code:

/** * Class ColorBlend - Draws a color blend using * two colors that the user selected. * * @author Me * @version February 8, 2011 */ import java.awt.*; import javax.swing.*; public class colorBlend extends JApplet { Color left, right; /** * Called by the browser or applet viewer to inform this JApplet that it * has been loaded into the system. It is always called before the first * time that the start method is called. */ public void init() { // Allow the user to select two colors. left = JColorChooser.showDialog(colorBlend.this, "Pick the first color", Color.WHITE); right = JColorChooser.showDialog(colorBlend.this, "Pick the second color", Color.BLACK); } /** * Paint method for applet. * * @param g the Graphics object for this applet */ public void paint(Graphics g) { // Clear the background to a nice neutral color. (Color.GRAY) g.setColor(Color.GRAY); g.fillRect(0,0, this.getWidth(), this.getHeight()); g.setColor (left); // g.fillRect (0, 0, 100, 100); g.setColor (right); //g.fillRect (100, 0, 100, 100); //values for left color float Lr = left.getRed(); int Lg = left.getGreen(); int Lb = left.getBlue(); //values for right color int Rr = right.getRed(); int Rg = right.getGreen(); int Rb = right.getBlue(); int count = 0; // Left = ((steps-1)-count) / (count -1) Right = 1/(steps -1) Left * % + right * % int steps =20; float t; int x = 0, y =0; //this loop does the computations to fill each rectangle appropriately with the gradient colors while(count<=20) { //these two lines were a "hint" from the TA.. I don't know how accurate or anything they are t=count/(float)steps; int red=(int)((Rr-Lr)*t+Lr); int green=(int)((Rg-Lg)*t+Lg); int blue=(int)((Rb-Lb)*t+Lb); right=new Color(red,green,blue); g.setColor(right); g.drawRect(x, y, 20, 100); g.fillRect(x, y, 20, 100); g.setColor(Color.BLACK); //rectangle overlays g.drawRect(x, y, 20, 100); x+=20; count ++; } } }

^That does exactly what I needed to do. Thanks!
I'm not sure if I just don't understand the math behind it, or hes just never taught us anything like that, but.. I'll have to pour over it to see how it works

Really the ONLY thing special is that linear interpolation thing. You have two different values, y1 and y2. You want to *interpolate* between y1 and y2. A convenient way to do this is to make a function f(t), where t varies from 0 to 1. f(0)=y1, f(1)=y2. All that is just defining what we want f(n) to be.

So, finding t is easy. When count=0, t=0, and when count=steps, t=1. In other words, t=count/steps. if we give f(t)=(y2-y1)*t+y1, then we can see that when t=0, f(t)=y1, and when t=1, f(t)=y2. This gives the desired output! All f(n) values inbetween just so happen to lie in a straight line!

Since we have three different values - red, green, and blue, we need to find the value at a given t for each of the starting (y1) and ending (y2) variables.

Uhh but that's kind of an elaborate explanation of a line, which you should be damn familiar with if you've done any high-school algebra! Really it's just those four lines that mean anything, and if my explanation fails, the code is kinda self explanatory.