Animated website background with HTML5

cra5h — Sat, 17 Oct 2009 13:05:04 +0000

After fooling around with some of the basic HTML5 Canvas features for my previous post, I decided to also work out some other ideas I had. Today I started implementing a simple animated background for a website.

Click here for the demo

Using a Canvas Object as a background
Before actually getting to the animating of the background, I first had to setup Canvas as a background object. In order to do this. I have added the Canvas element in an absolute positioned div that is aligned to the top of the page. The reason for using a div around the Canvas is because the browsers don’t seem to want to put the Canvas in page at 100% without creating scrollbars.

After placing the background a div can be placed on top. When this div is created with a max-height of 100% and overflow set to auto. This layer will automatically give a scrollbar when necessary.

So that leaves us with the following HTML and CSS code:

CSS:

#backgroundHolder {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-color: #999;
}
#realbody {
	position: absolute;
	top: 0;
	width: 100%;
	overflow: auto;
	max-height: 100%;
}
canvas {
	width: 100%;
	height: 100%;
}

Let the browser resize the Canvas
When I created the first setup for this demo. I started by setting the height and width of the Canvas to the height and width of the page. This soon turned out to be quite heavy on the CPU usage at higher resolutions. So I made the Canvas a static size and let the browser resize the area to 100%. This works and performs way better. And because the animated content is abstract it does not really matter that we loose the aspect ratio.

Once you have setup the Canvas behind the page. You can draw whatever you want in this Canvas and it will render behind the normal content in the browser.

How to animate the background
Now that we have done the setup for the page, we can start to animate. I created some really simple code which doesn’t do very proper checking on the boundaries. It basicly switches 3 variables around to make the background animated: move the bars from right to left, change the rotation of the Canvas context from (π / 32) to -(π / 32), and fade the color between an array of colors.

Drawing the bars
The bars are just drawn rectangles which are drawn a little bit above the canvas till a little bit below the Canvas, this is because of the rotation. In order to draw the bars I use the following code:

for (var i = leftOffset; i < canvas.width + 600; i += (BAR_WIDTH * 2)) {
	context.fillRect(i - (canvas.width / 2), 0 - (canvas.height / 2) - 200, BAR_WIDTH, canvas.height + 400);
}
leftOffset -= BAR_SPEED;
if (leftOffset + BAR_WIDTH * 2 + 300 < 0) {
	leftOffset += BAR_WIDTH * 2;
}

The BAR_SPEED is to move the initial leftOffset to the left all the time. Up till it reaches a certain value. Then the leftOffset is scaled up a little so that we don’t create more and more bars over time. The starting point of the context.fillRect might seem a bit weird. This is because the Canvas is translated to the center. So the starting point for drawing a bar is minus the width of the Canvas area.

Rotating the bars
Rotating the bars is even simpler then the drawing of them. We can just use the context.rotate function to set the rotation of the content that we are drawing. Keep in mind that you might want to save the context state before rotating so you can restore it after the rotation. The JavaScript code for rotating is the following:

context.save();
context.rotate(angle += angleAdjust);
// Draw your content here
if (angle > MAX_ANGLE || angle < 0 - MAX_ANGLE) {
	angleAdjust = 0 - angleAdjust;
}

In the example above MAX_ANGLE is set to π / 32. The variable angleAdjust is used to make sure that we either increase the angle or decrease the angle.

Switching the colors
The effect to finish the whole thing of, is the switching of colors. For this demo I am using 6 colors that I just guessed some RGB values for. Blending the colors is done with this Color object in JavaScript:

function Color(r,g,b) {
	this.r = r;
	this.g = g;
	this.b = b;
 
	this.step = COLOR_STEP;
 
	this.fadeTo = function(color) {
		this.r = this.r + ((color.r - this.r) * this.step);
		this.g = this.g + ((color.g - this.g) * this.step);
		this.b = this.b + ((color.b - this.b) * this.step);
 
		this.step += COLOR_STEP;
 
		if (this.r == color.r &&
				this.g == color.g &&
				this.b == color.b) {
 
			this.step = COLOR_STEP;
			return true;
		}
		return false;
	}
 
	this.getRGB = function() {
		return Math.round(this.r) + "," +
				Math.round(this.g) + "," +
				Math.round(this.b);
	}
}

Every time the fadeTo method is called, the color that is used will blend more to the color provided as an argument to the fadeTo method. If color provided as a parameter is the same as the color. Then this method will return true so the rest of the code can start providing another color to blend to.

The code to start running through the array of colors then becomes something like this:

if (activeColor.fadeTo(colors[nextColorIndex])) {
	activeColor = colors[nextColorIndex++];
	if (nextColorIndex >= colors.length) {
		nextColorIndex = 0;
	}
}
context.fillStyle = 'rgb(' + activeColor.getRGB() + ')';

After setting this demo up today, I have to conclude that doing animations like this is really not that difficult. I think within the next few months we will see more and more awesome website implementations with Canvas.

Dynamic image collage with HTML5 and Canvas

cra5h — Fri, 16 Oct 2009 21:43:05 +0000

There is an update to this post that adds text support to the collage: http://radikalfx.com/2011/12/12/text-addition-for-image-collage-with-html5-and-canvas/

In the last couple of months the hype around web technology has really started to heat up. The HTML5 standard is getting a lot of attention from all major browser manufacturers and all my favorite browsers are starting to support all the nice new features coming in HTML5.

One of my favorite new features is Canvas, prime reason being my hope to finally make Flash obsolete, sorry Adobe. Because I wanted to check out the capabilities of Canvas, I decided to start coding some simple projects with Canvas.

My first demo is a simple Canvas element which can be used to make a collage of images. The demo can be found here., you will need a Canvas compatible browser.

What does it do
The demo lets you search for images from Flickr. When you have searched for some images, you can click any of the images there to add them to the Canvas part of the page. When the image is added to the Canvas then it’s automatically created as a new layer. Each layer can be manipulated in the following ways: move, scale, rotate, move layer up and down, remove layer, change opacity, change blending mode and enable or disable shadow.

The layout is a bit similar to image edit software, which I think is quite simple to understand. The code might still contain some bugs and do some unexpected things. Rotating images and then scaling makes the whole thing kinda whobly!

How does it work
The JavaScript code for this demo is split up into two parts. The first is a library that loads in all the proper calls for the Canvas element and that gives the page the ability to modify the layers in the collage. The second part of the JavaScript code, is the code to handle all the page interaction and to bind the HTML controls for the layers. I won’t go into the code for the user controls. But the canvas control might be interesting:

jCollage = new Collage("#collage"); //Create new collage Object with id of the Canvas tag
 
jCollage.setBackgroundColor("#fff"); //Set background color of collage
jCollage.setBackgroundImage(img); //Set background image for the collage
 
jCollage.redraw(); //Force redraw the collage
 
jCollage.addLayer(img); //Add a new layer to the collage
jCollage.getLayer(id); //Get layer by id
jCollage.getLayers(); //Get Array if all layers
jCollage.removeLayer(id); //Remove layer based on id
 
jCollage.moveLayerUp(id); //Move layer up in the array
jCollage.moveLayerDown(id); //Move layer down in the array
 
layer.isVisible(); //Is layer visible
layer.toggleVisible(); //Toggle visibility
layer.hasShadow(); //Does layer have shadow
layer.toggleShadow(); //Toggle shadow
layer.setShadow(boolean); //Set shadow
layer.getOpacity(); //Get opacity of layer
layer.setOpacity(float); //Set opacity of layer
layer.getCompositeOperation(); //Set the composite operation
layer.setCompositeOperation(string); //Get the composite operation

You can find the JavaScript code for this here. I might one day work this out as a jQuery plugin, but don’t know if that will be worth the extra effort.

Conclusion
Getting up to speed on the Canvas element is quite easy and the information for the HTML5 standard is already enough to get you going. Because a lot of people have already been working with this feature, it’s also very simple to find more detailed information about problems and how to solve them.

The most difficult thing to get going was handling the collision interaction with the Objects, because I couldn’t use the normal mouse events based on the DOM. I had to figure out the math behind the collisions myself, this code is not very pretty. But after getting this demo running, I have to say that it was not very difficult to code and Canvas is definitely going into a direction were it could replace Flash functionality. I just hope that Internet Explorer starts supporting it some time soon as well!

radikalFX » HTML5

Animated website background with HTML5

Dynamic image collage with HTML5 and Canvas