Quick Web Design

Cool effects in 5 mins

I did another live coding lightning talk, this time for FESuffolk.

Despite the fact that I gave this more time, it felt like it didn't go so well. That said, more people went out of their way to give me a positive response. Either way, I'm looking for input - if you thought it sucked, whether this one or the previous one, please let me know. Equally, if I lost you, let me know where.

So the background to this one was that I wondered: What was the most interesting and impressive thing I could do in 5 mins? It turned into "How to make an interesting animated background / generative graphics starter kit with canvas" thing, but it was fun to do.

So I started with page, a lot like this, with lots of text.

I started off with some basic Javascript. If you view the source of this page, you should see something like this, right here (slightly modified)

Stylesheet:

canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

Javascript:

window.onload = function() {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  document.body.appendChild(canvas);



  var repaint = function() {
    context.fillStyle = "rgba(0, 255, 0, 0.5)";
    context.fillRect(0,0,canvas.width, canvas.height);
  };



  var resize = function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    repaint();
  };

  window.onresize = resize;
  resize();

};

It's fairly simple: I create a <canvas> element, fill it with a translucent green. I set the width and the height to the window's width and height using Javascript, and with Stylesheets I set it to track the page (position fixed) and appear in the top left corner of the page, behind the text. Note that I bind the width and height resizer to window's onresize, and bind the whole doo-dah to window.onload - this is the 2nd worst possible way you could do this. I'll let you guess what the worst way is (clue: I'm doing it on the "Run code" buttons below)

All in all, this isn't very exciting.

I then showed how easy it is to make a random square:

//...

  var repaint = function() {
    context.fillStyle = "rgba(0, 255, 0, 0.5)";
    context.fillRect(0,0,canvas.width, canvas.height);

    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var size = Math.random() * 30;


    context.fillStyle = "rgba(0, 0, 255, 0.5)";
    context.fillRect(x,y, size, size);

  };

//...

Of course, one random square isn't very much - so I animated it (and turned the opacity of my filled background down)

//...

  var repaint = function() {
    context.fillStyle = "rgba(0, 255, 0, 0.1)";
    context.fillRect(0,0,canvas.width, canvas.height);

    var x = Math.random() * canvas.width;
    var y = Math.random() * canvas.height;
    var size = Math.random() * 30;


    context.fillStyle = "rgba(0, 0, 255, 0.5)";
    context.fillRect(x,y, size, size);

    setTimeout(repaint, 100);
    // Note: in a real animation, it would be better
    // to use requestAnimationFrame...

  };

//...

Simple? Beautiful?!? Attrocious... but quick.

My final note is this: We, as developers, are the vanguard of the possible. Designers are the vangard of style. Some can be both (not me, obviously), but it doesn't mean we shouldn't stretch ourselves in each direction. Always push the boundries of what can be done - otherwise, those boundries will never be pushed, and this will be the world's loss.

Code is available on Github, with tags 0-3 to show the steps I attempted before the presentation, and a tag called "actual" for the end result of the real presentation.

Note: the code in this page's source actually has a small bugfix to prevent unintended craziness when you resize the browser. Simply save the value returned from setTimeout, and pump it into clearTimeout() at the start of the resize function.