How Simple Visualization Skills can come handy

In certain occasions there might be a need to visualize your prototype/algorithm/robot on a simple canvas.

In this article I’m going to explain my journey in using p5.js for numerous tasks ranging from Building a Robot Visualizer using realworld data to Building a custom processor simulator

As the p5.js site states,

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else!

When I first wanted to make a robot visualizer which displays robot data, I looked into processing. However felt that having a cross platform solution which requires no installation might come handy => therefore made the transition to p5.js.

Here are some major projects I did with p5.js #

1. Robot visualizer #

I have written a separate article on this one, here

2. Processor Simulator #

There is an semester project that our team is working on which requires to implement an SIMD ISA + Implementation on an FPGA. The task is to build a single core and scale it such that we can efficiently multiply matrices.

To verify our design idea I decided to quickly use p5.js and build an interface to load assembly code and the matrix, and select the number of cores => then execute the code. You can think of this as a processor simulator.

3. D* Lite Algorithm Visualizer #

This is the latest project I did. During my intern work, there was a need to implement the D* Lite algorithm for path planning. This algorithm is capable to efficiently reroute based on dynamic obstacles as well.
So there were mainly two challenges, (1) Implementing the pathplanning algorithm in Javascript. (2) Making the necessary visualization to display it’s route, costs, draw obstacles etc.
You can have a look at my code here.
The code is about ~680 lines. However, I must say that this was done in incremental steps. (feature after another, it’s not that hard 😃)

Limitations
Currently there are certain aspects that need to be improved. Due to inefficient ways in drawing stuff on the canvas I am wasting some processing power (CPU fan starts up 😆). But given the time I had to prototype, I think it was quite useful.

Also there are more javascript libraries like three.js, d3js.org that I’m yet to try out! If you need more info about these implementations look at my repositories or reach out to me

#visualization #misc_projects #