[SortVisualizer] 소팅(정렬) 시각화 사이트 출시

많은 정렬 알고리즘이 있다.

 

컴퓨터 과학에서도 매우 빈번하게 사용하는 알고리즘이지만,

처음 정렬을 배울 때는 많은 어려움이 있다.

 

내가 처음 정렬을 배울 때는 첨자 i와 j가 마구마구 바뀌는데

그 안에서 또 스왑하고 뭐하고 하느라 정신없었던 기억이 있다.

 

요즘 코테공부를 하는 중인데 복습도 할겸 해서 정렬 시각화 웹을 제작했다.

 

SortVisualizer는 정렬 알고리즘을 처음 접하는 사람에게 큰 도움이 될 것으로 생각한다.

 

 

디자인에서 똥냄새가 가득하지만 그냥 넘어가자...

 

애니메이션 속도와 배열의 길이를 지정하면,

지정한 길이로 랜덤 값으로 채워진 배열을 생성한다.

 

그리고 각 정렬 항목마다 버튼이 있는데,

이것을 누르면 지정한 애니메이션 속도로 정렬 과정을 시각화해서 보여준다.

 

정렬 방법 중 하나인 병합 정렬의 예이다.

 

애니메이션 속도 '빠름'으로 지정되어있는 상태이며,

실제로 첨자가 어떻게 지나가는지와 어디에서 스왑이 발생하는지를 한눈에 볼 수 있다.

 

https://namgunggeon.github.io/sort-visualizer/index.html

Sort Visualizer

 

지원하는 정렬 알고리즘

버블정렬

퀵정렬

선택정렬

삽입정렬

병합정렬

칵테일정렬

 

코드

https://github.com/NamGungGeon/sort-visualizer

GitHub - NamGungGeon/sort-visualizer

 

칵테일 정렬

이건 별로 많이 쓰이는 정렬도 아니고 효율적인 정렬방법도 아닌데(버블정렬의 응용이다) 왜 넣어놨냐면

그냥 신기해서 넣어봤다.

 

뭐 버블정렬에서 정렬 모양이 거품이 이는 모양이라 버블정렬이다~ 뭐시기뭐시기하는데

공감이 전혀 안된다.

 

근데 칵테일정렬은 ㄹㅇ 바텐더가 칵테일제조할때 통흔드는거마냥 흔들리길래 되게 재미있었다.

 

위키디피아 칵테일 정렬 이미지

흔들흔들잼ㅋㅋㅋ