Insertion Sort — Visualização

Visualização interativa do algoritmo Insertion Sort feita em HTML/CSS/JS puro, com animação dos cards, divisor entre parte ordenada e não-ordenada, status em tempo real e código Python acompanhando a execução linha por linha.

---

O que é Insertion Sort?

Ordenação por inserção — funciona igual quando você organiza cartas na mão: pega uma carta de cada vez e encaixa ela no lugar certo entre as que já estão ordenadas.

[5, 2, 4, 6, 1, 3]
 ^ "ordenado"

key = 2 → empurra o 5 → [2, 5, 4, 6, 1, 3]
key = 4 → empurra o 5 → [2, 4, 5, 6, 1, 3]
key = 6 → fica         → [2, 4, 5, 6, 1, 3]
key = 1 → empurra tudo → [1, 2, 4, 5, 6, 3]
key = 3 → encaixa      → [1, 2, 3, 4, 5, 6] ✓

---

Características

Propriedade	Valor
Tempo (pior caso)	O(n²) — lista invertida
Tempo (melhor)	O(n) — lista já ordenada
Espaço	O(1) — ordena no próprio array
Estável?	Sim
Bom pra	Listas pequenas ou quase ordenadas
Ruim pra	Listas grandes e bagunçadas

---

Como rodar

Não tem build, não tem dependência. É só abrir o arquivo:

open insetion.html

Ou clicar duas vezes nele.

---

Controles

• ▶ Ordenar — inicia a animação
• 🔀 Embaralhar — gera uma nova lista
• Velocidade — slider pra controlar o delay entre passos
• 🔊 Som — beeps proporcionais ao valor de cada card (estilo sorting-visualizer)

---

Legenda visual

• 🟡 Card amarelo brilhante → o key sendo inserido
• 🟢 Card teal → parte já ordenada
• 🔵 Card ciano → elemento sendo comparado com o key
• 🟡 Linha vertical amarela → divisor entre "ordenado" (esquerda) e "ainda não mexi" (direita)

---

Pseudocódigo (Python)

def insertion_sort(a):
    n = len(a)
    for i in range(1, n):
        key = a[i]
        j = i
        while j > 0 and a[j - 1] > key:
            a[j] = a[j - 1]
            j -= 1
        a[j] = key

---

Estrutura

insertion-sort/
├── insetion.html   # visualização (HTML + CSS + JS num arquivo só)
├── main.py         # versão Python do algoritmo
└── README.md