정렬 · Bubble Sorting
Image Puzzle
이미지를 20조각으로 나눠 섞은 뒤, 버블 정렬이 진행되면서 원래 그림으로 맞춰지는 과정을 지켜보세요. 페이지를 열 때마다 조각이 새로 섞여요.
PASS 1
- 비교 중
- 제자리
STEP 1 / 0scrollYProgress 0.00
이 단계에서는
조각을 섞는 중이에요...
- 비교
- 0
- 교환
- 0
- 제자리 조각
- 0/20
아래로 스크롤하면 다음 단계로, 위로 스크롤하면 이전 단계로 돌아가요.
조각 번호가 곧 정렬 값
각 조각의 원래 번호를 정렬할 값으로 삼아요. 같은 getBubbleSortSteps를 쓰기 때문에 막대 정렬과 같은 방식으로 움직여요.
backgroundPositionX = (originalIndex / (total - 1)) * 100%