Skip to content

Instantly share code, notes, and snippets.

@jackbdu
Last active March 18, 2024 01:59
Show Gist options
  • Select an option

  • Save jackbdu/9e66f41ea053a88fee1691d83f73008f to your computer and use it in GitHub Desktop.

Select an option

Save jackbdu/9e66f41ea053a88fee1691d83f73008f to your computer and use it in GitHub Desktop.
Run the JavaScript in console to get a list of URLs to all sketches by a user and download them all with a shell script
#!/bin/bash
# Path to the file containing the list of filenames and URLs
urls_file="filenames_and_p5js_sketch_urls.txt"
# Check if the file exists
if [ ! -f "$urls_file" ]; then
echo "Error: File '$urls_file' not found."
exit 1
fi
# Loop through each line in the file
while IFS=, read -r filename url; do
# Extract the sketch ID from the URL
sketch_id=$(echo "$url" | sed 's#.*/\([^/]*\)$#\1#')
# Construct the download URL
download_url="https://editor.p5js.org/editor/projects/$sketch_id/zip"
# Download the file using curl with the custom filename
curl -o "$filename.zip" "$download_url"
done < "$urls_file"

Batch Downloading Sketches on p5.js Web Editor

  1. Go to your sketches page on p5.js Web Editor (such as this)

  2. Go to your browser's JavaScript console, copy and paste the script below:

let sketchLinks = document.querySelectorAll('.sketches-table__row a');
let textContent = '';
sketchLinks.forEach(link => textContent += link.innerHTML + ',' + link.href + '\n');

// Create a Blob containing the text content
let blob = new Blob([textContent], { type: "text/plain" });

// Create a temporary anchor element
let a = document.createElement("a");
a.style.display = "none";

// Set the download attribute and file name
a.href = window.URL.createObjectURL(blob);
a.download = "filenames_and_p5js_sketch_urls.txt";

// Append the anchor to the body and click it
document.body.appendChild(a);
a.click();

// Clean up
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
  1. Press Enter to run the script in order to extract and download filenames_and_p5js_sketch_urls.txt (you may need to click somewhere on the sketches page before running the script if the download fails or the downloaded file is blank)

  2. Save batch-download.sh in the same folder as filenames_and_p5js_sketch_urls.txt

  3. In Terminal, navigate to the same folder and run the batch-download.sh with the command below to start downloading:

bash batch-download.sh

Notes

  • filenames_and_p5js_sketch_urls.txt is formatted as filename,url in each line, you can delete the lines that you do not wish to download before running batch-download.sh

  • Todos:

    • Apply compression to the zip files

Disclaimer

These scripts are intended for batch downloading one's own sketches, as p5.js Web Editor does not currently offer this feature. Make sure to obtain appropriate permissions from the author before downloading sketches that are not your own.

Credits

Made with help from ChatGPT

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment