Accessibility affects how easily information or technology is transferred. A good example is learning materials that require an active internet connection to be accessed — the mere requirement limits how comfortably users can peruse the content.
Learn P5 is an offline first mobile app for "gamified" learning of p5.js in small task based exercises.
It is inspired by the now deprecated Grasshopper app by Area120, and it is a GSoC'26 project with the Processing Foundation.
In this post I'll sum up what the project set out to do, what I built, where things stand and what comes next.
Project links
- Source code: github.com/prjctimg/learn-p5
- Download (Android APK): releases
- Feature status: ROADMAP.md
Goals of the project
The p5.js web editor and reference are conveniently located under the same domain but they require an internet connection every time you load (the web editor can run with no internet after initial load). Native apps provide better offline experiences since we don't need to reload the app every time we clear the browser cache.
Being mostly a graphics library, p5.js is ideally learnt in an environment where the user can run code snippets and see the reference in one place.
Below are some of the main goals of the project:
- A fully offline experience
- Rich documentation with rendered examples and syntax highlighting
- Concise exercises for learning the library's functions/symbols
- Better discovery of the least used parts of p5.js
Courses and exercises
The app ships with 16 courses (shapes, color, curves, data, math, typography, vectors, WebGL and more). An exercise is a series of tasks; completing them unlocks the next exercise, and finishing all exercises in a course unlocks the next course.
Using the public API of the library, I curated simple exercises that demonstrate how each function works. Each answer is checked at different points using validator functions: some tasks look for a specific function call in your code, others compare the canvas output against expected pixels within a tolerance range.
Exercises are written as YAML files that get converted to TypeScript modules at build time, so the app loads them as plain imports with no parsing on the device. YAML is a nice middle ground and allows anyone to edit and improve the content without having to delve deeply into the app internals.
An interactive offline reference
All 800+ documented symbols of p5.js are available offline, generated from the p5.js source itself. One can fuzzy search, browse by module and view live rendered examples next to each function's documentation. The reference is reachable even from inside an exercise.
To help with discovery, there's a 'Did You Know' modal that shows once a day when you complete an exercise. It shows a random least used function along with its documentation.
The current state
The app is usable end to end: onboarding, 16 courses with task based exercises, a searchable reference with live examples, progress tracking with streaks and achievements, and everything works offline. Signed Android APKs are published on the releases page. The test suite passes and the release workflow builds automatically on version tags.
Everything else in the roadmap is marked as implemented; ideas like playgrounds, leaderboards and cloud sync were intentionally left out to keep the app focused on stability for now.
What's left to do
The feel of the app is a bit bland, because I wanted to establish the features first before spending any considerable effort on aesthetics. The standard of cover graphics and other app illustrations is mostly inspired work and takes a while to get right and that part will have to be heavily inspired from community ethos.
With the core exercises defined, the next goal is to now get more creative with the level design and how modules or exercises are unlocked. For instance, introducing minigames in between unlocking a new module where the user must debug the broken game, play it until the criteria are met and they unlock the next module.
See ROADMAP.md for the living status document.
Where the code lives
All the code lives in prjctimg/learn-p5, released under GPL-3.0, with the full commit history at main. Since this is a standalone companion app rather than changes to the p5.js library itself, no pull requests needed to be merged upstream; the repository, its releases and the roadmap are the complete record of the work.
Challenges and lessons
When I initially started, I never thought I would have to hack my way through a lot of unforeseen hurdles.
Android's system keyboard restrictions led me to build our own keyboards entirely (before settling back to the system keyboard with a minor workaround).
Getting React Native to cooperate with a WebView running sketches took many experiments. And finding a maintainable source format for exercises went through markdown before settling on YAML.
At the time of writing, the app is not available on the Play Store due to restrictions I encountered with identity verification. Thankfully, I realized I could just stick with F-Droid which is open source and has an open process of getting apps enlisted. This is currently underway since I had been hoping for a quicker resolution with Play Console and the app will be on F-Droid end of August. However, releases are still available on GitHub
Also as I was working with adding the reference to the app, I noticed that functions that had no @example tags suffered in showcasing their capabilities. The use of code snippets in between template literals also made syntax highlighting a bit trickier, this was the case for code examples that used shader code.
It was quite fun in the long run as I got to explore different approaches to problems, and I developed a deeper appreciation for the open source ideology.
Thanks to the Processing Foundation community for the guidance along the way.
If you try the app, feedback is welcome over at GitHub Discussions.