JavaScript >> Javascript 文檔 >  >> Vue.js

我用 Javascript 創建了圖像排序可視化工具

你好社區! 👋

一段時間以來,我一直是算法和數據結構的忠實粉絲。我一直在慢慢解決有關 leetcode 和 algoexpert 的問題,我想展示我的一些技能。

排序是算法的主要內容,也是我在學習時學到的第一件事。有很多簡單的算法,比如冒泡排序 (我們可能都熟悉一個,兩個 for 循環就是勝利!),但也有更難的,例如 quicksort 也可能是堆排序 .

想法

所以我的想法只是可視化排序算法的工作原理(我知道有很多應用程序已經這樣做了,但我想自己創建一些東西)。

該應用程序將非常簡單。您只需上網,找到一張圖片,複製圖片網址並將其粘貼進去。此外,您可以選擇行數和列數,我將使用它們將圖像切成更小的部分。

一旦圖像被切片,我會重新塑造它,讓它看起來很混亂。

然後您只需決定要使用哪種排序算法,並觀看動畫如何顯示算法解決問題的方式。

在底部你會看到一個顯示,算法在後端運行了多長時間,它的時間複雜度是多少,以及要處理多少動畫來獲取原始圖像。

圖片

預分類

排序

在哪裡可以找到應用程序

應用程序託管在 heroku 上,它非常輕巧且易於使用,因此請隨時進行測試。我建議不要超過 10 行或列,因為動畫的數量可能會變得太大,你可能會厭倦看整個圖像重塑自己😁

如果你能就你們的想法給我一個反饋,我會很高興的。

應用現場演示:https://image-sorting-visualizer.herokuapp.com/

該應用程序的 Github 鏈接是:https://github.com/fvukojevic/Image-Sorting-Visualizer,以防你們中的任何一個真正喜歡它並決定為該項目加註星標😁


Tutorial JavaScript 教程
  1. 我想成為自由職業者

  2. 使用 Vue.js 和 Chart.js 創建令人驚嘆的圖表

  3. 帥哥?亞類

  4. 可訪問 Web 組件指南

  5. React:創建用於獲取數據的自定義 Hook

  6. 使用 Redwood JS 開發 URL 縮短應用程序。

  7. 12 個最佳 WordPress PDF 查看器插件

  1. 具有跨瀏覽器兼容性的特徵檢測的 CSS

  2. JavaScript 中的三元運算符指南

  3. Express.js 基本身份驗證:把它拿出來!

  4. 一個使用 React Native 製作進度條動畫的故事

  5. 使用無瀏覽器、puppeteer 和 Node.js 進行終極網絡抓取

  6. 用 JS 驗證密碼

  7. 用嵌套表達式確定圓形顏色

  1. 我自己與 react、graphql 和 postgresql 的實時聊天 [第 7 部分 - React 登錄]

  2. 用新值替換舊值,不包括子項

  3. 問候你!

  4. 使用 Node.js 在點陣 LED 顯示屏上顯示圖像