25:["$","title",null,{"children":"Global mode p5 | inoculate_media | Observable"}] 49:T9a8,md`# Global mode p5 [Processing](https://processing.org) is a widely successful and popular platform for creative coding created by Ben Fry and Casey Reas. In its original version, it is a Java based IDE with built-in support for a very flexible and terse graphics API, created with visual artists in mind. Its most recent JavaScript incarnation, [p5.js](https://p5js.org), is equally successful and brings the Processing flavor of graphics programming to the web. One of the main reasons for its wide adoption is the minimalistic dialect used for drawing, animation and event processing. Take for example the following code: \`\`\`js function setup() { createCanvas(400, 400); background('lightgray'); circle (200,200,100) } \`\`\` It creates a 400x400 canvas, paints a light gray background and a centered circle of radius 100. You might notice that \`setup()\` is never called explicitly. This is an example of a coding shortcut used by Processing systems: a function with that name is always called once per *sketch* (as Processing programs are frequently known). Similarly, a function called \`draw()\` is automatically called 60 times per second, allowing the programmer to code animations without ever setting up a time loop. There are also listeners for mouse and keyboard events that are automatically set up once you define functions with names such as \`mousePressed\` and \`keyPressed\`, as well as global variables with names such as \`mouseX\` and \`mouseY\` that are automatically set in response to mouse events. This kind of convenience requires defining all of the p5 constants, variables and functions on the global scope, and that is why the default Processing environment works in what is called the *global mode*. In global mode, there is only one canvas, and all of the drawing API refers to it implicitly. A saner, but less commonly used mode is the [*instance mode*](https://p5js.org/reference/#/p5/p5), where all of the API is bound to a single 'instance' variable, without polluting the global namespace. In fact, thanks to the clever [p5 encapsulation](https://observablehq.com/@tmcw/p5) by [Tom MacWright](https://observablehq.com/@tmcw), it is very simple to run a p5 sketch in instance mode inside an Observable notebook. But what if we want the convenience of global mode? The answer is to run your sketch inside an iframe. In this notebook we implement the \`p5iframe\` helper, which does just this. Here's an example: `4a:[] 29:{"id":"e30f537fde98b64c","slug":null,"title":"Global mode p5","thumbnail":"b2802465ceab98e59140dd382dbda49deacb0a87c5789eb481ec97c9be851997","access_level":"public","create_time":"$D2023-08-03T03:52:01.829Z","update_time":"$D2023-08-03T03:52:01.829Z","view_time":null,"first_public_time":"$D2023-08-03T03:52:01.829Z","has_unpublished_edits":null,"fork":{"id":"52a4c9d656dad904","slug":"global-mode-p5","title":"Global mode p5","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"stars":0,"starred":false,"owner":{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","bio":"Video artist and data nerd,","following":false},"version":176,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"bio":"I make art, code and applications that integrate ai and machine learning for musicians and artists. My own music project is Les Barons | The Barons","following":false}],"members":[{"type":"team","id":"5be65f59a7d4414c","login":"inoculate","name":"inoculate_media","avatar_url":"https://avatars-next.observableusercontent.com/a463960a3665d015e1f951ffefd56c80438990e8ca3c81da33076759d509ec50","tier":"starter_2024","role":"editor"},{"type":"individual","id":"4a9b2751079d79b6","login":"inoculate23","name":"Craig Ellenwood","avatar_url":"https://avatars-next.observableusercontent.com/655e21a46fb0887d567d2c63550ddebb4fff07e632cf340edf07bac49c519fac","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Global mode p5","cells":[{"id":0,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"(await visibility(),\np5iframe(`\nfunction setup() {\n\tcreateCanvas(windowWidth, windowHeight, WEBGL);\t\n}\n\nfunction draw() {\n\tbackground(100);\n\tresetMatrix();\n\tnoStroke();\n\tlet deg = PI/180;\n\tlet ang = frameCount * deg/2;\n\tlet r = 2;\n\tcamera (r*cos(ang),-1,r*sin(ang),0,0,0,0,1,0);\n\tperspective (PI/7, width/height, 0.01, 1000);\n\tpointLight (200, 200, 200, 2, -2, 2);\n\tpointLight (200, 200, 200, 0, -2, 0);\n\tpush();\n\tfor (let i=-5; i <= 5; i++) {\n\t\tlet x = i * 0.2;\n\t\tfor (let j=-5; j <= 5; j++) {\n\t\t\tlet z = j * 0.2;\n\t\t\tpop(); push();\n\t\t\ttranslate (x,0,z);\n\t\t\trotateX((ang%PI)*cos(ang)+i*deg*10);\n\t\t\trotateZ(ang+j*deg*5);\n\t\t\tbox (0.2,0.2,0.2)\n\t\t}\n\t}\n\tpop();\n}`))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## P5 iframe helper\n\nYou can import the helper thus:\n\n \\`\\`\\`js\n import { p5iframe } from \"@esperanc/global-mode-p5\"\n \\`\\`\\`\n\nThe p5iframe function is called as \n\n \\`p5iframe (\\`* sketch * , * options * \\` ) \\` \n\nwhere\n - *sketch* is the source code of a sketch;\n - *options* is an object containing one or more of \n - \\`width:\\` *number* , the width in pixels of the iframe. By default, it is the width of an Observable cell,\n - \\`height:\\` *number* , the height in pixels of the iframe (600 by default),\n - \\`style:\\` *string*, css to be passed to the iframe element.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md`

\n# A P5 Editor\n\nA very simple environment for editing and running sketches is implemented below. It consists of an [instance of the ACE editor](https://observablehq.com/@jobleonard/hello-ace-editor) courtesy of [Job van der Zwan](https://observablehq.com/@jobleonard), two buttons, one for running and another for stopping the sketch, and a cell to show the sketch in an iframe.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"p5editorView = editor.view","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"p5editorButtons = {\n let run = html``;\n run.onclick = () => {\n p5EditorResult.innerHTML = \"\";\n p5EditorResult.append(p5iframe(editor.editor.getValue()));\n };\n let stop = html``;\n stop.onclick = () => {\n p5EditorResult.innerHTML = `Stopped`;\n };\n return html`${run} ${stop}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"p5EditorResult = html`

Stopped

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"p5iframe = function(sketch, options = {}) {\n let { height = 600, title = \"p5 sketch\", style = \"\" } = options;\n\n let iframe = html``;\n\n iframe.srcdoc = `\n\n \n \n \n \n\n `;\n\n return iframe;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"defaultSketch = `\n function setup() {\n createCanvas(400, 400);\n background(200);\n circle (200,200,100)\n }\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"editor = ace(defaultSketch,\n { height: \"20em\" },\n { theme: \"ace/theme/chrome\", mode: \"ace/mode/javascript\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"import {ace} from '@jobleonard/ace'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null