
Computing primes with CSS - ingve
http://nedbatchelder.com//blog/201609/computing_primes_with_css.html
======
wanda
This is _way_ cooler: [http://silon.slaks.net](http://silon.slaks.net)

~~~
aji
is it, though?

[https://github.com/SLaks/Silon#implementation-
details](https://github.com/SLaks/Silon#implementation-details)

"Silon is implemented using LESS to generate CSS selectors for every
combination of inputs that will turn each gate on. In effect, I created a
LESS-based DSL that expresses (almost-)arbitrary boolean expressions."

~~~
wanda
Yes, I know a preprocessor is involved, much like many single-
element/background-image hacks and CSS-only glitch effects which translate to
fifty-keyframe animations.

It's still cooler than the OP.

~~~
aji
it's definitely shinier than the OP, but I personally think encoding a sieve
of Eratosthenes in a CSS selector is cooler than encoding truth tables in a
CSS selector

~~~
wanda
I was always more interested in the philosophy of mathematics than prime
numbers.

Actually, I'm interested in philosophy in general, especially early
Wittgenstein & Gödel.

So I'm biased.

------
vurpo
"Your scientists were so preoccupied with whether they could that they didn't
stop to think if they should."

\--Dr. Ian Malcolm (Jurassic Park)

~~~
ManlyBread
We have clearly passed the point where we should stop, but let's keep going
and see what happens.

~~~
daptaq
\-- Scientist from Jurassic Park

------
XCSme
You can do the same thing with pure HTML, just write `2,3,5,7,11,13...`. I am
disappointed by the article, was expecting something with CSS `calc()`.

~~~
startling
That's not similar, at all. This is actually removing multiples, as in the
sieve of erastosthenes.

~~~
rootlocus
It's missing a loop, and the primes are hardcoded into the source code (see
the similarity?). You might be mislead by the fact that you also find
'span:nth-child(4n+8)' or 'span:nth-child(6n+12)' (which aren't primes) but
those are redundant, and an efficient sieve would skip non primes.

~~~
nedbat
Yes, they are redundant, but there's still no special knowledge of the primes
in the file.

------
jonatanheyman
I made a slightly improved version using <ol> and <li> elements to not have to
manually output the numbers within the <span> element:
[https://jsfiddle.net/r8c2Lsz7/](https://jsfiddle.net/r8c2Lsz7/)

~~~
nedbat
Nice! :)

------
amelius
How does the size of the code increase with the number of primes shown?

Imho, the code should not grow. So in my view, the article is cheating.

~~~
mikejb
Code size increases in Θ(n^(0.5))

I agree that the title is somewhat misleading - it is (to me) as much a
'computation of prime numbers' as a lookup table would be.

~~~
contravariant
Well it's closer to O((n/log(n))^0.5), although that doesn't make much of a
difference until n becomes rather large.

~~~
mikejb
Good catch - I didn't differentiation between n as 'upper limit for primes'
and n as 'input length'. The former is more intuitive, which makes your
solution more accurate. (Also, I should have played it safe and use O instead
of Θ...)

------
jaywunder
I don't understand why the commenters in this thread are being so negative
towards this project. This is a fun experiment to see what the author could do
with the minimal tools CSS provides. Sure there's no _use_ for this kind of
project. Not everything has to have a use. Some things can be for pure fun.
The negativity in this thread isn't even productive or helpful.

~~~
mikejb
I don't feel really negatively towards this project, but after reading the
title and looking at the code it felt a bit disappointing. When I read
"computing primes" I didn't expect so much pre-computation cooked into the
code.

~~~
brudgers
I don't disagree, because I have a similar feeling. But I recognize that it
comes from a bit of a 'No True Scotsman' in regard to computation.

By which I mean that looking up values in a table is actually a part of
computation. That's pretty much how anything with a trigonometric function
works [we've just replaced books with integrated circuits]. Back in the days
of using a slide rule, there was a looking it up in a table element as well,
it's just that the table was in a flexible form.

Practically, speaking if the easiest way to calculate the first fifty million
primes might be:
[https://primes.utm.edu/lists/small/millions/](https://primes.utm.edu/lists/small/millions/)

Philosophically, I don't have the same feeling querying for some nth prime at
[https://primes.utm.edu/nthprime/index.php](https://primes.utm.edu/nthprime/index.php)
but it's probably doing all its calculations for mundane things like network
packets and none of it sieving natural numbers.

~~~
mikejb
I see your point, and I think we share a point of view.

But when using lookup tables, I consider the computation of the lookup table a
part of the algorithm - after all, a lookup table is essentially an
optimization: You extract a sub-computation and store it, paying with space
for better time complexity.

~~~
brudgers
Philosophically, I don't think that feeling intellectually satisfying is a
marker of correct understanding. I mean I don't think there's anything out in
independent reality that makes an procedure that implements the sieve of
Eratosthenes better than a procedure that uses lookup tables.

1\. The only thing that matters about a function 'nth-prime' is that it maps
1->2, 2->3, 3->5 etc.

2\. To be useful in practical applications, a function `is-prime` is unlikely
to use the sieve of Eratosthenes and more likely to use something like
Fermat's Primality Test [1] and hence will be mistaken over Carmichael Numbers
and so hard coding the first few into the function via looking might be a good
way to do what people expect...though at some point:

 _Numbers that fool the Fermat test are called Carmichael numbers, and little
is known about them other than that they are extremely rare. There are 255
Carmichael numbers below 100,000,000. The smallest few are 561, 1105, 1729,
2465, 2821, and 6601. In testing primality of very large numbers chosen at
random, the chance of stumbling upon a value that fools the Fermat test is
less than the chance that cosmic radiation will cause the computer to make an
error in carrying out a “correct” algorithm. Considering an algorithm to be
inadequate for the first reason but not for the second illustrates the
difference between mathematics and engineering._ Abelson, Sussman, Sussman
[https://mitpress.mit.edu/sicp/full-text/book/book-
Z-H-11.htm...](https://mitpress.mit.edu/sicp/full-text/book/book-
Z-H-11.html#%_idx_912)

[1]:
[https://en.wikipedia.org/wiki/Fermat_primality_test](https://en.wikipedia.org/wiki/Fermat_primality_test)

------
0xmohit
I once saw an interesting way of computing primes using LaTeX [0].

The link also mentions a way of doing the same in plain TeX that is taken from
Donald Knuth's "The TeXbook".

[0] [http://tex.stackexchange.com/questions/134305/how-to-
produce...](http://tex.stackexchange.com/questions/134305/how-to-produce-a-
list-of-prime-numbers-in-latex)

~~~
qwertyuiop924
Well, TeX is _supposed_ to be able to do that, which makes it less cool.

------
partycoder
That's because CSS is turing complete. The rule 110 cellular automaton has
been implemented in CSS, and because the rule 110 is turing complete, that
means CSS is turing complete.

~~~
minitech
What’s “because” CSS is Turing complete? Anyway, this implementation could be
done using a DFA (because it’s not actually computing primes with CSS).

------
vortico
You could replace the "+4" in "2n+4" with "+0" to remove the amount of custom
text you have to insert into each line.

~~~
yesbabyyes
No, the point is to display the primes (2, 3, 5, 7...).

------
co_dh
You can remove all non primes in the selector, like below

span:nth-child(2n+4), span:nth-child(3n+6), span:nth-child(5n+10), span:nth-
child(7n+14), span:nth-child(11n+22), span:nth-child(13n+26), span:nth-
child(17n+34), span:nth-child(19n+38), span:nth-child(23n+46), span:nth-
child(29n+58), span:nth-child(31n+62),

~~~
kafkaesq
But that'd be cheating. How do you know what the primes are before you've
computed them?

------
carapace
Unrelated to the main story, those damnable f-strings are awful. For goodness'
sake, don't put code into your format strings, you maniacs!

But don't take my word for it:
[http://www.stringtemplate.org/about.html](http://www.stringtemplate.org/about.html)

~~~
nedbat
Anything can be overused. Do you find my use of them "awful"? It will mean we
don't need code like: "...".format(a=a, b=b, c=c, d=d)

~~~
carapace
No, I will admit your usage here seems perfectly cromulent. ;-)

(Don't pay too much attention to me: I still haven't adopted the .format()
method! Heh.)

Very nice project sir!

------
andrewclunn
But would that be... as stylish?

    
    
         #####
        #### _\_  ________
        ##=-[.].]| \      \
        #(    _\ |  |------|
         #   __| |  ||||||||
          \  _/  |  ||||||||
       .--'--'-. |  | ____ |
      / __      `|__|[o__o]|

_(____nm_______ /____\\____

~~~
sctb
We detached this comment from
[https://news.ycombinator.com/item?id=12611579](https://news.ycombinator.com/item?id=12611579)
and marked it off-topic.

