Download A P5 JS project FROM THE CLOUD EDITOR

OBS - THERE IS A BUG IN THE P5 CLOUD EDITOR - READ THIS GUIDE CAREFULLY

Normally all you have to do to download your sketch from the P5 JS cloud editor as a ZIP file is pretty straightforward. Just go to your sketch and click the file menu and select download. This should give you a ZIP file in your downloads folder that is a backup of your whole project. However, at the moment, there is a bug which downloads a ZIP file with empty files. If you are curious about the status of the bug you can read about the issue here. You need to do the following to verify this:

Verify that the file is not corrupt

You can verify this by extracting the ZIP file and looking at the sizes of the individual files and running your program locally:

  • Extract the downloaded zip file:

    • On Mac go to your downloads folder and double-click on the zip file. This will create a folder with your project.

    • On Windows go to your downloads folder and right-click and press extract all.

  • Go into the newly created folder with your project. Look at the sizes of the files.

This is a corrupt ZIP file - all the sizes are zero.
This is a correct ZIP file - all the sizes are different
  • If the sizes look right then double-click the index.html file and your program should run locally in your browser (there may be special exceptions where you use code that needs to be located on an online server). This means that you are good to go and you can upload it for a hand-in or have it as a backup.

Solutions if your ZIP file is corrupt:

In case your ZIP file is corrupt then you have a combination of the following four solutions:

  1. You can supply a direct link to your online sketch. This is the URL at the top of your sketch when you are editing it. You can verify the link by copying it into an incognito window as see that your code is still present. OBS: If you are doing a Hand-in for an examination then be aware that an URL may not be sufficient to accommodate the requirements.

  2. You can try to download it from another platform or browser. The problem seems to primarily hunt the Chrome browser on Mac OS. So you can try the Safari browser or download Firefox. Try also to use another computer with another platform (Windows/Linux) and make sure to update to the latest browser.

  3. You can copy and paste central pieces of code into your report. If you are doing a hand-in, it would be smart to add an appendix to the report with the central pieces of code. This will most likely be the content from: sketch.js, index.html and style.css (see below for how to find your files)

  4. You can manually reconstruct the files. If you open the files with a text editor, you can copy and paste the code from the online editor. This will at least be sketch.js, index.html and style.css (see below for how to find your files). To edit the files, you need an editor which edits raw text (Microsoft Word etc will not be a good choice). Here are links to some free ones TextMate, Visual Studio Code, Notepad++, and Sublime. Be aware that some files are not located in your online project because the online editor links to them directly. These files are typically library files like p5.min.js etc. If you want to be able to run the code locally, then you need to download them from the links in your index.html file. They are the URLs in the SRC attributes in the script tags e.g. <script src="[URL here]">. When all your code is gathered, then you should ZIP the whole folder again.

  5. Use PeaZIP to extract. The open-source unzip program PeaZip is able to extract the corrupted Zip. It will give you a warning where you need to press keep and then you should be able to compress it again where it is not corrupted.

If you are handing in an examination project, it is advised to use 1. and 3. to be on the safe side.

How to find your files in the cloud editor

The files are located on the left in your cloud editor. Press the grey (red on hover) arrow below the play button. This will open the panel on the left with all the files.

When opened it will look something like this below. Now you can click each one of the files and copy-paste the content into either a project document or the empty downloaded files.