Tutorial: Getting Started

Getting Started

Create powerful algorithms on the web for over 100+ platforms!

AlgoFlux is a platform for creating and experimenting with algorithms.

Our aim is to put the beauty and interactivity back into this field. And for this purpose, we provide a powerful web-based IDE and a huge resource of built-in libraries.

Simple path-finding

Today we are going to make a simple algorithm that finds a path between two points in a maze. When we are finished, it would look something like this:


Let's start with a new project.


Write a new name for your project. An ID would be automatically generated for you.

Here, we are going to start with pure JavaScript. But you can try CoffeeScript or TypeScript if you like them.


Now a project is basically composed of two major files:

  1. algo.js For main algorithm code.
  2. inputs.js For algorithm inputs.

Let's run it anyway and see what happens.


This default project just asks for a name and outputs it.

What we want, is a project that asks us for a Maze and shows us the path. So let's start with the inputs file first.

Making a Maze Input


Just goto the end of line #6 and write // make a full maze. And when you press Alt+Enter on it, it would automatically convert what you want (i.e. making a maze) into the code (for the maze control).

If you just type // make a maze instead, then the generated maze would not have all the features.

Simple, isn't it? Now let's run this project.


Ta daaa!! Now AlgoFlux has handled all the complexities of generating and displaying this maze.

Line # 3 to 6 are about showing a text input. To remove that textbox, you can remove these lines.

Writing down the path-finding code

When you open the algo.js file, it would contain this default code.

function main (name) {

    Out.info("Hello " + name);

    // Your code here


The main function is executed every time you press the "Run" button in the input window.

We want to start blank, so let's remove all the extra code in this function.

function main () {

1. Getting the maze data

Basically, when we hit the "Run" button, algoflux extracts all the data from inputs window and passes it to the main function.

So if we want the maze data in the main code, we simply extract it from the arguments.

function main (maze) {

    Out.maze(maze); // let's show the maze.
    Out.debug(maze); // And then see its code contents.

After executing this code, you will see a the maze and a long list of data (with markers information at bottom).

2. Getting the markers

Markers are small dots that are used to mark a location. In our code, we have two markers start (green color) and end (red color).

You can open up the inputs.js and add more markers there (line #14).

Let's modify our main function to show the markers information:

// find the markers
var startMarker = maze.findMarker('start');
var endMarker = maze.findMarker('end');

// show markers info
2. Finding path between markers

Let's find out the path between these markers. AlgoFlux provides a findPath function.

// get the path
var path = maze.findPath(startMarker.x, startMarker.y, endMarker.x, endMarker.y);

Path is basically an array of X and Y points. When you debug it, you can see the values of that path.

2. Displaying the path

For this final step, let's add the path to the maze and display it!. AlgoFlux provides an addPath function.

maze.addPath(path, 'purple');

That's it! Here's your tiny algorithm that shows the path between two points.

Entire code


function main (maze) {

    // find the markers
    var startMarker = maze.findMarker('start');
    var endMarker = maze.findMarker('end');

    // get the path
    var path = maze.findPath(startMarker.x, startMarker.y, endMarker.x, endMarker.y);

    // add path to maze and display it


function inputs() {
    return {
        "maze": {
            "label": "Your Maze",
            "control": new Controls.Maze({
                "defaultValue": new Maze({
                    "algo": "DFS",
                    "width": 60,
                    "height": 30,
                    "markers": "start,end",
                "width": "600px",
                "height": "280px",
                "readonly": false,

And this code to your project, and see your algorithm in action!

Path-finding in depth

This project uses the findPath function. To know how this function works, you can either check the source code or see a detailed demo.