3f:null 40:["$","title",null,{"children":"The easiest ways of using Processing in Observable | Alexandre B A Villares | Observable"}] 46:T48d,md` ## How is it done?
We can run Processing code (any of those modes) using just 3 lines of code, each one in an Observable cell.

**Step 1:** You an include your code in a first cell, attributing it to a variable, like this: \`\`\`js code = \` // my code \` \`\`\` **Step 2:** On a second cell, you run it using the function \`processing(c,e)\`, \`p5(c,e)\` or \`pythonProcessing(c,e)\` depending on the chosen mode, where \`c\` is the variable with the code, and \`e\` is a \`String\` with optional \`CSS\` to be aplied to the Sketch container (you can omit this if you just want to use the default settings, using \`processing(c)\`, for instance).

**Step 3:** Then, in a third cell you have to import the desired Processing mode using this instruction: \`\`\`js import {processing|p5|pythonProcessing} from '@ranoya/processing' // Observable will hide the quotes! \`\`\` The order of cells in the document do no change the results, they can be moved up and down in the document as you please.

Following these three simple steps, it is possible to show almost any kind of Processing code running inside an Observable document. `47:Taa5,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); } \`; // Instanciate the 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 } ); // Captures the initial value view.value = editor.getValue(); // Reacts to every change of the editor editor.on('change', () => { view.value = editor.getValue(); }); return view; } \`\`\`
You can insert the code that should appear in the editor in the variable \`codigoinicial\` of this code, and if you want to keep the editor empty, just put \`codigoinicial = "";\` in it.

The variable \`\`CodigoViaAce\`\` receives, as a \`\`String\`\`, what is typed in the editor, and the instruction \`\`viewof\`\` that precedes it, causes that it is monitored at all times, so that your changes are applied in all other places where it is called in the document.

You can exchange the variable \`\`CodigoViaAce\`\` for others of your choice, and you can create several ACE instances on the same page, assigning the codes entered in each editor to different variables.

By placing these variables as the \`\`c\`\` of \`\`processing(c,e)\`\`, \`\`p5(c,e)\`\` or \`\`pythonProcessing(c,e)\`\`, you can run several new sketches in the document, all of which can be modified, in real time, by independent ACE editors.

The editor's own settings can be changed in this code snippet: \`\`\`json { theme: "ace/theme/tomorrow", selectionStyle: "text", highlightActiveLine: false, mode: "ace/mode/javascript", enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: true, showGutter: false } \`\`\` Changing the parameter \`\`showGutter\`\` to \`\`true\`\` will bring the editor a bar with linting (error indication in the code) in real time, for example. All ACE configuration parameters [can be found here](https://github.com/ajaxorg/ace/wiki/Configuring-Ace). You can use [this tool](https://ace.c9.io/build/kitchen-sink.html) to see the great diversity of changes that can be made to it.

The editor can also be used in *read only*, mode, just to display code (as is normally done by MarkDown with the code marker). ` 48:[] 44:{"id":"f4cadec026784217","slug":"as-formas-mais-faceis-de-se-utilizar-processing-no-observab","title":"The easiest ways of using Processing in Observable","thumbnail":"917523f0a81bb1c3cfd7f7955d38881228c4e8ead328644cdf0409387bd627f3","access_level":"public","create_time":"$D2021-03-06T22:40:11.215Z","update_time":"$D2021-03-11T23:57:06.182Z","view_time":null,"first_public_time":"$D2021-03-07T00:28:05.976Z","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":"4eda4181cf821adc","login":"villares","name":"Alexandre B A Villares","avatar_url":"https://avatars-next.observableusercontent.com/f1f407b92d7e6937b6b97def503af9e83ac840df4311551eb91745c0f4c8a4b1","tier":"starter_2024","bio":"Tech + art educator, researching computer programming education on a visual context. "},"version":216,"publish_version":216,"role":null,"authored":false,"authors":[{"type":"individual","id":"b867e6d380670ee2","login":"villares","name":"Alexandre B A Villares","avatar_url":"https://avatars-next.observableusercontent.com/f1f407b92d7e6937b6b97def503af9e83ac840df4311551eb91745c0f4c8a4b1","tier":null,"bio":"Tech + art educator, researching computer programming education on a visual context. "}],"members":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"},{"type":"individual","id":"b867e6d380670ee2","login":"villares","name":"Alexandre B A Villares","avatar_url":"https://avatars-next.observableusercontent.com/f1f407b92d7e6937b6b97def503af9e83ac840df4311551eb91745c0f4c8a4b1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"The easiest ways of using Processing in Observable","cells":[{"id":65,"value":"md`# The easiest ways of using Processing in Observable\n#### translated from [@ranoya/as-formas-mais-faceis-de-se-utilizar-processing-no-observab](https://observablehq.com/@ranoya/as-formas-mais-faceis-de-se-utilizar-processing-no-observab) \n\nThe code that allows us to run Processing on this environment are avaliable [in this document](https://observablehq.com/@ranoya/processing), and are based on [ProcessingJS](https://github.com/processing-js/processing-js) for \"Java mode\"; on an implementation of [p5.js in global mode](https://observablehq.com/@esperanc/desenhando-com-p5-canvas-e-svg) for Observable, by [Claudio Esperança](https://observablehq.com/@esperanc); and [Bernardo Fontes' pyp5js](https://github.com/berinhard/pyp5js) project using [pyodide](https://github.com/iodide-project/pyodide) to run Python in the browser.\n

