## Using Prime Numbers to Generate Backgrounds 180

Posted
by
Unknown Lamer

from the insects-are-surprisingly-good-at-design dept.

from the insects-are-surprisingly-good-at-design dept.

bpeh123 pointed out an article about generating organically tiled backgrounds inspired by the life cycle of cicadas. The trick is to overlay multiple background tiles with prime widths thus generating a series that does not repeat for a sufficiently long period. This introduces a seeming irregularity and makes the background appear much more natural.

## Let me be the first to say... (Score:2, Interesting)

...NEEEEEEieieiirrrnngngne eEEEEEEEEEEee eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeernrng!

## Re: (Score:2)

It's a nice idea.

Too bad it's not supported by the majority of browsers.

Try again in a few years, when all IE6-using companies have finally upgraded to IE7.

## Re: (Score:2)

Heck, some old 8/16-bit games (scrollers mainly) used a similar technique to draw their backgrounds, and it can also be a cheap way to distribute items around a map (pick a few of pseudo-random primes, and use them in a 2D grid to decide where to put things: items go on or near points where the patterns produced by the primes

## Re: (Score:2)

The problem isn't so much with the overall average userbase, it's with what company's use; some fairly large companies are still at IE6 whereas the bulk seems to be at IE7 and some "already" at IE8. Sadly, very few companies seem to use any of the other major browsers, even though any of them would be much better than IE6/7/8.

## Re: (Score:2)

## Re: (Score:2)

Wait, what? They all sound the same anyways! Every blasted one of the little bastards sounds the same! Such an evil sound!

## Fuck you slashdot (Score:2, Informative)

Why can I only check Post Anonymously when I post a new comment but not a reply? Also, it would be kinda cool if I could click on fucking links again without having to triple right click and then open in a new window.

## Re: (Score:3, Insightful)

He's not the only one, bucky. No need to be an ass. I don't have the problem with the post anonymously checkbox, but I have not been able to click on any off-site links for a week, using Firefox 3.6.16. Internet Exploder works, but I'm not using that POS.

## Re:Fuck you slashdot (Score:4, Insightful)

The new UI has been getting more buggy every week rather than less buggy. Off site links not working, clicking 'score' to view how things are moderated collapsing the comment, scrolling issues, clicking anywhere on the comment navigating to the parent, weird highlighting when submitting a comment... and that's just off the top of my head and coming from someone who was initially supportive of the changes. All on FF4.0

## Re: (Score:2)

Chrome is fine with the new scheme. A few graphical bugs but everything functions.

## Well... (Score:2)

Chrome functions fine with it?

On the one hand, that's good to know...

On the other hand, isn't having to switch to chrome to make it reliable kinda... not-very-open-sourcey? (If you'll pardon the lack of English construction in that psuedosentence, and in this fragment.)

## Re: (Score:2)

It doesn't matter, I use Chrome and I get the bugs all the time as well (Anonymous works but comment/link clicking is still buggy as hell). Its a problem with the site, not any specific browser.

## Re: (Score:3)

I can't even right click now. $DEITY knows how I've been keeping my spelling in check without being able to use the spell.... check.

## Re: (Score:2)

## Re: (Score:2)

## Re: (Score:3)

Maybe you are oh-so-lucky as to have Slashdot behave consistently and predictably lately.

Half of the time when I go to meta-moderate, the +/- buttons don't do anything at all -- they're inert, and clicking on them doesn't do anything. Sometimes, if I browse away and come back, it works. Some

## Re: (Score:2)

Me too, but it still doesn't work properly on a small screen. You get a tiny strip of text between two big white borders, and the stuff at the top all overlaps each other.

It's like Roseanne Barr in a thong.

## Re: (Score:2)

He's not the only one. Using Chrome, I have not been able to check the "AC" box this week.

## Re: (Score:2)

Ditto as well Chrome @ 11.0.696.16 beta

## I want... (Score:2)

... whatever that dude is smoking.

## 1 is not prime (Score:3, Insightful)

Their article: "that is,1, 2, 3, 5, 7, 11, 13, 17, 19, 23, and so on"

