Curvas Bézier: Como o computador desenha curvas

Ela foi desenvolvida em 1962 e seu nome é devido a quem primeiro publicou um trabalho sobre a curva, o francês Pierre Bézier, funcionário da...

Ela foi desenvolvida em 1962 e seu nome é devido a quem primeiro publicou um trabalho sobre a curva, o francês Pierre Bézier, funcionário da Renault, que a usou para o design de automóveis. Esse vídeo mostra, de maneira bem didática, como funciona esse recurso.


O conceito matemático da Curva de Bézier (ou Curvas Bézier, ou ainda Curvas de Casteljau em homenagem ao físico e matemático da Citröen que desenvolveu os algoritmos para essa família de curvas, em 1957) trata de uma forma muito versátil de caracterizar uma curva de forma que os computadores possam desenhá-la. O vídeo a seguir explica como elas funcionam de modo bem simples (em inglês). Logo abaixo, analisamos os principais pontos do vídeo para melhor entendimento.



Inicialmente usadas na indústria automobilística, pois são perfeitas para o design dos suaves contornos dos carros modernos, o conceito dessas curvas se tornou a base de todo o modelo gráfico do Adobe PostScript, sendo hoje largamente utilizado na maioria dos softwares de computação gráfica. Desta forma, tais curvas se tornaram familiares para qualquer usuário de programas de desenho vetorial.


A Curva de Bezier emprega no mínimo 3 pontos para sua definição, podendo chegar a “n” pontos de controle. Entretanto, sua forma mais comumente utilizada é a de terceira ordem, ou seja a curva cúbica de Bézier, que é definida por quatro pontos de controle.

GIF Animado


Tais pontos são: 2 “endpoints” (também conhecidos como pontos âncoras, os "vectors points" da animação acima) e dois “control points” (pontos de controle, os "handle control points" no gráfico acima) que não passam pela curva, mas definem sua forma. A linha que une um ponto âncora ao seu ponto de controle corresponde à reta tangente a curva no ponto âncora, e, por isso, é ela que determina a declividade (ou derivada) da curva neste ponto. Esta forma de construção está ilustrada na figura a seguir.

Repare no segmento de reta tracejado entre os
dois pontos de controle, ao final da animação.

A demonstração feita aqui considera uma curva cúbica de Bézier, isto é, utiliza quatro pontos-chave para sua definição (os dois "vector points" e os dois pontos de controle).

GIF Animado

Para construir uma curva vários elementos usados no algoritmo precisão percorrer valores entre 0% e 100%. Sendo que 0% de completude corresponde ao ponto inicial e 100% ao ponto final.

GIF Animado

Três pontos imaginários (em verde, na animação) são levados em conta para processar a curva. Um ponto que vai da origem da curva até o primeiro ponto de controle. Outro que vai de primeiro ponto de controle até o segundo ponto de controle. E por fim, um que vai do segundo ponto de controle até o ponto final.

GIF Animado

Todos percorrem suas trajetórias indo de 0% a 100% de completude, como um trem de ferro em seu trilho (onde não importa a distância, todos partem e chegam ao destino ao mesmo tempo). Como se formassem um triângulo, cujo lados relevantes estão representados na cor verde.

GIF Animado

Dessa forma, o triângulo também se move, como um conjunto.

GIF Animado

Outros dois pontos são igualmente importantes (em rosa), esses vão da origem ao destino de cada segmento de reta verde (que compõe o triângulo). Eles percorrem o trajeto indo, adivinhe, de 0% a 100%.


GIF Animado

Ligando esses dois pontos temos uma reta que tangencia a curva que queremos desenhar.

GIF Animado

Essa reta também percorre os pontos da curva indo de 0% a 100%.

GIF Animado

O ponto onde a reta tangente toca a curva funciona como um lápis virtual que a desenhará.

GIF Animado

Agora, colocando todo o modelo para funcionar, podemos entender como os pontos de controle conseguem determinar a curvatura a ser desenhada.

Não é elegante?
Dá vontade até de programar esse algoritmo só para ver tudo isso funcionando na prática. :D
Bem, o autor desse video-tutorial até já fez isso por nós (como parte de seu Mastering the bezier curve in sketch) usando JavaScript e HTML 5 na plataforma CodePen. O código pode ser estudado para se aprender mais sobre a parte da programação. A seguir, um exemplo de aplicação dessas curvas em um aplicativo gráfico.



Fontes: 
Curvas de Bezier por Liane R. Maggioni Silva Antunes. Acessado em 03/10/2014.
Mastering the Bézier Curve in Sketch por Peter Nowell. Acessado em 03/10/2014.
Curva de Bézier - Wikipedia
Paul de Casteljau - Wikipedia


[Via BBA]

Comentários

Nome

