pyp5js with Pyodide Demo

30:T60d,md`
## Implementação das 3 versões (original, P5 e python) no Observable Este documento foi criado com o intuito de facilitar o uso do Processing em suas diversas versões na plataforma Observable, de forma que qualquer possoa possa, com 2 linhas de código (um \`\`import\`\` e uma função), rodar um código em Processing em qualquer página criada nesta plataforma

Estas soluções não seriam possíveis sem as contribuições inestimáveis do [Claudio Esperança](https://observablehq.com/@esperanc), do [Bernardo Fontes](https://github.com/berinhard) e do [Carlos de Oliveira Júnior (vamoss)](https://observablehq.com/@vamoss).

Nos três casos foram aplicadas a mesma lógica para criar os contextos onde as versões de processing rodam: a função que coloca o sketch no documento cria um elemento \`\``; iframe.srcdoc = `

`; return iframe; }32:[] 2e:{"title":"processing","cells":[{"id":0,"value":"md`# processing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"
\n## Revisões\n","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":329,"value":"### P5\n03/07/2021: Inclusão dos outputs de `print()` no sketch
\n28/06/2021: Inclusão dos outputs de console do p5.js no sketch em caso de erros
\n28/06/2021: Redimensionamento do ``;\n\n iframe.srcdoc = `\n\n \n \n \n\n \n

\n `;\n\n return iframe;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`\n
\n## P5\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"p5(p5_sketch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"p5_sketch = `\n function setup() {\n createCanvas(800, 350);\n background(200);\n }\n function draw() {\n ellipse(200,200,100,100);\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"md`\n
\n### Código para implementar esse recurso em outras páginas do Observable\n\n\\`\\`\\`js\n\nimport {p5} from @ranoya/processing\n\n\\`\\`\\`\n\n\n\\`\\`\\`js\n\np5(CódigoJavaMode, cssStyle);\n\n\n\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`\n
\n### Código fonte que implementa P5 em uma página (é o que você estará importando)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"md`\n
\n## Python Processing\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"pythonProcessing(codePython)","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"codePython = `\ndef setup():\n createCanvas(600, 400)\n background(160)\n\ndef draw():\n fill(\"blue\")\n background(200)\n radius = sin(frameCount / 60) * 50 + 50\n ellipse(100, 100, radius, radius)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"md`\n
\n### Código para implementar esse recurso em outras páginas do Observable\n\n\\`\\`\\`js\n\nimport {pythonProcessing} from @ranoya/processing\n\n\\`\\`\\`\n\n\n\\`\\`\\`js\n\npythonProcessing(CódigoPythonMode, cssStyle);\n\n\n\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`\n
\n### Código fonte que implementa Processing modo Python em uma página (é o que você estará importando)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"pythonProcessing = function(codigo, estilo = \"width: 100%; height: 410px;\") {\n let iframe = html``;\n\n iframe.srcdoc = `\n\n \n \n \n pyp5js with Pyodide Demo\n \n \n \n \n \n \n

\n \n\n`;\n return iframe;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`\n
\n### Código para implementar facilmente uma instância ACE`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"import { ace } from '@jobleonard/ace'","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"aceinstance = function(\n c = \"\",\n o = {\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: false\n },\n e = 'fontSize: \"0.8em\", height: \"260px\"'\n) {\n let codigoinicial = ``;\n\n // Instanciando o editor\n const { editor, view } = ace(c, e, o);\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"}],"files":"$W32","stdlib":"1","titling":"auto"}