Show HN: Virtual breadboard in the browser, inspired by Ben Eater's 6502 | Hacker News Reader

Show HN: Virtual breadboard in the browser, inspired by Ben Eater's 6502

tejotron.com

409 pointsTejotron73 comments

Open articleView on HN

Check out my homemade 8bit CPU! Code and schematics: https://github.com/vascofazza/8bit-cpu

That's awesome!

Nice project! How much time you've spent on it?

Thank you! It took me about a couple of months from start to the second revision.

in case you're interested: https://www.hackster.io/news/see-inside-of-a-cpu-with-the-mk...

https://hackaday.com/2020/12/31/diy-8-bit-computer-knows-all...

My goodness -- this is impressive. I've just started dabbling in software development, and I can only imagine the time it must have taken to write this. A real labor of 'hard soft' love!

Dumb question, when you first load it are you able to just push play? Guess don't see if it needs a battery or something to run. Maybe assumes rails have power.

You have to press "start", which is the button to the left of play. Then you can press play.

Oh thanks! Doesn't seem intuitive a skip back icon/button means start.

Yea. I didn't get that either till I read the comment.

I found it by hovering over the buttons that were lit up. It makes no sense to me, either.

Rewind is not an intuitive way to start the simulation! (Also that was NOT a dumb question)

Thanks everyone for all your positive comments and feedback, I was not expecting this much attention. Sorry for the problems with browser compatibility, the simulation kernel needs thread support, and this is fairly recent in WebAssembly. I started this last April and spent many evenings tinkering away "on my project". Trying to chase Ben Eaters 6502 series as he released new videos each month or so gave me the motivation to try to catch him up with my digital twin version. I guess I was thinking it'd be cool to allow anyone to follow Ben's project armed only with another browser tab sitting alongside youtube. Many thanks to all the authors of the OSS I've used, especially Dear ImGui, ImGuiColorTextEdit, cc65 & floooh/chips headers. The whole thing is done in C/C++ and I build and debug natively on a Raspberry Pi with Visual Code gcc/g++ before running through Emscripten and uploading to the web. SystemC is the simulation engine, the hardware models include a bit of timing to try to get close to the physical hardware behavior. I wrapped SystemC around the floooh/chips.

Wow. This is amazing! I'm building this using real breadboards and am at the part where I'm wiring up the LEDs to the 6522. While I find the act of stripping wires deeply satisfying, I love how much quicker someone can get going using this, as well as how much more accessible you've made this - it's a really nice intermediate step between just watching the videos and using the physical kit. Nicely done!

Says to use desktop Firefox, while I'm on desktop Firefox 76.0

Same here. With chrome it worked.

Works fine in Firefox 84.

I believe it makes use of WebAssembly Threads which only came in to Firefox around version 79ish

Works fine for me in Firefox Nightly as long as I enable WebGL - with WebGL disabled it gives that same error message.

The current version is 84 so you might need an update.

This is the best example of what "Show HN" is for!

I'm using FF 78.6.1 but only get the `use Firefox' msg!

A sibling thread mentioned that FF >=79ish is required. Sounds like they could do with a more specific error message though.

Also, people should keep their browsers up to date...

78.6.1 is the current ESR release. That up to date enough.

updating just makes them worse

Updating makes them more secure. Browser vulnerabilities are found almost continually, but only the severe ones make the rounds on news sites.

In this case, Firefox ESR (Extended Support Release) is being used so security vulnerabilities are being fixed. It's not the newest stable release, however it's also supported by Mozilla.

This is brilliant. Bookmarked for when I have time to play with it properly. I particularly love being able to step through the assembly code whilst it's running.

Such a cool project. I found skimming the author's tutorial vids useful to get a sense of how it works:

- https://www.youtube.com/watch?v=O3SBYFBlr9k

- https://www.youtube.com/watch?v=yIr0IP-MxDQ

Does not support Safari.

I'm guessing it's the lack of WebGL 2, which Safari doesn't have yet (but the TP does): https://caniuse.com/webgl2

I don't think so. Firefox doesn't support WebGL2 on my system and this website works fine.

I'm not a snarky person ever, but seriously, is the the best that you are able to contribute?

OT, but I'd be curious to know what kind of frameworks are used to make this site.

Dear ImGui running with wasm by the looks of it

The About window has a link which gives a good overview of the libraries used in the project:

https://www.tejotron.com/thirdparty.html

I'm happy to see the chips-headers in there too :)

Great work! This is interesting, but perhaps even more useful might be a virtual PCB so that one could irritate on the design in-browser and then just get the PCB made with a click or two. And of course a bigger library of components (ESP32!) or the ability to create a component simulation in plain JS.

Flux.ai

> so that one could irritate on the design

That's usually what I do.

