
Using prime numbers to make better backgrounds - jimsteinhart
http://designfestival.com/the-cicada-principle-and-why-it-matters-to-web-designers/
======
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!

~~~
derefr
It's interesting that it's almost impossible to pin down a verbal guideline
for what people should be submitting (besides "anything that gratifies one's
intellectual curiosity") but pretty easy to point to a given article and say
that, yes, this definitely _is_ Hacker News.

It'd be pretty awesome if we could have an HN that's _just_ this sort of stuff
(with a strong tendency toward false-negatives vs. false-positives—i.e. no
"maybe good", only "definitely good.") I wouldn't mind even if it only had two
or three new posts per day—fewer, guaranteed posts means I could actually
stand to add it to my RSS reader, vs. the current HN which is more of a
firehose: good to stick a bottle in every once in a while, not good to stand
in front of.

Thinking on that, here's one way it could be implemented on top of the current
HN: if there was some sort of "way, way up"-vote button that (besides being an
actual "I wish I had N upvotes to give this" upvote-N-times button) worked as
a sort of moral negative to flagging, such that when it had been hit [some
threshold] times for an article, the article would get linked into the
"/awesome" sublist, that might be enough to make it happen—if we trust the
userbase to not abuse it.

If everyone started to way-way-up-vote everything they currently just up-vote,
perhaps one could stick a CAPTCHA (or three) on it to make it just annoying
enough to disuade abuse (at the cost of further false negatives from people
now too lazy to use it.)

~~~
JonnieCache
You can filter the homepage for submissions with a minimum number of votes:

<http://news.ycombinator.com/over?points=200>

HN has loads of hidden features. I suggest judicious use of google's search
operators to find them all.

~~~
danohuiginn
there's also <http://news.ycombinator.com/best>, for (iirc) the top articles
in the past 7 days.

Somebody should really put together a guide to all these half-hidden features,
either as a wiki or an individual effort.

------
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.

~~~
mryall
Why can't the predators evolve to have the same cycle as the cicadas, with a
prime number of years?

~~~
redthrowaway
They can, but by being so highly variable, the cicada boom cycle becomes a
less important survival driver than other factors, such as predator cycles,
weather, etc. In a closely-paired ecosystem, with relatively few variables,
you do see remarkable coevolution between predators and prey. When the prey
removes their boom cycle from the dominant evolutionary stressors on the
predator, differential survival of the predator will be determined far more by
the dominant factors.

It's important to note that, for the cicada, they are not a staple diet but
rather an opportunistic one that occurs only once in a few generations. This
means that the predator's cycle would have to skip generations in order to be
effective. This is unlikely, given that that cycle would have no evolutionary
advantage in the intermediary, and would thus be diluted by more pressing
concerns.

------
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>

~~~
IDisposableHero
Hah, that trumps my example by 200 years. Well done.

~~~
gjm11
Except for the small detail that it isn't true. In change ringing, what you do
is to cycle through some subset of the permutations of N bells. So you might
begin 123456 123465 124365 and so on. The whole thing is made up of blocks of
N bells in each of which each bell is rung once. Therefore, all bells have (on
average) the same period: one ring, on average, out of every N.

The bells are hung in such a way that they naturally want to swing with equal
periods, so you don't have to disturb one too much to make it ring one place
earlier or later in the cycle. (A bell is never moved by more than two
places.)

I don't see any reason why a peal of bells couldn't be set up to produce the
effect jws described, but it wouldn't be at all the same thing as change
ringing.

~~~
jws
But each individual in method ringing is repeating their pattern. (at least as
Wikipedia explains it.)

------
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...](http://www.npr.org/2010/08/03/128935865/queens-brian-may-rocks-out-to-
physics-photography) (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 :)

------
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.

~~~
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.

~~~
ars
Well, they do care. The idea is to starve out predators. If there is another
set of cicadas feeding them, then it doesn't work for just you to avoid them.

~~~
scott_s
KirinDave's point is that there is no "idea." If the groups are disjoint,
there's no conspiracy, no way for them to interact with each other. If you and
your group avoid the predators, then you will thrive. It doesn't matter that
another group does not. Evolution happens at the level of genes, not groups.

------
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.

~~~
prawn
This is HN. Almost everyone's interested, so post away!

~~~
xbot
<http://www.sitepoint.com/examples/primes/maze.html>

The graphics are a bit nasty but the concept is works. There seems to be a
diagonal pattern emerging, but a fourth layer would certainly break that.

------
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.

~~~
euccastro
And number theory.

------
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&#...</a>

------
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.

------
jeberle
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.

