Projects
Cicadas - background tiles generator
I just stumbled upon a nice article about cicada broods meeting background tiles: I already knew about the insect reproduction cycle based on prime numbers due to brilliant Marcus du Sautoy's book.
The idea is very simple: you choose n atoms to combine, each prime-numbered wide, and the pattern won't repeat until the least common multiple of the single widths, which is the product of such measures.
Crediting all the idea to people above mentioned, I just wrote a simple script to generate on-the-fly background based on prime seeds and chosen colors - give it a try! Hint: choose primes for stripes size.
As you could expect, it's just a matter of multiple background images:
body {
background:
url(http://www.diegocaponera.com/projects/D0E4F2/17),
url(http://www.diegocaponera.com/projects/7FB2F0/23),
url(http://www.diegocaponera.com/projects/4E7AC7/41) !important;
}
generated served side thru PHP GD:
public function pngAction($color, $width)
{
// create an empty frame
$im = imagecreatetruecolor($width * 2, 10);
// get an RGB array from hex color
$rgb = hex2rgb($color);
// prepare a transparent background
imagesavealpha($im, true);
$bg = imagecolorallocatealpha($im, 255, 255, 255, 127);
imagefill($im, 0, 0, $bg);
// prepare the foreground color with some opacity (64 out of 127)
$color = imagecolorallocatealpha($im, $rgb[0], $rgb[1], $rgb[2], 64);
// fill the rectangle
imagefilledrectangle($im, 0, 0, $width, 10, $color);
// flush the output out
header('Content-type: image/png');
imagepng($im);
}
Your CSS pijama is ready to go now.