On the homepage of my portfolio, I needed a catchy visual to grab attention as soon as someone arrives. I love using algorithms in unique ways where they might not usually be used, so I decided to implement Dijkstra's pathfinding algorithm in p5.js.

I started by giving it a good space to run in - a 2D perlin noise field. I cache these values in a 2d array to make dijkstra run faster, as a call to p5's noise function is slower than a lookup in an array. I also generate an empty 2d array the size of the field to store data about our progress in.

This generates a noise field that looks like this: We then run dijkstra on it. Below is the cost function I use to generate the ones on the homepage. However, there's lots of different possible cost functions. Instead of the difference between two cells being the cost, the value of the next cell could be the cost. Maybe going "downhill" has no cost, but uphill does - play around!

Cost Function // pos.x, pos.y are the coords of the current cell. dx, dy are the delta coords to the next cell p5app.costFunction = function(pos,dx,dy){ return Math.abs(p5app.noisedata[pos.x][pos.y] - p5app.noisedata[pos.x+dx][pos.y+dy]); }

Run