Home > Projects > Hello World

HTML5 / JavaScript (Fireworks)

How it Works

HTML snippets from this web page:

The <style> tag defines the rows and columns used to hold each of the canvas elements.

    	canvas { background: Black; display: block; margin: 0 auto; }
          display: table;
          table-layout: fixed; 
          border-spacing: 0px;
          display: table-cell;

Next are the canvas elements and corresponding script file. Mutliple canvases were used to help resolve performance issues.

"CanvasH" will be the primary focus of this code walkthrough.

<body> ...

<div class="Row">
  <div class="Column"><canvas id="canvasH" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasE" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasL" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasL1" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasO" width="180" height="220"></canvas></div>     
	<div class="Row">
  <div class="Column"><canvas id="canvasW" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasO1" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasR" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasL2" width="170" height="220"></canvas></div>
	<div class="Column"><canvas id="canvasD" width="180" height="220"></canvas></div>     
<script src="js/hellofireworks.js"></script>

Now to look at the file hellofireworks.js in detail

Click here to download the .js file used in this example.

The browser type is initially captured, and the timer variables are set according to the browser type.

if (isChrome == true) {
    var t1 = 600;
    var t2 = 1400;
  else if (isFirefox == true) {
    var t1 = 200;
    var t2 = 300;
  else if (isIE == true) {
    var t1 = 10;
    var t2 = 10;
  else {
    var t1 = 250;
    var t2 = 300;

Next are the functions for each of the canvases. Parameters are used for the canvas name, and two timers. The first timer parameter governs how many seconds the flame particles burn, and the second allows the particles to slowly taper off. These timer values can be modified to tweak the speed and duration of the flames used to build each letter. The timers will be discussed further below.

canvasD("canvasD", t1, t2);    //canvas name, timer 1, timer 2
canvasL("canvasL2", t1, t2);
canvasR("canvasR", t1, t2);
canvasO("canvasO1", t1, t2);
canvasW("canvasW", t1, t2);
canvasO("canvasO", t1, t2);
canvasL("canvasL1", t1, t2);
canvasL("canvasL", t1, t2);
canvasE("canvasE", t1, t2);
canvasH("canvasH", t1, t2);

Only the canvasH() function will be covered in this code walkthrough.

The canvasname variable (the value is "canvasD") has the node in the DOM representing the <canvas> element by calling the document.getElementById() method. The ctx variable is used to access the drawing context using the getContext() method.

function canvasH(canvasname, timeramount, timer2amount) {
	var canvas = document.getElementById(canvasname);
	var ctx = canvas.getContext("2d");
    var W = canvas.width;
    var H = canvas.height;
	var timer = timeramount; 
	var timer2 = timer2amount;

Next are arrays that represent particles burning at certain coordinate points of the letter.

The coordinate variables are determined and they map to the diagram at the end of this page.

var particles = []; var particles1 = []; var particles2 = []; var particles3 = []; var particles4 = []; var particles5 = [];
var particles6 = []; var particles7 = []; var particles8 = [];
//burning letter
  var x0 = 50, y0 = 75;
  var x1 = 50, y1 = 125;
  var x2 = 50, y2 = 175;
  var x3 = 75, y3 = 125;
  var x4 = 100, y4 = 125;
  var x5 = 125, y5 = 125;
  var x6 = 150, y6 = 75;
  var x7 = 150, y7 = 125;
  var x8 = 150, y8 = 175;
//full letter
  var x9 = 50, y9 = 100;
  var x10 = 50, y10 = 150;
  var x11 = 150, y11 = 100;
  var x12 = 150, y12 = 150;

Next the number of particles per letter coordinate point is set. This number is adjusted for performance purposes depending on the browser type.

Then the particle function constructor creates new Function objects in which values are pushed into the particles arrays. Note: In JavaScript every function is actually a Function object.

if (isChrome == true) {
    var particle_count = 40;
  else if (isFirefox == true) {
    var particle_count = 12;
  else if (isIE == true) {
    var particle_count = 3;
  else {
    var particle_count = 10;
for(var i = 0; i < particle_count; i++)
particles.push(new particle(x0, y0)), particles1.push(new particle(x1, y1)), particles2.push(new particle(x2, y2)), 
particles3.push(new particle(x3,y3)), particles4.push(new particle(x4, y4)), particles5.push(new particle(x5, y5)),  
particles6.push(new particle(x6, y6)), particles7.push(new particle(x7, y7)), particles8.push(new particle(x8, y8))

The useparticles() function is called from the draw() function. It colors and moves the flame particles and this is where the two timers come into play. Otherwise the flames would run continuosly without stopping.

The first timer allows the particles to be generated for a set number of seconds, and is decremented each time a new particle array is created. After the timer ends, the remaining life and radius are set to a value of one to allow the final particles to fade out. And the draw2() function is called which displays the grayed spots where the flames had originally been.

The second timer (timer2) also aids in allowing the final particles to fade out and when it is decremented and has a value of 0, cancelAnimationFrame is called to stop the animation loop.

if(p.remaining_life < 0 || p.radius < 0)
		           if (timer > 0){
                    //a brand new particle replacing the dead one
                    particles[i] = new particle(xp, yp);
                    p.remaining_life = 1;  
                    p.radius = 1; 
                    if (timer2 > 0){ //timer2 allows the effect to taper off  before cancelAnimationFrame is called
                    cancelAnimationFrame( id );

The drawblurrycircle() function draws gray points where the flames had previously burned at each of the letter coordinate points.

function drawblurrycircle( x, y)
	var ballRadius = 10;
	gradient = ctx.createRadialGradient(x, y, 10, x, y, 1); 
	gradient.addColorStop(0, "#1D1D1D");  
	gradient.addColorStop(.50, "#1F1F1F");
	gradient.addColorStop(1, "#0F0F0F");
	ctx.arc(x, y, ballRadius, 0, Math.PI*2);
	ctx.fillStyle = gradient;

The draw function is where the animation occurs using the requestAnimationFrame(draw) method with a callback to itself.

function draw()
		//Painting the canvas black
		//In the next frame the background is painted normally without blending to the 
		//previous frame
		ctx.globalCompositeOperation = "source-over";
		ctx.fillStyle = "black";
		ctx.fillRect(0, 0, W, H);
		ctx.globalCompositeOperation = "lighter";
		useparticles(particles, x0, y0);
		useparticles(particles1, x1, y1);
		useparticles(particles2, x2, y2);
		useparticles(particles3, x3, y3);
		useparticles(particles4, x4, y4);
		useparticles(particles5, x5, y5);
		useparticles(particles6, x6, y6);
		useparticles(particles7, x7, y7);
		useparticles(particles8, x8, y8);
		var id;
		id = requestAnimationFrame(draw);   

The draw2() function determines where the grayed points are positioned to form the words "HELLO WORLD". They are drawn on top of what was originally drawn by the draw() function.

function draw2()

    ctx.clearRect(0, 0, W, H);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, W, H);
		drawblurrycircle( x0, y0);
		drawblurrycircle( x1, y1);
		drawblurrycircle( x2, y2);
		drawblurrycircle( x3, y3);
		drawblurrycircle( x4, y4);
		drawblurrycircle( x5, y5);
		drawblurrycircle( x6, y6);
		drawblurrycircle( x7, y7);
		drawblurrycircle( x8, y8);
		drawblurrycircle( x9, y9);
		drawblurrycircle( x10, y10);
		drawblurrycircle( x11, y11);
		drawblurrycircle( x12, y12);

At the bottom of the script, the draw()( function is called when it's time to update the animation for the next repaint.


Diagram showing the canvas coordinates and layout used as a reference.