in this entry, i’ll talk about how we can manipulate colors as numbers.

step 1: draw the squares

i’ve stolen my square-filled <div> from the previous demo, but this time the squares start out black.

.demo-square
{
   float:left;
   width:28px;
   height:28px;
   background:#000;
   margin:1px;
}

the javascript that creates them:

var cols = 10;
var rows = 6;
for(x=0; x < (cols * rows); x++)
{
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
}

<div id="demo"></div>

pretty boring.

step 2: alter the colors

notice we make a loop to create the squares. loops are great for incrementally doing math ($something++).

also, colors can be expressed not only in the hexadecimal #AABBCC, but also numerically from 0-225, e.g. rgb(000,120,255)

so if we wanted the squares to fade slowly from black to white, we need to take the number of squares, divide 255 by that number, and add that amount to each of the r,g,b values on every loop. (here i’m manipulating all r,g,b values equally – if you want to play with color, you can change them separately)

that loop looks like this:

var increment = 255 / ((cols * rows)-2);
var current = 0;
for(x=0; x < (cols * rows); x++)
{
   rounded = Math.round(current);
   $("<div>")
   .clone(false)
   .appendTo("#demo")
   .addClass("demo-square")
   .css("background","rgb("+rounded+","+rounded+","+rounded+")");
   current += increment;
}

notes:

• rounding – CSS doesn’t like decimals in rgb() values
• for the increment value, i subtract two from cols * rows, because we want the first one fully black, and the last one fully white.

step 3: random, and other uses

i know, i don’t have a big sweeping gradient in the back. i have random shades. the theory is the same, to loop through every square and alter it’s rgb() value, but instead of incrementing it, we pick a (rounded) random value every time.

var rand = 0;
for(x=0; x < (cols * rows); x++)
{
  rand = Math.round(Math.random()*255);
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
  .css("background","rgb("+rand+","+rand+","+rand+")");
}

my last demo showed how random things could happen with mousemove(). do you want the squares to react to user input as they mouse over them individually? we’ll tie the change to the hover() event on each square.

for(x=0; x < (cols * rows); x++)
{
   $("<div>")
   .clone(false)
   .appendTo("#demo")
   .addClass("demo-square")
   .css("background","#000000")
   .hover(function() {
      rand = Math.round(Math.random()*255);
   $(this).css("background","rgb("+rand+","+rand+","+rand+")")
  })
}

(mouse over the div below to see it in action)

you could do something interesting with opacity and images (for browsers that support it):

add an image to the background of the container with CSS:

#demo
{
  background:url('/images/demo.jpg') top left no-repeat;
}

and adjust the opacity of each square to a random value (divided by two here to make it reveal more of the image)

for(x=0; x < (cols * rows); x++)
{
  $("<div>")
  .clone(false)
  .appendTo("#demo")
  .addClass("demo-square")
  .css("background","#000000")
  .css("opacity",Math.random()/2)
}

is there any practical usage for this? i think so. creating an appealing or joyful experience is practical because it makes the user happy. a happy user will read/learn/buy/share.

i hope you’ll consider using clever technology to make fun and functional designs for your users. if you do, please drop me a note and let me know how this inspired your own creations!

the answer: it’s not a graphic. it’s all HTML, CSS, and Javascript.

as a designer / developer, i try to find ways of using the capabilities of the browser to provide advanced design and functionality, instead of pushing a large payload like a Flash movie down to the browser for every effect i want to create.

my inspiration came from John Resig’s port of the Processing library to processing.js. there are some really beautiful visuals in those examples, all of which are generated in the browser. while i didn’t use processing.js to create my design, i did leverage the JQuery library to do a lot of the heavy lifting for me.

for this demonstration, i won’t get into the math involved to do the random colors – that would probably fill another article by itself. instead, let’s focus on the rendering and animation.

step 1: pick a container

for this example, let’s take this <div> element:

<div id="demo"></div>

pretty boring.

step 2: fill it up

now let’s fill the <div> with smaller <div>s – a grid of them 10×6

this CSS will style the small squares that we will create:

.demo-square
{
	float:left;
	width:28px;
	height:28px;
	background:#dfd;
	margin:1px;
}

here’s the javascript that creates them:

var cols = 10;
var rows = 6;
for(x=0; x<(cols * rows); x++)
{
	$("<div>")
	.clone(false)
	.appendTo("#demo")
	.addClass("demo-square")
}

that gives us this:

(i styled them with a bit of margin between so you could see the separate squares)

step 3: make it go

while there are other ways to animate the squares, most of them use a lot of CPU time, and would run even when the user wasn’t watching. i got the idea to tie the animation to the mousemove() event that JQuery provides. this would insure that it wouldn’t be eating CPU cycles while the user had another tab or window focused. also, i hope it adds a bit of fun!

the CSS for the alternate square style:

.demo-square-dark
{
	background:#6a6;
}

the javascript that toggles the alternate class on a random square as the mouse moves:

var demosquares = $('#demo .demo-square');
$("#demo").mousemove(function(e)
{
  pick = Math.round(demosquares.length * Math.random());
  $(demosquares[pick]).toggleClass("demo-square-dark");
});

mouse over this div to see how the mousemove() event triggers that toggle

and that’s basically how the animated background of my site works. in another post, i’ll get into the details of the math that makes the different shades. until then – check out a toy i made with the background squares – you can even select the two colors that it differences between!

if you look at a block comment:

/* */

you realize you can stack two of these up on each other:

/* */ i'm not commented!  /* */

and by quickly inserting a space in the closing side of the first comment, you can make the comment tag expand to encompass the whole line or block.

/* * / <-- that space makes me commented now!  /* */

the finished example:

/* no space */ #example{} /* enabled */
/* with space * / #example{} /* disabled */

you can use this to toggle a debug class, e.g.

/*  */  .todo { font-weight:bold; color:red; } /* */