From 81c214afd982c07308c9a2fe525b38639c03b092 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sun, 9 Jun 2019 21:40:11 -0300 Subject: [PATCH 1/9] teste pagina inicial --- README-pt.md | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 109 insertions(+) create mode 100644 README-pt.md diff --git a/README-pt.md b/README-pt.md new file mode 100644 index 0000000..e0491e2 --- /dev/null +++ b/README-pt.md @@ -0,0 +1,109 @@ + + +# The Book of Shaders +*by [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) and [Jen Lowe](http://jenlowe.net/)* + +Este é um guia passo a passo através do universo complexo e abstrato dos Fragment Shaders. + +
+ +
+ +## Contents + +* [Sobre este livro](00/) + +* Começando + * [O que é um shader?](01/) + * [“Hello world!”](02/) + * [Uniformes](03/) + * [Executando seu shader](04/) + +* Algorithmic drawing + * [Shaping functions](05/) + * [Colors](06/) + * [Shapes](07/) + * [Matrices](08/) + * [Patterns](09/) + +* Generative designs + * [Random](10/) + * [Noise](11/) + * [Cellular noise](12/) + * [Fractional brownian motion](13/) + * Fractals + +* Image processing + * Textures + * Image operations + * Kernel convolutions + * Filters + * Others effects + +* Simulation + * Pingpong + * Conway + * Ripples + * Water color + * Reaction diffusion + +* 3D graphics + * Lights + * Normal-maps + * Bump-maps + * Ray marching + * Environmental-maps (spherical and cube) + * Reflect and refract + +* [Appendix:](appendix/) Other ways to use this book + * [How can I navigate this book offline?](appendix/00/) + * [How to run the examples on a Raspberry Pi?](appendix/01/) + * [How to print this book?](appendix/02/) + * [How can I collaborate?](appendix/03/) + * [An introduction for those coming from JS](appendix/04/) by [Nicolas Barradeau](http://www.barradeau.com/) + +* [Examples Gallery](examples/) + +* [Glossary](glossary/) + +## About the Authors + +[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, Buenos Aires, Argentina) is a New York based artist and developer. He explores interstitial spaces between organic and synthetic, analog and digital, individual and collective. In his work he uses code as an expressive language with the intention of developing a better together. + +Patricio studied and practiced psychotherapy and expressive art therapy. He holds an MFA in Design & Technology from Parsons The New School, where he now teaches. Currently he works as a Graphic Engineer at Mapzen making openSource mapping tools. + +
WebSite - Twitter - GitHub - Vimeo - Flickr
+ +[Jen Lowe](http://jenlowe.net/) is an independent data scientist and data communicator at Datatelling where she brings together people + numbers + words. She teaches in SVA's Design for Social Innovation program, cofounded the School for Poetic Computation, taught Math for Artists at NYU ITP, researched at the Spatial Information Design Lab at Columbia University, and contributed ideas at the White House Office of Science and Technology Policy. She's spoken at SXSW and Eyeo. Her work has been covered by The New York Times and Fast Company. Her research, writing, and speaking explore the promises and implications of data and technology in society. She has a B.S. in Applied Math and a Master's in Information Science. Often oppositional, she's always on the side of love. + +
WebSite - Twitter - GitHub
+ +## Acknowledgements + +Thanks [Scott Murray](http://alignedleft.com/) for the inspiration and advice. + +Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo), [Nicolas Barradeau](https://twitter.com/nicoptere), [Karim Naaji](http://karim.naaji.fr/) for contributing with support, good ideas and code. + +Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) and [Sawako](https://twitter.com/sawakohome) for the [Japanese translation (日本語訳)](?lan=jp) + +Thanks [Tong Li](https://www.facebook.com/tong.lee.9484) and [Yi Zhang](https://www.facebook.com/archer.zetta?pnref=story) for the [Chinese translation (中文版)](?lan=ch) + +Thanks [Jae Hyun Yoo](https://www.facebook.com/fkkcloud) for the Korean [translation (한국어)](?lan=kr) + +Thanks [Nahuel Coppero (Necsoft)](http://hinecsoft.com/) for the Spanish [translation (español)](?lan=es) + +Thanks [Nicolas Barradeau](https://twitter.com/nicoptere) and [Karim Naaji](http://karim.naaji.fr/) for the French [translation (français)](?lan=fr) + +Thanks [Andrea Rovescalli](https://www.earove.info) for the Italian [translation (italiano)](?lan=it) + +Thanks [Michael Tischer](http://www.mitinet.de) for the German [translation (deutsch)](?lan=de) + +Thanks [Sergey Karchevsky](https://www.facebook.com/sergey.karchevsky.3) for the Russian [translation (russian)](?lan=ru) + +Thanks to everyone who has believed in this project and [contributed with fixes](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) or donations. + +## Get new chapters + +Sign up for the news letter or [follow it on Twitter](https://twitter.com/bookofshaders) + +

From 774dda610a4ef9943fd3443f6d775603ecffc732 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sun, 9 Jun 2019 21:42:50 -0300 Subject: [PATCH 2/9] teste2 --- README-pt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README-pt.md b/README-pt.md index e0491e2..0acd536 100644 --- a/README-pt.md +++ b/README-pt.md @@ -19,7 +19,7 @@ Este é um guia passo a passo através do universo complexo e abstrato dos Fragm * [Uniformes](03/) * [Executando seu shader](04/) -* Algorithmic drawing +* Desenho algorítmico * [Shaping functions](05/) * [Colors](06/) * [Shapes](07/) From 89cd11503d7a4237c34df63291835dec90af9f62 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sun, 9 Jun 2019 21:44:53 -0300 Subject: [PATCH 3/9] ghh --- README-pt.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README-pt.md b/README-pt.md index 0acd536..3c580f0 100644 --- a/README-pt.md +++ b/README-pt.md @@ -19,7 +19,7 @@ Este é um guia passo a passo através do universo complexo e abstrato dos Fragm * [Uniformes](03/) * [Executando seu shader](04/) -* Desenho algorítmico +* Desenho algorítmico * [Shaping functions](05/) * [Colors](06/) * [Shapes](07/) From aa0ebbef950be70c21f00cf95ec181b749824d6f Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sun, 9 Jun 2019 22:12:56 -0300 Subject: [PATCH 4/9] pagini inicial --- README-pt.md | 106 +++++++++++++++++++++++++-------------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/README-pt.md b/README-pt.md index 3c580f0..f6a9459 100644 --- a/README-pt.md +++ b/README-pt.md @@ -20,90 +20,90 @@ Este é um guia passo a passo através do universo complexo e abstrato dos Fragm * [Executando seu shader](04/) * Desenho algorítmico - * [Shaping functions](05/) - * [Colors](06/) - * [Shapes](07/) - * [Matrices](08/) - * [Patterns](09/) - -* Generative designs - * [Random](10/) - * [Noise](11/) - * [Cellular noise](12/) - * [Fractional brownian motion](13/) - * Fractals - -* Image processing - * Textures - * Image operations - * Kernel convolutions - * Filters - * Others effects - -* Simulation + * [Funções de forma](05/) + * [Cores](06/) + * [Formas](07/) + * [Matrizes](08/) + * [Padrões](09/) + +* Designs generativos + * [Aletório](10/) + * [Ruído](11/) + * [Ruído celular](12/) + * [Movimento browniano fractal](13/) + * Fractais + +* Processamento de imagem + * Texturas + * Operações com imagens + * Convoluções núcleo (kernel + * Filtros + * Outros efeitos + +* Simulação * Pingpong * Conway * Ripples - * Water color - * Reaction diffusion + * Cor de água + * Difusão de reação -* 3D graphics - * Lights +* Gráficos 3D + * Luzes * Normal-maps * Bump-maps * Ray marching - * Environmental-maps (spherical and cube) - * Reflect and refract + * Environmental-maps (esféricas e cúbicas) + * Reflexão e refração -* [Appendix:](appendix/) Other ways to use this book - * [How can I navigate this book offline?](appendix/00/) - * [How to run the examples on a Raspberry Pi?](appendix/01/) - * [How to print this book?](appendix/02/) - * [How can I collaborate?](appendix/03/) - * [An introduction for those coming from JS](appendix/04/) by [Nicolas Barradeau](http://www.barradeau.com/) +* [Apêndice:](appendix/) Outras formas de usar este livro + * [Como posso navegar esse livro offline?](appendix/00/) + * [Como rodar os exemplo em um Raspberry Pi?](appendix/01/) + * [Como imprimir esse livro?](appendix/02/) + * [Como posso colaborar?](appendix/03/) + * [Uma introdução para quem vem do JS](appendix/04/) por [Nicolas Barradeau](http://www.barradeau.com/) -* [Examples Gallery](examples/) +* [Galeria de Exemplos](examples/) -* [Glossary](glossary/) +* [Glossário](glossary/) -## About the Authors +## Sobre os Autores -[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, Buenos Aires, Argentina) is a New York based artist and developer. He explores interstitial spaces between organic and synthetic, analog and digital, individual and collective. In his work he uses code as an expressive language with the intention of developing a better together. +[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) (1982, Buenos Aires, Argentina) é um artista e desenvolvedor, atualmente morando em New York. Ele explora os espaços entre o orgânico e sintético, analógico e digital, individual e coletivo. Em seu trabalho, ele usa código como linguagem de expressão com a intenção de desenvolver uma melhor união. -Patricio studied and practiced psychotherapy and expressive art therapy. He holds an MFA in Design & Technology from Parsons The New School, where he now teaches. Currently he works as a Graphic Engineer at Mapzen making openSource mapping tools. +Patricio estudou e praticou psicoterapia e terapia em arte expressiva. Tem um MFA em Design & Tecnologia pela Parsons The New School, onde ele agora leciona. Atualmente ele trabalha como Engenheiro Gráfico na Mapzen criando ferramentas openSource de mapeamento.
WebSite - Twitter - GitHub - Vimeo - Flickr
-[Jen Lowe](http://jenlowe.net/) is an independent data scientist and data communicator at Datatelling where she brings together people + numbers + words. She teaches in SVA's Design for Social Innovation program, cofounded the School for Poetic Computation, taught Math for Artists at NYU ITP, researched at the Spatial Information Design Lab at Columbia University, and contributed ideas at the White House Office of Science and Technology Policy. She's spoken at SXSW and Eyeo. Her work has been covered by The New York Times and Fast Company. Her research, writing, and speaking explore the promises and implications of data and technology in society. She has a B.S. in Applied Math and a Master's in Information Science. Often oppositional, she's always on the side of love. +[Jen Lowe](http://jenlowe.net/) é uma cientista de dados independente e comunicadora de dados na Datatelling onde ela junta pessoas + números + palavras. Ela dá aulas no programa Design for Social Innovation da SVA, co-fundou a School for Poetic Computation, ensinou Matemática para Artistas na NYU ITP, pesquisouno Spatial Information Design Lab da Columbia University, e contribuiu com ideias na White House Office of Science and Technology Policy. Já falou na SXSW e Eyeo. Seu trabalho já foi coberto pelo The New York Times e a Fast Company. Sua pesquisa, escrita, e discurso exploram as promessas e implicações dos dados e a tecnologia na sociedade. Ela tem um B.S. em Matemática Aplicadae e Master's em Ciência da Informação. Geralmente em oposição a isso tudo, ela sempre está do lado do amor.
WebSite - Twitter - GitHub
-## Acknowledgements +## Agradecimentos -Thanks [Scott Murray](http://alignedleft.com/) for the inspiration and advice. +Obrigado a [Scott Murray](http://alignedleft.com/) pela inspiração e conselhos. -Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo), [Nicolas Barradeau](https://twitter.com/nicoptere), [Karim Naaji](http://karim.naaji.fr/) for contributing with support, good ideas and code. +Obrigado a [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo), [Nicolas Barradeau](https://twitter.com/nicoptere), [Karim Naaji](http://karim.naaji.fr/) por contribuir com apoio, boas ideia e código. -Thanks [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) and [Sawako](https://twitter.com/sawakohome) for the [Japanese translation (日本語訳)](?lan=jp) +Obrigado a [Kenichi Yoneda (Kynd)](https://twitter.com/kyndinfo) e [Sawako](https://twitter.com/sawakohome) pela [tradução japonesa (日本語訳)](?lan=jp) -Thanks [Tong Li](https://www.facebook.com/tong.lee.9484) and [Yi Zhang](https://www.facebook.com/archer.zetta?pnref=story) for the [Chinese translation (中文版)](?lan=ch) +Obrigado a [Tong Li](https://www.facebook.com/tong.lee.9484) e [Yi Zhang](https://www.facebook.com/archer.zetta?pnref=story) pela [tradução chinesa (中文版)](?lan=ch) -Thanks [Jae Hyun Yoo](https://www.facebook.com/fkkcloud) for the Korean [translation (한국어)](?lan=kr) +Obrigado a [Jae Hyun Yoo](https://www.facebook.com/fkkcloud) pela tradução [coreana (한국어)](?lan=kr) -Thanks [Nahuel Coppero (Necsoft)](http://hinecsoft.com/) for the Spanish [translation (español)](?lan=es) +Obrigado a [Nahuel Coppero (Necsoft)](http://hinecsoft.com/) pela tradução [espanhola](?lan=es) -Thanks [Nicolas Barradeau](https://twitter.com/nicoptere) and [Karim Naaji](http://karim.naaji.fr/) for the French [translation (français)](?lan=fr) +Obrigado a [Nicolas Barradeau](https://twitter.com/nicoptere) e [Karim Naaji](http://karim.naaji.fr/) pela tradução [francesa](?lan=fr) -Thanks [Andrea Rovescalli](https://www.earove.info) for the Italian [translation (italiano)](?lan=it) +Obrigado a [Andrea Rovescalli](https://www.earove.info) pela tradução [italiana](?lan=it) -Thanks [Michael Tischer](http://www.mitinet.de) for the German [translation (deutsch)](?lan=de) +Obrigado a [Michael Tischer](http://www.mitinet.de) pela tradução [alemã](?lan=de) -Thanks [Sergey Karchevsky](https://www.facebook.com/sergey.karchevsky.3) for the Russian [translation (russian)](?lan=ru) +Obrigado a [Sergey Karchevsky](https://www.facebook.com/sergey.karchevsky.3) pela tradução [russa](?lan=ru) -Thanks to everyone who has believed in this project and [contributed with fixes](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) or donations. +Obrigado a todos que acreditaram nesse projeto e [contribuiram com acertos](https://github.com/patriciogonzalezvivo/thebookofshaders/graphs/contributors) ou doações. ## Get new chapters -Sign up for the news letter or [follow it on Twitter](https://twitter.com/bookofshaders) +Assine as newsletters ou [siga no Twitter](https://twitter.com/bookofshaders) -

+

From f6c1020174a575816da8e760b25a2e35b4f2de57 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sat, 17 Aug 2019 17:40:41 -0300 Subject: [PATCH 5/9] Portuguese version. intro to chapter 4. --- 00/README-pt.md | 47 ++++++++++++ 00/TITLE-pt.md | 1 + 01/README-pt.md | 50 +++++++++++++ 01/TITLE-pt.md | 2 + 02/README-pt.md | 53 +++++++++++++ 03/README-pt.md | 61 +++++++++++++++ 03/SUMMARY-pt.md | 7 ++ 04/README-pt.md | 190 +++++++++++++++++++++++++++++++++++++++++++++++ 04/TITLE-pt.md | 1 + 9 files changed, 412 insertions(+) create mode 100644 00/README-pt.md create mode 100644 00/TITLE-pt.md create mode 100644 01/README-pt.md create mode 100644 01/TITLE-pt.md create mode 100644 02/README-pt.md create mode 100644 03/README-pt.md create mode 100644 03/SUMMARY-pt.md create mode 100644 04/README-pt.md create mode 100644 04/TITLE-pt.md diff --git a/00/README-pt.md b/00/README-pt.md new file mode 100644 index 0000000..d675a43 --- /dev/null +++ b/00/README-pt.md @@ -0,0 +1,47 @@ +# Introduction + + + +As imagens acima foram feitas de maneiras diferentes. A primeira foi feita pela mão do Van Gogh, aplicando-se camada a camada de tinta. Levou horas. A segunda foi produzida em segundos pela combinação de quatro matrizes de pixel: uma para ciano, uma para magenta, um para amarelo e outro pra preto. A diferença chave é que a segunda imagem é produzida de forma não-serial (ou seja, não foi passo a passo, mas todos ao mesmo tempo). + +Este livro é sobre a técnica computacional revolucionária, *fragment shaders*, que está levando imagens geradas digitalmente a um nível mais alto. Você pode pensar nisso como sendo o equivalente à impressa de Gutenberg para gráficos. + +![Gutenberg's press](gutenpress.jpg) + +Fragment shaders te dão controle total sobre os pixels rendereizados na tela, em velocidade super. É por isso que eles são usados para todas as finalidades, desde filtros de vídeo em celulares até videogames 3D incríveis. + +![Journey by That Game Company](journey.jpg) + +Nos capítulos seguintes, você vai descobrir o quão incrivelmente rápida e poderosa é essa técnica, e como aplicá-la para seu trabalho pessoal e profissional. + +## Para quem é este livro? + +Este livro é escrito para programadores criativos, desenvolvedores de jogos e engenheiros que têm experiência em codificação, um conhecimento básico de álgebra linear e trigonometria, e quem quiser levar seu trabalho a um novo nível excitante de qualidade gráfica (se você quer aprender como programar, eu recomendo fortemente que comece com o [Processing](https://processing.org/) e volte mais tarde quando estiver comfortável com isso.). + +Este livro vai te ensinar como usar e integrar shaders em seus projetos, melhorando a qualidade gráfica e performance. Devido ao fato de shaders GLSL (OpenGL Shading Language) compilarem e rodarem em grande variedade de plataformas, você vai poder aplicar o que aprendeu aqui para qualquer ambiente que usar OpenGL, OpenGL ES ou WebGL. Em outras palavras, você vai poder aplicar e usar seu conhecimento com sketches do [Processing](https://processing.org/), aplicações [openFrameworks](http://openframeworks.cc/) , instalações interativas [Cinder](http://libcinder.org/) , websites [Three.js](http://threejs.org/) ou jogos iOS/Android. + +## O que este livro cobre? + +Este livro vai focar no uso de shaders de pixel em GLSL. Primeiro vamos definir o que são os shaders; então vamos aprender como fazer formas proceduralmente, padrões, texturas e animações com eles. Você vai aprender as fundações da linguagem de shaders e como aplicar em cenários mais úteis, como: processamento de imagens (operações com imagens, convoluções de matrizes, blurs, filtros de cores, tabelas de lookup, e outros efeitos) e simulações (jogo da vida de Conway, reação e difusão de Gray-Scott, ondas em água, efeitos de cores de água, células de Voroni, etc). Em direção ao fim do livro, vamos ver um conjunto de técnicas avançadas baseadas em Ray Marching. + +*Existem exemplos interativos para você brincar em cada capítulo.* Quando você muda o código, vai ver as mudanças imediatamente. os conceitos podem ser abstratos e confusos, então os exemplos interativos são essenciais para ajudá-lo a aprender o material. Quanto mais rápido você colocar os conceitos em movimento, mais fácil será o processo de aprendizagem. + +O que esse livro não cobre: + +* Este *não é* um livro de openGL ou webGL. OpenGL/webGL é um assunto maior que GLSL ou fragment shaders. Para aprender mais sobre openGL/webGL eu recomendo dar uma olhada em: [OpenGL Introduction](https://open.gl/introduction), [the 8th edition of the OpenGL Programming Guide](http://www.amazon.com/OpenGL-Programming-Guide-Official-Learning/dp/0321773039/ref=sr_1_1?s=books&ie=UTF8&qid=1424007417&sr=1-1&keywords=open+gl+programming+guide) (também conhecido como o livro vermelho) ou [WebGL: Up and Running](http://www.amazon.com/WebGL-Up-Running-Tony-Parisi/dp/144932357X/ref=sr_1_4?s=books&ie=UTF8&qid=1425147254&sr=1-4&keywords=webgl) + +* Este *não é* um livro de matemática. Embora venhamos a cobrir um bom número de algoritmos e técnicas que se baseiam no entendimento de álgebra e trigonometria, não vamos explicá-los em detalhes. Para questões relacionadas com matemática eu recomendo que você tenha um desses livros por perto: [3rd Edition of Mathematics for 3D Game Programming and computer Graphics](http://www.amazon.com/Mathematics-Programming-Computer-Graphics-Third/dp/1435458869/ref=sr_1_1?ie=UTF8&qid=1424007839&sr=8-1&keywords=mathematics+for+games) ou [2nd Edition of Essential Mathematics for Games and Interactive Applications](http://www.amazon.com/Essential-Mathematics-Games-Interactive-Applications/dp/0123742978/ref=sr_1_1?ie=UTF8&qid=1424007889&sr=8-1&keywords=essentials+mathematics+for+developers). + +## O que você precisa para começar? + +Não muito! Se você tem um browser modernos que possa rodar WebGL (como Chrome, Firefox ou Safari) e uma conexão à internet, clique no botão para o próximo capítulo no fim desta página para começar. + +Alternativamente, baseado no que você tem, ou no que você precisa deste livro você pode: + +- [Fazer uma versão offline deste livro](https://thebookofshaders.com/appendix/00/) + +- [Rodar os exemplos em um Raspberry Pi sem um browser](https://thebookofshaders.com/appendix/01/) + +- [Fazer um PDF do livro para imprimir](https://thebookofshaders.com/appendix/02/) + +- Checar o [repositório GitHub](https://github.com/patriciogonzalezvivo/thebookofshaders) deste livro para ajudar a resolver questões e compartilhar código. diff --git a/00/TITLE-pt.md b/00/TITLE-pt.md new file mode 100644 index 0000000..0d340c9 --- /dev/null +++ b/00/TITLE-pt.md @@ -0,0 +1 @@ +# Introdução diff --git a/01/README-pt.md b/01/README-pt.md new file mode 100644 index 0000000..d333d9b --- /dev/null +++ b/01/README-pt.md @@ -0,0 +1,50 @@ +# Começando +## O que é um shader? + +No capítlo anterior, nós descrevemos shaders como o equivalente da imprensa de Gutenberg para os gráficos. Por quê? E mais importante: o que é um shader? + +![From Letter-by-Letter, Right: William Blades (1891). To Page-by-page, Left: Rolt-Wheeler (1920).](print.png) + +Se você já tem experiência em desenhar com computadores, já sabe que nesse processo você desenha um círculo, depois um retângulo, uma linha, alguns triângulos, até compor a imagem que você quer. Esse processo é muito similar a escrever uma carta ou livro à mão - é um conjunto de instruções em que se faz uma tarefa depois da outra. + +Shaders também são um conjunto de instruções, mas as instruções são executadas todas de uma vez só para cada pixel na tela. Isso quer dizer que o código que você escreve tem que se comportar de modo diferente dependendo da posição do pixel na tela. Como um tipo na imprensa, seu programa vai funcionar como uma função que recebe uma posição e retorna uma cor, e quando é compilado, vai rodar extraordinariamente rápido. + +![Chinese movable type](typepress.jpg) + +## Por que os shaders são rápidos? + +Para responder isso, eu lhe apresento as maravilhas do *processamento paralelo*. + +Imagine a CPU do seu computador como uma grande esteira ou tubo industrial, e cada tarefa como algo que passa por ela - como uma linha de produção. Algumas tarefas são maiores que outras, o que significa que requerem mais tempo e energia para se lidar com elas. Dizemos assim que elas requerem mais poder de processamento. Por causa da arquitetura dos computadores, os trabalhos são forçados a serem executados em série; cada tarefa tem que ser terminada uma de cada vez. Computadores modernos geralmente têm grupos de quatro processadores que trabalham como essas linhas de produção, completando tarefas uma após a outra para manter as coisas rodando suavemente. Cada esteira é conhecida como *thread*. + +![CPU](00.jpeg) + +Videogames e outras aplicações gráficas requerem muito mais poder de processamento que outros programas. Por causa de seu conteúdo gráfico, eles têm que fazer um número gigantesco de operações pixel-a-pixel. Cada pixel na tela precisa ser calculado, e em jogos 3D as geometrias e perspectivas precisam ser calculadas também. + +Vamos voltar à nossa metáfora de tubos e tarefas. Cada pixel na tela representa uma pequena tarefa simples. Individualmente, cada tarefa de pixel não é uma grande questão para a CPU, mas (e esse é o problema) as pequenas tarefas têm que ser feitas em cada pixel na tela. Isso significa, em uma tela antiga em 800x600, que 480.000 pixels têm que ser processados por frame, o que significa 14.400.000 cálculos por segundo! Sim! Isso é um problema grande o suficiente para sobrecarregar um microprocessador. Em uma tela moderna retina 2880x1800, rodando a 60 frames por segundom esse cálculo daria até mais 311.040.000 cálculos por segundo. Como os engenheiros gráficos resolveram esse problema? + +![](03.jpeg) + +É aí que o processamento paralelo se torna uma boa solução. Ao invés de ter uma dupla de microprocessadores grandes e poderosos, ou *tubos*, é mais inteligente ter um monte de pequenos microprocessadores rodando em paralelo ao mesmo tempo. É isso que é uma GPU - Unidade de Processamento Gráfico. + +![GPU](04.jpeg) + +Imagine os minúsculos processadores como uma mesa de tubos, e os dados de cada pixel como sendo uma bola de ping-pong. 14.400.000 bolas de ping-pong por segundo podem obstruir quase qualquer tubo. Mas uma mesa de 800x600 pequenos tubos recebendo 30 ondas de 480.000 pixels por segundo pode ser manuseado suavemente. Isso funciona do mesmo jeito para resoluções mais altas - quanto mais hardware paralelo você tem, maior o stream que ele pode gerenciar. + +Um outro "super poder" da GPU são funções especiais matemáticas aceleradas via hardware, de modo que operações matemáticas complicadas são resolvidas diretamente pelos microchips ao invés de serem por software. Isso significa operações trigonométricas e de matrix extra rápidas - tanto quanto a eletricidade pode ir. + +## O que é GLSL? + + +GLSL significa "openGL Shading Language", que é o padrão específico dos programas shader que você vai ver nos próximos capítulos. Existem outros tipos de shaders, dependendo do hardware and Sistema Operacional. Aqui vamos trabalhar com as especificações openGL reguladas pelo [Khronos Group](https://www.khronos.org/opengl/). Entender a história do OpenGL pode ser de muita ajuda para entender a maioria das convenções estranhas que ele tem, e para isso eu recomendo dar uma olhada em: [openglbook.com/chapter-0-preface-what-is-opengl.html](http://openglbook.com/chapter-0-preface-what-is-opengl.html) + +## Por que os shaders são tão dolorosos? + +Como o Tio Ben disse, “com grandes poderes vêm grandes responsabilidades,” e computação paralela segue essa regra; o design arquitetural poderoso da GPU vem com suas restrições e dificuldades. + +Para rodar em paralelo, cada tubo, ou thread, precisa ser independente dos demais. Digamos que as threads são *cegas* para o que o resto das threads está fazendo. Esta restrição implica em que todo o dado deve fluir na mesma direção. Então, é impossível checar o resultado de outra thread, modificar os dados de entrada, ou passar a saída de uma thread para outra. Permitir comunicação entre threads coloca a integridade dos dados em risco. + + +Além disso, a GPU mantém o microprocessador (os tubos) constantemente ocupado; assim que ficam livres, já recebem nova informação para processar. É impossível para uma thread saber o que ela estava fazendo no momento anterior. Ela poderia estar desenhando um botão da UI do Sistema Operacional, então renderizar uma parte do céu num jogo, e depois mostrar o texto de um email. Cada thread não é apenas **cega** mas também **sem memória**. Além da abstração requerida para codificar uma função geral que muda o resultado pixel a pixel dependendo de sua posição, as restrições de cegueira e falta de memória tornam os shaders pouco populares entre os programadores principiantes. + +Não se preocupe! Nos capítulos seguintes, vamos aprender passo a passo como sair de um nível simples ao avançado nas computações de shaders. Se você está lendo isso com um browser moderno, vai poder brincar com exemplos interativos. Então, não vamos mais demorar com a diversão, e aperte *Próximo >>* para pular para o código! diff --git a/01/TITLE-pt.md b/01/TITLE-pt.md new file mode 100644 index 0000000..2c66c5d --- /dev/null +++ b/01/TITLE-pt.md @@ -0,0 +1,2 @@ +# Começando +## O que é um shader? diff --git a/02/README-pt.md b/02/README-pt.md new file mode 100644 index 0000000..399ac0d --- /dev/null +++ b/02/README-pt.md @@ -0,0 +1,53 @@ +## Hello World + +Geralmente, o exemplo do "Hello world!" é o primeiro passo para aprender uma nova linguagem. É um programa simples de uma linha, que exibe uma mensagem alegre de boas-vindas. + +No mundo da GPU, renderizar texto é uma tarefa complicada demais para um primeiro passo, então, ao invés, vamos escolher uma cor brilhante para mostrar nosso entusiasmo! + +
+ +Se você está lendo este livro num browser, o bloco de código antetior é interativo. Isso significa que você pode clicar e mudar qualquer pedaço do código que quiser explorar. Mudanças serão atualizadas imediatamente graças à arquitetura da GPU, que compila e substitui os shaders *on the fly*. Faça uma tentativa, mude os valores da linha 6. + +Embora essas simples linhas de código não se pareçam muito, podemos inferir um conhecimento substancial delas: + +1. Shader Language tem uma única função `main` que retorna uma cor no fim. Isso é similar ao C. + +2. A cor final do pixel é associada à variável global reservada `gl_FragColor`. + +3. Essa linguagem, do estilo do C, tem *variáveis* internas já construídas (como `gl_FragColor`), *funções* and *tipos*. Neste caso, acabamos ser apresentados ao `vec4` que é um vetor de quatro dimensões de precisão de ponto flutuante. Mais tarde vamos ver mais tipos como `vec3` e `vec2` juntos com os populares:`float`, `int` e `bool`. + +4. Se olharmos de perto o tipo `vec4` podemos inferir que os quatro argumentos correpondem aos canais RED (vermelho), GREEN (verde), BLUE (azul) e ALPHA. Podemos também ver que esses valores são *normalizados*, o que significa que eles vão de `0.0` a `1.0`. Depois vamos aprender como a normalização faz com que fique mais fácil *mapear* valores entre variáveis. + +5. Outra *característica do C* importante que podemos ver nesse exemplo é a presença de macros de preprocessador. Macros são parte de um passo da pré-compilação. Com elas, é possível definir (`#define`) variáveis globais e fazer algumas operações condicionais básicas (com `#ifdef` e `#endif`). Todos os comandos de macro começam com hashtag (`#`). A pré-compilação acontece logo antes de compilar e copia todas as chamadas a `#defines` e checa as condicionais `#ifdef` (é definido) e `#ifndef` (não é definido). No nosso "hello world!", só inserimos a linha 2 se `GL_ES` estiver definida, o que geralmente acontece quando o código é compilado em dispositivos móveis e browsers. + +6. Tipos float são vitais em shaders, então o nível de *precisão* é crucial. Precisão mais baixa significa renderização mais rápida, ao custo da qualidade. Você pode ser detalhista e especificar a precisão de cada variável que usa ponto flutuante. Na primeira linha (`precision mediump float;`) estamos setando todos os floats para precisão média. Mas podemos escolher setar para baixa precisão (`precision lowp float;`) ou alta (`precision highp float;`). + +7. Por fim, e talvez mais importantem o detalhe é que specs GLSL não garantem que as variáveis serão convertidas automaticamente. O que isso quer dizer? Os fabricantes têm diferentes abordagens para acelerar os gráficos que o cartão processa mas eles são forçados a garantir specs mínimas. Conversão automática não é uma delas. Em nosso exemplo “hello world!” o `vec4` tem precisão de ponto flutuante e para isso, ele espera que seja associado com valores `floats`. Se você quiser fazer um código bom e consistente e não gastar horas debugando telas em branco, acostume-se a colocar o ponto (`.`) em seus floats. Esse tipo de código não vai funcionar sempre: + +```glsl +void main() { + gl_FragColor = vec4(1,0,0,1); // ERRO +} +``` + +Agora que descrevemos os elementos mais relevantes do nosso programa "hello world!", é hora de clicar no blodo de código e começar a desafiar com tudo o que aprendemos. Você vai notar que em caso de erros, o programa vai falhar a compilação, mostrando uma tela em branco. Existem algumas coisas legais que você pode tentar, por exemplo: + +* Tente substituir os floats com inteiros, sua placa gráfica pode ou não tolerar esse comportamento. + +* tente descomentar a linha 6 e não definir um valor de pixel na função. + +* Tente fazer uma função separada que retorne uma cor específica e use a função dentro do `main()`. Como dica, aqui está o código para uma função que retorna a cor vermelha: + +```glsl +vec4 red(){ + return vec4(1.0,0.0,0.0,1.0); +} +``` + +* Há vários modos de contruit tipos `vec4`, tente descobrir outras formas. O seguinte é uma delas: + +```glsl +vec4 color = vec4(vec3(1.0,0.0,1.0),1.0); +``` + +Embora esse exemplo não seja muito excitante, é o exemplo mais básico - estamos mudando todos os pixels dentro do canvas para exatamente a mesma cor. No próximo capítulo, vamos ver como mudar a cor do pixel usando dois tipos de entrada: espaço (o lugar do pixel na tela) e tempo (o número de segundos desde que a página foi carregada). diff --git a/03/README-pt.md b/03/README-pt.md new file mode 100644 index 0000000..114c3dd --- /dev/null +++ b/03/README-pt.md @@ -0,0 +1,61 @@ +## Uniformes + +Até agora, nós vimos como a GPU gerencia um grande número de threads, cada uma responsável por associar a cor a uma fração da imagem. Embora cada thread paralela seja cega às outras, precisamos conseguir enviar entradas da CPU para todas as threads. Por causa da arquitetura das placas gráficas, essas entradas vão ser iguais (*uniform*) para todas as threads e necessariamente setadas como *read only*. Em outras palavrasm cada thread recebe os mesmos dados que pode ler, mas não pode mudar. + +Essas entradas são chamadas de `uniform` em vêm na maioria dos tipos suportados: `float`, `vec2`, `vec3`, `vec4`, `mat2`, `mat3`, `mat4`, `sampler2D` e `samplerCube`. Uniformes são definidos com o tipo correspondente no topo do shader, logo depois de associar a precisão default. + +```glsl +#ifdef GL_ES +precision mediump float; +#endif + +uniform vec2 u_resolution; // Tamanho do Canvas (width,height) +uniform vec2 u_mouse; // posição do mouse em pixels da tela +uniform float u_time; // Tempo em segundos desde carregado +``` + +Você pode imaginar nos uniforms como sendo pequenas pontes entre a CPU e a GPU. Os nomes vão variar de uma implementação para outra, mas nessa série de exemplos eu sempre vou passar `u_time` (tempo em seguntos desde que shader começou), `u_resolution` (tamanho do 'letreiro' onde o shader está sendo desenhado) e `u_mouse` (posição do mouse dentro do letreiro, em pixels). Vou seguir convenção de colocar `u_` antes do nome do uniform para ser explícito sobre a natureza dessa variável, mas você vai encontrar todos os tipos de nomes para os uniformes. Por exemplo [ShaderToy.com](https://www.shadertoy.com/) usa os mesmos uniformes, mas com os seguintes nomes: + +```glsl +uniform vec3 iResolution; // resolução da viewport (em pixels) +uniform vec4 iMouse; // coordenadas dos pixels do mouse . xy: atual, zw: clique +uniform float iTime; // tempo de execução do shader (em segundos) +``` + +Chega de papo, vamos ver os uniforms em ação. No código a seguir, usamos `u_time` - o número de segundos desde que o shader começou a executar - junto com uma função seno para animar a transição da quantidade de vermelho no letreiro. + +
+ +Como você pode ver, GLSL tem mais surpresas. A GPU tem funções de ângulo, trigonométricas e exponenciais, aceleradas por hardware. Algumas dessas funções são: [`sin()`](../glossary/?search=sin), [`cos()`](../glossary/?search=cos), [`tan()`](../glossary/?search=tan), [`asin()`](../glossary/?search=asin), [`acos()`](../glossary/?search=acos), [`atan()`](../glossary/?search=atan), [`pow()`](../glossary/?search=pow), [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log), [`sqrt()`](../glossary/?search=sqrt), [`abs()`](../glossary/?search=abs), [`sign()`](../glossary/?search=sign), [`floor()`](../glossary/?search=floor), [`ceil()`](../glossary/?search=ceil), [`fract()`](../glossary/?search=fract), [`mod()`](../glossary/?search=mod), [`min()`](../glossary/?search=min), [`max()`](../glossary/?search=max) and [`clamp()`](../glossary/?search=clamp). + +Agora é a hora de brincar de novo com o código acima. + +* Diminua a frequência até que a mudança de cor seja quase imperceptível. + +* Acelere até você ver cada cor sem efeito de flicker. + +* Brinque com os três canais (RGB) em frequências diferentes para conseguir padrões e comportamentos interessantes. + +## gl_FragCoord + +Da mesma forma que a GLSL nos dá um output default, `vec4 gl_FragColor`, ela também nos dá um input default, `vec4 gl_FragCoord`, que contém aos coordenadas na tela do *pixel* ou *fragmento da tela* que a thread ativa está trabalhando. Com `vec4 gl_FragCoord`, sabemos onde uma thread está trabalhando dentro do letreiro. Neste caso, não chamamos de `uniform` porque ela será diferente de uma thread para a outra, então a `gl_FragCoord` é chamada de *variante*. + +
+ +No código acima, nós *normalizamos* a coordenada do fragmento dividindo-a pela resolução total do letreiro. Fazendo isso, os valores ficarão entre `0.0` e `1.0`, o que torna mais fácil mapear os valores X e Y para os canais RED e GREEN. + +Na "shaderlândia", não temos muitos recursos para depurar, além de associar cores fortes a variáveis e tentar fazer um sentido com elas. Você vai descobrir que, às vezes, codificar em GLSL é muito parecido com colocar navios dentro de garrafas. É igualmente difícil, bonito e gratificante. + +![](08.png) + +Agora é a hora de tentar e desafiar nosso entendimento desse código. + +* Você pode dizer onde fica a coordenada `(0.0, 0.0)` em nosso canvas? + +* E as coordenadas `(1.0, 0.0)`, `(0.0, 1.0)`, `(0.5, 0.5)` e `(1.0, 1.0)`? + +* Você consegue imaginar como usar `u_mouse` sabendo que os valores são em pixels e NÃO valores normalizados? Você pode usar isso para mover as cores ao redor? + +* Você pode imaginar uma forma interessante de mudar esse padrão de cores usando as coordenadas `u_time` e `u_mouse`? + +Depois de fazer esses exercícios, você poderia pensar em que mais poderia tentar seus novos poderes de shader. No capítulo seguinte, vamos ver como fazer sua própria ferramenta de shader em three.js, Processing, e openFrameworks. diff --git a/03/SUMMARY-pt.md b/03/SUMMARY-pt.md new file mode 100644 index 0000000..7a2089c --- /dev/null +++ b/03/SUMMARY-pt.md @@ -0,0 +1,7 @@ +Aprenda como usar variáveis Uniform. Variáveis uniform, ou simplesmente *uniformes* são as variáveis que carregam informação acessível igualmente de todas as threads do seu shader. O [editor GSLS](http://editor.thebookofshaders.com/) tem três uniformes setados para você. + +```glsl +uniform vec2 u_resolution; // Tamanho do canvas (largura,altura) +uniform vec2 u_mouse; // posição do mouse em pixels da tela +uniform float u_time; // Tempo em segundos desde carregamento +``` diff --git a/04/README-pt.md b/04/README-pt.md new file mode 100644 index 0000000..32cb0e6 --- /dev/null +++ b/04/README-pt.md @@ -0,0 +1,190 @@ +## Rodando o seu shader + +Como parte da construção deste livro, e minha prática de arte, eu fiz um ecossistema de ferramentas para criar, exibir e realizar curadoria de shaders. Essas ferramentas trabalham consistentemente em Linux, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) e browsers sem a necessidade de mudar seu código. + +**Exibir**: todos os exemplos ao vivo deste livro são exibidos usando o [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) que faz o processo de executar um shader standalone incrivelmente fácil. + +```html + +``` + +Como você pode ver, só precisa de um elemento `canvas` com `class="glslCanvas"` e a url para seu shader no `data-fragment-url`. Aprenda mais sobre isso [aqui](https://github.com/patriciogonzalezvivo/glslCanvas). + +Se você é como eum provavelmente vai querer rodar shaders diretamente da console, e nesse caso você deveria dar uma olhada no [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Esta aplicação lhe permite incorporar shaders em seus scripts `bash` ou pipelines do unix e usá-los de modo similiar ao [ImageMagick](http://www.imagemagick.org/script/index.php). Também, o [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) é uma boa forma de compilar shaders no seu [Raspberry Pi](https://www.raspberrypi.org/), razão pela qual o [openFrame.io](http://openframe.io/) o utiliza para exibir artes em shader. Aprenda mais sobre essa aplicação [aqui](https://github.com/patriciogonzalezvivo/glslViewer). + +```bash +glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png +``` + +**Criar**: de modo a trazer mais luz para a experiência de codificação de shaders, eu fiz um editor online chamado [glslEditor](https://github.com/patriciogonzalezvivo/glslEditor). Este editor está embutido nos exemplos ao vivo do livro, e traz uma série de widgets bem convenientes para tornar mais tangível a experiência abstrata de trabalhar com código GLSL. Você também pode executá-lo como uma aplicação web standalone no endereço [editor.thebookofshaders.com/](http://editor.thebookofshaders.com/). Saiba mais sobre isso [aqui](https://github.com/patriciogonzalezvivo/glslEditor). + +![](glslEditor-01.gif) + +Se você prefere trabalhar offline usando o [SublimeText](https://www.sublimetext.com/) você pode instalar esse [pacote para glslViewer](https://packagecontrol.io/packages/glslViewer). Saiba mais sobre isso [aqui](https://github.com/patriciogonzalezvivo/sublime-glslViewer). + +![](glslViewer.gif) + +**Compartilhar**: o editor online ([editor.thebookofshaders.com/](http://editor.thebookofshaders.com/)) pode compartilhar seus shaders! Tanto a versão embedded quanto standalone têm um botão para exportar, onde você pode obter uma URL única para o seu shader. Eles têm também a capacidade de exportar diretamente para um [openFrame.io](http://openframe.io/). + +![](glslEditor-00.gif) + +**Curadoria**: Compartilhar o seu código é o começo para você compartilhar seus shaders como artwork! Além da opção de exportar para [openFrame.io](http://openframe.io/) eu fiz uma ferramenta para lhe permitir criar uam curadoria de seus shaders numa galeria que pode ser embutida em qualquer site, e seu nome é [glslGallery](https://github.com/patriciogonzalezvivo/glslGallery). Saiba mais [aqui](https://github.com/patriciogonzalezvivo/glslGallery). + +![](glslGallery.gif) + +## Rodando seus shaders em seu framework favorito + +Para o caso de você já ter experiência em programar em um framework como [Processing](https://processing.org/), [Three.js](http://threejs.org/) ou [OpenFrameworks](http://openframeworks.cc/), você provavelmente está animado para tentar os shaders nessas plataformas que você se sente confortável. Os exemplos a seguir são formas de como configurar os shaders em alguns frameworks populares com os mesmos uniforms que vamos usar ao longo desse livro. (No [Repositório GitHub para esse capítulo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04), você encontra o código completo para esses três frameworks.) + +### Em **Three.js** + +O brillhante e humilde Ricardo Cabello (aka [MrDoob](https://twitter.com/mrdoob) ) tem desenvolvido com outros [contribuidores](https://github.com/mrdoob/three.js/graphs/contributors) o que é provavelmente um dos mais famosos frameworks para WebGL, chamado de [Three.js](http://threejs.org/). Você vai encontrar muitos exemplos, tutoriais e livros que ensinam a usar essa biblioteca em JavaScript para fazer gráficos 3D muito legais. + +Abaixo, um exemplo do HTML e JS que você precisa para começar com shaders em three.js. Preste atenção ao script `id="fragmentShader"`, é aqui que você pode copiar os shaders que encontrar neste livro. + +```html + +
+ + + + + +``` + +### Em **Processing** + +Iniciado por [Ben Fry](http://benfry.com/) e [Casey Reas](http://reas.com/) em 2001, o [Processing](https://processing.org/) é um ambiente extraordinariamente simples e poderoso para você dar seus primeiros passos no código (pelo menos, pra mim, foi). [Andres Colubri](https://codeanticode.wordpress.com/) tem feito atualizações importantes no openGL e video em Processing, facilitando ainda mais que nunca o uso e diversão com shaders GLSL nesse ambiente amigável. O Processing vai procurar pelo shader chamado `"shader.frag"` na pasta `data`. Tenha certeza de copiar os exemplos que encontrar aqui para essa pasta, e renomear o arquivo. + +```cpp +PShader shader; + +void setup() { + size(640, 360, P2D); + noStroke(); + + shader = loadShader("shader.frag"); +} + +void draw() { + shader.set("u_resolution", float(width), float(height)); + shader.set("u_mouse", float(mouseX), float(mouseY)); + shader.set("u_time", millis() / 1000.0); + shader(shader); + rect(0,0,width,height); +} +``` + +De modo a fazer o shader funcionar em versões anteriores à 2.1, você precisa de adicionar a seguinte linha no começo de seu shader: `#define PROCESSING_COLOR_SHADER`. De modo que se pareça com isso: + +```glsl +#ifdef GL_ES +precision mediump float; +#endif + +#define PROCESSING_COLOR_SHADER + +uniform vec2 u_resolution; +uniform vec3 u_mouse; +uniform float u_time; + +void main() { + vec2 st = gl_FragCoord.st/u_resolution; + gl_FragColor = vec4(st.x,st.y,0.0,1.0); +} +``` + +Para mais informações sobre os shaders no Processing veja esse [tutorial](https://processing.org/tutorials/pshader/). + +### No **openFrameworks** + +Todo mundo tem um lugar onde se sente confortável, e no meu caso, ainda é a [comunidade openFrameworks](http://openframeworks.cc/). Esse framework C++ envolve o OpenGL e outras bibliotecas opensource C++. De muitas formas, é bem parecida com o Processing, mas com as complicações óbvias de se lidar com compiladores C++. Da mesma forma que o Processing, openFrameworks vai procurar o seu shader no diretório data, então não se esqueça de copiar os arquivos `.frag` que quiser usar, e mudar o nome quando for carregar. + +```cpp +void ofApp::draw(){ + ofShader shader; + shader.load("","shader.frag"); + + shader.begin(); + shader.setUniform1f("u_time", ofGetElapsedTimef()); + shader.setUniform2f("u_resolution", ofGetWidth(), ofGetHeight()); + ofRect(0,0,ofGetWidth(), ofGetHeight()); + shader.end(); +} +``` + +Para mais informações sobre shaders em openFrameworks, vá nesse [excelente tutorial](http://openframeworks.cc/ofBook/chapters/shaders.html) feito por [Joshua Noble](http://thefactoryfactory.com/). diff --git a/04/TITLE-pt.md b/04/TITLE-pt.md new file mode 100644 index 0000000..5e70ba7 --- /dev/null +++ b/04/TITLE-pt.md @@ -0,0 +1 @@ +## Rodando o seu shader From b227703343c2b02a2bfd50c7b5efcb6cc9b0d560 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sat, 28 Sep 2019 20:18:02 -0300 Subject: [PATCH 6/9] =?UTF-8?q?cap=C3=ADtulos=205=20a=207=20-=20pt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 05/README-pt.md | 140 ++++++++++++++++++++++++++++ 06/README-pt.md | 145 +++++++++++++++++++++++++++++ 06/SUMMARY-pt.md | 1 + 06/TITLE-pt.md | 1 + 07/README-pt.md | 231 +++++++++++++++++++++++++++++++++++++++++++++++ 07/SUMMARY-pt.md | 1 + 07/TITLE-pt.md | 1 + 7 files changed, 520 insertions(+) create mode 100644 05/README-pt.md create mode 100644 06/README-pt.md create mode 100644 06/SUMMARY-pt.md create mode 100644 06/TITLE-pt.md create mode 100644 07/README-pt.md create mode 100644 07/SUMMARY-pt.md create mode 100644 07/TITLE-pt.md diff --git a/05/README-pt.md b/05/README-pt.md new file mode 100644 index 0000000..b5db31e --- /dev/null +++ b/05/README-pt.md @@ -0,0 +1,140 @@ +# Desenho algorítmico +## Funções de formas + +Este capítulo poderia ser chamado de "lição da cerca do sr. Miyagi". Anteriormente, nós mapeamos a posição normalizada de *x* e *y* para os canais *red* e *green*. Essencialmente, fizemos uma função que recebe um vetor de duas dimensões (x e y) e retorna um de quatro dimensões (r, g, b e a). Mas, antes de seguirmos em frente e transformar dados entre as dimensões, precisamos começar de modo mais simples... muito mais simples. Isso significa entender como fazer uma função dimensional. Quanto mais energia e tempo você gastar aprendendo isso, mais forte vai seu karate-shader será. + +![The Karate Kid (1984)](mr_miyagi.jpg) + +A estrutura de código a seguir vai ser a sua cerca. Nele, visualizamos o valor normalizado da coordenada *x* (`st.x`) de duas formas: uma com brilho (observe o gradiente legal, do preto até o branco) e a outra, plotando uma linha verde no topo (nesse caso, o valor *x* é associado diretamente para o valor *y*). Não foque muito na função de plotagem, nós vamos entrar nela com mais detalhes em breve. + +
+ +**Nota Rápida**: O construtor do tipo `vec3` "entende" que você quer definir os três canais de cores com o mesmo valor, enquanto o `vec4` entende que você quer construir um vetor de quatro dimensões, com um vetor de três mais um quarto valor (neste caso o valor que controla o valor de alpha ou opacidade). Veja por exemplo as linhas 20 e 26 acima. + +Este código é sua cerca; é importante observá-lo e entendê-lo. Você vai voltar várias vezes a esse espaço entre *0.0* e *1.0*. Você vai se especializar na arte de misturar e dar forma a essa linha. + +Esta relação de um para um entre *x* e *y* (ou o brilho) é conhecida como *interpolação linear*. Daqui podemos usar algumas funções matemáticas para dar *forma* à linha. Por exemplo, podemos aumentar *x* à potência de 5 para criar uma linha *curva*. + +
+ +Interessante, certo? Na linha 22, tente expoentes diferentes: 20.0, 2.0, 1.0, 0.0, 0.2 e 0.02 por exemplo. Entender essa relação entre o valor e o expoente vai ser muito útil. Usando esses tipos de funções matemáticas aqui e ali vai dar a você um controle expressivo sobre seu código, um tipo de acupuntura de dados que permite controlar o fluxo de valores. + +[`pow()`](../glossary/?search=pow) é uma função nativa em GLSL e existem muitas outras. A maioria delas são aceleradas a nível de hardware, o que significa que se elas forem usadas do modo certo, e com discrição, elas vão tornar seu código mais rápido. + +Troque a função de potência na linha 22. Tente outras, como: [`exp()`](../glossary/?search=exp), [`log()`](../glossary/?search=log) e [`sqrt()`](../glossary/?search=sqrt). Algumas dessas funções são mais interessantes quando você brinca com elas usando PI. Você pode ver, na linha 8, que eu defini uma macro que vai substituir toda chamada a `PI` com o valor `3.14159265359`. + +### Step e Smoothstep + +GLSL também tem algumas funções únicas nativas de interpolação, aceleradas por hardware. + +A interpolação [`step()`](../glossary/?search=step) recebe dois parâmetros. O primeiro é o limite ou threshold, enquanto o segundo é o valor que nós queremos checar ou passar. Qualquer valor abaixo do limite vai retonar `0.0` e tudo acima do limite retornará `1.0`. + +Tente mudar esse valor de limite na linha 20 do código acima. + +
+ +A outrao função é conhecida como [`smoothstep()`](../glossary/?search=smoothstep). Dado um range de dois números e um valor, esta função vai interpolar o valor entre o range definido. Os dois primeiros parâmetros são o começo e o fim da transição, e o terceiro é o valor a interpolar. + +
+ +No exemplo anterior, na linha 12, note que usamos o smoothstep para desenhar a linha verde na função `plot()`. Para cada posição ao longo do eixo *x* essa função faz um *bump* em determinado valor de *y*. Como? Conectando dois [`smoothstep()`](../glossary/?search=smoothstep). Dê uma olhada na seguinte função, substitua pela linha 20 acima e pense nela como um corte vertical. O fundo parece uma linha, certo? + +```glsl +float y = smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x); +``` + +### Seno e Cosseno + +Quando você quer usar matemática para animar, dar forma ou misturar valores, não há nada melhor que ser amigo do seno e cosseno. + +Essas duas funções trigonométricas básicas trabalham juntas para construir círculos que são tão úteis quanto o canivete suíço do MacGyver. É importante saber como elas se comportam e de que maneiras podem ser combinadas. Em resumo, dado um ângulo (em radianos) elas vão retornar o posição correta de *x* ([cosine](../glossary/?search=cos)) e *y* ([sine](../glossary/?search=sin)) de um ponto na borda do círculo com raio igual a 1. Mas, o fato de que elas retornam valores normalizados (entre -1 e 1) de forma tão suave, faz com que sejam uma ferramenta incrível. + +![](sincos.gif) + +Ainda que seja difícil descrever todas as relações entre as funções trigonométricas e os círculos, a animação acima faz um belo trabalho de sumarizar essas relações visualmente. + +
+ +Dê uma olhada com atenção nessa onda do seno. Note como os valores *y* fluem suavemente entre +1 e -1. Como vimos no exemplo do tempo no capítulo anterior, você pode usar esse comportamento rítmico do [`sin()`](../glossary/?search=sin) para animar propriedades. Se você está lendo esse exemplo no browser, vai ver que pode mudar o código na fórmula acima para observar como a onda muda. OBS.: não se esqueça do ponto e vírgula no fim das linhas. + +Tente os exercícios seguintes veja o que acontece: + +* Adicione o tempo (`u_time`) ao *x* antes de calcular o `seno`. Internalize o **movimento** ao longo de *x*. + +* Multiplique *x* por `PI` antes de calcular o `seno`. Note como as duas fases **encolhem** de modo que cada ciclo se repete a cada 2 inteiros. + +* Multiplique o tempo (`u_time`) por *x* antes de calcular o `seno`. Veja como a frequência **frequency** entre as fases se torna mais e mais comprimida. Note que u_time pode já ter se tornado muito grande, fazendo o gráfico difícil de ler. + +* Adicione 1.0 ao [`sin(x)`](../glossary/?search=sin). Veja como a onda inteira fica **deslocada** pra cima, e como todos os valores ficam entre 0.0 e 2.0. + +* Multiplique [`sin(x)`](../glossary/?search=sin) por 2.0. Note como a **amplitude** dobra de tamanho. + +* Compute o valor absoluto ([`abs()`](../glossary/?search=abs)) de `sin(x)`. Parece com o rastro de uma bola **saltitante**. + +* Extraia apenas a parte fracionária ([`fract()`](../glossary/?search=fract)) do resultado de [`sin(x)`](../glossary/?search=sin). + +* Adicione o maior inteiro ([`ceil()`](../glossary/?search=ceil)) e o menor ([`floor()`](../glossary/?search=floor)) do resultado de [`sin(x)`](../glossary/?search=sin) para obter uma onda digital de valores 1 e -1. + +### Algumas funções extras úteis + +No fim do último exercício, nós introduzimos algumas novas funções. Agora é hora de experimentas com cada uma, descomentando as linhas abaixo, uma de cada vez. Conheça essas funções e estude como elas se comportam. Eu sei, você está se perguntando... por queê? Uma pesquisa rápida no google sobre "arte generativa" ("generative art") vai te dizer. Tenha em mente que essas funções são nossa cerca. Estamos nos especializando no movimento em uma dimensão, para cima e para baixo. Logo será a hora para duas, três e quatro dimensões! + +![Anthony Mattox (2009)](anthony-mattox-ribbon.jpg) + +
+ +### Funções de forma avançadas + +[Golan Levin](http://www.flong.com/) tem uma grande documentação sobre funções de forma mais complexas que são extraordinariamente úteis. Portá-las para o GLSL é um movimento bem esperto, para começar a construir seus próprios recursos de pedaços de código. + +* Funções de Forma - Polinomiais: [www.flong.com/texts/code/shapers_poly](http://www.flong.com/texts/code/shapers_poly/) + +* Funções de Forma - Exponenciais: [www.flong.com/texts/code/shapers_exp](http://www.flong.com/texts/code/shapers_exp/) + +* Funções de Forma - Circulares e Elípticas: [www.flong.com/texts/code/shapers_circ](http://www.flong.com/texts/code/shapers_circ/) + +* Funções de Forma - Bezier e outras formas paramétricas: [www.flong.com/texts/code/shapers_bez](http://www.flong.com/texts/code/shapers_bez/) + +
+ +Como os chefs que colecionam temperos e ingredientes exóticos, os artistas digitais e programadores criativos têm um amor particular em trabalhar em suas próprias funções de forma. + +[Iñigo Quiles](http://www.iquilezles.org/) tem uma grande coleção de [funções úteis](http://www.iquilezles.org/www/articles/functions/functions.htm). Depois de ler [este artigo](http://www.iquilezles.org/www/articles/functions/functions.htm) veja a seguinte tradução dessas funções para o GLSL. Preste atenção nas pequenas alterações necessárias, como colocar o "." (ponto) nos números de ponto flutuante e usar os nomes GLSL para as *funções C*; por exemplo, ao invés de usar `powf()`, use `pow()`: + +
+ +Para manter sua motivação em alta, aqui está um exemplo elegante (feito pelo [Danguafer](https://www.shadertoy.com/user/Danguafer)) para aumentar suas habilidades no karate das funções de formas. + + + +No *Próximo >>* capítulovamos começar a usar nossos novos movimentos. Primeiro, misturando cores, e então desenhando formas. + +#### Exercício + +Dê uma olhada na tabela a seguir, com equações, feita por [Kynd](http://www.kynd.info/log/). Veja como ele está combinando funções e suas propriedades para controlar os valores entre 0.0 e 1.0. Agora é hora de você praticar, replicando essas funções. Lembre-se de que quanto mais você praticar, melhor vai ser o seu karatê. + +![Kynd - www.flickr.com/photos/kynd/9546075099/ (2013)](kynd.png) + +#### Para sua caixa de ferramentas + +Aqui estão algumas ferramentas que vão fazer mais fácil você a visualizar esses tipos de funções. + +* Grapher: se você tem um computador com MacOS, digite `grapher` no spotlight e você vai poder usar essa ferramentas super útil. + +![OS X Grapher (2004)](grapher.png) + +* [GraphToy](http://www.iquilezles.org/apps/graphtoy/): de novo [Iñigo Quilez](http://www.iquilezles.org) fez uma ferramenta para visualizar funções GLSL em WebGL. + +![Iñigo Quilez - GraphToy (2010)](graphtoy.png) + +* [Shadershop](http://tobyschachman.com/Shadershop/): essa ferramenta fantástica criada por [Toby Schachman](http://tobyschachman.com/) vai te ensinar como construir funções complexas, de uma maneira incrível, intuitiva e visual. + +![Toby Schachman - Shadershop (2014)](shadershop.png) diff --git a/06/README-pt.md b/06/README-pt.md new file mode 100644 index 0000000..d294d08 --- /dev/null +++ b/06/README-pt.md @@ -0,0 +1,145 @@ +![Paul Klee - Color Chart (1931)](klee.jpg) + +## Cores + +Não tivemos muita chance de conversar sobre os tipos de vetores GLSL. Antes de avançar, é importante aprender mais sobre essas variáveis e o assunto das cores é uma boa forma de descobrir mais sobre eles. + +Se você é familiar com os paradigmas da programação orientada a objetos, provavelmente notou que estamos acessando os dados dentro dos vetores como qualquer `struct` regular do C. + + +```glsl +vec3 red = vec3(1.0,0.0,0.0); +red.x = 1.0; +red.y = 0.0; +red.z = 0.0; +``` + +Definir uma cor usando uma notação *x*, *y* e *z* pode ser confuso e levar a erros, certo? É por isso que existem outras formar de acessar essa mesma informação, mas com nomes diferentes. Os valores de `.x`, `.y` e `.z` podem ser chamados de `.r`, `.g` e `.b`, e `.s`, `.t` and `.p`. (`.s`, `.t` e `.p` geralmente são usados para coordenadas espaciais de uma textura, o que vamos ver em um capítulo mais pra frente). Você também pode acessar os dados num vetor usando um índice de posições, `[0]`, `[1]` e `[2]`. + +As seguintes linhas mostram todos os modos de acessar o mesmo dado: + +```glsl +vec4 vector; +vector[0] = vector.r = vector.x = vector.s; +vector[1] = vector.g = vector.y = vector.t; +vector[2] = vector.b = vector.z = vector.p; +vector[3] = vector.a = vector.w = vector.q; +``` + +Essas maneiras diferentes de apontar para as variáveis dentro de um vetor são apenas nomenclaturas projetadas para te ajudar a escrever um código mais claro. Essa flexibilidade, embutida na linguagem, é uma porta para você começar a pensar em cores e coordenadas espaciais como intercambiáveis. + +Uma outra grande característica de tipos de vetores em GLSL é que as propriedades podem ser combinadas em qualquer forma que quiser, o que torna mais fácil realizar cast e misturar valores. Essa habilidade é chamada de *swizzle*. + +```glsl +vec3 yellow, magenta, green; + +// Fazendo o Amarelo +yellow.rg = vec2(1.0); // Definindo 1. para os canais red e green +yellow[2] = 0.0; // Definindo 0. para o blue + +// Fazendo o Magenta +magenta = yellow.rbg; // Definindo os canais com green e blue trocados + +// Fazendo o Verde +green.rgb = yellow.bgb; // Definindo o canal blue do Yellow (0) para os canais red e blue +``` + +#### Para sua caixa de ferramentas + +Você pode não ser acostumado a escolher cores com números - pode ser muito contra-intuitivo. Para sua sorte, há muitos programas que tornam esse um trabalho fácil. Encontre um que se encaixe às suas necessidades e então treine-o para entregar cores no formato `vec3` ou `vec4`. Por exemplo, aqui estão os templates que uso no [Spectrum](http://www.eigenlogik.com/spectrum/mac): + +``` +vec3({{rn}},{{gn}},{{bn}}) +vec4({{rn}},{{gn}},{{bn}},1.0) +``` + +### Misturando cores + +Agora que você já sabe como as cores são definidas, é hora de integrar isso com o que já sabemos. Em GLSL, existe uma função muito útil, [`mix()`](../glossary/?search=mix), que te permite mixar dois valores em porcentagens. Adivinha qual é o range de valores para a porcentagem? Sim, valores entre 0.0 e 1.0! Isso é perfeito para você, depois daquelas horas todas praticando seus movimentos de karatê com a cerca - é hora de usá-los! + +![](mix-f.jpg) + +Verifique o seguinte código na linha 18, veja como estamos usando os valores absolutos de uma onda senóide ao longo do tempo para mixar `colorA` e `colorB`. + +
+ +Demonstre suas habilidades, fazendo isso: + +* Faça uma transição expressiva entre as cores. Pense numa emoção particulas. Que cor parace mais representar isso? Como ela aparece? Como ela desaparece? Pense em outra emoção e cores que combinam. Mude a cor do início e do fim do código acima, para combinar com essas emoçoes. Então, anime a transição usando funções de forma. Robert Penner desenvolveu uma série de funções de forma populares para animação em computadores, conhecida como [facilitando funções](http://easings.net/), você pode usar [este exemplo](../edit.php#06/easing.frag) como pesquisa e inspiração mas o melhor resultado virá com você fazendo suas próprias transições. + +### Brincando com gradientes + +A função [`mix()`](../glossary/?search=mix) tem mais a oferecer. Ao invés de um único simples `float`, podemos passar um tipo de variável que combine com os dois primeiros argumentos, em nosso caso um `vec3`. Fazendo isso, ganhamos controle sobre as porcentagens de mistura de cada canal individualmente, `r`, `g` e `b`. + +![](mix-vec.jpg) + +Dê uma olhada no exemplo a seguir. Como nos exemplos do capítulo anterior, estamos ligando a transição Às coordenada *x* normalizada e visualizando-a com uma linha. Nesse momento, todos os canais vão na mesma linha. + +Agora, descomente a linha 25 e veja o que acontece. Então, tente descomentar as linhas 26 e 27. Lembre que as linhas visualizam a quantidade de `colorA` e `colorB` para misturar por canal. + +
+ +Você deve ter reconheido as três funções de forma que estamos usando nas linhas 25 a 27. Brinque com elas! É hora de você explorar e exibir suas habilidades do capítulo anterior e fazer uns gradientes interessantes. Tente os seguintes exercícios: + +![William Turner - The Fighting Temeraire (1838)](turner.jpg) + +* Compor um gradiente que se pareça com o pôr do sol do William Turner + +* Animar uma transição entre um nascer e um pôr do sol, usando `u_time`. + +* Você consegue fazer um arco-íris com o que aprendemos até agora? + +* Use a função `step()` para criar uma bandeira colorida. + +### HSB + +Não podemos falar de cores sem falar no espaço de cores. Como você deve saber, existem modos diferentes de organizar as cores, além dos canais de vermelho, verde e azul. + +[HSB](http://en.wikipedia.org/wiki/HSL_and_HSV) significa Matix(Hue), Saturação e Brilho (ou Valor) e é uma organização mais intuitiva e útil para as cores. Tire um momento para ler as funções `rgb2hsv()` e `hsv2rgb()` no código a seguir. + +Mapeando a posição no eixo x para Matiz, e a posiçãono eixo y para o Brilho, obtemos um bom espectro de cores visíveis. Esta distribuição espacial da cor pode ser bem interessante de se ter à mão; é mais intuitivo pegar uma cor com HSB do que com RGB. + +
+ +### HSB em coordenadas polares + +O HSB foi projetado originalmente para ser representados em coordenadas polares (baseadas em ângulo e raio) em vez de coordenadas cartesianas (baseadas em x e y). Para mapear nossa função HSB para coordenadas polares, precisamos obter o ângulo e distância do centro da tela até a coordenada do pixel. Para isso, usamos as funções [`length()`](../glossary/?search=length) e [`atan(y,x)`](../glossary/?search=atan) (que é a versão GLSL da função comumente usada `atan2(y,x)`). + +Quando você usa funções de vetores e trigonométricas, `vec2`, `vec3` e `vec4` são tratados como vetores mesmo quando eles representam cores. Vamos começar a tratar cores e vetores de modo similar, e de fato você vai descobrir que essa flexibilidade conceitual traz muito poder. + + +**Nota:** Se você está se perguntando, existem mais funções geométricas além de [`length`](../glossary/?search=length) como: [`distance()`](../glossary/?search=distance), [`dot()`](../glossary/?search=dot), [`cross`](../glossary/?search=cross), [`normalize()`](../glossary/?search=normalize), [`faceforward()`](../glossary/?search=faceforward), [`reflect()`](../glossary/?search=reflect) e [`refract()`](../glossary/?search=refract). GLSL também tem funções relacionais especiais para vetores, como: [`lessThan()`](../glossary/?search=lessThan), [`lessThanEqual()`](../glossary/?search=lessThanEqual), [`greaterThan()`](../glossary/?search=greaterThan), [`greaterThanEqual()`](../glossary/?search=greaterThanEqual), [`equal()`](../glossary/?search=equal) e [`notEqual()`](../glossary/?search=notEqual). + +Uma vez que obtivemos o ângulo e tamanho, temos que "normalizar" os valores para o range entre 0.0 e 1.0. Na linha 27, [`atan(y,x)`](../glossary/?search=atan) vai retornar um ângulo em radianos, entre -PI e PI (-3.14 to 3.14), então temos que dividir esse número por `TWO_PI` (definido no início do código) para chegar a valores entre -0.5 e 0.5, que, por simples adição, mudamos para o range desejado de 0.0 a 1.0. O raio vai retornar um valor máximo de 0.5 (porque estamos calculando a distância do cento da tela), então precisamos dobrar esse range (multiplicando por dois) para ter o máximo de 1.0. + +Como pode ver, nosso jogo aqui é transformar e mapear ranges para o range de 0.0 a 1.0 que nós gostamos. + +
+ +Tente os seguintes exercícios: + +* Modifique o exemplo polar para conseguir uma roda de cores girando, parecido com o ícone de espera do mouse. + +* Use uma função de forma junto com a de conversão de HSB para RGB para expandir um valor de matiz particular e encolher o resto. + +![William Home Lizars - Red, blue and yellow spectra, with the solar spectrum (1834)](spectrums.jpg) + +* Se você olhar bem de perto na roda de cores usada nos selecionadores (ver a imagem acima), eles usam um espectro diferente de acordo com o espaço de cores RYB. por exemplo, a cor oposta ao vermelho deveria ser o verde, mas no nosso exemplo é o ciano. Você consegue achar um jeito de consertar isso, de modo a ficar parecendo exatamente igual à imagem seguinte? [Dica: esse é um bom momento para usar funções de forma.] + +![](colorwheel.png) + +* Leia o [livro Interaction of Color do Josef Albers'](http://www.goodreads.com/book/show/111113.Interaction_of_Color) e use os seguintes exemplos de shaders como prática. + +
+ +#### Nota sobre funções e argumentos + +Antes de pular para o próximo capítulo, vamos parar e recapitular. Volte e dê uma olhada nas funções nos exemplos anteriores. Você vai notar o `in` antes do tipo dos argumentos. Isso é um [*qualificador*](http://www.shaderific.com/glsl-qualifiers/#inputqualifier) e nesse caso, ele especifica que a variável é somente de leitura. Em exemplos futuros, vamos ver que é possível definir argumentos como `out` ou `inout`. Esse último, `inout`, é conceitualmente similar a passar um argumento por referência, que vai nos dar a possibilidade de modificar uma variável passada. + +```glsl +int newFunction(in vec4 aVec4, // read-only + out vec3 aVec3, // write-only + inout int aInt); // read-write +``` +Você pode não acreditar, mas agora temos todos os elementos para fazer desenhos legais. No próximo capítulo, vamos aprender como combinar todos os nossos truques para fazer formar geométricas fazendo um *blend* (misturando) o espaço. Sim... *blend* no espaço. + diff --git a/06/SUMMARY-pt.md b/06/SUMMARY-pt.md new file mode 100644 index 0000000..c49443e --- /dev/null +++ b/06/SUMMARY-pt.md @@ -0,0 +1 @@ +Familiarize-se com o modo de se expressar em cores nos shaders. Os exemplos cobrem a maneira de misturar cores e animá-las lindamente ao longo do tempo, bem como a conversão entre dois modelos diferentes (RGB e HSB). Em GLSL, as cores são simplesmente como vetores, o que quer dizer que você pode facilmente aplicar os conceitos e técnicas que aprender aqui para outros. \ No newline at end of file diff --git a/06/TITLE-pt.md b/06/TITLE-pt.md new file mode 100644 index 0000000..95c6c3f --- /dev/null +++ b/06/TITLE-pt.md @@ -0,0 +1 @@ +## Cores diff --git a/07/README-pt.md b/07/README-pt.md new file mode 100644 index 0000000..cf6138a --- /dev/null +++ b/07/README-pt.md @@ -0,0 +1,231 @@ +![Alice Hubbard, Providence, United States, ca. 1892. Photo: Zindman/Freemont.](froebel.jpg) + +## Formas + +Finalmente! A gente vem construindo habilidades para este momento! Você aprendeu a maioria das fundações, tipo s funções GLSL. Você praticou suas equações de formas várias vezes. Agora é a hora de juntar tudo. Você está pronto para este desafio! Neste capítulo, vai aprender como desenhar formas simples, de forma procedural paralela. + +### Retângulo + +Imagine que tenhamos um papel quadriculado como os que usamos nas aulas e exercícios de casa de matemática, e queremos desenhar um quadrado. O tamanho do papel é 10x10 e o quadrado deveria ser 8x8. O que você vai fazer? + +![](grid_paper.jpg) + +Você pintaria tudo, menos a primeira linha e a última, e a primeira coluna e a última, certo? + +E como isso se relaciona com os shaders? Cada quadradinho de nosso papel é uma thread (um pixel). Cada quadradinho sabe sua posição, como as coordenadas de um tabuleiro de xadrez. Em capítulos anteriores, nós mapeamos *x* e *y* para os canais de cores *vermelho* e *verde*, e aprendemos como usar o estreito território bidimensional entre 0.0 e 1.0. Como podemos usar isso para desenhar um quadrado centralizado no meio da nossa tela? + +Vamos começar rascunhando um pseudocódigo que usa vários `if` no campo espacial. Os princípios para fazer isso são notavelmente similares ao modo que pensamos no cenário do papel quadriculado. + +```glsl +if ( (X MAIOR QUE 1) AND (Y MAIOR QUE 1) ) + pinta de branco +else + pinta de preto +``` + +Agora que temos uma ideia melhor de como isos vai funcionar, vamos substituir os `if` com [`step()`](../glossary/?search=step), e, em vez de usar 10x10, vamos usar valores normalizados entre 0.0 e 1.0: + +```glsl +uniform vec2 u_resolution; + +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution.xy; + vec3 color = vec3(0.0); + + // Cada resultado retorna 1.0 (branco) ou 0.0 (preto). + float left = step(0.1,st.x); // Similar a ( X maior que 0.1 ) + float bottom = step(0.1,st.y); // Similar a ( Y maior que 0.1 ) + + // A multiplicação left*bottom vai ser similar ao AND lógico. + color = vec3( left * bottom ); + + gl_FragColor = vec4(color,1.0); +} +``` + +A função [`step()`](../glossary/?search=step) vai tornar cada pixel abaixo de 0.1 preto (`vec3(0.0)`) e o resto branco (`vec3(1.0)`) . A multiplicação entre `left` e `bottom` funciona como um `AND` lógico, onde os dois devem estar 1.0 para retornar 1.0. Isso desenha duas linhas pretas, uma no fundo, e outra na lado esquerdo do canvas. + +![](rect-01.jpg) + +No código anterior, repetimos a estrutura para cada eixo (esquerdo e fundo). Podemos economizar algumas linhas de código, passando 2 vaores diretamente para [`step()`](../glossary/?search=step) ao invés de apenas um. Seria algo assim: + +```glsl +vec2 borders = step(vec2(0.1),st); +float pct = borders.x * borders.y; +``` + +Até agora, só desenhamos duas bordar (fundo-esquerda) de nosso retângulo. Vamos desenhar as outras duas (topo-direita). Veja esse código: + +
+ +Descomente as *linhas 21-22* e veja como invertemos as coordenadas `st` e repetimos a mesma função [`step()`](../glossary/?search=step). Desse jeito, o `vec2(0.0,0.0)` vai estar no canto superior direito. Isso é o equivalente digital a girar a página e repetir o mesmo procedimento. + +![](rect-02.jpg) + +Note que nas *linhas 18 e 22*, todos os lados estão sendo multiplicados juntos. É o mesmo que escrever: + +```glsl +vec2 bl = step(vec2(0.1),st); // bottom-left +vec2 tr = step(vec2(0.1),1.0-st); // top-right +color = vec3(bl.x * bl.y * tr.x * tr.y); +``` + +Interessante, certo? Essa técnica é, basicamente, usar [`step()`](../glossary/?search=step) e multiplicação para operações lógicas, e flipar as coordenadas. + +Antes de prosseguir, tente os exercícios a seguir: + +* Mude o tamanho e as proporções do retângulo. + +* Experimente com o mesmo código, mas usando [`smoothstep()`](../glossary/?search=smoothstep) no lugar de [`step()`](../glossary/?search=step). Note que, ao mudar os valores, você pode ir de beiradas embaçadas até elegantes bordas suaves. + +* Faça uma outra implementação que use [`floor()`](../glossary/?search=floor). + +* Escolha a implementação de que gostar mais, e faça uma função dela, que você possa reutilizar no futuro. Deixe sua função flexível e eficiente. + +* Faça outra função que apenas desenhe o contorno do retângulo. + +* Como você acha que poderia mover e colocar retângulos diferentes na mesma tela? Se descobrir como, mostre suas habilidades fazendo uma composição de retângulos e cores que se pareça com uma pintura de [Piet Mondrian](http://en.wikipedia.org/wiki/Piet_Mondrian). + +![Piet Mondrian - Tableau (1921)](mondrian.jpg) + +### Círculos + +É fácil desenhar quadrados em um papel quadriculado, e retângulos em coordenadas cartesianas, mas círculos requerem outra abordagem, especialmente porque precisamos de um algoritmo "por pixel". Uma solução é *remapear* as coordenadas espaciais de modo que possamos usar uma função [`step()`](../glossary/?search=step) para desenhar um círculo. + +Como? Vamos começar, voltando um pouco às aulas de matemática e o papel quadriculado, onde nós abríamos um compasso até o raio do círculo, apertamos uma das pontas do compasso no centro do círculo, e então tracejamos o contorno do círculo com uma rodada do compasso. + +![](compass.jpg) + +Traduzindo isso para um shader, onde cada quadrado no papel é um pixel, implica em *perguntar* a cada pixel (ou thread) se ele está dentro da área do círculo. Fazemos isso calculando a distância do pixel até o centro do círculo. + +![](circle.jpg) + +Existem várias formas de se calcular essa distância. A mais fácil usa a função [`distance()`](../glossary/?search=distance), que, internamente, calcula o [`length()`](../glossary/?search=length) (comprimento) da diferença entre dois pontos (em nosso caso, a coordenada do pixel, e o centro da tela). A função `length()` nada mais é que um atalho para a [equação de hipotenusa](http://en.wikipedia.org/wiki/Hypotenuse) que usa raiz quadrada ([`sqrt()`](../glossary/?search=sqrt)) internamente. + +![](hypotenuse.png) + +Você pode usar [`distance()`](../glossary/?search=distance), [`length()`](../glossary/?search=length) ou [`sqrt()`](../glossary/?search=sqrt) para calcular a distância até o centro da tela. O código a seguir contém essas três funções e o fato não-surpreendente de que retornam o mesmo resultado. + +* Comente e descomente as linhas para testar as diferentes formar de obter o mesmo resultado. + +
+ +No exemplo anterior, nós mapeamos a distância até o centro para o brilho da cor de cada pixel. Quanto mais ao centro está um pixel, mais escuro ele é (menor valor de cor). Note que os valores não ficam muito altos porque a partir do centro ( `vec2(0.5, 0.5)` ) a distância máxima mal passa de 0.5. Contemple esse mapa e pense: + +* O que você pode inferir disso? + +* Como podemos usar isso para desen um círculo? + +* Modifique o código acima, de modo a conter o gradiente circular inteiro dentro do canvas. + +### Campo de distância + +Também podemos pensar no exemplo acima como um mapa de altitude, onde áreas mais escuras implicam em maior altura. O gradiente nos mostra algo similar ao padrão feito por um cone. Imagine-se no topo desse cone. A distância horizontal até a borda do cone é 0.5. Isso será constante em todas as direções. Escolhendo onde "cortar" o cone, vai te dar uma superfície circular maior ou menor. + +![](distance-field.jpg) + +Basicamente, estamos usando uma reinterpretação do espaço (baseado na distância até o centro) para fazer formas. Essa técnica é conhecida como "campo de distância" e é usada e diferentes modos, desde outlines de fontes até gráficos 3D. + +Tente os seguintes exercícios: + +* Use o [`step()`](../glossary/?search=step) para tornar tudo acima de 0.5 em branco e tudo abaixo para 0.0. + +* Inverta as cores do fundo e do primeiro plano. + +* Usando [`smoothstep()`](../glossary/?search=smoothstep), faça experiências com valores diferentes para conseguir uma borda suave no seu círculo. + +* Uma vez que esteja feliz com uma implementação, faça uma função com ela, para reutilizar no futuro. + +* Adicione cor ao círculo. + +* Você pode animar seu círculo, para crescer e encolher, simulando a batida de um coração? (Você pode ter alguma inspiração, da animação do capítulo anterior) + +* Que tal mover esse círculo? Você consegue movê-lo para lugares diferentes na tela? + +* O que acontece se você combinar campos de distância usando diferentes funções e operações? + +```glsl +pct = distance(st,vec2(0.4)) + distance(st,vec2(0.6)); +pct = distance(st,vec2(0.4)) * distance(st,vec2(0.6)); +pct = min(distance(st,vec2(0.4)),distance(st,vec2(0.6))); +pct = max(distance(st,vec2(0.4)),distance(st,vec2(0.6))); +pct = pow(distance(st,vec2(0.4)),distance(st,vec2(0.6))); +``` + +* Faça três composições usando essa técnica. Se forem animadas, melhor ainda! + +#### Para sua caixa de ferramentas + +Em termos de poder computacional, a função [`sqrt()`](../glossary/?search=sqrt) - e todas as que dependem dela - pode ser bem cara. Aqui vai outra forma de criar um campo de distância usando [`dot()`](../glossary/?search=dot) (produto escalar). + +
+ +### Propriedades úteis de um Campo de Distância + +![Zen garden](zen-garden.jpg) + +Campos de Distância podem ser usados para desenhar quase tudo. Obviamente, quanto mais complexa for uma forma, mais complicada vai ser a equação, mas uma vez que você tenha a fórmula para fazer um campo de distância de uma forma específica, é muito fácil combinar e/ou aplicar efeitos a ela, como bordas suaves, e múltiplos outlines. Por causa disso, os campos de distância são populares para rendereizar fontes, como [Mapbox GL Labels](https://www.mapbox.com/blog/text-signed-distance-fields/), [Matt DesLauriers](https://twitter.com/mattdesl) [Material Design Fonts](http://mattdesl.svbtle.com/material-design-on-the-gpu) e [ como descrito no capítulo 7 do livro iPhone 3D Programming, O’Reilly](http://chimera.labs.oreilly.com/books/1234000001814/ch07.html#ch07_id36000921). + +Dê uma olhada no código a seguir. + +
+ +Começamos movendo o sistema de coordenadas para o centro e encolhendo-o pela metade, para remapear os valores de posição entre -1 e 1. Também, na *linha 24*, estamos visualizando os valores do campo de distância usando uma função [`fract()`](../glossary/?search=fract) para facilitar que você veja o padrão que eles criam. O padrão do campo de distância se repete o tempo todo, como anéis num jardim Zen. + +Vamos dar uma olhada na fórmula do campo, na *linha 19*. Ali, estamos calculando a distância até a posição `(.3,.3)` ou `vec3(.3)` em todos os nossos quatro quadrantes (é isso o que o [`abs()`](../glossary/?search=abs) está fazendo aqui). + +Se você descomentar a *linha 20*, vai notar que estamos combinando as distâncias para esses quatro pontos usando o [`min()`](../glossary/?search=min) para zero. O resultado produz um novo padrão bem interessante. + +Agora, tente descomentar a *linha 21*; estamos fazendo o mesmo, mas usando a função [`max()`](../glossary/?search=max). O rsultado é um retângulo com cantos arredondados. Note como os anéis do cmapo ditância ficam mais suaves quanto mais disntantes do centro. + +Termine de descomentar as *linhas 27 a 29* uma a uma, para entender os diferentes usos de um padrão de campo de distância. + +### Formas Polares + +![Robert Mangold - Untitled (2008)](mangold.jpg) + +No capítulo sobre sores, nós mapeamos as coordenadas cartesianas para coordenadas polares, calculando o *raio* e os *ângulos* de cada pixel com essa fórmula: + +```glsl +vec2 pos = vec2(0.5)-st; +float r = length(pos)*2.0; +float a = atan(pos.y,pos.x); +``` + +Usamos parte desta fórmula no começo do capítulo para desenhar um círculo. Nós calculamos a distância até o centro usando [`length()`](../glossary/?search=length). Agora que sabemos sobre os os campos de distância, podemos aprender outra forma de desenhar formar, usando coordenadas polares. + +Esta técnica é um pouco restritiva, mas bem simples. Ela consiste em mudar o raio de um círculo dependendo do ângulo, para obter formas diferentes. Como a modulação funciona? Sim, usando funções de formas! + +Abaixo, você vai encontrar as mesmas funções do gráfico cartesiano e em um exemplo shader de coordenadas polares (entre as *linhas 21 e 25*). Descomente as funções uma a uma, prestando atenção na relação entre um sistema de coordenadas e o outro. + +
+ +
+ +Tente: + +* Animar essas formas. +* Combinar funções de formas diferentes para *cortar buracos* na forma, para fazer flores, flocos de neve e engrenagens. +* Use a função `plot()` que usamos no capítulo sobre *Funções de Formas* para desenhar só o contorno. + +### Combinando forças + +Agora que aprendemos como modular o raio de um círculo de acordo com o ângulo, usando [`atan()`](../glossary/?search=atan) para desenhar formas diferentes, podemos aprender a usar `atan()` com campos de distância e aplicar todos os truques e efeitos possíveis com campos de distância. + +O truque vai usar o número de lados de um polígono para construir o campo de distância, usando coordenadas polares. Veja o [seguinte código](http://thndl.com/square-shaped-shaders.html) do [Andrew Baldwin](https://twitter.com/baldand). + +
+ +* Usando este exemplo, faça uma função que tem como entrada a posição e o número de lados de uma forma desejada, e retorna um valor de campo de distância. + +* Misture campos de distância usando [`min()`](../glossary/?search=min) e [`max()`](../glossary/?search=max). + +* Escolha um logo geométrico para replicar, usando campos de distância. + +Parabéns! Você já passou pela parte mais dura! Dê uma pausa e deixe os conceitos assentarem - desenhar formas simples no Processing é fácil, mas não aqui. Na terra dos shaders, desenhar formas é difícil, e pode ser cansativo se adaptar a esse novo paradigma de programação. + +Agora que você já sabe como desenhar formas, tenho certeza de que novas ideias vão pular na sua mente. No capítulo a seguir, você vai aprender como mover, rotacionar e mudar a escala das formas. Isso vai te permitir a fazer composições! diff --git a/07/SUMMARY-pt.md b/07/SUMMARY-pt.md new file mode 100644 index 0000000..7ca2738 --- /dev/null +++ b/07/SUMMARY-pt.md @@ -0,0 +1 @@ +Vamos dar uma olhada em como desenhar formar simples de forma procedural paralela. Em poucas palavras, tudo o que você precisa é determinar se cada pixel pertence à forma que quer desenhar ou não, e aplicar cores diferentes dependendo do caso. Você pode usar o sistema de coordenadas, como um papel quadriculado, para desenhar retângulos e quadrados. Vamos olhar um conceito mais avançado chamado campo de distância para desenhar formar mais complexas. \ No newline at end of file diff --git a/07/TITLE-pt.md b/07/TITLE-pt.md new file mode 100644 index 0000000..d63cef2 --- /dev/null +++ b/07/TITLE-pt.md @@ -0,0 +1 @@ +## Formas From a7d5af2be9dee0bb4fc57ed863a521a8d566dba1 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Fri, 28 Feb 2020 22:46:36 -0300 Subject: [PATCH 7/9] =?UTF-8?q?cap=C3=ADtulo=208=20-=20pt=5Fbr?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 08/README-pt.md | 101 +++++++++++++++++++++++++++++++++++++++++++++++ 08/SUMMARY-pt.md | 2 + 08/TITLE-pt.md | 1 + 3 files changed, 104 insertions(+) create mode 100644 08/README-pt.md create mode 100644 08/SUMMARY-pt.md create mode 100644 08/TITLE-pt.md diff --git a/08/README-pt.md b/08/README-pt.md new file mode 100644 index 0000000..7d7215f --- /dev/null +++ b/08/README-pt.md @@ -0,0 +1,101 @@ +## Matrizes 2D + + + +### Translação + +No capítulo anterior, aprendemos como fazer algumas formas básicas - o macete para mover essas formas é mover o próprio sistema de coordenadas. Podemos fazer isso simplesmente adicionando um vetor à variável ```st``` que contém a localização de cada fragmento. Isso faz com que todo o sistema de coordenadas espaciais se mova. + +![](translate.jpg) + +Isso é mais fácil de ver do que explicar, então, veja por você mesmo: + +* Descomente a linha 35 do código acima para ver como o espaço se move. + +
+ +Agora, tente o seguinte exercício: + +* Usar ```u_time``` junto com funções de forma, mova a pequena cruz de uma forma interessante. Procure por uma qualidade específica de movimento que você esteja interessado e tente fazer a cruz se mover do mesmo jeito. Gravar algo do "mundo real" primeiro pode ser útil - poderia ser o ir e vir das ondas, um movimento de um pêndulo, uma bola saltitante, um carro acelerando, uma bicicleta parando. + +### Rotações + +Para rotacionar objetos, também precisamos mover o sistema espacial inteiro. Para isso, vamos usar uma [matriz](http://en.wikipedia.org/wiki/Matrix_%28mathematics%29). Uma matriz é um conjunto organizado de números em colunas e linhas. Vetores são multiplicados por matrizes seguindo um conjunto preciso de regras de forma a modificar os valores do vetor de maneira particular. + +[![Wikipedia entry for Matrix (mathematics) ](matrixes.png)](https://en.wikipedia.org/wiki/Matrix) + +GLSL tem suporte nativo para matrizes de duas, três e quatro dimensões: [```mat2```](../glossary/?search=mat2) (2x2), [```mat3```](../glossary/?search=mat3) (3x3) and [```mat4```](../glossary/?search=mat4) (4x4). GLSL também suporta multiplicação de matrizes (```*```) e uma função específica de matrizes ([```matrixCompMult()```](../glossary/?search=matrixCompMult)). + +Baseado em como as matrizes se comportam, é possível construir matrizes para produzir comportamentos específicos. Por exemplo, podemos usar uma matriz para transladar um vetor: + +![](3dtransmat.png) + +Mais interessante ainda: podemos usar uma matriz para rotacionar o sistema de coordenadas: + +![](rotmat.png) + +Dê uma olhada no código a seguir para ver uma função que constrói uma matriz de rotação 2D. Essa função segue a [fórmula](http://en.wikipedia.org/wiki/Rotation_matrix) acima para vetores de duas dimensões, para rotacionar as coordenadas em torno do ponto ```vec2(0.0)```. + +```glsl +mat2 rotate2d(float _angle){ + return mat2(cos(_angle),-sin(_angle), + sin(_angle),cos(_angle)); +} +``` + +De acordo com a forma como estamos desanhando nossas formas, não é isso, exatamente, o que queremos. Nossa forma de cruz é desenhada no meio da tela, o que corresponde à posição ```vec2(0.5)```. Então, antes de rodarmos o espaço, precisamos mover a forma do `center` para a coordenada ```vec2(0.0)```, rotacionar o espaço, e finalmente mover de volta para o lugar original. + +![](rotate.jpg) + +Isso se parece com o seguinte código: + +
+ +Tente os exersícios a seguir: + +* Descomente a linha 45 do código acima, e preste atenção no que acontece. + +* Comente as translações antes e depois da rotação, nas linhas 37 e 39, e observe as consequências. + +* Use rotações para melhorar a animação que você simulou no exercício de translação. + +### Escala (scale) + +Vimos como as matrizes são usadas para transladar e rotacionar objetos no espaço (ou, mais precisamente, transformar o sistema de coordenadas para rotacionar e mover objetos). Se você já usou softwares de modelagem 3D ou as funções de push e pop no Processing, já sabe que as matrizes também podem ser usadas para escalar o tamanho de um objeto. + +![](scale.png) + +Seguindo a fórmula anterior, você pode calcular como fazer uma matriz para escalar em 2D: + +```glsl +mat2 scale(vec2 _scale){ + return mat2(_scale.x,0.0, + 0.0,_scale.y); +} +``` + +
+ +Tente os seguintes exersícios para entender mais a fundo como isso funciona. + +* Descomente a linha 42 do código acima, para ver a coordenada de espaço sendo escalada. + +* Veja o que acontece quando você comenta as translações antes e depois de escalar, nas linhas 37 e 39. + +* Tente combinar uma matriz de rotação com uma de escala. Tenha em mente que a ordem faz diferença. Multiplique pela matriz primeiro e então multiplique os vetores. + +* Agora que você sabe como desenhar formas diferentes, e mover, rotacionar e escalá-las, é hora de fazer uma composição bem maneira. Projete e construa um [HUD (heads up display) ou UI falso](https://www.pinterest.com/patriciogonzv/huds/). Use o seguinte ShaderToy de exemplo, do [Ndel](https://www.shadertoy.com/user/ndel) como inspiração e referência. + + + +### Outros usos para matrizes: cores YUV + +[YUV](http://en.wikipedia.org/wiki/YUV) é um espaço de cores usado para codificação analógica de fotos e vídeos, que considera o faixa da percepção humana para reduzir a largura de banda dos componentes de crominância. + +O código a seguir é uma oportunidade interessante para usar operações de matrizes em GLSL para transformar as cores de um modo para outro. + +
+ +Como você pode ver, estamos tratando as cores como vetores, multiplicando-os com matrizes. Dessa forma, nós "movemos" os valores. + +Neste capítulo, aprendemos como usar transformações de matrizes para mover, rotacionar e escalar vetores. Essas transformações serão essenciais para fazer composições com as formas que aprendemos no capítulo anterior. No próximo capítulo, vamos aplicar tudo o que aprendemos para fazer padrões procedurais bem bonitos. Você vai achar que a repetição e variação na programação podem ser uma prática excitante. diff --git a/08/SUMMARY-pt.md b/08/SUMMARY-pt.md new file mode 100644 index 0000000..143ddf1 --- /dev/null +++ b/08/SUMMARY-pt.md @@ -0,0 +1,2 @@ +Matriz é uma ferramenta poderosa para manipular vetores. Ser experiente com matrizes lhe permite a, livremente, transladar, escalar e rotacionar formas. Uma vez que a técnica pode ser aplicada igualmente para qualquer coisa expressada por vetores, vamos dar uma olhada em usos muito mais avançados depois, neste livro. Matrizes podem árecer complexas à primeira vista, mas você vai achá-las bem úteis depois que pegar o conceito. Vamos praticar aqui e aprender o básico com alguns exemplos simples. + diff --git a/08/TITLE-pt.md b/08/TITLE-pt.md new file mode 100644 index 0000000..052b871 --- /dev/null +++ b/08/TITLE-pt.md @@ -0,0 +1 @@ +## Matrizes 2D From b873828da45ee215a77f6b1290ee53d13c2f7515 Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sat, 29 Feb 2020 11:58:58 -0300 Subject: [PATCH 8/9] pt_BR cap 9 --- 09/README-pt.md | 122 +++++++++++++++++++++++++++++++++++++++++++++++ 09/SUMMARY-pt.md | 1 + 09/TITLE-pt.md | 1 + 3 files changed, 124 insertions(+) create mode 100644 09/README-pt.md create mode 100644 09/SUMMARY-pt.md create mode 100644 09/TITLE-pt.md diff --git a/09/README-pt.md b/09/README-pt.md new file mode 100644 index 0000000..f479345 --- /dev/null +++ b/09/README-pt.md @@ -0,0 +1,122 @@ +## Patterns (padrões) + +Uma vez que os programas de shaders são executados pixel a pixel, não importa o quanto você repete uma forma, o número de cálculos permanece constante. Isso quer dizer que fragment shaders se encaixam perfeitamente para a criação de padrões "tile patterns". + +[ ![Nina Warmerdam - The IMPRINT Project (2013)](warmerdam.jpg) ](../edit.php#09/dots5.frag) + +Neste capítulo, vamos aplicar o que aprendemos até agora, e repetir isso ao longo da tela. Como nos capítulos anteriores, nossa estratégia será baseada em multiplicar as coordenadas espaciais (entre 0.0 e 1.0), de modo que as formas que desenharmos entre os valores 0.0 e 1.0 serão repetidas para fazer um grid. + +*"O grid provê uma framework na qual a intuição e a invenção humana podem operar e que pode subverter. Dentro do caos da natureza, os padrões provêem um contraste e promessa de ordem. Desde padrões mais antigos nas cerâmicas até mosaicos geométricos nos banheiros de Roma, as pessoas têm usado grids para melhorar suas vidas com a decoração."* [*10 PRINT*, Mit Press, (2013)](http://10print.org/) + +Primeiro, vamos nos lembras da função [```fract()```](../glossary/?search=fract). Ela retorna a parte fracionária de um número, tornando ```fract()```, em essência, o módulo de um ([```mod(x,1.0)```](../glossary/?search=mod)). Em outras palavras, [```fract()```](../glossary/?search=fract) retorna o número depois do ponto flutuante. Nossa variável do sistema de coordenadas normalizadas (```st```) já vai de 0.0 a 1.0, então não faz sentido termos algo como: + +```glsl +void main(){ + vec2 st = gl_FragCoord.xy/u_resolution; + vec3 color = vec3(0.0); + st = fract(st); + color = vec3(st,0.0); + gl_FragColor = vec4(color,1.0); +} +``` + +Mas se nós escalarmos o sistema de coordenadas para cima - digamos, aumentar por três - vamos ter três sequências de interpolações lineares entre 0-1: a primeira, entre 0-1, a segunda para os pontos flutuantes entre 1-2, e a terceira para os pontos flutuantes entre 2-3. + +
+ +Agora é horas de desenhar algo em cada subespaço, descomentando a linha 27 (devido ao fato de estarmos multiplicando igualmente os valores de x e y, o aspecto do espaço não muda e as formas serão como esperado). + +Tente os seguintes exercícios para entender mais a fundo: + +* Multiplique o espaço por números diferentes. Tente com valores de ponto flutuante e também com valores diferentes para x e y. + +* Crie uma função reutilizável para esse truque com os padrões. + +* Divida o espaço em três linhas e três colunas. Ache um jeito de saber em que coluna e linha está a thread, e use isso para mudar a forma que está exibindo. tente compor um jogo da velha. + +### Aplique matrizes dentro dos patterns + +Como cada subdivisão ou célula é uma versão menor do sistema de coordenadas normalizadas que já vínhamos usando, podemos aplicar uma transformação de matrizes a ela, de modo a transladar, rotacionar ou escalar o espaço ali dentro. + +
+ +* Pense em modos interessantes de animar esse padrão. Considere animação de cores, formas e movimento. Faça três animações diferentes. + +* Recrie patterns mais complicados, compondo formas diferentes. + + +[![](diamondtiles-long.png)](../edit.php#09/diamondtiles.frag) + +* Combine camadas diferentes de patterns, para compor seus próprios [Scottish Tartan Patterns](https://www.google.com/search?q=scottish+patterns+fabric&tbm=isch&tbo=u&source=univ&sa=X&ei=Y1aFVfmfD9P-yQTLuYCIDA&ved=0CB4QsAQ&biw=1399&bih=799#tbm=isch&q=Scottish+Tartans+Patterns). + +[ ![Vector Pattern Scottish Tartan By Kavalenkava](tartan.jpg) ](http://graphicriver.net/item/vector-pattern-scottish-tartan/6590076) + +### Offset patterns + +Então, digamos que queremos imitar um muro de tijolos. Olhando para o muro, você pode ver um deslocamento de meio tijolo em x, entre as linhas. Como podemos fazer isso? + +![](brick.jpg) + +Como primeiro passo, precisamos saber se a linha de nossa thread é uma linha par ou ímpar, porque podemos usar isso a para determinar se precisamos fazer o deslocamento do x nessa linha. + +____nós temos que consertar esses dois próximos parágrafos, juntos____ + +Para determinar se nossa thread está numa linha par ou ímpar, vamos usar o [```mod()```](../glossary/?search=mod) de ```2.0``` e então ver se se o resultado está abaixo de ```1.0``` ou não. Dê uma olhada na fórmula seguinte e descomente as duas últimas linhas. + +
+ +Como pode ver, usamos um [operador ternário](https://en.wikipedia.org/wiki/%3F: ) para checar se o [```mod()```](../glossary/?search=mod) de ```2.0``` é abaixo de ```1.0``` (segunda linha) ou de modo similar, podemos usar um [```step()```](../glossary/?search=step) que faz a mesma operação, mas mais rápido. Por quê? Embora seja difícil saber como cada placa gráfica otimiza e compila o programa, é seguro assumir que funções built-in são mais rápidas que as outras. Toda vez que puder usar uma função built-in , use! + +Então, agora que temos nossa fórmula para números ímpares, podemos aplicar um deslocamento nas linhas ímpares, para dar um efeito de *tijolos* aos nossos "tiles". A linha 14 do código a seguir é onde estamos usando a função para "detectar" linhas ímpares e dar a elas um offset de meia unidade em ```x```. Note que para linhas pares, o resultado da função é ```0.0```, e multiplicar ```0.0``` pelo offset de ```0.5``` nos dá um offset de ```0.0```. Mas em linhas ímpares, multiplicamos o resultado da função, ```1.0```, pelo offset de ```0.5```, o que move o eixo ```x``` do sistema de coordenadas por ```0.5```. + +Agora, tente descomentar a linha 32 - isso estica a proporção da tela do sistema de coordenadas, para imitar o aspecto de um "tijolo moderno". Comentando a linha 40, você pode ver como o sistema de coordenadas parece mapeado para o vermelho e o verde. + + +
+ +* Tente animar isso, movendo o offset de acordo com o tempo. + +* Faça outra animação onde as linhas pares se movem para a esquerda, e as ímpares para a direita. + +* Você consegue repetir esse efeito, mas com colunas? + +* Tente combinar um offset nos eixos ```x``` e ```y``` para conseguir algo desse tipo: + + + +## Tiles de Truchet + +Agora que já aprendemos como dizer se nossa célula está numa coluna par ou ímpar, é possível reusar um elemento simples dependendo de sua posição. Considere o caso dos [Truchet Tiles](http://en.wikipedia.org/wiki/Truchet_tiles) onde um elemento de design simples pode ser representado em quatro formas diferentes: + +![](truchet-00.png) + +Mudando o padrão ao longo dos tiles, é possível construir um conjunto infinito de designs complexos. + +![](truchet-01.png) + +Preste bastante atenção à função ```rotateTilePattern()```, que subdivide o espaço em quatro célular e associa uma ângulo de rotação a cada um. + +
+ +* Comente, descomente e duplique as linhas 69 a 72 para compor novos designs. + +* Mude o triângulo preto e branco por outro elemento, como: semi-círculos, quadrados rotacionados ou linhas. + +* Programe outros padrões, onde os elementos são rotacionados de acordo com a posição. + +* Faça um pattern que mude outras propriedades, de acordo com a posição dos elementos. + +* Pense em algo mais que não seja necessariamente um pattern onde você pode aplicar os princípios desta seção. (Ex: hexagramas do I Ching) + + + +## Fazendo suas próprias regras + +Fazer padrões procedurais é um exercício mentar para encontrar elementos mínimos reutilizáveis. Esta prática é antiga; como espécie, temos usando grids e padrões para decorar tecidos, pisos e bordas de objetos por muito tempo: desde os padrões de meandros na Grécia antiga, aos designs de treliças chinesas, o prazer da repetição e variações pegam nossa imaginação. Dê uma olhada em [padrões](https://www.pinterest.com/patriciogonzv/paterns/) [decorativos](https://archive.org/stream/traditionalmetho00chririch#page/130/mode/2up) e veja como artistas e designers têm uma longa história de navegar na fina borda entre a previsibilidade da ordem, e a surpresa da variação e o caos. Dos padrões geométricos árabes ao design de lindos tecidos africanos, há um universo inteiro de padrões de onde aprender. + +![Franz Sales Meyer - A handbook of ornament (1920)](geometricpatters.png) + +Com este capítulo, terminamos a seção sobre Desenho Algorítmico. Nos capítulos seguintes vamos aprender como trazer alguma entropia para nossos shaders e produzir designs geradores. + diff --git a/09/SUMMARY-pt.md b/09/SUMMARY-pt.md new file mode 100644 index 0000000..5ee1722 --- /dev/null +++ b/09/SUMMARY-pt.md @@ -0,0 +1 @@ +Padrões repetitivos são um tema perfeito para desenho computacional. Diferente do modo convencional de desenhar, shaders te deixam desenhar tudo em paralelo de uma vez. Em vez de repetir o mesmo procedimento várias vezes, você vai empacotar e repetir o "espaço". Parece sci-fi? Vamos descobrir o que isso quer dizer de verdade. \ No newline at end of file diff --git a/09/TITLE-pt.md b/09/TITLE-pt.md new file mode 100644 index 0000000..3350acc --- /dev/null +++ b/09/TITLE-pt.md @@ -0,0 +1 @@ +## Patterns (padrões) From f4413fe2167fddfa60856024ca73be460207221a Mon Sep 17 00:00:00 2001 From: rnbastos Date: Sat, 29 Feb 2020 14:23:22 -0300 Subject: [PATCH 9/9] capitulo 10 - inicial --- 10/README-pt.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/10/README-pt.md b/10/README-pt.md index 96118c3..f39412c 100644 --- a/10/README-pt.md +++ b/10/README-pt.md @@ -1,22 +1,22 @@ # Designs Generativos -It is not a surprise that after so much repetition and order the author is forced to bring some chaos. +Não é uma surpresa que, depois de tanta repetição e ordem, o autor seja forçado a trazer algum caos. -## Random +## Aleatoriedade [![Ryoji Ikeda - test pattern (2008) ](ryoji-ikeda.jpg) ](http://www.ryojiikeda.com/project/testpattern/#testpattern_live_set) -Randomness is a maximal expression of entropy. How can we generate randomness inside the seemingly predictable and rigid code environment? +Aleatoriedade é uma expressão máxima da entropia. Como podemos gerar aleatoriedade dentro de um ambiente de código tão rídigo e, aparentemente, previsível? -Let's start by analyzing the following function: +Vamos começar, analisando a seguinte função:
-Above we are extracting the fractional content of a sine wave. The [```sin()```](../glossary/?search=sin) values that fluctuate between ```-1.0``` and ```1.0``` have been chopped behind the floating point, returning all positive values between ```0.0``` and ```1.0```. We can use this effect to get some pseudo-random values by "breaking" this sine wave into smaller pieces. How? By multiplying the resultant of [```sin(x)```](../glossary/?search=sin) by larger numbers. Go ahead and click on the function above and start adding some zeros. +Acima, estamos extraindo o conteúdo fracionário de uma onda de seno. Os valores de [```sin()```](../glossary/?search=sin) que flutuam entre ```-1.0``` e ```1.0``` foram cortados depois do ponto flutuante, retornando todos valores positivos entre ```0.0``` e ```1.0```. Podemos usar esse efeito para obter algums valores pseudo-aleatórios, quebrando essa onda de seno em pedaços menores. Como? Multiplicando o resultante de [```sin(x)```](../glossary/?search=sin) por números maiores. Vá em frente e clique na função acima e comece a adicionar alguns zeros. -By the time you get to ```100000.0``` ( and the equation looks like this: ```y = fract(sin(x)*100000.0)``` ) you aren't able to distinguish the sine wave any more. The granularity of the fractional part has corrupted the flow of the sine wave into pseudo-random chaos. +Quando você chegar lá pelo ```100000.0``` ( e a equação parecer com isso: ```y = fract(sin(x)*100000.0)``` ) você não vai mais ser capaz de distinguir a onda do seno. A granularidade da parte fracionária corrompeu o fluxo da onda em um caos pseudo-aleatório. -## Controlling chaos +## Controlando o caos Using random can be hard; it is both too chaotic and sometimes not random enough. Take a look at the following graph. To make it, we are using a ```rand()``` function which is implemented exactly like we describe above.