generating color gradient in JS


/ Published in: JavaScript
Save to your folder(s)

see website for all information about that.
some more theory:
[color-scaling-function](http://stackoverflow.com/questions/168838/color-scaling-function)
[generate-color-for-a-power-meter-red-to-green](http://stackoverflow.com/questions/340209/generate-color-for-a-power-meter-red-to-green)


Copy this code and paste it in your HTML
  1. function RGB2Color(r,g,b)
  2. {
  3. return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
  4. }
  5.  
  6. function byte2Hex(n)
  7. {
  8. var nybHexString = "0123456789ABCDEF";
  9. return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
  10. }
  11.  
  12.  
  13.  
  14.  
  15. function makeColorGradient(frequency1, frequency2, frequency3,phase1, phase2, phase3, center, width, len)
  16. {
  17. if (len == undefined) len = 50;
  18. if (center == undefined) center = 128;
  19. if (width == undefined) width = 127;
  20.  
  21. for (var i = 0; i < len; ++i)
  22. {
  23. var red = Math.sin(frequency1*i + phase1) * width + center;
  24. var grn = Math.sin(frequency2*i + phase2) * width + center;
  25. var blu = Math.sin(frequency3*i + phase3) * width + center;
  26. document.write( '<font color="' + RGB2Color(red,grn,blu) + '">&#9608;</font>');
  27. }
  28. }
  29.  
  30. // And here's the code for drawing the basic rainbow gradient.
  31. // makeColorGradient(.3,.3,.3,0,2,4);

URL: http://krazydad.com/makecolors.php

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.