Wikipedia: "2, 3, 5, 7, 11, 13. .

## Re: (Score:2)

## Re: (Score:2)

i thought it was that primes have TWO divisors, one AND itself (itself being something other than one). One has one divisor, and does not me the AND requirement (or the two divisors requirement). Or that's what they told us in school in the 80s.

## Re: (Score:3)

yes, but dividing by themselves gives 1 and dividing by 1 gives themselves, hence distinctness of divisors.

## Re: (Score:2)

Yes and dividing prime 1 by itself 1 gives 1 and conversely dividing the prime 1 by 1 gives itself 1. Just like dividing the prime 7 by itself 7 gives 1 and diving the prime 7 by 1 gives itself 7. All prime numbers are divisible by themselves and 1, that's the definition of prime. 1 is a prime number.

## Re: (Score:2)

Nope, Sorry. The definition of a prime a number is a whole number with exactly two distinct whole divisors which produce whole quotients. Note the exactly two distinct part. One is divisible by one and itself, yes, but itself is also one, and thus it does not have requisite two distinct divisors but rather one divisor of one used twice.

## Re: (Score:2)

When you divide a prime by itself you get 1. When you divide it by 1 you get itself. Two factors. One AND itself. Not 1 which by coincidence is the same as itself.

If that's not good enough for you then google it.

## 1 is a prime. (Score:2, Informative)

There are two schools of thought, one considers 1 to be a prime (since its divisors are "1" and itself) the other school of thought doesn't. Some proofs work nicer if 1 is considered to be a prime, some proofs don't.

So it's just a matter of opinion.

## Re:1 is a prime. (Score:5, Informative)

This is in fact true.

The best reason for leaving one out of the prime number set is because it enables you to state the prime number theorem more succinctly:

Every integer n>1 has a unique factorisation as a product of primes (Prime factorisation)If one was prime, then the factorisation would not be unique. For example 6=2.3, but if 1 was an allowed prime then 6=1.2.3=1.1.2.3=1.1.1.2.3= .... 1^n .2.3. So it's preferred to leave one out.

There are other reasons, but the prime number theorem is perhaps the best one.

## Re: (Score:2)

Every integer n>1 has a unique factorisation as a product of primes (Prime factorisation)Is that theorem supposed to include the prime numbers?

## Re: (Score:2)

The way I think of it is, prime numbers are the building blocks of numbers. When you find a new prime number, you can use multiplication to make new numbers that you couldn't make before. The number 1 doesn't help making new numbers, so it isn't a multiplicational building block.

## goddamit, you've broken reality again! (Score:2)

This will not do. Oh no, no, no, no,

no.## Re: (Score:2)

Today, 1 isn't a prime. But 1912, it was. [oeis.org]

I will admit to not having much knowledge about the history of our pursuit of prime numbers, but I'm at a loss about the page you linked to. I understand where 1 could be considered a prime, but that list also includes numbers 4, 10, 12, 14, etc on that same list of primes. What school of thought would consider those prime? I'm genuinely curious, because I feel like I must be missing something obvious.

## Re: (Score:3, Informative)

A lot of proofs in recursion / computability theory actually depend on the fact that one is not a prime number. More specifically, they depend on the property of numbers that is called unique factorisation into primes, a very important theorem in mathematics that is a corner stone for many proofs in a variety of mathematical disciplines. If you count 1 as a prime number, this theorem does not hold, with all the consequences that you might suspect it entails.

Just sayin'. 1 is not a prime number.

## We were taught that 1 is a prime (Score:2)

While it is isn't correct, I do recall being told in school that one is a prime because it is only divisble by itself.

## Other applications. (Score:5, Interesting)

## Re: (Score:3)

great. now we get the gold farmers in on factoring large primes. all encryption is about to go out the window.

## Re: (Score:2)

I'll make it $20,000 if you can tell me whether the number is actually a prime.

## Re: (Score:2)

actually, this problem is trivial. see http://en.wikipedia.org/wiki/Miller-Rabin_primality_test [wikipedia.org]

## Re: (Score:2)

