Ficha 02 · Curvas de Bézier
- Identificar nós e alças de uma curva Bézier
- Distinguir tipos de nó (simétrico, suave, cusp)
- Desenhar curvas com o número mínimo de nós
- Compreender a sintaxe SVG de um path
Parte I · Anatomia
Exercício 1 · Identificar componentes
Uma curva Bézier cúbica é definida por quantos pontos? Identifique-os pela nomenclatura: ___ pontos, dos quais ___ são nós e ___ são alças (pontos de controlo).
4 pontos no total: 2 nós (extremidades — P₀ e P₃) e 2 alças (pontos de controlo — P₁ e P₂).
A curva passa pelos nós mas não passa pelos pontos de controlo. As alças exercem uma "atração" sobre a curva, definindo a sua curvatura.
Exercício 2 · Tipos de Bézier
Identifique cada tipo de curva Bézier pelo número de pontos:
a) Linear — ___ pontos. Forma resultante: ___
b) Quadrática — ___ pontos. Forma resultante: ___
c) Cúbica — ___ pontos. Forma resultante: ___
Qual destas é o padrão em design vetorial e porquê?
a) Linear: 2 pontos (apenas as extremidades). Resulta numa linha recta. b) Quadrática: 3 pontos (2 extremidades + 1 ponto de controlo). Resulta numa curva simples (parábola). c) Cúbica: 4 pontos (2 extremidades + 2 pontos de controlo). Resulta em curvas mais expressivas, com mais flexibilidade.
A cúbica é o padrão em design vetorial (Illustrator, Inkscape, SVG) porque oferece o melhor compromisso entre expressividade (consegue representar quase qualquer forma orgânica) e simplicidade (apenas 4 pontos por segmento). A quadrática é mais limitada; tipos superiores (quínticos, sextos) seriam matematicamente mais flexíveis mas computacionalmente mais pesados.
Parte II · Tipos de nó
Exercício 3 · Classificar nós
Para cada situação, indique o tipo de nó mais adequado (Simétrico · Suave · Cusp/Vértice):
a) Topo de um círculo perfeito. ___
b) Pontas de uma estrela de 5 pontas. ___
c) Cantos inferiores de um coração. ___
d) Curva contínua de um "S" estilizado. ___
e) Esquinas de um polígono. ___
f) Curvas orgânicas de uma folha de árvore. ___
g) Bico de um pássaro estilizado. ___
a) Simétrico — curva contínua suave, alças iguais em ambos os lados. b) Cusp — cada ponta é uma mudança abrupta de direcção. c) Cusp — as pontas inferiores do coração são cantos definidos. d) Suave ou Simétrico — depende da intensidade da curva. e) Cusp — em rigor um polígono nem precisa de curvas (segmentos rectos). f) Simétrico ou Suave — depende do estilo (mais geométrico vs mais orgânico). g) Cusp — o bico é uma ponta abrupta.
Exercício 4 · Identificar erros
A turma desenhou um círculo no Inkscape mas o resultado não fica suave em alguns pontos. Que pode estar a falhar? Identifique as 3 causas mais prováveis e como corrigir.
-
Tipo de nó errado — nós são
cusp(vértice) em vez desimétricoousuave. Correcção: seleccionar com N, depois usar botões da barra superior para alternar para "Make selected nodes smooth" ou "symmetric". -
Alças mal alinhadas — mesmo com tipo correcto, as alças podem estar com comprimentos desadequados, "puxando" a curva para dentro/fora. Correcção: ajustar manualmente o comprimento das alças (regra: para círculo perfeito de 4 nós, alça = raio × 0.5523).
-
Excesso de nós — quanto mais nós, mais difícil garantir continuidade. Pode ter sido feito com lápis (P) que cria muitos nós automaticamente. Correcção:
Caminho → Simplificar(Ctrl+L) reduz nós preservando forma. Alternativamente, refazer com 4 nós usando a ferramenta elipse (E).
Parte III · SVG e sintaxe
Exercício 5 · Ler SVG path
Considere o seguinte SVG:
<path d="M 100 100 L 200 100 L 200 200 L 100 200 Z" />
a) Que forma desenha? ___
b) Quantos nós tem? ___
c) O que significa M, L e Z? ___
a) Quadrado com 100px de lado, posicionado entre (100,100) e (200,200).
b) 4 nós (vértices do quadrado).
c)
- M 100 100 — Move to (ir até ao ponto (100, 100) sem desenhar).
- L 200 100 — Line to (linha recta até o próximo ponto).
- Z — Close path (fechar o caminho com uma linha de regresso ao ponto inicial).
Exercício 6 · Escrever SVG path
Escreva o SVG <path> para desenhar:
a) Uma linha recta diagonal do ponto (0, 0) ao ponto (300, 200).
b) Um triângulo com vértices em (50, 200), (250, 200) e (150, 50).
c) Uma curva Bézier cúbica do ponto (100, 200) ao (400, 200), com alças que fazem a curva subir até y=50.
a) <path d="M 0 0 L 300 200" />
b) <path d="M 50 200 L 250 200 L 150 50 Z" />
c) <path d="M 100 200 C 100 50, 400 50, 400 200" />
(Aceita-se variações nos valores das alças, desde que a curva suba até y=50.)
Parte IV · Prática (Inkscape)
Exercício 7 · Desenhar formas
No Inkscape, recria as seguintes formas usando o número mínimo de nós possível. Para cada uma, indica quantos nós usaste:
| Forma | Nós mínimos | Tipo de nós principais |
|---|---|---|
| Círculo | ||
| Triângulo equilátero | ||
| Estrela de 5 pontas | ||
| Coração | ||
| Letra "C" | ||
| Letra "S" maiúscula |
| Forma | Nós mínimos | Tipo de nós principais |
|---|---|---|
| Círculo | 4 | Simétrico em todos |
| Triângulo equilátero | 3 | Cusp em todos |
| Estrela de 5 pontas | 10 | Cusp em todos (5 pontas + 5 entre-pontas) |
| Coração | 5 | 1 cusp em baixo + 4 simétricos nas curvas superiores |
| Letra "C" | 4 | Cusp nas pontas + simétricos nas curvas |
| Letra "S" maiúscula | 6 | Cusp nas pontas + simétricos nas curvas |
Discussão: estes números mínimos não são leis absolutas — uma forma "S" estilizada pode ter mais nós para atingir um carácter tipográfico específico. Mas conhecer os mínimos ajuda a manter desenhos limpos.
Exercício 8 · Workflow prático
Descreve, em 4 passos numerados, o workflow profissional para desenhar uma curva Bézier complexa do zero:
-
Identificar pontos âncora. Onde a curva muda de direcção ou de tipo? Esses são os candidatos a nós. Esboçar mentalmente (ou no papel) antes de clicar.
-
Decidir o tipo de cada nó. Vértice (cusp) para cantos. Suave/simétrico para curvas contínuas. Esta decisão é estratégica.
-
Posicionar os nós. Com a ferramenta Caneta (
B), clicar em cada ponto identificado. Não tentar acertar perfeitamente à primeira — pode-se ajustar depois. -
Refinar as alças. Com a ferramenta Nó (
N), seleccionar cada nó e ajustar comprimento/ângulo das alças até a curva ficar como pretendido. Esta é a fase onde mais tempo se passa, e é normal.