Using prime numbers to make better backgrounds

[BrandonM]

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.

[satori99]

Totally agree. There have been quite a few articles recently that fall into this category.

pquerna's recent post about OpenSSL memory in node (and elsewhere) is another that comes to mind. http://news.ycombinator.com/item?id=2411144

keep 'em coming I say!

[gbog]

I dare to disagree. While learning about Cicadas and prime numbers is ok, its application to "enliven backgrounds" seems very futile to me. Hacking means breaking the rules, crack the black box, find new game changing ways to do things that will prove useful for a lot of people. Hacking is not about finding slightly vain design tricks.

In summary, this article is far from what I would upvote. A good indicator of the relative weakness of it is the few interesting comment it triggered.

In fact, some month ago I would come to HN, and read the comments, and find a lot of savoury meat for my curiosity hunger, without even bothering to get check the original article that was only the starting point of high-level exchanges of views on the matter.

PS: Recent articles seem to focus on visual design (pixels and colors), which is very surprising on a website that is so obviously anti-design...

[nadam]

Cool, but these numbers don't have to be primes. They just have to be coprimes (like (8,9)).

The least common multiple of two coprimes 'a' and 'b' is a*b.

http://en.wikipedia.org/wiki/Coprime

[dmvaldman]

Not for the cicada example, but yes for the web aspect.

In the cicada example the point is that one predator would evolve to align its boom cycle so that it had a common divisor with the cycle of the cicada.

Since the predator's cycle is variable, it is evolutionarily optimal if the cicada only comes out every prime number of years.

[baddox]

Indeed. If you already have one tile that's, say 50px wide, you can easily find coprime sizes:

http://www.wolframalpha.com/input/?i=coprime+to+50

[IDisposableHero]

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.

Edit: See also -

http://en.wikipedia.org/wiki/Ambient_1:_Music_for_Airports

http://en.wikipedia.org/wiki/Generative_music

[jws]

It also is the core of "method ringing", a kind of bell ringing from the 17th century and persisting today. Imagine some folks clanging away at 10 bells in a church tower for hours on end, never repeating, and never developing a melody. Each person is operating a single bell and repeating their pattern with a unique period.

http://en.wikipedia.org/wiki/Change_ringing

[nadam]

Yes it is a known technique also in 3D games. Related, but more complicated (research) topic is infinite/arbitrarily-sized non-looping texture generation from arbitrary sample images.

http://www.cs.sunysb.edu/~vordonezroma/texturesynth.pdf

(There are some mind blowing generated images in the linked PDF.)

[skymt]

The experimental-music band Bull of Heaven recently released a prime-looping generative piece that they project will last 8,462,937,602,125,701,219,674,955.2362595095 years before repeating.

http://bullofheaven.com/media/260.html

[jashmenn]

Here's links to the raw lego images:

http://www.sitepoint.com/examples/primes/lego-bg1.jpg http://www.sitepoint.com/examples/primes/lego-bg2.png http://www.sitepoint.com/examples/primes/lego-bot1.png http://www.sitepoint.com/examples/primes/lego-bot2.png http://www.sitepoint.com/examples/primes/lego-headsb.png http://www.sitepoint.com/examples/primes/lego-heads-2.png http://www.sitepoint.com/examples/primes/lego-mids1.png http://www.sitepoint.com/examples/primes/lego-mids2.png

[mullr]

They're also useful for reverb effects, in very much the same way. See http://www.npr.org/2010/08/03/128935865/queens-brian-may-roc... (under "On The 'Stomp-Stomp-Clap' Section Of 'We Will Rock You'")

Also, I think the technique will work as long as the numbers are relatively prime, which may be a bit easier to design around.

[camtarn]

Using coprime-length looping rhythms on top of each other can also create some pretty interesting sounds.

Take a rhythm in 4/4 (say a standard rock snare backbeat, playing on the second and fourth note of a four note bar), layer on a cymbal pattern which repeats every three notes, then a bass drum pattern which repeats every five notes. The effect is fairly subtle because the snare keeps everything sounding like 4/4, but the feel of the rhythm is constantly shifting.

I found a nice YouTube video demonstrating this a while back, but unfortunately all I can find now is videos of polyrhythms where the loops all have the same duration but different numbers of beats per duration... which is an interesting technique in and of itself :)

[adavies42]

Holy shit, Brian May's one more Ph.D. away from being Buckaroo Banzai!

[granite_scones]

"This example uses the simplest possible set of prime number — 1, 3, and 7."

1 is not a prime number. Also, the "simplest" possible set of primes would be 2, 3, and 5.

[SeanLuke]

What's wrong with the "cicada theory"

1. The most common cicadas come out every year or every other year.

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.

So I dunno. I'm guessing they're 13 and 17 year cicadas because that's how long it takes to develop.

[scott_s]

I'm guessing they're 13 and 17 year cicadas because that's how long it takes to develop.

That's a tautology. "A baby takes 9 months to be born because that's how long it takes to develop." Well, yes, but the question becomes, why does it take that amount of time to develop? Were there direct selection pressures acting on that length of time, or is that length of time mostly a function of other variables which are acted on directly by selection pressure?

[KirinDave]

Consider, though, that these groups of cicadas don't really "care" about one another from a genetic standpoint. If the broods don't interact, they're basically different sets of genes that only interact via mutations, so the principle still holds.

What's interesting about that is how the broods might diverge to coprime emergence schedules to prevent competition.

[Nate75Sanders]

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: http://en.wikipedia.org/wiki/Perlin_noise

[jws]

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.

[xbot]

Hey guys, I actually mocked up a woodgrain test page while I was developing the article but I ended up preferring the lego and curtain examples. But if your interested:

http://www.sitepoint.com/examples/primes/woodgrain.html

It's not bad, but I don't think it's killer yet.

I've got a very raw maze generation example somewhere if anyone's interested.

[mcdaid]

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.

Some articles trigger lots of ideas in my mind, this was one of them.

[harshpotatoes]

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.

[TimothyBurgess]

Yeah what's up with that?! I think in this day and age people are more than capable of being both highly creative and logical.

[hydrazine]

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

[mikesurowiec]

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

[kylemaxwell]

Fair point, it's really basic combinatorics but well applied and properly executed.

[alsomike]

892 unique ways to partition a 3x4 grid: http://www.dubberly.com/concept-maps/3x4grid.html

They also have an interactive tool that generates HTML/CSS: http://www.3x4grid.com

[joubert]

Reminds me of a section in The Blind Watchmaker on cicadas and convergence in evolution - http://books.google.com/books?id=sPpaZnZMDG0C&pg=PA100&#...

[thascales]

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

[exch]

There's a typo in the title of the second 'chapter'.

"That’s great. But wa/s/ has all this got to do with web design?"

[xbot]

Ah, well spotted. Fixed! Thanks for that.