I understand his desire to make backgrounds look large and random with a minimum of downloading images, but in a game; what's wrong with just using random numbers for critter generation?

## Re: (Score:2)

## Kind of neat (Score:2)

## Really learned a LOT from that one (Score:4, Interesting)

Not only did I learn interesting information about the insects I hate the most (and believe me, if I could, I would destroy every last one of the annoying bugs!) but I also learned that you can have multiple images for backgrounds in CSS and have them lay atop one another. (None of the books or software ever seemed to suggest that it was even possible!)

While the idea is pretty ingenious, if I had known you could specify more than one image for backgrounds, I would have figured this one out on my own -- I have been overlaying images and background images inside of DIVs for a while to get some really nice effects. But now, to be able to lay one atop the another in the same block? AWESOME.

And yes, at the article says, inferior browsers cannot handle this -- I tried it on IE8 to see what would happen and... yeah... it hung.

## Re: (Score:2)

CSS3. Lots of cool stuff in there. Background gradients, rounded corners, animation, etc.

## Re:Really learned a LOT from that one (Score:5, Insightful)

> if I had known you could specify more than one image for backgrounds, I would have figured this one out on my own

You may want to read this: http://en.wikipedia.org/wiki/Egg_of_Columbus [wikipedia.org]

I have been doing layered images for over 4-5 years (multiple divs with backgrounds layered over one another) to come up with cool effects. But I would have never come up with this. I had been thinking about tiles and the non-random-ness for quite a while too. This didn't occur to me. Now that someone put this together - sure it's simple. But that's the genius of it.

My hats are off - simple, efficient, brilliant.

## Re: (Score:2)

## Re: (Score:2)

Because the statue shows the egg in its post-Columbus state.

## Re: (Score:2)

## Re: (Score:2)

I concur, this was a really cool technique, i had seen a few articles with clever use of transparency for certain effects. this one is pretty sweet though i suspect it takes quite a bit of work to make sure your layers blend in a nice way

you also still have to avoid uinque features. for example even if you were varying width and height to make say a stone or gravel pattern, if you had one particularly unique stone in the upper layers it would stick out still. same with knots in wood.

it might have some uses

## Re: (Score:3)

It's not *that* revolutionary. A few months ago, I used the same general principle to make a more interesting rotating "please wait" symbol: I made multiple ring animations with transparent backgrounds, with each ring completing one revolution in a different number of frames. I used odd numbers, but not primes specifically. Anyway, the result was conceptually the same - it takes quite awhile before the rings ever line up in exactly the way they started, but only a handful of animation frames are used, becau

## Re: (Score:2)

Yeah, I've used prime cycles to generate random-like occurrences before. Struck me as obvious, really, though my application of the concept isn't graphical. Anyway, it was a good read. I would love to see something like this put into video game textures for stuff like wood and stone.

## Re: (Score:2)

## Re: (Score:2)

That's true for his first two examples (only because he picked inherently non-tiling-in-the-y-direction things), but the third (the Lego army) varied in two dimensions.

## Re:Really learned a LOT from that one (Score:4, Interesting)

Well, that's the thing. The .. shit, I was doing that 27 years ago on my Vic20 to make some pretty graphs. (Really.) x=cos(t/7); y=sin(t/13); Graph it, varying "t"; it's purty. And it's pretty damn unlikely that I was the first person to discover (not invent) it; anyone fucking around is eventually going to stumble onto this kind of stuff.

general principleis ancient. Using parametrics where each output maps to its own relatively prime cycle to get a very long periodBut

thisis aboutbackground images(and not just background images, but background imageson web pages), and I sure as hell wasn't doingthaton my Vic20.This reminds me the basic difficulty with patents. The ideas themselves often really, but if you never end up working on the problems, you're

aren'tnew, so they're not only obvious in hindsight, but they're even obvious to everyone without hindsightifyou ever find yourself working on a problem in a certain areanevergoing tousethe idea, so a guy reallycanbe first to do something so basic, in 2011. (Whether this guy actuallyis, I don't know.) Sure, if you were ever assigned the problem of generating an image with a long period, you might invent this. Butdidyou? (Have you everneededto generate a background image with a long period? If so, then very likely might have done this. If not, then you just wouldn'tevercome up with it.)And then some poor schmuck of a patent examiner is supposed to make a judgement call that people in general think is fair. No chance; he's

doomedto fail, no matter which way he goes.All that aside, it's a cool idea and props to the guy. Just don't fucking patent it, ok? ;-)

