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
• [x] 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[bot]]

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) https://github.com/processing/p5.js/issues/7905#issuecomment-2967123259 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 https://github.com/processing/p5.js/issues/7881 and #7876 https://github.com/processing/p5.js/issues/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 https://github.com/processing/p5.js/issues/7905#issuecomment-2967123259, 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: https://github.com/processing/p5.js/blob/2606c21ef4924bd995053193c1c8b66f3e014d25/src/webgl/p5.Geometry.js#L416

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: https://github.com/processing/p5.js/blob/3eae27613378af782910034211bc328cdaa8f125/src/io/utilities.js#L3

[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

[acgillette]

I've started taking a look at this and would be interested in being assigned this issue :)

[davepagurek]

Thanks @acgillette!

[acgillette]

Great! Quick question if you don't mind. I have the dev environment set up and have been testing things by building the package and using the empty example sketch. Is that the method generally used for testing code changes, or should I be using the preview sketch?

[davepagurek]

That certainly works! depending on your use case, it may be faster to use npm run dev (which runs the sketch in preview/) or npm run dev:global (which runs the sketch in preview/global/) as both of those use hot reloading for faster iteration. Another approach, depending on the task, could be to write a unit test and run npm run test (which also reruns tests live when you make changes.) But building the library and using the result is also fine if it's working!

[akshatajmera7]

Hi! I’m a student learning JavaScript and interested in contributing to p5.js. I’d love to work on this issue to get started with open source and GSoC preparation. Could you please assign it to me or let me know if it’s okay to proceed? Thank you!

[ksen0]

Hi @akshatajmera7 , there is already a contributor working on this one / outstanding PR, so this cannot be assigned to you. Thanks for understanding!

[akshatajmera7]

Thank you so much for the response. If there is any new issue, please let me fix that or assign it to me. Thanks a lot