Nintendo NES console in CSS(codepen.io)
codepen.io
Nintendo NES console in CSS
http://codepen.io/onediv/pen/AsDev
56 comments
I remember seeing an encoding of Rule 110 in CSS + HTML a while back. Is CSS actually not Turing complete?
I'd found this before posting:
http://stackoverflow.com/questions/2497146/is-css-turing-com...
where the top answer gives a Rule 110 solution, but I was satisfied with this comment:
"BRILLIANT!. However, I don't think this qualifies as turing complete. CSS is only able to calculate 1 iteration of the state-machine. Your example relies on the human repeatedly clicking all the orange boxes in order to feed the "output" (pixels) back into the input (page state) and "pump" the state machine. Because there is no programmatic way to use the output of CSS as input, it can't be used to calculate any multi-step loops, the hallmark of turing-complete languages."
http://stackoverflow.com/questions/2497146/is-css-turing-com...
where the top answer gives a Rule 110 solution, but I was satisfied with this comment:
"BRILLIANT!. However, I don't think this qualifies as turing complete. CSS is only able to calculate 1 iteration of the state-machine. Your example relies on the human repeatedly clicking all the orange boxes in order to feed the "output" (pixels) back into the input (page state) and "pump" the state machine. Because there is no programmatic way to use the output of CSS as input, it can't be used to calculate any multi-step loops, the hallmark of turing-complete languages."
That makes sense. Browser implementors would definitely balk at anything that they couldn't guarantee would stop in a reasonable amount of time.
What about JS?
JS is trivially Turing complete (given infinite RAM)
See this: http://www.turing.org.uk/turing/scrapbook/tmjava.html
See this: http://www.turing.org.uk/turing/scrapbook/tmjava.html
What I meant was, why don't browser implementors balk at it?
I think the thing is, that JS can be executed separately from the layout engine, but CSS can't, however, I'm definitely not an expert in the matter.
Browser vendors control the javascript VM. Though we can't solve the halting problem, we can just throttle or unplug the JS interpreter if it causes usability problems.
But CSS is required for the site to look right There's no way to turn it off without messing with the site's layout.
But CSS is required for the site to look right There's no way to turn it off without messing with the site's layout.
Did you seriously expect a NES emulator written in CSS? Color me surprised.
But ... OP promised.
.orangethirty {
background-color: #ff0000;
font-weight: bold;
}
Shouldn't it be:
#orangethirty {background: #000;}
#orangethirty .surprised {
background: #fa0000;
font-weight: 700;
}
To me this is unpractical example of use of CSS. Yes, you can do an image using tables and other elements or techniques but I think these things are just a waste of time. If you want to drool on something why not seeing this made on SVG AND using all the CSS, JS capabilities instead of showing something made in CSS with fewer uses.
I don't think these types of examples are created to be practical, but more to just demonstrate what's possible/to experiment. Plus, it's probably fun.
But I agree, an SVG implementation really would be something!
But I agree, an SVG implementation really would be something!
[deleted]
art doesn't require utility.
Silly me, I was expecting an emulator.
http://fir.sh/projects/jsnes/
It doesn't seem entirely stable though.
It doesn't seem entirely stable though.
So how do you blow on it? It's not an NES unless you have to blow on it.
Very cool indeed.
Am I remembering correctly that the reset button should make the power light blink if the system is on and reset is depressed?
Am I remembering correctly that the reset button should make the power light blink if the system is on and reset is depressed?
Yes. While you hold the reset button down the power light should be off.
If I remember correctly when you press power and there is no cartridge, then the power button flashes ;) Great work!
The author of this should get in touch with the guy that wrote that NES emulator in javascript [1]. I can imagine a pretty neat collaboration of the two projects!
[1] http://fir.sh/projects/jsnes/
[1] http://fir.sh/projects/jsnes/
I don't see any connection
The CSS for the NES console itself could be used in a rich graphical user interface for emulating NES ROMS.
Hope that clears up the connection for you.
Hope that clears up the connection for you.
That would be the same kind of skeuomorphism everyone decries in Apple's applications etc. Why should I virtually flip through a big stack of virtual cartridges, drag one into the slot, press it down with the mouse, and press the power button when I could just double-click on the game from a list? It would be cute and fun exactly once.
As one of the lead developers of FCEUX [1], a multi-platform desktop NES/Famicom emulator, no: I don't see this CSS project as a usability breakthrough. I prefer to load my ROMs from the command line. But would it be a cool toy? Absolutely.
[1] http://www.fceux.com/web/home.html
[1] http://www.fceux.com/web/home.html
Yeah it's a cool as hell demo, I just think it would be really annoying if I were forced to use it to play games.
You could even turn it into a minigame of trying to get the game working. Re-seat the cart. Wedge another on top. Try it with a Game Genie in hopes that'll contact all the pins. Click here to blow on the cart.
Cute, fun to fiddle with, but like all cute UI conceits, there would have to be an option to shut it off because I just want to play some Zelda.
You could even turn it into a minigame of trying to get the game working. Re-seat the cart. Wedge another on top. Try it with a Game Genie in hopes that'll contact all the pins. Click here to blow on the cart.
Cute, fun to fiddle with, but like all cute UI conceits, there would have to be an option to shut it off because I just want to play some Zelda.
Well, yeah, you certainly wouldn't do that for the sake of intuitive design. It would just be neat. That's all it would be. Just like a home made craft or art project.
There's nothing wrong with that and I'd appreciate it. Even if it was only once.
There's nothing wrong with that and I'd appreciate it. Even if it was only once.
relax.
They're both related to NES.
Also browsers. Also JS and CSS both have at least one 'S'.
Chrome-only. Firefox works but some code shows up in the window. Safari doesn't work at all.
With Firefox, I saw JavaScript in the result pane the first time but now it works fine. Perhaps it was behind a version or two the first time.
Went back with Safari (version 6, same version) and it worked fine this time. Before, the background didn't show up properly, only the cartridge door.
Weird.
Went back with Safari (version 6, same version) and it worked fine this time. Before, the background didn't show up properly, only the cartridge door.
Weird.
Works perfectly for me on Safari 6.
worked in IE10 as well (still can't log in to HN using chrome...odd)
It worked for me in FF20.
Worked fine for me in Iceweasel 20.0 (Debian's Firefox).
No issues whatsoever with Firefox 21 on XP
I feel like a kid who got a SNES for Christmas and found out no one bought any games.
be nice to see full realism and proportionality with the lid opening, should be on hinges and shouldn't change shape and size when it's opened.
Amazing work. Do the Genesis Now. (:
CSS continues to amaze me.
[deleted]
Dope. That is all.
[deleted]
this is amazing! nice work
Other than that it's a neat demo.