Results 1 to 1 of 1

Thread: Help please

  1. #1
    Join Date
    Oct 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help please

    I'm trying to make a program to take a starting hex, ending hex, and string. It will make a gradient through the text, either outputting a html equivalent or in the actual colors and stuff. Almost exactly like this but graphics are obviously much more basic.

    I've done this program in Java and was trying to transfer to Javascript so that i wouldnt need an applet to run it, but so far it wont work. I just started out in Javascript so im not 100% sure what i can and cant do. Heres all the code I have so far, any suggestions or fixes would be really appreciated.

    Code:
    <HTML>
    <HEAD>
    
    <TITLE>Test</TITLE>
    
    <SCRIPT type="text/javascript">
    
    function testResults (form) 
    {
        var HEX1 = form.hex1.value, HEX2 = form.hex2.value, startText = form.text.value;
    	var redStart = getRed(HEX1), redEnd = getRed(HEX2);
    	var greenStart = getGreen(HEX1), greenEnd = getGreen(HEX2);
    	var blueStart = getBlue(HEX1), blueEnd = getBlue(HEX2);
    	var redAdd = (redEnd-redStart)/length, greenAdd = (greenEnd - greenStart)/length, blueAdd = (blueEnd - blueStart)/length;
    	var hexCode;
    	var total = "";
    	
    	for (i = 0; i < startText.length; i++)
    	{
    		hexCode = RGBtoHex(redStart + (int) Math.round(i*redAdd), greenStart + (int) Math.round(i*greenAdd), blueStart + (int) Math.round(i*blueAdd));
    		total += "<font color=\"" + hexCode + "\">" + string.substring(i, i+1) + "</font>"
    	}
        document.getElementById('output').innerHTML = total;
    }
    
    function getRed(string)
    {
    	return string.subString(1, 3);
    }
    
    function getGreen(string)
    {
    	return string.subString(3, 5);
    }
    
    function getBlue(string)
    {
    	return string.subString(5, 7);
    }
    
    function toHex(N) 
    {
       if (N==0) return "00";
       var list = "0123456789ABCDEF";
       
       N=Math.max(0,N); 
       N=Math.min(N,255); 
       N=Math.round(N);
       return list.charAt((N-N%16)/16) + list.substring(N%16, N%16+1);
    }
    
    function RGBtoHex(R, G, B) 
    {
    	  return "#" + toHex(R)+toHex(G)+toHex(B);
    }
      
    function returnHexChar(Char)
    {
    		Char = Char.toUpperCase();
    	  if (Char == "A")
    		  return 10;
    	  else if (Char == "B")
    		  return 11;
    	  else if (Char == "C")
    		  return 12;
    	  else if (Char == "D")
    		  return 13;
    	  else if (Char == "E")
    		  return 14;
    	  else if (Char == "F")
    		  return 15;
    	  else return Char;
    }
    </SCRIPT>
    </HEAD>
    
    <BODY>
    <FORM NAME="myform" ACTION="" METHOD="GET">
    Starting HEX: <INPUT TYPE="text" NAME="hex1" VALUE=""><P>
    Ending HEX:   <INPUT TYPE="text" NAME="hex2" VALUE=""><P>
    Text:            <INPUT TYPE="text" NAME="text" VALUE=""><P>
    <INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)" onMouseOver="testResults(this.form)">
    </FORM>
    
    <p id="output"></p>
    
    </BODY>
    </HTML>
    Last edited by FacingPandas; 10-31-2010 at 02:00 AM.

Bookmarks

Posting Permissions

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