Using prime numbers to make better backgrounds

This is the perfect Hacker News article. I learned something new and mathematically-interesting about the natural world, the author came up with a clever hack to enliven backgrounds, and we learn how to apply that to improve our own designs.

Cool, but these numbers don't have to be primes. They just have to be coprimes (like (8,9)).<p>The least common multiple of two coprimes 'a' and 'b' is a*b.<p><a href="http://en.wikipedia.org/wiki/Coprime" rel="nofollow">http://en.wikipedia.org/wiki/Coprime</a>

This is very well explained, but not all that novel. Brian Eno used to generate long soundscapes like this, using loops of mutually prime lengths of time.<p>Edit: See also -<p><a href="http://en.wikipedia.org/wiki/Ambient_1:_Music_for_Airports" rel="nofollow">http://en.wikipedia.org/wiki/Ambient_1:_Music_for_Airports</a><p><a href="http://en.wikipedia.org/wiki/Generative_music" rel="nofollow">http://en.wikipedia.org/wiki/Generative_music</a>

Here's links to the raw lego images:<p><a href="http://www.sitepoint.com/examples/primes/lego-bg1.jpg" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-bg1.jpg</a> <a href="http://www.sitepoint.com/examples/primes/lego-bg2.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-bg2.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-bot1.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-bot1.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-bot2.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-bot2.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-headsb.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-headsb.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-heads-2.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-heads-2.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-mids1.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-mids1.png</a> <a href="http://www.sitepoint.com/examples/primes/lego-mids2.png" rel="nofollow">http://www.sitepoint.com/examples/primes/lego-mids2.png</a>

They're also useful for reverb effects, in very much the same way. See <a href="http://www.npr.org/2010/08/03/128935865/queens-brian-may-rocks-out-to-physics-photography" rel="nofollow">http://www.npr.org/2010/08/03/128935865/queens-brian-may-roc...</a> (under "On The 'Stomp-Stomp-Clap' Section Of 'We Will Rock You'")<p>Also, I think the technique will work as long as the numbers are relatively prime, which may be a bit easier to design around.

"This example uses the simplest possible set of prime number — 1, 3, and 7."<p>1 is not a prime number. Also, the "simplest" possible set of primes would be 2, 3, and 5.

What's wrong with the "cicada theory"<p>1. The most common cicadas come out every year or every other year.<p>2. The 17-year cicadas (for example) don't come out once every 17 years -- they come out every single year. Just in different broods (groups differing by phase). Some broods are much bigger than others of course, and broods are often located in different parts of the country, but many broods can and do overlap.<p>So I dunno. I'm guessing they're 13 and 17 year cicadas because that's how long it takes to develop.

While not the same thing, the concept of increasing the degree of realism/getting away from things that are too regular reminded me of Perlin Noise: <a href="http://en.wikipedia.org/wiki/Perlin_noise" rel="nofollow">http://en.wikipedia.org/wiki/Perlin_noise</a>

I won't get a chance to write this up, but in a similar vein, if you split the grain/texture off of an image, you can scale and stretch the image as needed, then drop a fairly small, tiled grain texture back on top. I think it is nicer to do two grain textures, one for lighter and one for darker. Make the grain image be solid white or black and put the grain in the alpha channel.

Brilliant interesting article about a very simple but clever idea. I am not sure if I would use this css background technique, but the lego example is brilliant.<p>Some articles trigger lots of ideas in my mind, this was one of them.

And some people still question the value of pure math. These design tricks would anger some of my design friends, who still believe you can be left brain OR right brain.

Gonna try this with pseudo-random opacity styling for even more variations.

Wow, very impressive! I will definitely be trying this out. It reminded me of my discrete mathematics class, so now I'm wondering if there are any other cool principles that can be applied to design

Reminds me of a section in The Blind Watchmaker on cicadas and convergence in evolution - <a href="http://books.google.com/books?id=sPpaZnZMDG0C&#38;pg=PA100&#38;lpg=PA100&#38;dq=dawkins+cicadas&#38;source=bl&#38;ots=tCk_aZ739G&#38;sig=92lqIZdcWlUd59sQT-_pbnc22S4&#38;hl=en&#38;ei=P-yeTcWwKsiO0QGkmoj8BA&#38;sa=X&#38;oi=book_result&#38;ct=result&#38;resnum=1&#38;ved=0CBUQ6AEwAA#v=onepage&#38;q&#38;f=false" rel="nofollow">http://books.google.com/books?id=sPpaZnZMDG0C&#38;pg=PA100&#...</a>

Simple, elegant, effective. I know how I'm spending my evening...

There's a typo in the title of the second 'chapter'.<p>"That’s great. But wa/s/ has all this got to do with web design?"

Why is it that "design" sites have the worst design? Yes, please be sure to destroy the page margins, and set a min width on the page so that I have to scroll horizontally to read the end of lines. Classic.