Silon – Adders and Logic Gates in Pure CSS(silon.slaks.net) |
Silon – Adders and Logic Gates in Pure CSS(silon.slaks.net) |
https://github.com/SLaks/Silon/blob/gh-pages/styles/basic-ga...
It makes for a cool demo of how simple Boolean circuits work, but you can't really say it's "doing computation" in CSS when all of the actual computation has been done ahead of time.
Still, it's clever.
https://github.com/SLaks/Silon#implementation-details https://github.com/SLaks/Silon/blob/gh-pages/styles/_operato...
The actual declarations end up being nicely simple; see https://github.com/SLaks/Silon/blob/gh-pages/styles/_themed-...
The CSS is just a truth table, but the LESS (which is Turing-complete) actually contains all of the logic.
As someone who works with CSS everyday, it's exactly what I expected once I saw it working. How else could it possibly work?
This project doesn't use rule 110, it uses LESS which sorts out the logic while compiling and spits out the results in css.
This is actually an important lesson that is often missed: if the app you're writing gives the anonymous users any kind of find/replace macro capability, you're giving them a fully Turing complete language (though it's probably not easy, but that rarely stops anyone) and all the potential problems that can bring.
I get shivers just thinking about all the fun I can have breaking web semantics this way.
o.o am i doing it??
Of course, this being the web you’re somewhat limited in browser support: http://caniuse.com/#feat=css-variables
I didn't realise you could click on them until after a good while though.
Real, asymptotically-efficient computations in CSS would require some kind of layer of indirection -- a way to make the styling of one element depend on another one. I'm far from a CSS expert and I don't know if such a thing is at all possible, but it's not out of the realm of possibility.
Off the top of my head, you might be able to get somewhere by requiring the user to put their mouse pointer in a certain location, and using box sizes to trigger the :hover pseudo-class. If the pointer covers multiple overlapping elements, is :hover applied to all of them, or just the topmost?
More to the point, Boolean expressions and truth tables are not equivalent representations that should be treated on an equal footing; there's an exponential blowup involved when converting from one to the other. Just try extending that 4-bit adder to 16 or 32 bits. The functions that can be tractably represented using this scheme are a strict (very small) subset of the functions that can be computed by true Boolean circuits.
It is the programmer's job to decide what point on the "using storage"<->"using CPU time" continuum is appropriate for the current problem. Obviously, larger chained adders at 16 or 32-bits would be crazy. (of course, at that point you would want to implement a carry lookahead anyway to avoid the horrible propagation delay in the last carry bit)
Edit: Just to clarify, the disappointment is from being excited that something like this could be wired up the way we initially thought. The result remains cool and clever all the same.
Indeed one can dynamically any kind of rapidly-reconfiguring FPGA-array into a very peculiar and high-performance general parallel processor.
CSS isn't Turing complete. It's a (poorly designed) markup tool, not a general symbol processing language. So there's a whole world of stuff it just can't do in any useful way.
Any attempt to make it do this stuff is either going to have to fake it with limited sleight-of-mind, or is simply not going to work.
So "I made s Haskell compiler out of pure CSS" is always going to be disappointing. (If you could make real logic gates, you certainly could make a Haskell compiler. Although it's possible it wouldn't be fast enough for production code.)
While I would obviously never do something this insane in a real product, I have used CSS for surprisingly much actual logic in real code (empty states for lists, hiding controls that the user cannot use, etc).