Simufast

Simulate fast using visual abstractions. This is an embeddable widget built using createjs for graphics and animations in HTML canvas.

The idea of simulation was inspired by the amazing interactive posts like this by @bciechanowski

Usage

• Include the simufast JS and CSS files in your html page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/src/simufast.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/main.js"></script>

Note: This project is in the proof of concept stage. The APIs may change. Please use specific version of the js and css files to avoid breaking changes.

• Add a script tag with the simulation code. An example of bubble sort simulation is as below

<script>
    const bubbleSort = async (items, options) => {
      for (let i = 0; i < items.length; i++) {
          for (let j = 0; j < items.length - i - 1; j++) {
              if (await items.compareAtIndex(j, j + 1) > 0) { // compares and highlights the elements being compared
                  await items.swap(j, j + 1); // swaps and animates the elements being swapped
              }
              await options.onStepCompleted(); // allows pause & play
          }
      }
    }

    simufast.run((player) => { // embeds the simufast player
      const items = simufast.array.createVisualArray(player, simufast.utils.randIntArray(9, 10, 99)); // draws the array
      player.experiment({ // runs the experiments as per the commands
          name: 'Bubble Sort',
          drawable: items,
          commands: [(options) => bubbleSort(items, options)]
      });
    });
</script>

Checkout one of the below examples in JSBin to try your own.

Examples

• Bubble sort
• Selection sort
• Modulo Hashing vs Consistent Hashing
  • Blog
  • JSBin

How to run and test locally

npm install
npm run build:dev
open index.html