\nLet's see 3 examples, the first with Processing standard syntax (Java), the second using p5.js (Javascript), and the third with a Processing Python mode:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`
\n## Using Processing Java/\"standard\" in Observable\n(actually it's based on ProcessingJS that allows us to have Java syntax)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"mySketch = `\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"processing(mySketch, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import { processing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`
\n## Using P5*js (global mode) in Observable\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"import { p5 } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`
\n## Using Processing Python mode o Observable\n(actually P5*js + pyodide)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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\ndef mousePressed():\n background(0)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"pythonProcessing(codePy,'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"import { pythonProcessing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"\nmd`\n
\n## Code editor\n[ACE Editor](https://ace.c9.io/#nav=embedding) is a code editor that can be embedded within \\`\\`HTML\\`\\`, documents, and has several configurations that can be altered to suit the varied tastes and desires of those who build these documents.\n

\nACE can be implemented in an Observable document. The code below is being presented and executed directly from an ACE instance, and, therefore, can be modified in real time:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof CodingWithAce = {\n let initialCode = `\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 initialCode,\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: false\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"p5(CodingWithAce, \"width: 400px; height: 170px;\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"md`\n
\nTo incorporate an ACE editor into your document, use the instructions below:\n\\`\\`\\`js\nimport { ace } from '@jobleonard/ace'\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md`It is possible to have multiple instances of ACE running on one page. Each instance must be assigned to a different variable, so that it will be possible to run several livecodes at the same time on the page.\n

\nThe two codes below will use an ACE instance with no code, and another instance in *read only* mode (which cannot be changed).\n

\nIn the first example, the code entered in the editor will be placed in the variable \\`\\`CodigoViaAce2\\`\\` (and any change in the code entered will be updated throughout the document using the variable).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"import { ace } from '@jobleonard/ace'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"md`\n
In the second example below, the code in the editor will be placed in the variable \\`\\`CodigoViaAce3\\`\\`, but it cannot be changed because ACE is configured with the option \\`\\`readonly: true\\`\\` . Regardless of that, the code assigned to the variable \\`\\`CodigoViaAce3\\`\\` can be used to run a new Processing sketch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof CodigoViaAce3 = {\n let codigoinicial = `\ndef setup():\n size(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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"pythonProcessing(CodigoViaAce3, 'width: 160px; height: 170px;')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 45:"$44:body"