/** * Burning Words, * Effect of burning text with an ability to customize colors, * fonts, burning speed and other parameters. * * Version: 1.0 * Author: Michael Ryvkin, http://www.ponticstar.com * License: GNU Lesser General Public License, http://www.gnu.org/licenses/lgpl.html * Created: 2010-04-17 * Last updated: 2010-04-17 * Link: http://www.ponticstar.com/projects/burning-words/ */if(typeof(PonticStar) == "undefined"){ var PonticStar = {}; }PonticStar.BurningWords = function (){ this.interval_id = null; this.palette = null; this.canvas = null; this.stop = function(){ if(this.interval_id !== null) clearInterval(this.interval_id); }; this.show = function(text, text_color, font, font_size, bg_color, bg_alpha, speed, id){ this.stop(); // Define a palette if(this.palette === null){ this.palette = []; for(var i = 0; i < 64; i++){ this.palette[i] = [i * 4, 0, 0]; this.palette[i + 64] = [255, i * 4, 0]; this.palette[i + 128] = [255, 255, i * 4]; this.palette[i + 192] = [255, 255, 255]; } } this.font_string = font_size + "px " + font; this.text = text; this.text_color_string = "rgb(" + parseInt(text_color.substring(0, 2), 16) + "," + parseInt(text_color.substring(2, 4), 16) + "," + parseInt(text_color.substring(4, 6), 16) + ")"; this.bg_color_r = parseInt(bg_color.substring(0, 2), 16); this.bg_color_g = parseInt(bg_color.substring(2, 4), 16); this.bg_color_b = parseInt(bg_color.substring(4, 6), 16); this.bg_color_a = Math.floor(255 * bg_alpha / 100); this.bg_color_a_pct = bg_alpha / 100; this.bg_color_string = "rgba(" + this.bg_color_r + "," + this.bg_color_g + "," + this.bg_color_b + "," + this.bg_alpha + ")"; // If animation speed is given in milliseconds var speed_msec; if(speed && !isNaN(Number(speed)) && speed.toString().match(/^\s+$/) === null){ speed_msec = speed; // Otherwise, if animation speed is given as a keyword } else { switch(speed){ case "x-fast": speed_msec = 10; break; case "fast": speed_msec = 25; break; case "slow": speed_msec = 100; break; case "x-slow": speed_msec = 150; break; default: case "normal": speed_msec = 50; break; } } if(!id){ id = 'text-burning-' + this.counter; } this.counter++; var el = document.getElementById(id); var canvas_id; if(!el){ document.write('<canvas id="' + id + '" style="font-family:' + font + '; font-size:' + font_size + 'px"></canvas>'); canvas_id = id; } else { el.innerHTML = '<canvas id="' + id + '-canvas" style="font-family:' + font + '; font-size:' + font_size + 'px"></canvas>'; canvas_id = id + "-canvas"; } this.canvas = document.getElementById(canvas_id); if(this.canvas.getContext){ var dc = this.canvas.getContext('2d'); dc.font = this.font_string; this.text_size = dc.measureText(text); this.canvas.width = this.text_size.width + 10; this.canvas.height = Math.floor(font_size * 1.5); this.fire_decay = Math.floor(3 + Math.exp(3.6 - font_size/7)); dc.fillStyle = "rgb(0,0,0)"; //bg_color_string; dc.fillRect (0, 0, this.canvas.width, this.canvas.height); this.image = dc.getImageData(0, 0, this.canvas.width, this.canvas.height); dc.fillStyle = "rgb(0,0,0)"; dc.fillRect (0, 0, this.canvas.width, this.canvas.height); this.image_flame = dc.getImageData(0, 0, this.canvas.width, this.canvas.height); // drawing code here dc.fillStyle = "rgb(0,0,0)"; dc.fillRect (0, 0, this.canvas.width, this.canvas.height); dc.fillStyle = "rgb(255,255,255)"; dc.font = this.font_string; dc.textAlign = 'center'; dc.textBaseline = 'bottom'; dc.fillText(text, this.canvas.width/2, this.canvas.height); this.image_src = dc.getImageData(0, 0, this.canvas.width, this.canvas.height); dc.putImageData(this.image, 0, 0); var that = this; this.interval_id = setInterval(function(){ that.burn(); } , speed_msec); } else { el.innerHTML = "Canvas element is not supported"; } }; this.burn = function(){ var dc = this.canvas.getContext('2d'); var image_data_len = this.canvas.width * this.canvas.height * 4; for(var pos = 0; pos < image_data_len; pos+=4){ if(this.image_src.data[pos] == 255){ this.image_flame.data[pos] = Math.floor(Math.random() * 256); } } var incr1 = (this.canvas.width * 4); for(var pos = 0; pos < (image_data_len - incr1); pos+=4){ var x = pos % incr1; var l = this.image_flame.data[ ((x == 0) ? pos + incr1 : pos) - 4 ]; var r = this.image_flame.data[ ((x == incr1 - 4) ? pos - incr1 : pos) + 4 ]; var b = this.image_flame.data[ pos + incr1 ]; var avg = Math.floor((l + r + b + b) / 4); // auto reduce it so you get lest of the forced fade and more vibrant fire waves if (avg > 0){ avg -= this.fire_decay; } // normalize if (avg < 0){ avg = 0; } this.image_flame.data[pos] = avg; } // 4 for 4 ints per pixel for(var pos = 0; pos < image_data_len; pos+=4){ if(this.image_flame.data[pos] != 0){ var c = this.image_flame.data[pos]; var pal = this.palette; var a = (1 - (3 * c)/255); if(a < 0){ a = 0; } if(a > this.bg_color_a){ a = this.bg_color_a; } this.image.data[pos] = Math.min(255, pal[c][0] + Math.floor(this.bg_color_r * a)); this.image.data[pos + 1] = Math.min(255, pal[c][1] + Math.floor(this.bg_color_g * a)); this.image.data[pos + 2] = Math.min(255, pal[c][2] + Math.floor(this.bg_color_b * a)); this.image.data[pos + 3] = Math.max(this.bg_color_a, Math.min(3 * c, 255)); } else { this.image.data[pos] = this.bg_color_r; this.image.data[pos + 1] = this.bg_color_g; this.image.data[pos + 2] = this.bg_color_b; this.image.data[pos + 3] = this.bg_color_a; } } // put pixel data on canvas dc.putImageData(this.image, 0, 0); dc.fillStyle = this.text_color_string; dc.font = this.font_string; dc.textAlign = 'center'; dc.textBaseline = 'bottom'; dc.fillText(this.text, this.canvas.width/2, this.canvas.height); }};
