34:["$","title",null,{"children":"Ambiente P5 no Observable | Processing Brasil | Observable"}] 3c:[] 38:{"id":"86007e7f68b71c09","slug":"ambiente-p5-no-observable","title":"Ambiente P5 no Observable","thumbnail":"ce38aee08ca73ed0a943ddd7935a3a2c67f35f09946878fa36e0ee84fe76c5ff","access_level":"public","create_time":"$D2021-03-01T15:34:11.459Z","update_time":"$D2021-03-07T00:21:18.413Z","view_time":null,"first_public_time":"$D2021-03-01T16:05:23.872Z","has_unpublished_edits":null,"fork":{"id":"e485b2d18ab26137","slug":"ambiente-p5-no-observable","title":"Ambiente P5 no Observable","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":5,"starred":false,"owner":{"type":"team","id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":"starter_2024","bio":"Comunidade brasileira de Processing e programação criativa","followed_by_you":false,"follows_you":false},"version":342,"publish_version":342,"role":null,"authored":false,"authors":[{"type":"individual","id":"6026713a1531e323","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":null,"bio":"Comunidade brasileira de Processing e programação criativa","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"6026713a1531e323","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f68d9e0595973b5f","slug":"introducoes","title":"Introduções","owner":{"id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil"}},"type":"notebook","body":{"titling":"auto","title":"Ambiente P5 no Observable","cells":[{"id":0,"value":"md`# Ambiente P5 no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"html`\n\n

\n\n

@ranoya

\n\n

documento original no Observable

\n\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`O Observable é um ambiente de desenvolvimento de código Javascript diferente dos modelos tradicionais. Através dele é possível construir uma documentação do processo e do próprio raciocínio envolvido no código, enquanto ele vai sendo elaborado. Aquilo que é construído no Observable se torna um código funcional, que pode ser incorporado em qualquer outro sistema através de módulos de NodeJS (import).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`A linguagem de programação utilizada no Observable é Javascript, mais especificamente em sua especificação 6.0 que inclui módulos, arrow functions, e outras características importantes para tornar público e reutilizável tudo aquilo que for construído no ambiente. Também estão incluídos um interpretador de MarkDown e HTML, bastante úteis para a construção da documentação. Este texto explicativo é construído através de código MarkDown no documento, e você pode acessar o código editando o documento (seja momentâneamente, ou em um fork feito dele para você). Para um [tutorial sobre utilizar o ambiente Observable, clique aqui](https://observablehq.com/@observablehq/notebooks-cells?collection=@observablehq/learning-observable).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"md`\nAntes que o [prof. Claudio Esperança](https://observablehq.com/@esperanc) e o [Carlos Oliveira (Vamoss)](https://observablehq.com/@vamoss) trouxessem alguma luz à estas questões, a única forma possível de incorporar Processing dentro do Observable era através de programação P5 utilizando **Instance Containers**, isto é, a programação de objetos P5 independentes e que precisam de uma sintaxe mais difícil por não poderem ser tratados como um único código global. Abordo um pouco das diferenças na sintaxe e das estratégias de implementação [neste capítulo do meu \"o tecido das tecnologias criativas\"](https://www.ranoya.com/books/public/p5/sintaxe.php#instancias).\n\nNeste artigo - mais antigo que as novas soluções que nós três acabamos produzindo - tento explicar um pouco como utilizar instâncias P5 aqui.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`A utilização do Javascript com módulos, e sobretudo do P5 através desta forma de notação, costumam ser mais complexos que os formatos tradicionais. Este tipo de recurso __não__ costuma ser recomendado para iniciantes, pois exige um pouco mais de experiência com orientação à objetos e instanciamentos. Ao longo deste documento, você poderá observar que todas as instruções precisam informar também à qual instância P5 elas são direcionadas.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`Este ambiente também é frequentemente adotado para aqueles que utilizam a biblioteca [D3](https://d3js.org/) de Javascript, normalmente utilizada para elaboração de infografia e visualização de dados. Para um [tutorial sobre como usar D3 no Observable, aqui](https://observablehq.com/@d3/learn-d3?collection=@d3/learn-d3).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"md`
\n### 1.Importanto a biblioteca P5`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`A primeira providênia necessária para utilizar o P5 no Observable é importar a biblioteca para o documento. Isso é feito através da instrução abaixo:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"md`Este código acima é __uma instrução de fato__. Ele está efetivamente rodando no documento; ao editá-lo e acessar os códigos, repare que ela não está precedida por um comando __md__. O comando __md__ instrui o Observable a lidar com o conteúdo como MarkDown, que, consequentemente, transforma todo o conteúdo em texto (não em instruções Javascript para serem executadas).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`
\n### 2.Instanciando P5 em uma célula Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`Todos os códigos no Observable são colocados em células independentes. Cada um dos parágrafos de texto é tabém um código rodando em uma célula, e, no caso deste documento, a grande maioria deles é constituído por código MarkDown (que produz textos com formatação).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`Todos os códigos do P5 serão executados em uma célula independente, e cada sketch que se deseja incluir no documento precisará criar uma instância P5. Esta forma de trabalhar com o código P5 é conhecida como __Instance Container__ na [documentação da biblioteca](https://p5js.org/examples/instance-mode-instance-container.html).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"p5(sketch => {\n sketch.setup = function() {\n sketch.createCanvas(width, 200);\n };\n sketch.draw = function() {\n sketch.stroke('#2299FF');\n sketch.rect(30, 30, 100, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`A função __p5__ é carregada ao se importar a biblioteca P5, e é utilizada para criar um __Instance Container__ no documento Observable. Esta função recebe uma arrow function como parâmetro, contendo todo código Javascript+P5 a ser executado.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`
\n### 3.Uma outra instância P5 rodando em paralelo no documento`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"md`A vantagem de se utilizar __Instance Containers__ é a possibilidade de se rodar códigos diferentes em paralelo, no mesmo documento. O exemplo abaixo cria um novo P5 em outra célula:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"p5(sketchB => {\n sketchB.setup = function() {\n sketchB.createCanvas(width, 200);\n };\n sketchB.draw = function() {\n sketchB.stroke('#2299FF');\n sketchB.rect(width - 120, 30, 100, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`*sketch*, e o *sketchB*, são programas (instâncias P5) independentes. Alterar um deles e executá-lo não proverá efeitos no outro.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`
\n### 4.Trabalhando de forma transparente com Javascript no documento`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md`É possível operar dados ao longo do documento Observable, assim como importar ferramentas de outros documentos (como foi feito com a biblioteca P5) para isso, e trazê-los para dentro do seu código. No primeiro exemplo abaixo iremos apenas criar uma função e utilizá-la dentro de uma nova instância P5:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"function centra(wdt,canvwdt) {\n return (canvwdt/2) - (wdt/2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"p5(sketchC => {\n sketchC.setup = function() {\n sketchC.createCanvas(width, 200);\n };\n sketchC.draw = function() {\n sketchC.stroke('#2299FF');\n sketchC.rect(centra(30, width), 30, 100, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"md`O Observable também possui alguns recursos interessante para capturar entradas de dados ou para importar dados de outros lugares. Para isso é recomendável ler a [documentação do ambiente](https://observablehq.com/@observablehq/standard-library). No exemplo abaixo, utilizaremos um input de html para receber parâmetros que serão utilizados no sketch:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"dadodeentrada = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"p5(sketchD => {\n sketchD.setup = function() {\n sketchD.createCanvas(width, 200);\n };\n sketchD.draw = function() {\n sketchD.background(255);\n sketchD.stroke('#2299FF');\n sketchD.rect((width * dadodeentrada.value) / 120 + 30, 30, 100, 100);\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"md`\n
\n### 5.Programando colaborativamente com ferramentas e dados construídos por outros`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`Talvez o grande recurso que o ambiente Observable ofereça para a programação é a possíbilidade de que tudo que é construído em um documento, sejam funções ou conjuntos de dados, possam ser acessados por outros documentos. É recomendável a leitura da [introdução sobre import do Observable](https://observablehq.com/@observablehq/introduction-to-imports) para se entender o grande potencial desse ambiente. Além deste recurso, os códigos nos documentos podem ser alterados temporariamente para experimentação, e, caso interesse, você pode fazer um fork (uma cópia) do documento para o seu usuário. Também é possível fazer download do documento para rodá-lo localmente no seu computador ou colocá-lo dentro de algum site (o download empacta todas as funções e dados importados, e suas dependencias), ou mesmo fazer um embed das células para incorporá-las em outros sites através de um __iframe__.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 33:null