Curvas Bézier: Como o computador desenha curvas

Compartilhar

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

BLOGGER

$show=mobile

Nuvem de Categorias

Nome

#existepesquisanobrasil,2,Abelha,3,Acessibilidade,25,Acessórios,2,Acidente,52,Acústica,16,Adestramento,5,Administração,43,Aerodinâmica,4,Aeronáutica,9,África,6,Agência Bori,1,Agência Brasil,25,Agência FAPESP,5,Agência Fiocruz,6,Agência Porvir,1,Agência Senado,2,Agência USP,5,Agnotologia,1,Agricultura,7,Agropecuária,4,AirBNB,1,Albert Einstein,1,Alcoolismo,9,Alemanha,10,Alemão,4,Alerta,2,Algoritmo,8,Alimento,1,Alzheimer,4,Amazon,5,Amazônia,5,América Latina,1,Análise Combinatória,1,Análise de Texto,2,Anatomia,8,Android,3,Animação,52,Animais de Estimação,6,Animal,2,Antropologia,14,Apicultura,9,App,9,Apple,5,Apresentação,4,aquário,1,Argentina,4,Armamento,1,Arqueologia,6,arquitetura,33,Arte,172,Astrobiologia,3,Astrofísica,4,Astronomia,34,Ativismo,34,Áudio,3,Audio FX,2,Áustria,1,Autismo,2,Auto-ajuda,10,Automobilismo,16,Automóvel,22,aventura,3,Aviação,5,Aviônica,8,Bahia,2,Balonismo,3,Banco Central,1,Banco de Dados,5,Beber e Dirigir,1,biblioteconomia,6,Bicicleta,1,Biografia,18,Biologia,174,Biologia Marinha,15,bioquímica,7,Biotecnologia,25,Bitcoin,2,Blog,29,Blogger,33,Boato,6,Bomba,1,Botânica,6,BRASA,1,BRASA Leads,1,Brasil,40,Brasília,16,BRIC,1,Browser,11,Bugs,3,CAD,3,Calor,2,Caltech,1,Câmera lenta,1,Campanha,47,Canadá,1,cardiologia,16,Carnaval,2,carreira,3,Cartografia,3,Casemods,1,Caso Isabella Nardoni,1,Caso Snowden,1,Ceará,1,Celebridades,6,celular,24,Células-Tronco,5,Cérebro,2,Charge,22,ChatGPT,2,China,22,Cibercultura,3,Ciclovia,1,Cidadania,40,Ciência,220,Cinema,69,Climatologia,3,Clip,1,Cliparts,1,Cloud computing,4,Coaching,12,Comédia,2,competência,2,Complemento de dois,1,Comportamento,273,Computação,87,Computação em grade,5,Computação forense,3,Computação Gráfica,140,Computação Móvel,1,Computação Quântica,1,Comunicação e Marketing,151,Concurso,2,Concurso Cultural de Natal,1,Concursos Público,2,Concursos Públicos,4,Conectômica,1,Conferência,1,Congresso em Foco,1,Conspiração,2,Consumidor,7,Consumismo,3,contabilidade,2,Contos,55,Copa do Mundo,26,Cordel,3,Coreia do Norte,1,Coreia do Sul,1,Corpo,2,Coruja,1,cosmética,3,Cosmologia,21,Covid-19,99,Crash Course,1,Criança,1,Criatividade,4,Crime,48,Crime Digital,9,crise,11,crise econômica,8,Croácia,1,crônica,6,crônicas,5,Cronologia,1,CSS,3,Cuba,4,Culinária,8,Cultura,17,Curiosidades,113,custos fixo,1,custos variáveis,1,Dale Dougherty,2,Dança,6,DAO,1,Darwin,12,Davos,1,Debate,3,Decoração,1,demência,1,Demografia,3,Denúncia,12,Dermatologia,6,Desastre Natural,14,Descoberta,2,Desenho instrucional,19,Desenvolvimento de jogos,17,Desenvolvimento Pessoal,1,Design,33,Design Instrucional,18,Destaque,9,Dia das Mães,1,Dia do professor,1,diabetes,6,Dicas,66,Didática,1,Dieta,4,Dinamarca,1,diplomacia,3,Direito,187,Direito Eleitoral,2,Direito Internacional,30,Direito Militar,1,Direito Trabalhista,1,Direito Tributário,2,Direitos Autorais,4,Direitos Humanos,39,Disney,8,Distrito Federal,4,Documentário,71,Doutorado,1,download,3,Drogas,7,Drone,3,Dubai,1,e-Book,2,e-governo,2,EBC,1,Ecologia,89,Economia,118,Editoração Eletrônica,1,Educação,414,Educação a Distância,188,Educação Corporativa,6,educação física,19,Educação sexual,6,Efeitos Sonoros,4,Egiptologia,2,Eleições,30,Eleições 2014,12,Eleições 2018,5,Eleições 2020,2,Eleições 2022,1,Eletricidade,10,eletrônica,4,Elon Musk,1,Em Operários,1,Embrapa,4,empreendedorismo,7,enciclopédia,1,endocrinologia,6,Enem,3,Energia,17,Energia Alternativa,18,Energia Nuclear,12,Enfermagem,1,Engenharia,68,Engenharia Agrícola,1,Engenharia Civil,6,Engenharia de materiais,17,Engenharia de Software,5,Engenharia Genética,32,Engenharia Mecânica,2,Enretenimento,1,Ensino a Distância,11,Ensino Superior,5,Entomologia,7,Entretenimento,46,Entrevista,91,Entrevista.,1,Epidemiologia,70,Epistemologia,1,Equador,1,Escândalo,6,Escritório,1,ESMPU,1,Espaço,72,Espanha,1,Espanhol,2,Espeleologia,1,Espetáculo,8,Espionagem,20,Esporte,43,Estação,1,Estágio,2,Estatísticas,40,estrutura de dados,1,Ética,32,EUA,20,Europa,2,Evento,59,Evolução,5,Exercícios físicos,2,Exobiologia,3,experiência,43,fábulas,3,Facebook,20,Família,1,Farmacologia,23,Favo,1,Feminismo,1,Férias,1,Ferramentas,14,FIFA,2,Filantropia,4,Filmes,20,Filosofia,50,Finep,2,Finlândia,3,Fintech,1,Firefox,1,Física,119,Física Quântica,4,Fisiologia,10,Fisioterapia,6,Flagrante,2,Flamengo,1,Folclore,3,Fome,1,Fomento,1,Fonética,1,Fonoaudiologia,7,Fotografia,46,Fotos em 360 graus,6,França,10,Francês,4,Frase,3,Fraude,5,Freeware,75,Futebol,38,Futurologia,94,gadget,87,gadgets,1,Gafe,2,Gamificação,7,Gastroenterologia,5,Gastronomia,2,Geek,2,Genética,45,Geofísica,1,Geografia,57,Geologia,11,Geometria,6,geopolítica,21,Gerenciamento do Tempo,2,Geriatria,12,Gestão de Competências,2,Gestão de Configuração,2,Gestão de Pessoas,10,Gestão de Projetos,22,Gestão do conhecimento,7,Ginecologia,3,Glass,1,Google,81,Governo,4,GPS,1,Gradiente,1,gramática,15,Gravidez,1,Grécia,1,Grécia Antiga,2,Guerra,42,Guerra Civil,2,Guinness,1,H2,2,Haiti,3,hardware,38,História,216,HIV,1,Hololens,2,homenagem,46,Horologia,1,HPV,1,HTML,6,Humor,212,Humor Negro,9,IBGE,3,IBM,4,ICIJ,2,Idioma,56,IESB,2,IHC,8,ilo,29,ilusão,36,ilusionismo,5,Imagem 3D,16,Imagens,7,Imagine Cup,1,Império Romano,8,Imprensa,34,Impressora 3D,22,Imunologia,8,Incêndio,2,Inclusão digital,8,Índia,4,Índios,1,Infectologia,36,Infográfico,57,Informática,38,Inglaterra,4,Inglês,26,Inovação,204,Inspiração,1,Inteligência Artificial,159,intercâmbio,1,Interface,205,Interfaces Hápticas,24,Internacional,23,Internacionalização da Amazônia,3,Internet,166,Internet das Coisas,2,Inundação,2,Invenção,20,Inventos,6,iPad,1,IPEA,1,iphone,3,Irã,3,Iraque,1,Israel,7,Itália,2,Japão,5,Java,2,Java.,2,jogos,11,Jogos de Tabuleiro,5,Jogos educativos,19,Jogos Olímpicos,10,Jornalismo,72,José Saramago,1,Justiça,4,Ken Robinson,1,Kinect,10,Le Monde Diplomatique Brasil,9,Le Monde Diplomatique Brasil,1,Letras,2,Lexicografia,5,Liderança,4,Life Hacking,20,línguas estrangeiras,3,Linguística,11,Literatura,58,Livro,71,Lógica,26,Logística,4,Loterias,4,Lua,1,Maçonaria,4,Malásia,2,Malvinas,2,Malware,1,Mapa,96,Mário Sérgio Conti,1,Marte,4,Mastologia,1,Matemática,84,Matemática Financeira,1,maternidade,1,MEC,1,Mecânica,8,Mecânica dos Fluidos,2,Mecatrônica,47,Medalha Fields,1,Medicina,563,Medicina Esportiva,2,Medicina Veterinária,4,Meio Ambiente,129,Mel,1,melanoma,1,Memória,5,memorização,4,Mente,4,Mercado de Trabalho,85,mercosul,1,Mestrado,4,Metaverso,2,meteorologia,12,Metodologia Científica,58,México,1,Microbiologia,4,Microsoft,16,Mídia Social,60,Militar,15,Mineralogia,1,Mistério,3,MIT,15,Mitologia,2,Mobilidade,1,Mobilidade Urbana,9,Moda,1,MonaVie,1,Montanhismo,1,Moodle,7,Mossad,1,Motivação,1,Movimento Maker,3,MSF,1,Mudança Climática,30,Mulher,4,Multimídia,14,museu,16,Música,90,MVC,1,Nanotecnologia,36,Nasa,19,Natação,2,Natal,17,Natureza,2,Nefrologia,1,Negócios,31,Netflix,1,Neurociência,96,Neurologia,80,Nicolelis,1,Nordeste,2,Noruega,2,notícias,8,Novidades,18,Novo Enem,2,Números,2,Nutrição,72,Obama,1,Obesidade,11,Observatório da Imprensa,27,Obstetrícia,4,OCDE,1,Oceanografia,7,odontologia,10,Offshore Leaks,2,oftalmologia,11,Olimpíadas,9,oncologia,50,ONU,10,OpenAI,1,Opinião,107,Óptica,17,Oracle,1,Oriente Médio,5,Orkut,2,Ornitologia,1,ortografia,3,Ortopedia,4,Ótica,9,Otorrinolaringologia,2,Oxfam,3,Pacifismo,1,Paginadores,1,paleontologia,4,Palestina,1,Paquistão,1,Pará,2,Paraguai,2,parkinson,2,Passeio virtual,1,Patinação,1,Paulo Freire,1,Pedagogia,6,Pediatria,6,Pensamentos,3,performance,3,Periférico,1,Pesca,2,Pesquisa,259,Petição,1,Petrobrás,10,Petróleo,13,Photoshop,5,Pirataria,7,planilha de custo,1,Playstation 3,2,Plebiscito,3,Pneumologia,1,Podcast,7,Poesia,29,Política,320,Polônia,1,Portugal,8,português,19,Pós-graduação,2,Pré-sal,5,Prêmio Nobel,7,primatologia,1,Primeira Guerra Mundial,2,privacidade,25,produtividade,8,professor Hamilton Alves,2,Programa Gratuito,4,Programação,59,Projeção Mapeada,1,Projeto Truco,2,Promoção,1,Propaganda,5,Psicanálise,1,Psicologia,283,Psicologia Animal,25,Psiquiatria,17,Pública,14,publicidade,19,Publieditorial,6,PUC Minas,1,Quadrinhos,11,Quads,5,Qualidade,3,Qualidade de Vida,11,química,34,REA,2,realidade aumentada,47,realidade diminuída,2,Realidade Misturada,5,Realidade Virtual,50,Reconhecimento de imagem,12,Reconhecimento de voz,3,Recorde,1,Recoverit,1,Recuperar vídeos,1,Redação,1,redes,12,Referência,5,Referendo,1,Reforma Política,3,Reino Unido,2,Relacionamento,2,Relações Internacionais,41,Religião,43,Responsabilidade Social,4,Retrospectiva,1,Review,15,Rio 2016,6,Rio de Janeiro,3,Rio Grande do Norte,1,Rio Grande do Sul,1,Robert Oppenheimer,3,Robô,49,robótica,52,Roda Viva,49,Roma,6,roteiro,1,RSA,1,RTP,1,Rússia,6,Samsung,1,Sanitarismo,5,Santa Catarina,1,São Paulo,5,Saúde,621,Savant,1,Segunda Guerra Mundial,26,Segurança,128,Segurança da Informação,69,Seleção Natural,3,Séries,2,serviço,1,Serviço Online,1,Sexologia,2,sexualidade,5,Show,7,SIGGRAPH,1,Simulação,36,Singularity University,1,Síria,3,Sismologia,2,Sistema operacional,4,Sistemas de Numeração,1,Sites de Busca,22,Sociedade,5,Sociologia,53,Software,34,Software Livre,24,Sol,2,Sono,4,Sony,3,SOPA,2,Star Wars,1,Startup,2,Steve Cutts,1,Steve Jobs,1,Suécia,3,Sugestão de presentes,66,Sun,1,supercomputadores,2,Sustentabilidade,5,Tabagismo,6,Taiwan,1,Talento precoce,1,Taxas Equivalentes,1,Taxidermia,1,Teatro,26,Técnicas de Estudo,3,Tecnologia,599,Tecnologia da Informação,29,TED,446,TED-Ed,48,TedMed,2,TEDx,5,TEDx Rio+20,1,TEDxAmazônia,1,TEDxAsaSul,1,Telefonia,61,Televisão,43,Temas,1,Tempo,2,Tendências,13,Teologia,6,teoria das supercordas,1,Teoria dos Jogos,1,Terremoto,9,Terrorismo,15,Tesla,1,Testes,17,ticker,2,TikTok,1,Tipologia,8,Tomada de Decisão,1,tradução,5,Trânsito,12,transporte,59,Tributo,3,Trigonometria,1,Tubarão,2,Tunísia,1,Turismo,28,Tutorial,23,Twitter,10,Uber,7,Ucrânia,11,UFC,1,UFES,1,UFG,2,UFMG,1,ufologia,5,UFRJ,3,UFSC,1,UNB,1,UNESCO,1,Unicamp,4,UNIFESP,1,UNIP,1,universidade,6,Universidade Corporativa,1,Universidade da Califórnica,1,Universidade da Geórgia,1,Universidade da Pensilvânia,1,Universidade de Brasília,1,Universidade de Cambridge,2,Universidade de Chicago,1,Universidade de Columbia,1,Universidade de Michigan,1,Universidade de Princeton,1,Universidade de Rochester,1,Universidade de Washington,3,University College London,1,Urbanismo,26,Urologia,2,URSS,1,User Experience,1,USP,11,Utilidade Pública,4,Utilitário,3,Vale,1,Vaticano,1,Veículo Autônomo,9,Venezuela,1,Ventriloquismo,2,Verão,1,vestibular,3,Vestimenta,1,Vida Digital,7,Vida Moderna,18,Vida Selvagem,10,Videogame,119,Vídeos,988,Vídeos 360,1,Vietnã,1,Violência,5,Vírus,18,Visão Computacional,10,Vôlei,1,Vulcanologia,8,Watergate Política,1,WCIT 2016,2,WCIT 2017,1,Web,1,Web 2.0,29,Web Application,160,Web Semântica,2,Web Seminar,1,webdesign,13,Webinar,2,widget,2,WikiLeaks,37,Wikipedia,4,Windows,5,Xadrez,2,YouTube,6,Zika,1,Zimbábue,1,Zoologia,59,
ltr
item
Brasil Acadêmico: Curvas Bézier: Como o computador desenha curvas
Curvas Bézier: Como o computador desenha curvas
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwXZ5z0A972-noq4AJK9MzHXK6LKpA8r9QEDKYi3tjFcQW6GjpFKKDu8XkCXJar8YO47sKp0I5fttCEnY1nU6afwokq-VEg4-3iF4LwqgEJtkQFUcukvtUJJV-cGw0nf2pWwLWqMSndo/s320/curvasBezier.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPwXZ5z0A972-noq4AJK9MzHXK6LKpA8r9QEDKYi3tjFcQW6GjpFKKDu8XkCXJar8YO47sKp0I5fttCEnY1nU6afwokq-VEg4-3iF4LwqgEJtkQFUcukvtUJJV-cGw0nf2pWwLWqMSndo/s72-c/curvasBezier.jpg
Brasil Acadêmico
http://blog.brasilacademico.com/2014/10/curvas-bezier-como-o-computador-desenha.html
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/
http://blog.brasilacademico.com/2014/10/curvas-bezier-como-o-computador-desenha.html
true
3049085869098582068
UTF-8
Todos os posts carregados Nenhum post encontrado Ver todos Saiba mais Responder Cancelar resposta Apagar Por Início Páginas POSTS Ver todos Especialmente para você Categoria Arquivo Busca Todos os posts Nenhum post coincide com sua busca 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$$ minutos atrás 1 hora atrás $$1$$ horas atrás Ontem $$1$$ dias atrás $$1$$ semanas atrás Mais de 5 semanas atrás Seguidores Seguir Conteúdo PREMIUM fechado Passo 1: Compartilhar com a rede social Passo 2: Clique no link da sua rede social Copiar todo código Selecionar todo código Todos os código copiados para a memória Não posso copiar o código / textos, favor teclar [CTRL]+[C] (ou CMD+C no Mac) para copiar Tabela de Conteúdo