Results 1 to 5 of 5
  1. #1
    falkon114 is offline Member
    Join Date
    Dec 2010
    Posts
    18
    Rep Power
    0

    Unhappy 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
    Java 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 ++;
        		
        	} 
        }
    }
    Last edited by falkon114; 02-08-2011 at 09:44 PM.

  2. #2
    pbrockway2 is offline Moderator
    Join Date
    Feb 2009
    Location
    New Zealand
    Posts
    4,565
    Rep Power
    12

    Default

    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?

  3. #3
    NeuroFuzzy is offline Member
    Join Date
    Sep 2010
    Posts
    10
    Rep Power
    0

    Default

    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:
    Java 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 ++;
        		
        	} 
        }
    }

  4. #4
    falkon114 is offline Member
    Join Date
    Dec 2010
    Posts
    18
    Rep Power
    0

    Default

    ^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

  5. #5
    NeuroFuzzy is offline Member
    Join Date
    Sep 2010
    Posts
    10
    Rep Power
    0

    Default

    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.

Similar Threads

  1. Convert 24 bit colors to 16 bit
    By i4ba1 in forum Advanced Java
    Replies: 2
    Last Post: 12-09-2010, 02:23 AM
  2. Creating an arbitrary number of variables
    By theodorekon in forum New To Java
    Replies: 1
    Last Post: 04-15-2010, 07:10 PM
  3. Colors and shapes.
    By Torgero in forum New To Java
    Replies: 14
    Last Post: 10-13-2008, 06:25 PM
  4. Replies: 2
    Last Post: 12-12-2007, 06:01 PM
  5. change colors
    By calblue in forum New To Java
    Replies: 1
    Last Post: 12-03-2007, 12:52 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •