5 Days of HTML5 (Day 4: Why Canvas is Awesome)

Today we’re going to cover the <canvas> element. Something which has generated quite a buzz in the web design community, and today we’ll cover exactly why and how you can use Processing to create awesome interactive backgrounds and features for your site.

Yesterday I finally finished my CSS3 for my site and it’s looking great. I went box shadow crazy and added some to the twitter box and articles to make everything pop a bit more. Here’s my finished CSS3 and how the page looks;

The drop shadows in CSS3 are a great way to give that extra bit of pop and professionalism to a website. You’ll also notice that I’ve removed the menu and footer from the website, this is because I like to put these elements in a php include, so they’re easier to manipulate if I ever want to make changes to them across multiple pages in one go. Php includes can save your life in web design, but thats another tutorial. I’ll also be migrating my <canvas> tags to a php include when this tutorials finished for a quick way to switch up sketches.

What is Processing?

Processing is a Programming language based on Java which has gained a lot of attention from interactive designers. It’s great for visual design, and has a plethora of libraries available ranging from OpenGL to Arduino support. Processing programs are called ‘sketches’.

One of the most interesting developments of Processing is its sister project ‘Processing.js’; an open source javascript port of the program allowing developers to integrate their sketches with the web using the <canvas> element (see where this is going?).

In simple terms, we can now add our sketches into our website, whether this be in a nested window or running as a full screen background element by using the z-index to create layers to our website.

To get started, head on over to Processingjs.org and download the starter kit. You only really need one file, the processing-1.2.1.js file (although I’ve included both processing-1.2.1.js and processing-1.2.1.min.js for good measure).

Drop these into the root of your website directory and head on back to dreamweaver and drop this in adjusting your paths accordingly;

<script src=”processing-1.2.1.js”></script>  <!–This line references our .js file in our root directory–>
<canvas id=”canvas” data-processing-sources=”processing/balls/balls”></canvas> <!–This line id’s our canvas element and references the path to our processing sketch–>

A quick explanation of where I put this and why. You can put your canvas elements pretty much anywhere. I chose the end of my <head> tag because I wanted to z-index the canvas element to a background, which would mean I need a container for the content on my page to move forward a few layers, and what better container than the already set up <body> tag. It already contains all my content separate from anything else. But we’ll get back to z-indexing our sketch in a bit.

First check everythings working;

AWESOME. You’re sketch might not be coming up full screen yet, and you might have a background colour, so let’s fix that quick before we go any further.

Open up your processing sketch and find the size line underneath void setup();

Set your size as above; screen.width,screen.height will expand your sketch to fill your screen. Width has to come first, then height. Next you’ll want to set your background colour in RGBA to 0,0,0,0. Basically black with no opacity.

Lastly, you’ll want to copy the first comment:

/* @pjs transparent=true; */

This should be enough to give you a transparent processing sketch that we can layer between our background and content. (Worth noting that if you’ve not separated your background, it’s ok, the background property naturally sits behind your processing sketch).

But we’ve taken over the entire page, time to z-index this mother. I dropped this in my CSS to set my canvas element as the very first layer:

#canvas {

And then set the z-index of my <body> tag to 2. The position:fixed; and top:0; and left:0; properties are also important in addressing a common issue of the sketch pushing all the content down. Fixed position will let the content lay nicely over the sketch whilst keeping it…well…fixed.

z-index in place, check. Fixed position property in place, check. We should have something like this now;

*Sidenote: Yeah there’s a couple of inconsistencies in the styling on the screenshots due to me tidying my CSS at the same time. But that’s not important.

I changed the sketch on this one, the drawing was a bit crude. Here we have some lovely circles that chase your mouse around the screen. Wonderful.

The sketch shown generated a new circle every second or so, varying in size and position depending on your mouse position. Even at low opacity, they’d layer up until white, making it difficult to see the text and menu.

I played around with a few and eventually settled on using the main sketch that sits in the header of the processing website. I modified it to have fewer orbs and match the website colours.

I thought this sketch was nice. Orbs can follow the mouse cursor and be dragged and interact with other orbs by connecting themselves with a line, but left to their own devices the orbs will randomly roam the site behind the content. A harmonic balance between user and user free interaction.

So there you go. Simple steps to how to create interactive website backgrounds with Processing, Javascript and the canvas element.

One final note, if you’re no good with processing, you can head to the processing site and grab some example sketches to modify and play around with. You can also get some cool additional examples from here: http://ejohn.org/apps/processing.js/examples/topics/

Tomorrow’s our last day, I don’t know what I’m going to cover yet, but it’ll be something special to conclude my HTML5/CSS3 series. If any of this has helped you, please leave a comment and link me to your work, i’d love to see it.



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s