31:T468,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, atributing 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 tu use the default settings, usiong \`processing(c)\`, for instance ).

**Step 3:** Then, in a third cell you have to import the deisred Processing mode using this instruction: \`\`\`js import {processing|p5|pythonProcessing} from @ranoya/processing \`\`\` 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 thrww simple steps, it is possible to show almost any kind of Processing code running insede an Observable document. `32:T986,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, 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; } \`\`\`
You can put the code that should appear in the editor into \`codigoinicial\` variable, and if you want to keep the editor empty, just leave \`codigoinicial = "";\`.

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

The code entered in the editor is forwarded to the functions \`\`processing()\`\`, \`\`p5()\`\` or \`\`pythonProcessing()\`\` functions through it, or through other variables that you want to assign to new ACE instances.

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 \`\`showGutter\`\` parameter to \`\`true\`\` will bring to the editor a bar with linting (indication of errors in the code) in real time, for example. All ACE configuration parameters [can be found here](https://github.com/ajaxorg/ace/wiki/Configuring-Ace). It is possible to 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). `33:[] 2f:{"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) \nIncludes:\n- P5*js in global mode\n- Processing Java mode (actually Java syntax provided by ProcessingJS)\n- Processing Python mode (actually p5js + pyodide)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":14,"value":"processing(mySketch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { processing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`
\n## Using P5*js (global mode) in Observable\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":46,"value":"p5(p5_code)","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { p5 } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`
\n## Using Processing Python mode o Observable\n(actually P5*js + pyodide)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":155,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"pythonProcessing(codePy)","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import { pythonProcessing } from \"@ranoya/processing\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":164,"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: 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"},{"id":167,"value":"p5(CodigoViaAce, \"width: 400px; height: 170px;\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`\n
\nTo incorporate an ACE editor into your document, use the instructions below:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"import { ace } from '@jobleonard/ace'","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}