wk5 add local storage state widget

[totally-not-frito-lays]

one major pain point was that the canvas was entirely reset each time they changed the code or the color pallet. Consider using the localstorage api to persist a save state so that they can live reload.

[phentos]

storage probably won't work

turns out storage won't work unless we find a way to capture the sketch operations as strings; could encode the canvas image as a string but that's probably horrible

Storage only supports storing and retrieving strings. If you want to save other data types, you have to convert them to strings. For plain objects and arrays, you can use JSON.stringify().

https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

alternative?

does editor.p5 support saving an image into its own directory instead of downloading? if so could save to self -> load from self

[totally-not-frito-lays]

I believe there's a super janky way of serializing and deserializing an image into json format but it's 100% better practice to store the image into its own directory.

Though last I checked, most of the file loading functions I'm aware of require the use of node.js or other javascript backend runtimes to implement.

Speaking of which, we had one student completely erase everything they had, then saved, then also conveniently cleared the undo stack. I'm not really sure what to do about that other than just explicitly tell her what probably happened and how she lost all her progress when trying to save.

[phentos]

So, we have a solution in how I implemented the help menu in animationStudio.js, though I dunno how great it is...

The p5 function loadPixels() encodes the canvas' pixel colors into an array called pixels, which gets slapped back onto the canvas when you call updatePixels(). So, we can just JSON.stringify the array. Though, for even the default 400x400 canvas it's pretty chonky -- 400*400*4*2 Bytes = ~1.2MB. However, this is less than the 5MB cap for local storage