VISUALIZE SORTING

Dependencies

• Bulma

Dev Dependencies

• Parcel Bundler
• TypeScript

Visualize different sorting techniques used in software engineering.

• Choose a Speed, Size, Sorting method and click RUN
• After that you have 3 controls viz: Resume, Play, Stop

Colors in Canvas (LEGEND)

• Blue: Normal
• Green: Base Pointer(s)
• Violet: Comparing to (can be thought as other pointer)
• Grey: Already sorted Elements
• Orange: While comparing, some element is found swap worthy. Green Orange are usually swapped.
• Light Orange: To show left side of merge sort and quick sort.
• Dark Orange (Reddish Orange): To show right side of merge sort and quick sort.

const colors = {
  pointer: "#0b6623",
  comparing: "#7f00ff",
  normal: "#44a6c6",
  sorted: "#d0d0d0",
  swap: "orange",
  swapLeft: "#FF9F00",
  swapRight: "#FF4F00"
};

Developed by: Jaspreet Singh(@fearless23)

Check Github Repo for code.

Website on Netlify

Contributing