2d:null 2e:["$","title",null,{"children":"Desenhando com p5, canvas e SVG | Claudio Esperança | Observable"}] 33:T613,md`# \`p5.js\` em modo global Para aqueles não iniciados em p5.js / Processing, isso pode parecer um pouco estranho, já que existe uma função \`setup ()\` que nunca é chamada explicitamente. Além disso, não há nenhuma menção sobre onde o canvas criado por \`createCanvas()\` deve ser colocado na página, nem que o círculo (\`circle \`) deve ser pintado dentro dela. Este tipo de comportamento, chamado de *modo global*, é provavelmente a razão pela qual o p5.js é tão atraente para artistas, designers e pessoas com pouca experiência em programação. Ele se baseia no fato de que um programa p5.js raramente produz mais do que uma única tela de desenho e, portanto, todos os comandos e funções se referem a ela. Além disso, você pode apenas definir uma função cujo nome é \`setup () \` e ela será chamada automaticamente uma vez no início do programa. Da mesma forma, se você definir uma função chamada \`draw () \`, ela será chamada automaticamente 60 vezes por segundo, o que é ótimo para produzir animações. Na mesma linha, cliques do mouse produzem chamadas automáticas para uma função chamada \`mouseClick()\` (caso esteja definida), e assim por diante. Para produzir o resultado que você vê acima dentro desta página do Observable, tivemos que recorrer a um truque (*hack*) que encapsula uma página da web contendo a biblioteca p5 e todo o código de suporte html dentro de um *iframe*, ou seja, um elemento html que contém um documento html completo. Para fazer isso, começamos por importar o hack: `34:T6f8,md`Um contexto 2d tem um repertório muito rico de [métodos e propriedades](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D) para desenhar em um canvas, não muito diferente daqueles do p5.js . Na verdade, o p5.js implementa toda sua interface de desenho combinando propriedades e métodos de objetos \`CanvasRenderingContext\`. Por exemplo, para especificar um preenchimento branco e um traço preto, poderíamos escrever em p5.js: \`\`\`js fill('white'); stroke('black'); \`\`\` enquanto que uma especificação equivalente usando a interface nativa do canvas seria escrita: \`\`\`js myCtx.strokeStyle='black'; myCtx.fillStyle='white'; \`\`\` Para desenhar um círculo branco num fundo cinza claro usaríamos as seguintes instruções: \`\`\`js myCtx.fillStyle = 'lightgray'; myCtx.fillRect (0,0,400,400); myCtx.strokeStyle='black'; myCtx.fillStyle='white'; myCtx.beginPath(); myCtx.arc(200,200,50,0,Math.PI*2); myCtx.stroke(); myCtx.fill(); \`\`\` Observe que a API do canvas requer que solicitemos explicitamente que o círculo seja traçado e preenchido com as cores default, enquanto em p5.js cada primitiva é traçada e preenchida, a menos que você especifique explicitamente \`noStroke()\` e/ou \`noFill()\`. Observe também que o método \`arc ()\` assume que o seu terceiro argumento é o *raio* do círculo, enquanto que o terceiro argumento para a função \`circle()\` do p5.js é o *diâmetro*. Se tivéssemos executado esses comandos na célula Observável que criamos acima, o círculo já teria sido desenhado (e o leitor provavelmente estaria se perguntando de onde ele veio!). Em vez disso, vamos emitir esses comandos em resposta a um clique em um elemento *button*. Aqui está o código: `35:T59d,{ const zoomImg = async function(src) { return html`

`; }; const canvasimgsrc = "https://static.observableusercontent.com/files/b631ce1f0b5ecdde639815f88774c5254d973b7b210022622b2ebb69edd4b8dddbffac5f47a2027a92f3e17b9bc6b62a1f835fd1368cd3bf73d1f883d862305a"; const svgimgsrc = "https://static.observableusercontent.com/files/cc213d0091123e9783052764d8ffd15ca4c0dfbb317ed9cc09b46f6f0769f87cc0903565283e5d803d98867c4a44ca793d77c20a92f3f339ab3e89e23aaf592c"; return md`Ao contrário de um \`canvas\`, que suporta gráficos *matriciais*, os elementos SVG contêm gráficos *vetoriais*. Em outras palavras, os canvas são apenas matrizes de pixels, enquanto os elementos SVG contêm descrições completas das primitivas usadas para criar os gráficos. A diferença se torna mais evidente se aumentarmos o zoom do nosso círculo desenhado em um canvas e em um elemento SVG:

${await zoomImg(canvasimgsrc)}

${await zoomImg(svgimgsrc)}

Um zoom do canvas nos permite ver os pixels individuais, enquanto que a imagem SVG é re-renderizada respeitando as formas das primitivas. `; }36:T5a1,md`Aqui está uma explicação sobre o \`viewof\`. A palavra-chave \`viewof \` precedendo as definições das células \`dynCanvasRadius\` e \`dynCanvasClear\` muda ligeiramente o comportamento dessas células. Além de criar o elemento html e exibi-lo, o *valor* não é mais o elemento html em si, mas sim o valor associado à entrada. Portanto, o valor atual de \`dynCanvasRadius\` é **${dynCanvasRadius}** e você verá este número mudar se você alterar o valor daquele input arrastando o controle deslizante. Dizemos que \`dynCanvasRadius \` atua como uma variável *reativa*, e cada célula que se refere a ela é reavaliada assim que \`dynCanvasRadius\` muda de valor. É por isso que a célula \`dynCanvasMouseInteraction\` se refere àquele controle diretamente pelo seu nome: a célula é reavaliada toda vez que movemos o controle deslizante, associando um código que desenha círculos do tamanho especifacado aos eventos de mouse. Da mesma forma, quando o botão \`dynCanvasClear\` é clicado, todas as células que dependem dele também são avaliadas. É esse o caso da célula \`dynCanvasClearInteraction\` que, ao ser reavaliada, faz com que o canvas seja repintado em cinza claro. É importante notar que poderíamos ter programado este exemplo sem recorrer a \`viewof \`, vinculando a callback \`onclick\` do botão Limpar e usando \`dynCanvasRadius.value\` para o raio dos círculos, como fizemos na versão p5.js.`37:[] 31:{"id":"61b3a44c345b3db3","slug":"desenhando-com-p5-canvas-e-svg","title":"Desenhando com p5, canvas e SVG","thumbnail":"8f34abab0d3a3bb5984a38ffe7ab40025e5745f7d99a22b38625d53dc3ed1a6d","access_level":"public","create_time":"$D2021-03-05T18:55:24.481Z","update_time":"$D2021-03-07T13:12:03.567Z","view_time":null,"first_public_time":"$D2021-03-07T13:12:15.950Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":249,"publish_version":249,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Desenhando com p5, canvas e SVG","cells":[{"id":0,"value":"md`# Desenhando com p5, canvas e SVG\n\n[p5.js](https://p5js.org) é uma das encarnações de maior sucesso da família [Processing](https://processing.org) de ambientes para programação criativa. Por exemplo, um programa para\ndesenhar um círculo de raio 100 centralizado em uma tela quadrada de 400x400 com um fundo cinza pode ser escrito da seguinte maneira:\n\n\\`\\`\\`js\nfunction setup() {\n createCanvas(400, 400);\n background('lightgray');\n circle (200,200,100)\n}\n\\`\\`\\`\n\nEste é um programa p5.js totalmente funcional, também chamado de *sketch*, e você pode digitá-lo, digamos, no [editor p5.js](https://editor.p5js.org) e obter o resultado desejado . O resultado seria:\n\n${p5iframe(\n `function setup() {\n\tcreateCanvas(400, 400);\n background('lightgray');\n\tcircle (200,200,100)\n}`,\n { height: 400 }\n)}\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"import { p5iframe } from \"@esperanc/global-mode-p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Em seguida, chamamos \\`p5iframe\\` passando uma string com o código-fonte do sketch. O argumento adicional \\`{height: 400} \\` serve para configurar o iframe com essa altura em vez do tamanho padrão de 600 pixels.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"p5GlobalSketch = p5iframe(\n `function setup() {\n\tcreateCanvas(400, 400);\n background('lightgray');\n\tcircle (200,200,100)\n}`,\n { height: 400 }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`## \\`p5.js\\` em modo instância\n\nPara acomodar mais de um canvas por página poderíamos adicionar vários iframes da maneira descrita acima, mas isso desperdiçaria recursos, já que cada sketch incluiria a mesma biblioteca p5. Além disso, esse tipo de truque separa o código do resto do documento Observable, dificultando a programação em concerto com o conteúdo de outras células.\n\nFelizmente, o p5.js também suporta o que é chamado de [*modo instância*](https://p5js.org/examples/instance-mode-instantiation.html). Uma instância é apenas um encapsulamento de todas as variáveis de estado necessárias para gerenciar o desenho e o processamento de eventos para um determinado canvas. É bastante simples usar o p5.js no modo de instância dentro de uma célula do Observable, recorrendo ao [encapsulamento do p5.js](https://observablehq.com/@tmcw/p5) em uma função, bolado por [Tom MacWright](https://observablehq.com/@tmcw). Funciona assim: primeiro importamos a função de encapsulamento \\`p5\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"import { p5 } from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`Em seguida, chamamos \\`p5()\\` passando uma função contendo o sketch em modo instância:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"p5InstanceSketch = p5(function(p) {\n p.setup = function() {\n p.createCanvas(400, 400);\n p.background('lightgray');\n p.circle(200, 200, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"md`Como podemos ver, uma instância é um objeto (\\`p\\`) que contém as funções e constantes do p5.js. A função \\`p5()\\` chama a função dada, passando \\`p\\`. A estrutura do esboço é muito semelhante ao que vemos no modo global, mas cada função p5.js deve agora ser prefixada pelo nome do argumento da instância (\\`p\\` no exemplo acima).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`## A API nativa do elemento \\`canvas\\`\n\nDe certa forma, muito do p5.js consiste em encapsular a funcionalidade da interface do elemento \\`canvas\\` do HTML de uma forma mais palatável e concisa. Um canvas é simplesmente um elemento com a tag \\`canvas\\`. Por exemplo, a função \\`createCanvas()\\` do p5.js cria um novo canvas e o adiciona ao documento HTML corrente. Em Observable podemos fazer a mesma coisa usando o [*tagged template*](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) \\`html\\`. Eis um exemplo para a criação de um canvas de 400x400 (com uma borda cinza claro para melhor visibilidade):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"myCanvas = html`