TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Using prime numbers to make better backgrounds

975 pointsby jimsteinhartabout 14 years ago

17 comments

BrandonMabout 14 years ago
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.
评论 #2421113 未加载
评论 #2427520 未加载
nadamabout 14 years ago
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>
评论 #2420147 未加载
评论 #2419919 未加载
IDisposableHeroabout 14 years ago
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>
评论 #2420013 未加载
评论 #2419856 未加载
评论 #2420043 未加载
jashmennabout 14 years ago
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>
mullrabout 14 years ago
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.
评论 #2419798 未加载
评论 #2421025 未加载
granite_sconesabout 14 years ago
"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.
SeanLukeabout 14 years ago
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.
评论 #2421311 未加载
评论 #2419946 未加载
Nate75Sandersabout 14 years ago
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>
jwsabout 14 years ago
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.
评论 #2421830 未加载
mcdaidabout 14 years ago
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.
harshpotatoesabout 14 years ago
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.
评论 #2421402 未加载
hydrazineabout 14 years ago
Gonna try this with pseudo-random opacity styling for even more variations.
mikesurowiecabout 14 years ago
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
评论 #2419732 未加载
评论 #2421728 未加载
joubertabout 14 years ago
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>
thascalesabout 14 years ago
Simple, elegant, effective. I know how I'm spending my evening...
exchabout 14 years ago
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?"
评论 #2426153 未加载
jeberleabout 14 years ago
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.