정렬 · Bubble Sorting
Bubble Sort Logic
이웃한 두 수를 비교해 큰 수를 뒤로 보내는 정렬이에요. 10개의 막대로 비교와 교환이 일어나는 순간을 한 단계씩 따라가 보세요.
PASS 1
- 비교 중
- 정렬 완료
- 대기
60
20
100
40
80
10
150
30
90
50
STEP 1 / 46scrollYProgress 0.00
이 단계에서는
60와 20를 비교해 자리를 바꿔요
- 비교
- 1
- 교환
- 1
- 확정
- 0
아래로 스크롤하면 다음 단계로, 위로 스크롤하면 이전 단계로 돌아가요.
모든 단계를 미리 계산
getBubbleSortSteps가 배열 스냅샷과 강조할 두 칸을 미리 만들어 둬요. 이 예시는 10개 값, 총 46단계예요.
useTransform(scrollYProgress, [0, 1], [0, steps.length - 1])