Partilhar: WhatsApp
aulify
UC UC02208 · T. Multimédia

Ficha 02 · Curvas de Bézier

Anatomia, tipos de nó, desenho prático
Versão · Aluno
Tempo · 60 minutos
Cotação · 100 pontos
Aluno(a)
Turma
Data
Objectivos da ficha

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.

  1. Tipo de nó errado — nós são cusp (vértice) em vez de simétrico ou suave. Correcção: seleccionar com N, depois usar botões da barra superior para alternar para "Make selected nodes smooth" ou "symmetric".

  2. 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).

  3. 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 100Move to (ir até ao ponto (100, 100) sem desenhar). - L 200 100Line to (linha recta até o próximo ponto). - ZClose 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:

  1. 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.

  2. Decidir o tipo de cada nó. Vértice (cusp) para cantos. Suave/simétrico para curvas contínuas. Esta decisão é estratégica.

  3. Posicionar os nós. Com a ferramenta Caneta (B), clicar em cada ponto identificado. Não tentar acertar perfeitamente à primeira — pode-se ajustar depois.

  4. 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.