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
- Include the simufast JS and CSS files in your HTML page or markdown.
<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
scripttag in HTMLbodywith 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.
- Visual Array
- Consistent Hashing
npm install
npm run build:dev
open index.html