That is brilliant stuff, well done!

This is literally the soul of what Hacker News is all about.

Wow. Amazing work. What is this written in? Would love to check out the code.

As amazing as webassembly is, I feared this day. This is the day when we are no longer able to examine the source code that our browsers are running.

this is scary, shouldn't there be a way in which we can ship source code (maybe compressed) with the wasm stuff?

How is this scarier than any other software you use but haven't seen the source code to? I don't understand. Unless you've never used software your ENTIRE LIFE, and no one has used any software on your behalf, you have been subject to closed source software.

I'm not saying that this ideal, or even good. I'm asking why it's only scary NOW.

    > How is this scarier than any other software you
    > use but haven't seen the source code to?

The only code on my computer that I do not have the source code to are the JetBrains IDEs and Kerbal Space Program. With both of those companies I have a financial relationship, and both those companies earned my trust, and their software I have to download and install explicitly.

Contrast with webassembly where there is no trust between the entity running the code on my computer, no realistic way for the average user to consent to having code run on their system, and no reason for them to earn trust.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/So...

You can still read the source code to all the interfaces webassembly has access to.

“Fear comes from the lack of knowledge and a state of ignorance. The best remedy for fear is to gain knowledge.” ― Debasish Mridha.

Well JavaScript isn't going to see any more leaps in performance, and people write slower JavaScript than they wrote yesterday, on average, so it must be remediated somehow.

And until a lot of people realize that most web technologies are fundamentally bad, things are not going to get better.

We are not going to be using this same web tech in 300 years, almost certainly, so at some point it's going to change. It won't be soon, because people love tradition, even when it causes them pain.

So, for now, it's webassembly time.

> people write slower JavaScript than they wrote yesterday, on average

This is only true because computers are faster than they were yesterday, on average. People don't optimize code to some arbitrary absolute level, they optimize code that's slow on their computer.

You can easily view the webassembly file as part of the website source, so what you're saying is a bit misleading IMO. I don't see this being different than minified Javascript.

Isn’t that no different than saying, “you can disassemble an exe, so you can still see what it’s doing!” While not untrue, it’s not very helpful.

Although, webassembly is closer to .NET’s CIL. It’s still a form of assembly, but it’s a bit higher level which makes decompiling a bit easier than, say, an optimized (-O3) desktop program.

No I don't think that's a fair comparison, in this case downloading the WebAssembly file is trivial and much more accessible to the average user.

I strongly disagree and despise this kind of thinking. Don't get me wrong, OSS is awesome for tooling (shared by many creative professionals) but not for end products. An architect's tools can be open source, but an architect's plan is their own creative output that should not be open source if we make this analogy. Architects can get together and build better tooling for the benefit of all architects - OSS shines here.

This project is a creative output. Stop for a second with entitlement to the source code and just enjoy for what it is and how amazing this project is.

Do you go to museums and ask for what color palette the artist used? It's missing the point, isn't it?

Not much different from minified Javascript though.

The License page has links to all the used open source projects at least:

https://www.tejotron.com/thirdparty.html

Tejotron, how did you build this? Is it Rust compiled to WebAssembly? The code editor is quite well-made. Is it completely hand-rolled? Curious to hear more!

The text editor is this one https://github.com/BalazsJako/ImGuiColorTextEdit, it's listed on the third-party attributions page (https://www.tejotron.com/thirdparty.html)

This looks like a potentially very good and very low cost educational aid. I continue to be impressed by what Ben inspires.

Nice work! Hope you can clean up the UI (not use rewind). Otherwise I really like it so far.

> Use desktop Chrome, Edge(Chromium), or Firefox

hmm

Am not very fan of running my things with a web browser...

But virtual hardware is a nice way to avoid pollution...

Good job :)

a standalone app maybe?

A lot of standalone apps these days are just a webpage bundled with a web browser (e.g. discord, brackets text editor). Makes porting a non-issue. So you could download the page and go through this process if you wanted to.

Well done! I could almost upvote on title alone -- but you really managed to measure up.

Wow, this is very cool. Love the tabs for RAM/CPU and such.

This is really cool, what future plans do you have with this?

It's cool. But ... breadboards are one step less readable than schematics.

(Also, the Run button doesn't seem to work, probably my mistake, and I'm missing analog components such as transistors).

You have to rewind it before you can play it

This really let me see what breadboards are for and how they work. So, it might be less about readability and more a practical toy.

Check out Tinkercad. I don't think the program simulator in it is as cool or as in-depth, but you can program a virtual Arduino with it and hook up wires to a breadboard along with many other common components and have some outputs too.

This looks both impressive and very useful.

Splendid work

Oh this is fantastic. Good job!!

This is miraculous

browser detection does not work. debian.

Reply on news.ycombinator.com