All posts by Luca Ongaro

NoiseGen, generate background noise with jQuery

Tutorial

Adding a subtle background noise to Web pages is becoming a design trend: it produces a nice old-skool “analog” look that feels more like the “real world”. Neat examples are Forrst.com or Stripe.com, as well as many UI elements in iOS5.

Screen-Shot-2011-10-21-at-12.09.28-AM

Click the image to see a demo of NoiseGen, the jQuery plugin discussed later in this article

The usual way to achieve the effect is to use an image editing software to produce a PNG image and then set it as the background-image through CSS. Still, this approach has some drawbacks. First of all, the image has its bandwidth footprint. Moreover, fine-tuning background noise during development can be very time consuming, having to come back to the image editing software to save a new image each time you want to adjust the effect. Luckily, there’s a solution: using JavaScript and the HTML5 canvas element to dynamically produce a background image.

The idea is simple: create a canvas element, paint it with noise, and then set it as the background-image through CSS.


// Create the canvas
var canvas = document.createElement("canvas");
canvas.width = 80;
canvas.height = 80;
var context = canvas.getContext("2d"), x, y, opacity = 0.2;

// Paint it with random noise
for (x=0; x < canvas.width; x++) {
  for (y=0; y < canvas.height; y++) {
    var rand = Math.floor(Math.random() * 60);
    context.fillStyle = "rgba("+rand+","+rand+","+rand+","+opacity+")";
    context.fillRect(x, y, 1, 1);
  }
}

// Use it as the CSS background-image (here we are assuming jQuery is imported)
$("body").css("background-image", "url(" + canvas.toDataURL("image/png") + ")");

Unfortunately, some browsers do not support the canvas element yet (guess who?), so we need to provide for a graceful fallback. Also, it would be cool to have the possibility to finely tweak parameters like opacity, dimension of the image, size of the noise grains, statistical distribution of noise, colors, etc…

Luckily, we’ve got you covered! NoiseGen is an open-source jQuery plugin that does exactly that, offering support for a fallback image for crappy old browsers and many useful configuration options. Using it is straightforward:


$(document).ready({
  $("body").noiseGen({ fallbackImage: "bkgnd.png" });
});

Here we’re adding background noise to the body element. Cool browsers will do that dynamically on the client side, while old browsers can rely on the bandwidth hungry image. Moreover, we can finely tweak the look of our background:


$("body").noiseGen({
  fallbackImage: "bkgnd.png",
  opacity: 0.7,
  width: 64,
  height: 64,
  grainDimension: {
    width: 5,
    height: 1
  },
  fromColor: "0099CC",
  toColor: "10AADD",
  independentChannels: true,
  distribution: "uniform",
  bias: 5
});

Do you want to give noiseGen a try? There’s a demo here, and you can read more documentation on the GitHub project page, where you can also fork the code and contribute if you want.

jQCloud, a jQuery plugin to build neat word clouds (that actually look like clouds)

Tutorial, , , , ,

Have you ever noticed that tag clouds and word clouds come in many shapes, but they hardly ever look like actual clouds? This fact was bugging me, so I decided to code jQCloud, an open-source jQuery plugin that draws neat cloud-shaped word clouds.

jQCloud

click the image to see a live demo

It is powered by an algorithm somehow reminiscent of Wordle, but producing pure HTML word clouds, that can be easily styled through CSS.

Using jQCloud is quite simple. First, make sure to import jQuery and the most recent version of the plugin’s JavaScript and CSS code, that you can find here.

Once you have done that, the first step is creating a container element in your HTML, explicitly specifying its dimensions and position (like relative, absolute, or really anything different from static):

<div id="wordcloud" style="width: 550px; height: 350px; position: relative;"></div>

Then, simply create an array of words, specifying for each of them a text, a weight (its relative “importance” in the cloud) and, optionally, a URL. Finally, call the jQCloud method on the container element to release the magic:

var word_list = [
   {text: "Lorem", weight: 15},
   {text: "Ipsum", weight: 9, link: "http://jquery.com/"},
   {text: "Dolor", weight: 6},
   {text: "Sit", weight: 7},
   {text: "Amet", weight: 5}
   // ...other words
];
$(document).ready(function() {
   $("#wordcloud").jQCloud(word_list);
});

You can style the cloud at will with CSS: just remember that the container element will be given a class of jqcloud, while each word will belong to one of ten classes of relative importance, from w1 to w10. Anyway, the best approach is probably to edit the default jqcloud.css file provided in the package.

Also, remember that jQCloud has a GitHub repository, where you can read the docs, find examples and fork the code.