saveObj() bug?

[ErnestSuyver]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• p5.strands
• WebGL
• DevOps, Build process, Unit testing
• Internationalization (i18n)
• Friendly Errors
• Other (specify if possible)

p5.js version

2.0.3

Web browser and version

Firefox 139.0.4 (aarch64)

Operating system

macOS 15.5

Steps to reproduce this

intro

When trying to export an ".obj" file from a p5 sketch, the console throws an error. Claims it doesn't recognize a "fn" function.

Could this be related to line 415-416 in https://github.com/processing/p5.js/blob/v2.0.3/src/webgl/p5.Geometry.js?

const blob = new Blob([objStr], { type: 'text/plain' });
    fn.downloadFile(blob, fileName , 'obj');

Steps:

1. WEBGL renderer
2. buildGeometry() in setup()
3. saveObj() in keyPressed()
4. When pressing the key ("s" in this case), the console given an error
5. Swapping the CNV version for a local minified one makes no difference. Also, buildGeometry does not seem to work for older p5 versions.

Snippet:

let myModel;

function setup() {
  createCanvas(400, 400, WEBGL);
  
  myModel = buildGeometry(() => {  

    blah blah

  });
 
}

function draw() {
  
  model(myModel);
}

function keyPressed() {
  if (key === 's') {
    myModel.saveObj(); 
  }
}

console error

Uncaught ReferenceError: fn is not defined
saveObj http://127.0.0.1:5500/p5.min.js:1
keyPressed http://127.0.0.1:5500/sketch.js:60
_onkeydown http://127.0.0.1:5500/p5.min.js:1
e http://127.0.0.1:5500/p5.min.js:1
p5 http://127.0.0.1:5500/p5.min.js:1
promise callback*p5< http://127.0.0.1:5500/p5.min.js:1
http://127.0.0.1:5500/p5.min.js:1
p5.min.js:1:179337
saveObj http://127.0.0.1:5500/p5.min.js:1
keyPressed http://127.0.0.1:5500/sketch.js:60
_onkeydown http://127.0.0.1:5500/p5.min.js:1
(Async: EventListener.handleEvent)
e http://127.0.0.1:5500/p5.min.js:1
p5 http://127.0.0.1:5500/p5.min.js:1
(Async: promise callback)
p5 http://127.0.0.1:5500/p5.min.js:1
http://127.0.0.1:5500/p5.min.js:1

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[ErnestSuyver]

Hi kit, I am slightly confused because a) your email addresses me directly but I am in the cc b) I cannot see the text of your email in the bug report in GitHub (or I would have answered you there) c) you did not sign the email so it took me a while to realise you are a real human being (and not a robot), answering very quickly to the report - many thanks for that! d) using keyisDown, as you suggest, does not seem to solve the issue. Maybe I implemented it incorrectly. I just put `if (keyIsDown('s')) { myModel.saveObj(); }` as a last line in draw(). The console tells me “Uncaught (in promise) ReferenceError: fn is not defined”. e) the online sketch you refer to uses keyPressed (and not keyisDown), but it does work. Note that the online sketch works in combination with WEBGL but has no buildGeometry. When I enter my sketch in its original form in the online editor, it gives the same error (“ReferenceError: fn is not defined”). When I try the keyisDown variant, I get these errors: “TypeError: stacktrace[(friendlyStack[0].frameIndex - 2)] is undefined ReferenceError: fn is not defined 🌸 p5.js says: [p5.js, line 77059] Cannot read property of undefined. Check the line number in error and make sure the variable which is being operated is not undefined. + More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_access_property#what_went_wrong ***@***.***/lib/p5.js:77059:24] Error at line 77059 in processStack() ***@***.***/lib/p5.js:77155:55] Called from line 77155 in fesErrorMonitor()" I hope this helps. Thanks again for your fast reply! Best, Ernest

…

On 12 Jun 2025, at 16:41, kit ***@***.***> wrote: ksen0 left a comment (processing/p5.js#7905) <#7905 (comment)> Hi @ErnestSuyver <https://github.com/ErnestSuyver> ! There have been some updates to keyboard event handling, so the example above would work with keyIsDown <https://beta.p5js.org/reference/p5/keyisdown/>: for example, as in this sketch <https://editor.p5js.org/ksen0/sketches/VPwt6jq_c> Related issues: #7881 <#7881> and #7876 <#7876> Adding documentation steward @perminder-17 <https://github.com/perminder-17> - please feel free to close as a duplicate if this is covered by existing work! — Reply to this email directly, view it on GitHub <#7905 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABDWRYVKQPRSCHUJDWSINGD3DGGS3AVCNFSM6AAAAAB7FTWTMWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDSNRXGEZDGMRVHE>. You are receiving this because you were mentioned.

[ErnestSuyver]

I should add that mousePressed with save() works fine in combination with WEBGL and buildGeometry.

[davepagurek]

I'm guessing Kit's reply to the GitHub email didn't make it to GitHub so I don't have the full context, but looking at this code, this does strike me as suspicious:

p5.js/src/webgl/p5.Geometry.js

Line 416 in 2606c21

fn.downloadFile(blob, fileName , 'obj');

Normally we only assign to fn when defining a function in an addon module, and don't use it when calling a function, because this will be undefined when we do. (fn.something = ... adds a new method to every p5 instance, but calling it on fn rather than on a p5 instance means it can't access anything that needs this.) I don't know that downloadFile actually needs this to work, but using fn out of an addon here is likely the source of the bug.

We can probably import downloadFile from here and call it directly (downloadFile(...)) rather than trying to call it on fn:

p5.js/src/io/utilities.js

Line 3 in 3eae276

function downloadFile(data, fName, extension) {

[ksen0]

Hi @ErnestSuyver sorry about creating the confusion and thanks Dave for jumping in! I had a draft response that was focused on the keyboard event which was my first thought here, but that's not the issue overall in any case