search

toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.
https://toolness.github.io/p5.js-widget/
GNU Lesser General Public License v2.1
161 stars 44 forks source link

Add "Save As..." button to toolbar #4

Open toolness opened 8 years ago

toolness commented 8 years ago

Taeyoon mentioned the utility of being able to save the output of one's sketch to an image file. Firefox supports this but most people don't know about it, partly because no other browser supports it. So it might be useful to expose the functionality via the toolbar.

tchoi8 commented 8 years ago

It would be also great to be able to save the sketch as a sketch.js file. that way, the students can download and save their work.

toolness commented 8 years ago

I actually just remembered that it's possible to "bake" the sketch source code into the canvas image, via a tEXt chunk in the PNG. png-baker.js can be used to do this and I've implemented it in a number of my tools in the past, including TinyTurtle Lab.

This basically means the user can save the sketch to a PNG, and drag the PNG back to the widget to restore their code.