2c:null 2d:["$","title",null,{"children":"p5Canvas(p5, setupSketch) | Maic López Sáenz | Observable"}] 32:T57b,p5Canvas = { function p5Canvas(p5, setupSketch) { return Generators.observe(next => { const container = DOM.element('div'); // First yield to allow container to get added to the DOM logger(`first container yield`); next(container); // Wrap the sketch to override the draw function // as to yield the container on each draw let sketchWrapper = sketch => { setupSketch(sketch); sketch.wrappedDraw = sketch.draw; sketch.draw = function() { sketch.wrappedDraw(); // Yield after each draw logger(`wrapper container yield`); next(container); }; } // p5 instance is created in a delay to allow the container // to get yielded and added to the DOM first let instance = null; Promises.delay(0).then(() => { instance = new p5(sketchWrapper, container); logger(`✅ p5 instance created`); }); return () => { // Clean up instance as it no longer used when a cell is refreshed logger(`🛑 remove instance: ${instance !== null}`); if (instance !== null) instance.remove(); } }); } // function p5Canvas // Add version to function object Object.defineProperty(p5Canvas, 'version', { enumerable: true, configurable: false, writable: false, value: version }); return p5Canvas }33:T9fd,// Animating example firstExample = p5Canvas(p5, sketch => { let angle = 0; let offset = 0; sketch.setup = function() { sketch.createCanvas(width, 300); sketch.frameRate(20); // sketch.noLoop(); }; sketch.mouseReleased = function() { // No-op if mouse is outside canvas bounds if (sketch.mouseX < 0 || sketch.mouseX >= sketch.width || sketch.mouseY < 0 || sketch.mouseY >= sketch.height) { return; } if (sketch.isLooping()) { sketch.noLoop(); } else { sketch.loop(); } }; sketch.draw = function() { sketch.background('#222222'); sketch.strokeWeight(3); let lineStart = sketch.width * 1/5; let lineEnd = sketch.width * 4/5; // Middle line sketch.stroke('#dddddd'); sketch.line(lineStart, sketch.height/2, lineEnd, sketch.height/2); let crests = 2.5; let range = lineEnd - lineStart; let crestHeight = sketch.height/4; let taper = sketch.width * 1/6; // All sine lines let totalSteps = 70; for (let step = 0; step <= totalSteps; step += 1) { let linePosition = step * range / totalSteps; let ratio = (offset + linePosition) / range; let sine = Math.sin(ratio * crests * Math.PI * 2); let height = sine * crestHeight; // Tapering at start and end let heightRatio if (linePosition < taper) { heightRatio = linePosition / taper; } else if (linePosition > range - taper) { heightRatio = (range - linePosition) / taper; } else { heightRatio = 1; } let xPosition = lineStart + linePosition; let yPosition = sketch.height/2; sketch.stroke('#dd7777'); sketch.line(xPosition, yPosition, xPosition, yPosition + height * heightRatio); } // Instruction text sketch.noStroke(); sketch.fill('#dddddd'); sketch.textSize(15).textFont('monospace'); if (sketch.isLooping()) sketch.text('click to pause', 20, 30); else sketch.text('click to re-draw', 20, 30); // Pause symbol if (!sketch.isLooping()) { sketch.strokeWeight(4).stroke('#dddddd'); sketch.fill('#222222'); let xCenter = sketch.width/2; let yCenter = sketch.height/2; let side = 50; sketch.rect( xCenter - side/2, yCenter - side/2, side/3, side); sketch.rect( xCenter - side/2 + side*2/3, yCenter - side/2, side/3, side); } offset += 1.5; }; })34:Ta01,// Another animating example p5Canvas(p5, sketch => { let angle = 0; let offset = 0; sketch.setup = function() { sketch.createCanvas(width, 300); sketch.frameRate(20); sketch.noLoop(); }; sketch.mouseReleased = function() { // No-op if mouse is outside canvas bounds if (sketch.mouseX < 0 || sketch.mouseX >= sketch.width || sketch.mouseY < 0 || sketch.mouseY >= sketch.height) { return; } if (sketch.isLooping()) { sketch.noLoop(); } else { sketch.loop(); } }; sketch.draw = function() { sketch.background('#222222'); sketch.strokeWeight(3); let lineStart = sketch.width * 1/5; let lineEnd = sketch.width * 4/5; // Middle line sketch.stroke('#dddddd'); sketch.line(lineStart, sketch.height/2, lineEnd, sketch.height/2); let crests = 2.5; let range = lineEnd - lineStart; let crestHeight = sketch.height/4; let taper = sketch.width * 1/6; // All sine lines let totalSteps = 70; for (let step = 0; step <= totalSteps; step += 1) { let linePosition = step * range / totalSteps; let ratio = (offset + linePosition) / range; let sine = Math.sin(ratio * crests * Math.PI * 2); let height = sine * crestHeight; // Tapering at start and end let heightRatio if (linePosition < taper) { heightRatio = linePosition / taper; } else if (linePosition > range - taper) { heightRatio = (range - linePosition) / taper; } else { heightRatio = 1; } let xPosition = lineStart + linePosition; let yPosition = sketch.height/2; sketch.stroke('#559955'); sketch.line(xPosition, yPosition, xPosition, yPosition + height * heightRatio); } // Instruction text sketch.noStroke(); sketch.fill('#dddddd'); sketch.textSize(15).textFont('monospace'); if (sketch.isLooping()) sketch.text('click to pause', 20, 30); else sketch.text('click to re-draw', 20, 30); // Pause symbol if (!sketch.isLooping()) { sketch.strokeWeight(4); sketch.stroke('#dddddd'); sketch.fill('#222222'); let xCenter = sketch.width/2; let yCenter = sketch.height/2; let side = 50; sketch.rect( xCenter - side/2, yCenter - side/2, side/3, side); sketch.rect( xCenter - side/2 + side*2/3, yCenter - side/2, side/3, side); } offset += 1.5; }; })35:Tb31,// Mouse press/drag example p5Canvas(p5, sketch => { let firstFrame = true; let reticuleX = 0; let reticuleY = 0; sketch.setup = function() { sketch.createCanvas(width, 300); sketch.frameRate(20); sketch.noLoop(); }; function isMouseOutside() { return sketch.mouseX < 0 || sketch.mouseX >= sketch.width || sketch.mouseY < 0 || sketch.mouseY >= sketch.height; } sketch.mouseDragged = function() { if (isMouseOutside()) { return; } sketch.loop(); }; sketch.mousePressed = function() { if (isMouseOutside()) { return; } sketch.loop(); } sketch.mouseReleased = function() { if (isMouseOutside()) { return; } sketch.noLoop(); }; sketch.draw = function() { sketch.background('#222222'); sketch.strokeWeight(3); sketch.noFill(); let positionDivisor = 4; let posX, posY; if (firstFrame) { // Initial center position firstFrame = false; reticuleX = posX = sketch.width/2; reticuleY = posY = sketch.height/2; } else { // Approach mouse position let xDistance = sketch.mouseX - reticuleX; if (Math.abs(xDistance) < 1) { reticuleX = sketch.mouseX; } else { reticuleX = reticuleX + xDistance/positionDivisor; } let yDistance = sketch.mouseY - reticuleY; if (Math.abs(yDistance) < 1) { reticuleY = sketch.mouseY; } else { reticuleY = reticuleY + yDistance/positionDivisor; } } if (reticuleX == sketch.mouseX && reticuleY == sketch.mouseY) { sketch.noLoop(); } let circleRadius = 30; let rayBase = 50; let rayExtension = 30; let sineCount = 5; let posOffsetDivisor = 800; // Rays sketch.stroke('#555599'); let totalRays = 60; for (let index = 0; index < totalRays; index++) { let angleRadians = Math.PI * 2 * index / totalRays; let sine = Math.sin(angleRadians); let cosi = Math.cos(angleRadians); let rayRatio = index/totalRays; // [0,1) let offsetRatio = (reticuleX + reticuleY) % posOffsetDivisor / posOffsetDivisor; // [0, 1) let rayRadians = (rayRatio + offsetRatio) * Math.PI * 2; let rayLength = rayBase + Math.sin(rayRadians * sineCount) * rayExtension; let startX = reticuleX + sine * circleRadius; let startY = reticuleY + cosi * circleRadius; let endX = startX + sine * rayLength; let endY = startY + cosi * rayLength; sketch.line(startX, startY, endX, endY); } // Center ring sketch.stroke('#dddddd'); sketch.circle(reticuleX, reticuleY, circleRadius*2); // Instruction text sketch.noStroke(); sketch.fill('#dddddd'); sketch.textSize(15).textFont('monospace'); sketch.text('click and drag to re-draw', 20, 30); }; })36:[] 30:{"id":"ffc5888eff3f16eb","slug":"p5-canvas","title":"p5Canvas(p5, setupSketch)","thumbnail":"77fe395af68d94b2894b56a9ccfbd25961cff6514b707161cd19e796e471bc58","access_level":"public","create_time":"$D2021-02-19T12:42:57.907Z","update_time":"$D2023-08-10T21:08:31.039Z","view_time":null,"first_public_time":"$D2021-02-19T13:35:19.315Z","has_unpublished_edits":null,"fork":{"id":"493851ae5989f70a","slug":"p5","title":"p5","owner":{"id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright"}},"stars":1,"starred":false,"owner":{"type":"team","id":"f15bd58f0c95f3c8","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":"starter_2024"},"version":1180,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4770505bbf3a462a","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":null}],"members":[{"type":"individual","id":"4770505bbf3a462a","login":"lopsae","name":"Maic López Sáenz","avatar_url":"https://avatars-next.observableusercontent.com/0893731e3547c49619042dd456ec0027d4e8c2f1359fc3c07859cb1fc2eb1ea4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"p5Canvas(p5, setupSketch)","cells":[{"id":0,"value":"# `p5Canvas(p5, setupSketch)`\n\nReturns a generator that yields a `div` element setup as the canvas for a [p5.js](https://p5js.org/) instance running in [*instance mode*](https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace).\n\nThe newly created `div` will be yielded once before the `p5` instance is initialized. Afterwards the same `div` will be yielded at the end of every call to `sketch.draw()`.\n\nBased on [`@tmcw/p5`](https://observablehq.com/@tmcw/p5). This fork synchronizes the yielding of the canvas `div` with each call to `sketch.draw()`. For examples of these differences see [notes on `p5` and `p5Canvas`](https://observablehq.com/@lopsae/notes-on-p5-and-p5canvas).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"#### Import:\n${await makeImportStatement(['p5Canvas'], true)}\n\nStable pinned name: `${await getCurrentStableName()}`\n
\nVersion (pin): `${p5Canvas.version} (${await getCurrentStableVersion()})`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"version = '1.1.5'\n// 1.1.5 (1180) - Update examples to use P5js 1.7.0, other dependency updates, no functional changes\n// 1.1.4 (1061) - Updated examples to use P5js 1.4.2, other dependency updates, no functional changes\n// 1.1.3 (1037) - Updated examples to use P5js 1.4.0, no functional changes\n// 1.1.2 (1031) - Updated to use cell modes, no functional change\n// 1.1.1 (947) - Updated to use importUtils, no functional change\n// 1.1.0 (931) - Renamed from sketchP5 to p5Canvas\n// 1.0.3 - Retested with mouse interaction\n// 1.0.2 - Use import-utilities and documentation updates\n// 1.0.1 - First stable version","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"---\n### Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":972,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":700,"value":"### Parameters\n+ `p5: {P5Class}` — The [`p5` constructor](https://p5js.org/reference/#/p5/p5), usually the object loaded by:\n ```\n p5 = require('p5')\n ```\n+ `setupSketch: {sketch => Void}` — A function that sets-up the `sketch` object, this function is eventually passed to the `p5` constructor to setup in [*instance mode*](https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1074,"value":"### Yields\nThe returned generator yields a `div` element setup to be used as canvas by the given `p5` constructor, and the `sketch` object setup by `setupSketch`.\n\nThe newly created `div` will be yielded once before the `p5` instance is initialized. Afterwards the same `div` will be yielded at the end of every call to `sketch.draw()`.\n\nThe initial yield allows the empty `div` to be added to the `DOM` before the `p5` instance is initialized. `p5` expects the `div` to exist already in the `DOM`, and this initial yield is necessary for the `p5` instance to work correctly.\n\nFor a `sketch` setup with [`sketch.noLoop()`](https://p5js.org/reference/#/p5/noLoop) the `div` will be yielded exactly twice: once before the `p5` instance is initialized, and once after `sketch.draw()` is called.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":603,"value":"### Known issues\n[`sketch.mouseReleased`](https://p5js.org/reference/#/p5/mouseReleased) and other pointer related functions are called for all existing `sketch` objects when clicking anywhere in the notebook. Current workaround is to check the mouse coordinates against the canvas bounds and only handle the events when happening inside the canvas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"---\n### Examples\nThe examples below have animated content, which yields at the frequency of p5.js framerate. Click on any example to toggle the animations. The `div` is only yielded after each call to `sketch.draw`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"---\n#### Exposed objects (for inspection)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"sketchToInspect = Generators.observe(next => {\n p5Canvas(p5, sketch => {\n sketch.setup = function() {\n sketch.createCanvas(300, 300);\n sketch.noLoop();\n };\n sketch.draw = function() {\n sketch.background('#ff9999');\n next(sketch);\n };\n }) // p5Canvas;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1100,"value":"firstExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"---\n#### Utility `logger`\n`logger` is used inside `canvasP5` to debug the creation and disposal of the `p5` instances. It is a no-op by default.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"function logger(log) {\n // No-op by default, enable for debugging\n // console.log(log);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"---\n### Colophon","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"styles","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"p5 = require('https://unpkg.com/p5@1.7.0/lib/p5.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"requireCheck('p5@1.7.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"import {styles} from '@lopsae/styles@159'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"importCheck('@lopsae/styles', 159)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"import {importCheck, makeImportStatement, getCurrentStableVersion, getCurrentStableName} from '@lopsae/import-utilities@552'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"importCheck('@lopsae/import-utilities', 552)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"import {requireCheck} from '@lopsae/require-utilities@306'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1052,"value":"importCheck('@lopsae/require-utilities', 306)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 31:"$30:body"