Meet the skchbk, a digital gallery to exhibit p5.js sketches hosted as GitHub gists.
What does it do ?
Traditionally, you can use the p5.js web editor to preview your sketches as you work on them and this is the "de facto" way to share sketches with the community (via links to the web editor) as well.
But that isn't a very consistent and maintainable approach to share your pieces. For each sketch, what we want is for the person to:
- See what the code does (preview)
- Read the details of how the sketch works and perhaps see links to references
- Play around with the code to test out different configurations
- Jump to the source on GitHub from the sketch's preview page
- See the used library symbols
We want all this to be updated as easily as possible as well, such that we only have to edit one source of truth and our changes are synced with no redeployment of our sketchbook.
[!info] There's not many features to evangelise about, neither does it include any groundbreaking algorithms and whatnot. It is nothing more than a React app that allows you to conveniently play around and preview sketches.
Getting the gists
To ensure that a dedicated space exists for our "works of art", we can create a new GitHub account that would host nothing else but gists (and an auto updated README with all the current sketches listed in my case).
Or we can implement a clever approach that checks for a special comment at the start of the sketch.js file and loads it if it exists. I decided to just have a dedicated account for these gists because it matches other use cases I have in mind.
Concept in action
You can find my hosted sketchbook here .
Spoiler: i'ts a bit empty 🥲 (at the moment)
