Show HN: Debugger that generates video visualizations for algorithm learning | Hacker News Reader

Show HN: Debugger that generates video visualizations for algorithm learning

github.com

102 pointskdrag0n23 comments

This could be a simple / cheap way to get a time-travelling debugger. Run your code through vardbg generating a video. If that run results in unexpected behaviour then you can step back and forward through the video and see where things went wrong.

Or just use rr.

vardbg is for Python, so rr isn't very helpful.

However, you could use RevPDB: https://morepypy.blogspot.com/2016/07/reverse-debugging-for-...

I've always wanted a tool that can create a flowchart from the flow control of a piece of code. Ideally it would be bidirectional - you could drag and drop things in the flowchart and the text sourcecode would change, and vice versa. There are a million tools that do this with object or class diagrams, but I've never seen one that does it with imperative flow control code (if/then, switch/case, while & for loops, etc.).

I'm months away from a soft launch but I'm building language and environment for declarative, functional programs with a graph-reduction computation model -- basically instead of typing code that gets parsed into an AST you just write the AST

Nodes of the graph re-write themselves as soon as their prerequisites are fulfilled (Kind of an event-driven graph reduction)

I've been dreaming up all kinds of things you can do once your program is emitting 'change' events -- I want to do webGL trees (like the kind made of wood) that update themselves with the state of the graph, and let people program their own sounds for each kind of event -- you could listen to how quickly a program is running, hear how many things are coming off the stack.

If you listened to it every time, you would hear when something changed.

Ultimately my goal is to make source-code more curiosity-inducing, to make the computation of user requests kind of always-present, in the background (like the whirring and grunts of the old machines in Engelbart's mother-of-all-demos, cleverly mic'd by Stewart Brand so the audience could hear the machine at work, tho it was miles away), and then when a user actually looks at the code, they're greeted with something they might eventually intuit by hacking around with it. You could pause and back up and edit the state and replay, such that the IDE is always in debug mode -- hopefully with some groovy sounds and visuals.

I have a very rough draft with mock up gifs at https://lookalive.software if you'd be inclined to give any first impressions

Interesting! This way of structuring & evaluating a program seems analogous to how spreadsheets work, but with a hierarchical instead of a tabular data model. I could see it being helpful to new programmers for building intuition about how code works.

And translating a program's execution into sound and being able to hear changes sounds really fun.

Awesome! (For some reason, the demo gif doesn't display for me in Safari, but I can see it in Chrome/Firefox.)

I feel like this sort of thing could really be an essential tool in teaching programming. I've been working on a somewhat similar project for visualizing execution of javascript code (but it works by instrumenting the code, rather than interfacing with a debugger, so that it can all be done in the browser), which I'm hoping to release soon.

Hey I’m really interested in seeing this (and contributing if it’s open source), please do a show HN when you release!

Released! https://github.com/brokensandals/blunt-instrument#blunt-inst...

Could you check if the issue with the demo has been fixed? GitHub's image host doesn't support WebP (which I use for better quality at a smaller size), so I've moved it to my own server where the MIME type should be correct.

Your interactive project sounds interesting, let us know when it's out :)

It still won't display in Safari. I wasn't familiar with WebP but it sounds like maybe Safari just doesn't support that format at all: https://caniuse.com/#search=WebP

Ah, that's unfortunate. I've replaced it with an actual GIF, so it should work now — thanks for the heads up.

Yep, works now :)

> the demo gif doesn't display for me in Safari

It's actually an incorrectly named .webp file that's why.

If the demo animation fails to play:

https://m.imgur.com/atQnWj6

This looks awesome. Mentally I always try and create visualizations of concepts to understand them. I can see this being very handy.

I like it. Anything that helps programmers to more quickly understand code is a potential move forward. ( I think it'd be best to have a variety of such tools available, to suit different learning styles.)

Kudos to the author.

This is awesome! I can't help but think that it will hinder the development of my ability to mentally visualize the code I write though.

Well, you could always try it and see.

I gave a shot in this project with a tricky algorithm that I'm working on, really handy! On the spot I got some good insights about the code.

Nice job!

Neat, curious why did you choose a video output instead of curses or web?

Video output was how the original series of Google Code-in tasks was originally described. Web might actually be better though, thanks for the tip.

This is pretty amazing!

Does anyone know of anything similar for PHP?

Reply on news.ycombinator.com