31:[] 2f:{"title":"Visualização e Computação Gráfica usando Observable","cells":[{"id":0,"value":"slide.md`\n# Visualização e Computação Gráfica usando Observable\n\n## Sumário da palestra proferida no [Gnugraf 2022](https://gnugraf.org/2022/)\n\n

\n\n

[Claudio Esperança](https://cesperanca.org)

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"slide.md`\n\n

Para acompanhar:

\n${await qrcode.toCanvas(\n html`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"slide.md`\n# 1. [observablehq.com](https://observablehq.com)\n\n - Plataforma online de desenvolvimento web\n - Hospedagem de conteúdo\n - Conteúdo sob a forma de caderno de notas\n - Programação em HTML5/JavaScript\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"slide.md`\n# 1. [observablehq.com](https://observablehq.com)\n\n - Diferente de, por exemplo,\n\n${htl.html`

`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"slide.md`\n# 2. Cadernos de notas\n\n- Conteúdo dividido em _células_\n- Células de diversos tipos\n - JavaScript\n - Markdown\n - Html\n- Programação _Reativa_\n- [Exemplo](https://observablehq.com/@esperanc/cadernos-de-notas-observable)\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"slide.md`\n# 3. SVG\n\n - Scalable Vector Graphics (HTML5)\n - Gráficos 2d vetoriais\n - Desenho através de *tags*\n - Animação e interação com JavaScript\n - [Exemplo](https://observablehq.com/@esperanc/usando-svg-com-observable)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"slide.md`\n# 4. Visualização de dados\n\n - Principal foco da plataforma\n - Várias bibliotecas de visualização embutidas\n -

D3 \n - Vega-lite\n -

Plot\n - [Exemplo](https://observablehq.com/@esperanc/visualizacao-de-dados-com-observable)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"slide.md`\n# 5. Canvas\n\n - Gráficos 2d matriciais\n - Ideal para processamento de imagens pixel a pixel\n - API rica e poderosa\n - Rendering (em geral) mais rápido que SVG\n - [Exemplo](https://observablehq.com/@esperanc/canvas-e-observable)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"slide.md`\n# 6. Gráficos 3D com WebGL\n\n - [WebGL](https://www.khronos.org/webgl/) = OpenGL ES \n - API JavaScript bastante complexa\n - Alternativas\n - WebGL sem bibliotecas\n - Bibliotecas minimalistas, ex.: [regl](https://github.com/regl-project/regl), [TWGL](https://github.com/greggman/twgl.js), [PicoGL.js](https://github.com/tsherif/picogl.js), \n - Motores gráficos, ex.: [Babylon.js](https://github.com/BabylonJS/Babylon.js), [three.js](https://github.com/mrdoob/three.js)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"slide.md`\n# 6.a WebGL com [regl](https://github.com/regl-project/regl)\n\n - Facilita o gerenciamento de\n - Buffers\n - Texturas\n - Uniformes\n - WebGL 1 apenas\n - [Exemplo](https://observablehq.com/@esperanc/webgl-com-regl)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"slide.md`\n# 6.b WebGL com [Three.js](https://threejs.org)\n\n - Biblioteca de alto nível \n - Projeto maduro e bem documentado\n - Não é preciso saber GLSL!\n - Provê classes que encapsulam \n - Geometria\n - Materiais\n - Câmeras\n - Luzes\n - etc.\n - [Exemplo](https://observablehq.com/@esperanc/webgl-com-three-js)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"slide.md`\n## Outros exemplos\n\n - [observablehq.com/@esperanc](https://observablehq.com/@esperanc)\n - [cesperanca.org](https://cesperanca.org)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"slide.md`\n\nObrigado!
\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"
\n## Dependências\nAlgumas bibliotecas usadas na preparação deste material","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"import { slide, notes, style, keyBindings } from \"@visnup/slides\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"keyBindings","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":151,"value":"qrcode = import(\"https://cdn.skypack.dev/qrcode@1.5.1?min\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}