processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.59k stars 3.31k forks source link

storeItem value must be serializable, not "any type #7146

Open SembeiNorimaki opened 2 months ago

SembeiNorimaki commented 2 months ago

Most appropriate sections of the p5.js website?

Reference

What is your operating system?

Windows

Web browser and version

No response

Actual Behavior

The documentation of getItem() currently says:

The second parameter, value, is the value to be stored. Values can have any type.

However value can only accept JSON serializable values.

An example of a workaround to store an image could be added as an example, using toDataURL():

yourImage.canvas.toDataURL()

Expected Behavior

the text should be corrected to:

The second parameter, value, is the value to be stored. Values must be Serializable.

Steps to reproduce

let img;

preload() {
  img = loadImage("myImage.png")
}

setup() {
  storeItem("MyImage", img);
}

p5.min.js:2 Uncaught 
TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'r'
    --- property '_pixelsState' closes the circle
    at JSON.stringify (<anonymous>)
    at n.default.storeItem (p5.min.js:2:554483)
    at <anonymous>:1:1

Would you like to work on the issue?

I will work on it

welcome[bot] commented 2 months ago

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!

nickmcintyre commented 2 months ago

Good catch @SembeiNorimaki! What do you think about the following?

The second parameter, value, is the value to be stored. value must be a serializable object such as a number, array, or another native JavaScript type. p5.Image, p5.Vector, and other advanced objects aren't serializable.

SembeiNorimaki commented 2 months ago

@nickmcintyre It's a bit hard to read as is now, since missing the point after Javascript type makes it read p5.Image, p5.Vector as other examples of allowed types, making the rest of the sentence not make sense. I had to read it twice.

What about:

The second parameter, value, is the value to be stored. value must be a serializable object such as a number, array, or another native JavaScript type.

p5.Image, p5.Vector, and other advanced objects aren't serializable and cannot be stored using this method.

Can I do the pull request myself? I tried doing a pull request on p5.js-website and it got blocked for not being an authorized user. Can new users create pull requests on this repo? If so, I'd like to do the pull request myself to practice.

davepagurek commented 2 months ago

@SembeiNorimaki this repo would be the one to open a PR into, as the website will update its data from here when we do a new release. That said, I think you should be allowed to make a PR into either if you fork the repo -- by any chance did you just make a branch instead of a fork?

nickmcintyre commented 2 months ago

@SembeiNorimaki sounds good. Please make one minor adjustment: instead of "... using this method." please use the name of the function in backticks, as in "... using storeItem()."