Heh heh.. don't worry, you'll have the any-dimensional case figured out in a few minutes, if you haven't already. :-)

## Re: (Score:2)

True indeed. In fact, I would go farther. I think this has the potential to become a classic textbook example of number theory.

This is an impressive and visually interesting application of basic number theory. I would not be surprised if we began seeing the presentations modelled on the Legion of Lego [sitepoint.com] showing up in the slides of number theory lectures in the near future.

## Re: (Score:2)

## Why did you do this? You hate America?? (Score:3)

## Is it a bad sign... (Score:2)

## Re: (Score:2)

## Whatever happened to fractals? (Score:3)

Cool, but aren't we all supposed to be using fractals to generate realistic-looking virtual worlds and such by now? I mean, that's what I thought when I read that Scientific American article back in the 80s, and wrote a C program that ran for two weeks on my Compaq to create a picture of a Mandelbrot set. What was really funny was that the Compaq screen was grey scale...

## Re: (Score:2)

## Re: (Score:2)

This person is generating nice repeating patterns (like pleated curtains) with random alterations, using a small number of small image files and a small amount of computation to generate random numbers which guide the placement of those image files. Doing this with fractals would require computation that is orders of magnitude more costly.

Yeeesss...I know. There I go, being elliptical again. It was a joke...albeit I was trying to draw attention to an underlying question. I sometimes wonder about predictions that were made back in [

the day] that seem to have pretty much evaporated. The whole definition of what a fractalisalways struck me as somewhat lacking in rigor. The popular science press of the late 80s and early 90s was full of talk about fractals, and one of the suggested applications was indeed to computationally generate super-real## Re: (Score:2)

## Re: (Score:2)

I suspect he meant monochrome, which is still an acceptable way of viewing the Mandelbrot set. Points are either in the Mandelbrot set or they are not in it.

However there is also the intrinsic difficulty of determining that any given point is not in the set, which is normally represented as variation in the point's brightness or color. (If you fail to determine that a given point is not in the set, the algorithm eventually terminates under the assumption that it is.)

## Joke (Score:2)

Q: How do you tell a mathematician, a physicist and an engineer apart with one question?

A: Ask them "Are all the odd numbers above 2 prime?"

Mathematician: Well, 3 is prime, 5 is prime, 7 is prime, 9 is not prime, so NO.

Physicist: Well, 3 is prime, 5 is prime, 7 is prime, 9 is not prime, but that is just experimental error.

Engineer: Well, 3 is prime, 5 is prime, 7 is prime, 9 is prime, 11 is prime...