A divulgar Abelha acessibilidade acessório Acidente Acidentes Acústica Adágios Adestramento Administração adulto Aerodinâmica Aeronáutica África Agência Brasil Agropecuária AIDS Alcoolismo Alemanha Alerta Algoritmo Alimento Alzheimer Amazon Amazônia Análise Combinatória Anatomia Android Animação Animais de Estimação Animal Antropologia apagão Apicultura Apobec App Apple Apresentação aquário Argentina Arqueologia arquitetura Arte Astrobiologia Astronomia Ativismo Áudio Audio FX Áustria Autismo Auto-ajuda Automobilismo Automóvel aventura Aviação Aviônica Bahia Balonismo Banco de Dados Beber e Dirigir biblioteconomia Bicicleta Biografia Biologia Biologia Marinha bioquímica Biotecnologia Blog Blogger Boato Bomba borderô de desconto Botânica Brasil Brasília BRIC Browser Bugs CAD Calor Câmera lenta Campanha câncer cardiologia carreira Casemods Caso Isabella Nardoni Caso Snowden Celebridades celular Células-Tronco Cérebro Charge China Cibercultura Ciclovia Cidadania Ciência Cinema Clip Cliparts Cloud computing Comédia competência Complemento de dois Comportamento Computação Computação em grade Computação forense Computação Gráfica Computação Móvel Comunicação e Marketing Concurso Concurso Cultural de Natal Concursos Público Concursos Públicos Conectômica Conspiração Consumidor Consumismo contabilidade Contos Copa do Mundo Cordel Coreia do Norte Coreia do Sul Corpo Coruja cosmética cosmologia Criança Crime Crime Digital crise crise econômica crônica crônicas Cronologia CSS Cuba Culinária Cultura Curiosidades custos fixo custos variáveis Dança DAO Darwin Decoração demência Demografia Denúncia Dermatologia Desastre Natural Descoberta desconto duplicatas Desenho instrucional Desenvolvimento de jogos Design Dia das Mães Dia do professor diabetes Dica Dicas Didática Dieta diplomacia Direito Direito Eleitoral Direito Internacional Direito Tributário Direitos Humanos Disney Distrito Federal Documentário Doutorado download Drogas e-Book e-governo Ecologia economia Editoração Eletrônica Educação Educação a Distância educação física Educação sexual Efeitos Sonoros Egiptologia Eleições Eleições 2014 Eletricidade eletrônica empreendedorismo enciclopédia endocrinologia Enem Energia Energia Alternativa Energia Nuclear Engenharia Engenharia Civil Engenharia de materiais Engenharia de Software Engenharia Genética Engenharia Mecânica Enretenimento Ensino a Distância Ensino Superior Entomologia Entretenimento Entrevista Epidemiologia Equador Escândalo Escritório Espaço Espanha Espanhol Espeleologia Espetáculo Espionagem Esporte Estação Estágio Estatísticas estrutura de dados Ética EUA Evento Evolução Exercícios físicos Exobiologia experiência fábulas Facebook Farmacologia Favo featured Feminismo Férias Ferramentas FIFA Filantropia Filmes Filosofia Firefox Física Física Quântica Fisiologia Fisioterapia Flagrante Flamengo Folclore Fome Fonoaudiologia Fotografia Fotos em 360 graus França Francês frases Fraude Freeware Futebol Futurologia gadget Gafe Gastroenterologia Gastronomia Geek Genética Geofísica Geografia Geologia Geometria geopolítica Geriatria Gestão de Configuração Gestão de Projetos Gestão do conhecimento Ginecologia Glass Google Governo GPS Gradiente gramática Gravidez Grécia Grécia Antiga Guerra Guinness H2 Haiti hardware História HIV homenagem Horologia HPV HTML Humor Humor Negro IBM ICIJ Idioma IHC ilo ilusão ilusão de óptica ilusão de ótica ilusionismo Imagem 3D Imagens Imagine Cup Império Romano Imprensa Impressora 3D Incêndio Inclusão digital Índia Índios Infectologia Infográfico Informática Inglaterra Inglês Inovação Inteligência Artificial interativo Interface Interface Homem-Computador Interfaces Hápticas Internacional Internacionalização da Amazônia Internet Inundação Invenção Inventos iPad IPEA iphone Irã Iraque Israel Japão Java Java. jogos Jogos educativos Jogos Olímpicos Jornalismo Justiça Kinect Le Monde Diplomatique Brasil Letras Lexicografia Liderança Life Hacking Linguística Literatura Livro Lógica Logística Lua Maçonaria Malásia Malvinas Malware Mapa Mapas Marte Mastologia Matemática Matemática Financeira maternidade Mecânica Mecânica dos Fluidos Mecatrônica Medicina Medicina Esportiva Medicina Veterinária Meio Ambiente Mel melanoma Memória memorização Mente Mercado de Trabalho mercosul Mestrado meteorologia Metodologia Científica México Microbiologia Microsoft Mídia Social Militar Mineralogia Mistério MIT Mitologia Mobilidade Mobilidade Urbana MonaVie Montanhismo Moodle Mossad Motivação MSF Mudança Climática Mulher Multimídia museu Música MVC Nanotecnologia Nasa Natação Natal Natureza Negócios Neurociência Neurologia Nordeste Noruega notícias Novidades Novo Enem Números Nutrição Obama Obesidade Observatório da Imprensa Obstetrícia Oceanografia odontologia Offshore Leaks oftalmologia Olimpíadas oncologia ONU Opinião Óptica Oracle Oriente Médio Orkut Ornitologia ortografia Ortopedia ótica Otorrinolaringologia Paginadores paleontologia Paquistão Pará Paraguai parkinson Passeio virtual Patinação Pediatria Pensamentos performance Periférico Pesca Pesquisa Petição Petrobrás Petróleo Photoshop Pirataria planilha de custo Playstation 3 Plebiscito Pneumologia Podcast Poesia Poítica Política Portugal português Pós-graduação prazo médio Pré-sal Prêmio Nobel primatologia privacidade produtividade professor Hamilton Alves Programa Gratuito Programação Projeto Truco Promoção Propaganda Psicanálise Psicologia Psicologia Animal Psiquiatria Pública publicidade Publieditorial Quadrinhos Quads Qualidade Qualidade de Vida quimica química realidade aumentada realidade diminuída Realidade Virtual Reconhecimento de imagem Reconhecimento de voz Recorde Redação redes Referência Referendo Reforma Política Relacionamento Relações Internacionais Religião Responsabilidade Social Retrospectiva Rio 2016 Rio Grande do Norte Rio Grande do Sul robótica Roda Viva Roma roteiro RSA Rússia Samsung Sanitarismo Santa Catarina São Paulo saúde Savant Segunda Guerra Mundial Segurança Segurança da Informação Seleção Natural serviço Serviço Online Sexologia sexualidade Show SIGGRAPH Simulação Sismologia Sistema operacional Sistemas de Numeração Sites de Busca Sociedade Sociologia Software Software Livre Sol Sono Sony SOPA Suécia Sugestão de presentes Sun supercomputadores Sustentabilidade Tabagismo Talento precoce taxa de juros efetiva taxa de juros nominal Taxas Equivalentes Taxidermia Teatro Técnicas de Estudo Tecnologia Tecnologia da Informação TED TedMed TEDx Rio+20 TEDxAmazônia TEDxAsaSul Telefonia Televisão Temas Tempo Tendências Teologia teoria das supercordas Terremoto Terrorismo Testes Tipologia Tomada de Decisão tradução Trânsito transporte tributo Trigonometria Tubarão Turismo Tutorial Twitter UFG ufologia UFRJ universidade Urbanismo Urologia USP Utilidade Pública Utilitário Vale Vaticano Ventriloquismo Verão vestibular Vestimenta Vida Digital Vida Moderna Vida Selvagem Vídeo Videogame Vídeos Vídeos 360 Violência Vírus Visão Computacional Vôlei Vulcanologia Watergate Política Web 2.0 Web Application Web Semântica Web Seminar webdesign Webinar widget WikiLeaks Wikipedia Windows Xadrez YouTube Zoologia
false
ltr
item
Brasil Acadêmico Draft: Curvas Bézier: Como o computador desenha curvas
Curvas Bézier: Como o computador desenha curvas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-rDyRiew343EY_oDfr92FnEpJR00_Rp7clY35PeM4pPv57fDO-v1Tpjd0w3NCe9cuQ1_vTr0qrcK4pk9TLVMqU55LLrujrqrfvYsJ4UOFSVcmXoggOhJnd4VT8rn6FBHOZdxI3rlAO8/s320/curvasBezier.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS-rDyRiew343EY_oDfr92FnEpJR00_Rp7clY35PeM4pPv57fDO-v1Tpjd0w3NCe9cuQ1_vTr0qrcK4pk9TLVMqU55LLrujrqrfvYsJ4UOFSVcmXoggOhJnd4VT8rn6FBHOZdxI3rlAO8/s72-c/curvasBezier.jpg
Brasil Acadêmico Draft
https://draftbracad.blogspot.com/2014/10/curvas-bezier-como-o-computador-desenha.html
https://draftbracad.blogspot.com/
http://draftbracad.blogspot.com/
http://draftbracad.blogspot.com/2014/10/curvas-bezier-como-o-computador-desenha.html
true
7742307559183522523
UTF-8
Nenhuma artigo encontrado. VER TODOS Leia mais Responder Cancelar resposta Apagar Por Início PÁGINAS POSTS Ver Todos Indicado para você CATEGORIA ARQUIVO BUSCA TODOS ARTIGOS Nenhum artigo corresponde ao critério procurado Ir para Início Domingo Segunda Terça Quarta Quinta Sexta Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir Este conteúdo é PREMIUM Por favor, compartilhe para liberar Copiar todo o código Selecionar todo o código Todos os códigos foram copiados para o clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy