2e:null 2f:["$","title",null,{"children":"As formas mais fáceis de se utilizar Processing no Observable | Processing Brasil | Observable"}] 34:T50f,md`
Podemos rodar código Processing (em qualquer das modalidades) utilizando apenas 3 linhas de código, uma em cada célula do Observable.

**Passo 1:** Você pode incluir seu código em uma primeira célula atribuíndo ele diretamente a uma variável, desta forma: \`\`\`js codigo = \` // meu código \` \`\`\` **Passo 2:** Na segunda célula, você o executa utilizando a função \`processing(c,e)\`, \`p5(c,e)\` ou \`pythonProcessing(c,e)\` dependendo da linguagem escolhida, onde \`c\` é a variável com o código, e \`e\` é uma \`String\` com código \`CSS\` opcional para ser aplicado ao conteiner do Sketch (se não desejar alterar as configurações iniciais, a variável pode ser omitida da instrução, usando apenas \`processing(c)\`, por exemplo).

**Passo 3:** Por fim, na terceira célula é necessário importar a implementação de Processing desejada através da instrução: \`\`\`js import {processing|p5|pythonProcessing} from '@ranoya/processing' \`\`\` A ordem das células no documento não interferem no resultado. Elas podem ser colocadas para baixo ou para cima no documento, à vontade.

Seguindo estes três passos simples, é possível apresentar qualquer tipo de código Processing rodando dentro de um documento no Observable. `35:Tb42,md` \`\`\`js viewof CodigoViaAce = { let codigoinicial = \` function setup() { createCanvas(420, 160); background(255); } function draw() { fill(255); stroke('#000000'); position = sin(frameCount / 60) * 50 + 150; ellipse(position, 80, 100,100); } \`; // Instanciando o editor const { editor, view } = ace( codigoinicial, { fontSize: "0.8em", height: "260px" }, { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showPrintMargin: false, showGutter: false } ); // Captura o valor inicial view.value = editor.getValue(); // Reage a qualquer mudança feita no editor editor.on('change', () => { view.value = editor.getValue(); }); return view; } \`\`\`
Você pode inserir o código que deverá aparecer no editor na variável \`codigoinicial\` deste código, e se quiser manter o editor vazio, basta colocar \`codigoinicial = "";\` nele.

A variável \`\`CodigoViaAce\`\` recebe, como uma \`\`String\`\`, o que estiver digitado no editor, 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, atribuíndo os códigos digitados em cada editor à variáveis diferentes.

Ao colocar estas variáveis como o valor \`\`c\`\` de \`\`processing(c,e)\`\`, \`\`p5(c,e)\`\` ou \`\`pythonProcessing(c,e)\`\`, 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 aqui](https://github.com/ajaxorg/ace/wiki/Configuring-Ace). É possível utilizar [esta ferramenta](https://ace.c9.io/build/kitchen-sink.html) 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). `36:[] 32:{"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","thumbnail":"4e9155eee7f2daac08a16185317153da8a24b0482dac5bdb997749a8b8e4ced8","access_level":"public","create_time":"$D2021-03-07T00:14:37.118Z","update_time":"$D2021-03-11T23:25:08.577Z","view_time":null,"first_public_time":"$D2021-03-07T00:17:27.161Z","has_unpublished_edits":null,"fork":{"id":"9a3b42372d18d4f5","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":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":3,"starred":false,"owner":{"type":"team","id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":"starter_2024"},"version":272,"publish_version":272,"role":null,"authored":false,"authors":[{"type":"individual","id":"6026713a1531e323","login":"processingbrasil","name":"Processing Brasil","avatar_url":"https://avatars-next.observableusercontent.com/3d6bd67e4d66853bd3f201190f0a0d7e5b504e88ebf8fe4225fbeaf7e7487864","tier":null}],"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":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"f68d9e0595973b5f","slug":"introducoes","title":"Introduções","owner":{"id":"4aa3e7af8e4705a0","login":"processingbrasil","name":"Processing Brasil"}},"type":"notebook","body":{"title":"As formas mais fáceis de se utilizar Processing no Observable","cells":[{"id":233,"value":"md`# As formas mais fáceis de se utilizar Processing no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"html`\n\n

\n\n

@ranoya

\n\n

documento original no Observable

\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"md`\n### Incluíndo p5.js no modo global, Processing original, e Processing modo Python\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`Este documento é uma demonstração de como incluir sketchs de Processing no Observable, em qualquer uma das três modaliadades.\n

\nOs código que permitem rodar Processing neste ambiente estão disponíveis [neste documento](https://observablehq.com/@ranoya/processing), e são baseadas em [ProcessingJS](https://github.com/processing-js/processing-js) para o \"modo java\"; na implementação de [p5.js no modo global](https://observablehq.com/@esperanc/desenhando-com-p5-canvas-e-svg) no Observable, de [Claudio Esperança](https://observablehq.com/@esperanc); e na solução [pyp5js de Bernardo Fontes](https://github.com/berinhard/pyp5js) utilizando [pyodide](https://github.com/iodide-project/pyodide) para rodar Python no navegador.\n

\nVejamos 3 exemplos, o primeiro usado o formato original (java), o segundo usando p5.js (javascript), e o terceiro utilizando o Processing modo Python:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`
\n## Usando Processing (modo original/java) no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"meuSketch = `\n void setup() {\n size(160, 160);\n background(255);\n }\n void draw() {\n stroke(#2299FF);\n fill(255);\n radius = sin(frameCount / 60) * 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":14,"value":"processing(meuSketch, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { processing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`
\n## Usando p5.js (modo global) no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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('#2299FF');\n radius = sin(frameCount / 60) * 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":46,"value":"p5(p5_code, 'width: 160px; height:170px')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { p5 } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`
\n## Usando Processing modo Python no Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"codePy = `\ndef setup():\n createCanvas(160, 160)\n background(255)\n\ndef draw():\n stroke('#2299FF')\n radius = sin(frameCount / 60) * 50 + 50\n rect(30, 30, radius, radius)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"pythonProcessing(codePy, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import { pythonProcessing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`\n
\n## Editor de código\nO [ACE Editor](https://ace.c9.io/#nav=embedding) é 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 constroi estes documentos.\n

\nO ACE pode ser implementado em um documento Observable. O código abaixo está sendo apresentado e executado diretamente de uma instância do ACE, e, portanto, pode ser modificado em tempo real:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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('#2299FF');\n position = sin(frameCount / 60) * 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":169,"value":"p5(CodigoViaAce, \"width: 400px; height: 170px;\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"md`\n
\nPara incorporar um editor ACE no seu documento, utilize as instruções abaixo:\n\\`\\`\\`js\nimport { ace } from '@jobleonard/ace'\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"md`É possível ter várias instâncias do ACE rodando em uma página. Cada instância deve ser atribuída a uma variável diferente, e desta forma será possível rodar vários livecodes ao mesmo tempo na página.\n

\nNós dois códigos abaixo utilizaremos uma instância ACE sem código, e outra instância no modo *read only* (que não pode ser alterado).\n

\nNo primeiro exemplo, o código digitado no editor será colocado na variável \\`\\`CodigoViaAce2\\`\\` (e toda alteração no código digitado será atualizada em toda a parte do documento que utilizar a variável).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","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":259,"value":"viewof CodigoViaAce2 = {\n let codigoinicial = ``;\n\n // Instanciando o editor\n const { editor, view } = ace(\n codigoinicial,\n { fontSize: \"0.8em\", height: \"260px\" },\n {\n theme: \"ace/theme/xcode\",\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: true\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}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md`\n
No segundo exemplo abaixo, o código no editor será colocado na variável \\`\\`CodigoViaAce3\\`\\`, mas ele não pode ser alterado por que o ACE está configurado com a opção \\`\\`readonly: true\\`\\` . Independentemente disso, o código atribuído à variável \\`\\`CodigoViaAce3\\`\\` pode ser utilizado para rodar um novo sketch de Processing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"viewof CodigoViaAce3 = {\n let codigoinicial = `\ndef setup():\n createCanvas(160, 160)\n background(255)\n\ndef draw():\n stroke('#2299FF')\n radius = (sin(frameCount / 60) * 15) + (sin(frameCount / 60) * 15)\n rect(30, 30, radius, radius)\n`;\n\n // Instanciando o editor\n const { editor, view } = ace(\n codigoinicial,\n { fontSize: \"0.8em\", height: \"260px\" },\n {\n theme: \"ace/theme/xcode\",\n selectionStyle: \"text\",\n highlightActiveLine: false,\n mode: \"ace/mode/python\",\n enableBasicAutocompletion: true,\n enableLiveAutocompletion: true,\n enableSnippets: true,\n showPrintMargin: false,\n readOnly: true,\n showGutter: true\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}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"pythonProcessing(CodigoViaAce3, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"