(My father was an engineer, my brother is a physicist and I was a mathematician at one point, so this turned i

## Re:TL;DR (Score:4, Insightful)

How about: Designer discovers new way to use special properties of primes to create more realistic tiled background images.

C'mon, the results are actually pretty cool.

## Re: (Score:2)

## Re: (Score:2)

The image file might be a bit of a bandwith hog, though.

Unless you could somehow make the client machine generate it.

## Re: (Score:2)

Who said anything about it being hard?

## Re:TL;DR (Score:4, Funny)

You missed the important thing ... designer creates huge frickin' lego army using a small number of images and some pretty smart use of CSS.

An army, but make out of lego. Put lasers on :-P

themand see who takes over the world.## Re:TL;DR (Score:5, Interesting)

How about: Designer comes up with interesting, relevant use of math that all the Math geeks who have been running the WWW for 20 years didn't think of on their own.

Subtitle: Bitter math nazis harp on his confusion about 1 being a prime.

## Re:OMG Sicadas are illuminati (Score:4, Informative)

Yes, some characters do. The Slashdot Janitors have decreed that only 7-bit ASCII can be used on the site and everything else should be presented in as broken a way as possible.

Because obviously, we're geeks so we're all using 30-year-old ADM3A terminals.

## Re: (Score:2)

## Re: (Score:2)

Because obviously, we're geeks so we're all using 30-year-old ADM3A terminals.Or they're geeks using char strings in the hope that their compilers/interpreters/databases/servers save resources because of that. Doubtful.

OR they're geeks using a very limited character set for security reasons. More likely. Better to whitelist than blacklist, and their whitelist is small.

## Re: (Score:3)

It doesn't matter if cicadas are important to birds or any other predator. Predators are important to cicadas.

In any case, he's talking about making things look random enough for casual observation. He's not talking about some sort of advanced encryption algorithm. We know we can appeal to advance math and chaos theory for truly random. But this is just web design. If someone actually cracks the pattern, it isn't the end of the world.

## Re:Ow. That made my brain hurt. (Score:5, Insightful)

Just because you do not understand something does not make it wrong. Birds haven't "evolved" a boom/bust cycle, that's not how that works. It's the standard predator/prey boom/bust cycle. Birds don't spend vast periods of time underground, you know. Curtains are natural, "natural" here taking the meaning of "organic" rather than "patterned.

Please, don't be one of those guys who tries to prove how smart they are by attempting to find fault with the article. It does not make you look as smart as you think. The fact that you hurt your brain trying to comprehend something the rest of us had no trouble understanding actually makes you look pretty dumb.

## Re: (Score:3)

No, you are simply wrong, as I quite clearly demonstrated, which is why you were modded down and I was modded up. So let me try to explain it in the very simple terms you need.

Again, birds did not evolve a boom/bust cycle. They can not pick it through evolution, it is not up to them, it is up to their predators and food sources. As the article clearly explains, a prime number cycle for cicadas ensures that only ONE predator boom/bust cycle will match up with theirs, and natural predator/prey cycles are not

## Re: (Score:2)

Me: +5 Insightful.

You: -1 Redundant.

So..... why do YOU think you were modded down, and I was modded up, hmmm, asshole?

Don't be pedantic about the meaning of the word natural. You know as well as I and

everyone else herewhat the author meant. You look like a prick when you argue semantics.If you read the article, you would understand that the appearance of seamlessness can be achieved through overlapping prime-number repetition of patterns,

as demonstrated by the photos. The point being, these images are m## Re: (Score:2)

## Re: (Score:2)

So now you have three computers on your desk? because you modded it Overrated first, then posted, then modded it offtopic, that makes three.

Being a cheater indicates you have no respect for the facts, as well as no acquaintance with them.

## Re: (Score:2)

I'm pretty sure that doesn't work, or just deleting a cookie would work. I may give it a try later. But he did say he'd moderated it more than once. Unless he was just lying.

## Re:Ow. That made my brain hurt. (Score:5, Informative)

The point isn't randomness, the point is unwanted harmonics in pseudo-random patterns. These unwanted harmonics cause regular repetitions in the pattern that make it seem predictable and non-random. Prime numbers are the basis by which a simple PRNG (pseudo-random number generator) generates seemingly-random data that doesn't repeat in any predictable manner. By overlapping two or more sequences with prime lengths, the length of the harmonic is maximized. That means the sequence goes longer before repeating itself. Sequences with non-prime lengths short-circuit the cycle.

For instance, overlapping three sequences of length 7, 11, and 13 forms the following pattern:

http://tinyurl.com/3wserj7 [tinyurl.com]

At a glance, the pattern looks fairly random and non-repeating; however if you look more closely you see that the vertical bands of color are repeating very regularly within the pattern. But, since their periodicity is prime, the pattern as a whole doesn't appear to repeat itself. Using alpha and larger 2-dimensional tiles you can create even more complex and random-seeming patterns.

The life cycle of cicadas is similar in that the overlapping cycles tend to cause a seemingly-random pattern of years with lots of cicadas and few cicadas, such that the life cycle of their predators is less likely to hit a bunch of good cicada years in a row and seriously harm the population of them.

## Re: (Score:2)

Once you're getting to the point where your tiling algorithm is more complex than just "move right N places and place another copy of the tile" you might as well use the standard library you're given instead of reinventing the wheel (or the Monotonic Random Walk in this case).

If you wanted to generate your backgrounds on <canvas> elements with Javascript, sure, you could come up with something better using the built-in pseudo-random number generator. However, this is pretty good for a dumb, tiling CSS background pattern with a fairly large logical size but made up of relatively small elements.

## Re: (Score:2)

Dude wrote a mess of code when a call to rand() would have done him solid. And then bragged about it.

Ow.

## Re: (Score:2)

A mess of code? Did you even look at it? It was 3 static PNG images, and a CSS rule that looked like "background:url(image1.png),url(image2.png),url(image3.png);". Tiling the images was all done automatically by the browser.

## Re: (Score:2)

How does putting up 3 images repeatedly forestall repetition?

## Re: (Score:2)

Go up and click the tinyurl link I posted and see if you understand what I mean. The period of the pattern is the least common multiple of the dimensions of all 3 images, and if the dimensions of the images are prime, their LCM is relatively large.

## Re:Ow. That made my brain hurt. (Score:4, Insightful)

Also, your third and fourth paragraphs display utter ignorance of biology.

Why are you even here? This article was very well articulated, and more important,

useful, unlike your reply.## Re: (Score:2)

## Re: (Score:3)

One

isitself, so it only has one factor. Really.## Re: (Score:3, Informative)

Primes have, by definition, exactly two factors. 1 has only one: 1.

Of course, you

coulddefine them differently, and a hundred years ago, 1 indeed was considered a prime. But the definition excluding 1 has turned out to be much more useful (because almost everywhere you use primes you'd have to add "except 1" otherwise), therefore 1 is no longer considered prime.## Re: (Score:2)

It's rather convenient to be able to say that every natural number has a unique factorisation. It allows you, for example, to take products over the factorisation (e.g. Euler's totient function phi(n) = n * PROD_p|n (1-1/p) which would have to be a product over "p|n AND p>1").

## Re: (Score:2)

So one doesn't have to say "primes except 1" most of the time and can instead say "primes". It's just more convenient to exclude it.

## Re: (Score:2)

## Re: (Score:2)

Remember also that there's multiple species on differing cycles.

## Re: (Score:2)

Do cicadas come every 17 years, or do they come every year?

Answer: Depends on the species.

Better Answer: Catch cicadas for 13 years and have them all identified.

Even Better: Raise a brood from each year's species and see how long they take to come out and mate.

## Re:Congratulations... (Score:5, Informative)

This is very much

notlike Perlin noise, because Perlin noise uses octaves (doubles in frequency). Octaves are harmonic with each other by definition. This uses primes, specifically to cause the harmonics to occur as far apart as possible. Using octaves in this way would cause very repetitive-seeming patterns because the maximum size of your pattern would be defined as the size of your largest sequence, and all of the shorter sequences would tile into it in a neat checkerboard.Perlin noise requires

infinitesequences of pseudo-random numbers and would be extremely ill-suited to using short repeating sequences. This is specifically designed to minimize the length of the sequences you use without causing obvious repetitions in the pattern by using sequences of prime length (since your "sequence" is a PNG, if it's too large it takes a long time to load).## Re: (Score:2)

Still, the key difference between this and Perlin noise is that this is formed by using short repeating patterns whereas Perlin noise relies upon an infinite pseudo-random number generator that shouldn't ever appear to repeat itself.

The pseudo-random number generation, in this case, is in the x,y offsets of the tiles, not in the data contained in the tiles themselves - the tiles themselves are static PNGs. It's basically very similar to a simple linear congruential generator determining where the data on th

## Re: (Score:3)

Well, the images do have to be an integer number of pixels wide, but if the ratio between lengths approximated an irrational number you would expect long periods. Even relatively prime numbers would work. Tiles of length 7, 15, and 16 won't repeat for 1,680 pixels. Basically, if you want to create a nice, non-repetitive pattern of overlayed tiles, make certain that the smallest common multiple for all of the tile sizes is larger than your expected screen width.

## Re: (Score:2)