28:null 29:["$","title",null,{"children":"As formas mais fáceis de se utilizar Processing (P5) no Observable | Guilherme Ranoya | Observable"}] 2e:T76f,Você pode inserir o código *default* que deverá aparecer no editor, na variável `codigoinicial`. Se preferir manter o editor vazio, basta colocar `codigoinicial = "";` no lugar. A variável `CodigoViaAce` recebe o que estiver digitado no editor recebe como uma `string`, e a instrução `viewof`, que a precede, faz com que ela seja monitorada o tempo inteiro para que suas modificações sejam aplicadas em todos os outros lugares onde ela é chamada no documento. Você pode trocar a variável `CodigoViaAce` por outras de sua preferência, e pode criar diversas instâncias ACE em uma mesma página, atribuindo os códigos digitados em cada editor à variáveis diferentes. Ao colocar estas variáveis como o valor `codigo` de `p5(codigo,css)`, você poderá rodar vários Sketchs novos no documento, todos podendo ser modificados, em tempo real, por editores ACE independentes. As configurações do próprio editor podem ser alteradas neste trecho do código: ```json { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showGutter: false } ``` Alterar o parâmetro `showGutter` para `true` trará para o editor uma barra com linting (indicação de erros no código) em tempo real, por exemplo. Todos os parâmetros de configuração do ACE podem ser consultados neste link. É possível utilizar sua própria ferramenta de configuração para ver a grande diversidade de modificações que podem ser feitas nele. O editor também pode ser utilizado no modo *read only*, apenas para exibir código (como é feito normalmente por **markdown** com o marcador de código). 2f:[] 2c:{"id":"3b51c3e7a21bdd50","slug":"livroobservable-p5","title":"As formas mais fáceis de se utilizar Processing (P5) no Observable","thumbnail":"6fe3ffb51c817aa0ce6af5031320ebdc874224258e2971291d02beec5d333b28","access_level":"public","create_time":"$D2024-06-03T21:23:38.168Z","update_time":"$D2024-06-03T22:29:02.629Z","view_time":null,"first_public_time":"$D2024-06-03T21:23:38.168Z","has_unpublished_edits":null,"fork":{"id":"841437c68497ac92","slug":"as-formas-mais-faceis-de-se-utilizar-processing-no-observab","title":"As formas mais fáceis de se utilizar Processing no Observable","owner":{"id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":391,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"As formas mais fáceis de se utilizar Processing (P5) no Observable","cells":[{"id":233,"value":"# As formas mais fáceis de se utilizar Processing (P5) no Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":276,"value":"### Incluíndo p5.js no modo global\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"Os código que permitem rodar Processing (P5) no ambiente do Observable disponíveis em @ranoya/processing, e são baseadas na implementação de p5.js no modo global no Observable, de Claudio Esperança.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"Podemos rodar código Processing (em qualquer das modalidades) utilizando apenas 3 linhas de código, uma em cada célula do Observable.\n\n
\n\n**Passo 1:**
\nA primeira providência é importar a implementação de P5 para o Observable. Isso é feito através desta instrução:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"```js\nimport {p5} from \"@ranoya/processing\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"
\n\n**Passo 2:**
\nVocê pode atribuir todo o seu código P5 em uma variável, na forma de uma *string template*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"```js\ncodigo = `\n\n // meu código P5\n\n`;\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"
\n\n**Passo 3:**
\nExecute seu código com a função `p5(codigo,css)`, onde `codigo` é a variável contendo o código, e `css` é uma `string template` opcional com um código `CSS` para ser aplicado sobre o bloco **HTML** que conterá o Sketch. Se não desejar alterar as configurações iniciais, a variável pode ser omitida da instrução, usando apenas `p5(codigo)`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"```js\np5(codigo);\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"\n-----\n\n## Exemplo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"```js\nimport {p5} from \"@ranoya/processing\"\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"p5_code = `\n function setup() {\n createCanvas(160, 160);\n background(255);\n }\n function draw() {\n fill(255);\n stroke('#000000');\n radius = sin(frameCount / 20) * 50 + 50;\n rect(30, 30, radius, radius);\n}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"value":"```js\np5_code = `\nfunction setup() {\n createCanvas(160, 160);\n background(255);\n }\n function draw() {\n fill(255);\n stroke('#000000');\n radius = sin(frameCount / 20) * 50 + 50;\n rect(30, 30, radius, radius);\n} \n`\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"p5(p5_code, 'width: 160px; height:170px')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"```js\np5(p5_code, \"width: 160px; height:170px\");\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"
\n\n-----\n\n## Editor de código para facilitar a programação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"O ACE Editor é um editor de código que pode ser incorporado dentro de documentos `HTML`, e possui diversas configurações que podem ser alteradas para atender gostos e desejos muito variados de quem constrói estes documentos.\n\nO ACE pode ser implementado em um documento Observable e um código P5 digitado nele pode ser executado (e modificado em tempo real) no Observable:\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"p5(CodigoViaAce, \"width: 400px; height: 170px;\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"```js\np5(CodigoViaAce, \"width: 400px; height: 170px;\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"viewof CodigoViaAce = {\n let codigoinicial = `\nfunction setup() {\n createCanvas(420, 160);\n background(255);\n }\n\nfunction draw() {\n fill(255);\n stroke('#000000');\n position = sin(frameCount / 20) * 50 + 150;\n ellipse(position, 80, 100,100);\n}\n`;\n\n // Instantiating the editor\n const { editor, view } = ace(\n codigoinicial,\n { fontSize: \"0.8em\", height: \"260px\" },\n {\n theme: \"ace/theme/tomorrow\",\n selectionStyle: \"text\",\n highlightActiveLine: false,\n mode: \"ace/mode/javascript\",\n enableBasicAutocompletion: true,\n enableLiveAutocompletion: true,\n enableSnippets: true,\n showGutter: true\n }\n );\n\n // initial value for viewof\n view.value = editor.getValue();\n\n // Setting up the callback that reacts to the changes\n editor.on(\"change\", () => {\n view.value = editor.getValue();\n });\n\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"\n
\nPara incorporar um editor ACE no seu documento, utilize o procedimento abaixo:\n\n```js\nimport { ace } from '@jobleonard/ace'\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":198,"value":"```js\n\nviewof CodigoViaAce = {\n let codigoinicial = `\n function setup() {\n createCanvas(420, 160);\n background(255);\n }\n \n function draw() {\n fill(255);\n stroke('#000000');\n position = sin(frameCount / 60) * 50 + 150;\n ellipse(position, 80, 100,100);\n }\n `;\n\n // Instanciando o editor\n const { editor, view } = ace(\n codigoinicial,\n { fontSize: \"0.8em\", height: \"260px\" },\n {\n theme: \"ace/theme/tomorrow\",\n selectionStyle: \"text\",\n highlightActiveLine: false,\n mode: \"ace/mode/javascript\",\n enableBasicAutocompletion: true,\n enableLiveAutocompletion: true,\n enableSnippets: true,\n showPrintMargin: false,\n showGutter: false\n }\n );\n\n // Captura o valor inicial\n view.value = editor.getValue();\n\n // Reage a qualquer mudança feita no editor\n editor.on('change', () => {\n view.value = editor.getValue();\n });\n\n return view;\n}\n```\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"import { ace } from '@jobleonard/ace'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"import { p5 } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"