Skip to content

Instantly share code, notes, and snippets.

@timtrueman
Created July 19, 2011 02:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save timtrueman/1091164 to your computer and use it in GitHub Desktop.
Save timtrueman/1091164 to your computer and use it in GitHub Desktop.
Rainbowify text in HTML
// I'm a JavaScript noob, take it easy on me...
// mathematical color rotation function thingies
function decrease(degree) { return (60 - degree % 60) * 4.25; }
function increase(degree) { return (degree % 60) * 4.25; }
function zero(degree) { return 0; }
function maximum(degree) { return 255; }
// We would use better templating/rendering but I'm totally lazy and this is a hacky prototype demo script
function render_span(r, g, b, character) { return '<span style="color: rgb(' + Math.round(r) + ', ' + Math.round(g) + ', ' + Math.round(b) + ');">' + character + '</span>'; }
function render_p(meat) { return "<p>" + meat + "</p>" };
// call rainbow("Hello World!") and scroll to the bottom of the page to get the party started.
function rainbow(victim) {
var rainbow_string = "";
var rotation_regions = {
0: { r: maximum, g: increase, b: zero },
1: { r: decrease, g: maximum, b: zero },
2: { r: zero, g: maximum, b: increase },
3: { r: zero, g: decrease, b: maximum },
4: { r: increase, g: zero, b: maximum },
5: { r: maximum, g: zero, b: decrease }
}
for (var i=0; i<victim.length; i++) {
var degree = i / victim.length * 360;
var rotation = rotation_regions[Math.floor(degree / 60)];
rainbow_string += render_span(rotation.r(degree), rotation.g(degree), rotation.b(degree), victim[i]);
}
$("body").append(render_p(rainbow_string));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment