YAAV - Yet Another Algorithm Visualizer

Why another algorithm visualizer? First of all, my plan is not to try replace already existing visualizers. My main focus is to build a collection of algorithms for myself, to learn and remember them better, and to have somewhere to search them rapidly.

Second of all, future plans include adding non-data-structure-related algorithms (which are rarer), mainly computer vision stuff. And I’m also considering the idea of adding some blog-like posts, with the intent of expanding the short descriptions of the visualizing pages, in order to give a more in-depth view of complex algorithms.

Building and Deploying

At first, there were standard html pages. Then, in order to facilitate changes to the header and the footer, a simple Bash script had been made. This weirdly mutated into something that now takes care of the entire website generation, including SEO, sitemaps, image manipulation and processing.

The building process is automated with GitHub Actions, thanks to the github-pages-deploy action by JamesIves.

Thinking about it, probably a standard static website generator, with a proper template engine, like Jekyll, would have been faster. But, I mean, Bash is fun…

The generation is simple. Just run ./build.sh (sorry Windows users) and you get your website in the dist/ folder. The .cache/ folder contains cached images to speed up future builds. The CONFIG file contains basic configuration used by the generator. In the build-script/ folder there are other parts of the script, including a build-requirements.sh file which checks if all the needed commands are present on the system.

Note: I don’t suggest using this Bash script in your project. It would probably break extremely easily with the wrong input. But since I’ve built it around this project, here it should work fine.

Libraries

This website is built with the help of some libraries. The front end is built using Bootstrap and a Bootswatch theme.

The visualization is made using p5js, even if I’m considering switching to something more performant (maybe using WebGL) in order to achieve smoother animations and more complex visualizations.

The search function is made with Fuse.js, which implements a some sort of fuzzy finder algorithm and allows a fast and easy way to navigate the website.

Contributing

You are completely free to contribute to this project. I am actively (in my free time, though) trying to make that as easy as possible, by minimizing the code for a specific algorithm and handling the visualization somewhere else.

In any case, you can submit a Pull Request and I’ll try to revise it personally to solve any doubt.

QYMWA

a.k.a. Questions You Might Wanna Ask

Why cookies?

I’ve thought a lot about adding Google Analytics to this site. I don’t like the idea. I don’t like the fact that on a simple static open source free website people get tracking cookies.

However, I’d really like to know if and how many people visit the website. I am an incredibly curious person. If you know some free, maybe open source, alternative, which doesn’t track people, but still allows me to know how many users I get, please let me know as soon as possible. I’ll happily nuke Google Analytics from this website.

Why SEO?

Even if I don’t really care if people come here, it isn’t really this project scope, I like the idea of being useful to others. I somehow believe that this site can be useful for someone and therefore I want them to be able to find me easily. This means SEO.

Also I’ve never really done any serious SEO (as you can probably notice by the quality of it), so it is excuse to learn it. Or at least the basics.

Why is the repository private?

If the repository is still private and GitHub welcomes you with a 404 messsage, it means that for me it isn’t ready for the public, yet.

This mainly means that:

If you are curious, however, you can still look at the page source, since everything is client side. And if you want to notify me of a bug or suggest some improvements you can contact me.

Bash site generator? Are you crazy?!?

Yes. :)