processing
Contributors overview image for the README.md
Increasing access
Creating more visibility for the contributors from the README file
Most appropriate sub-area of p5.js?
- [ ] Accessibility
- [ ] Color
- [ ] Core/Environment/Rendering
- [ ] Data
- [ ] DOM
- [ ] Events
- [ ] Image
- [ ] IO
- [ ] Math
- [ ] Typography
- [ ] Utilities
- [ ] WebGL
- [ ] Build process
- [ ] Unit testing
- [ ] Internationalization
- [ ] Friendly errors
- [x] Other (specify if possible)
Feature request details
As part of https://github.com/processing/p5.js/pull/8194, the CONTRIBUTORS.md file was created. The table it contains now used to be included in full in README.md, to create more visibility for all the contributors. However, this made the README large (as well as slow to load), so the separation was needed.
However, in our discussion of that issue, it was clear that including some kind of inclusive image of all contributors in the README would be best. This issue proposes to create a workflow that generates 1 image containing all the icons for the README (for example, consider this inspiration shared by @davepagurek : https://github.com/typeorm/typeorm ).
That way, the build-time generation of the table (in CONTRIBUTORS.md) and the image (in README.md) would be possible.
If you're interested in volunteering to work on this issue, please describe first in a bit more detail how you would approach this, because the idea is very high-level right now.
hi @ksen0, I'd love to work on this, I’ve looked into how typeORM handles contributor visibility, they embeds a contributor image in their README using a dynamic SVG from OpenCollective:
the svg is clean and automated, but it only includes contributors who are part of their OpenCollective — not everyone who contributes to the project._
p5.js already uses the All Contributors bot to update .all-contributorsrc, which includes:
- All contributor types (code, docs, design, translation, etc.)
- Avatar URLs and GitHub profiles This means we don’t need to rely on external services or commit history — we already have a complete, list of contributors.
my plan for this issue is: I’ll place the script in: utils/ folder. It keeps the script separate from core source code and makes it easy to maintain or automate later. The script will
- Reads .all-contributorsrc
- Downloads contributor avatars
- Generates a grid image (contributors.png) using (sharp, node-canvas, jimp) which you prefer
- Saves it in the root directory
- Can be run manually or automated via GitHub Actions Since the bot keeps .all-contributorsrc up to date, running the script is enough to reflect new contributors — no extra syncing needed.
Hey! I’ve provide my approach for generating the contributor image using .all-contributorsrc. Would it be helpful if I share a sample of the script here, or should I go ahead and start working on it? If it sounds good, feel free to assign me! if I am wrong anywhere plese correct me
Hello @ksen0 I’d love to work on this issue to create a contributors overview image for the README.md. I’ve reviewed the discussion and the goal of improving contributor visibility, and I can design and integrate a clear, visually balanced contributors section in the README using appropriate tools or generated badges. Could you please assign this issue to me so I can start working on it?
I'm interested in working on this issue and would love to contribute to increasing visibility for all the amazing p5.js contributors while maintaining README performance.
My Understanding
The goal is to create an automated workflow that generates a single composite image containing all contributor avatars (similar to the TypeORM approach) for display in README.md. This would replace the previous full HTML table that made README.md large and slow to load, while still maintaining visibility for all contributors.
Proposed Technical Approach
After analyzing the p5.js repository structure, here's how I plan to implement this:
1. Script Organization
-
Location:
utils/contributors-image/directory- I noticed p5.js uses the
utils/folder for generation scripts, so this follows the existing convention - Self-contained with its own
package.jsonand dependencies
- I noticed p5.js uses the
-
Output:
docs/images/contributors.png- The
docs/folder already exists in the repo - Single optimized PNG file for fast loading
- The
2. Implementation Details
Technology Stack:
- Node.js with ES modules (matches p5.js's existing setup)
-
sharplibrary for efficient image processing -
node-fetchfor downloading avatars
Core Functionality:
- Parse
CONTRIBUTORS.mdto extract avatar URLs from existing HTML table - Download all contributor avatars concurrently
- Resize to consistent dimensions (64×64px)
- Arrange in grid layout (12 avatars per row)
- Generate single composite PNG with optimized compression
- Handle errors gracefully (fallback to placeholder for failed downloads)
Configuration options:
- Avatar size, spacing, grid layout
- Background color
- Compression level
- All easily adjustable for future needs
3. GitHub Actions Workflow
Trigger conditions:
- When
CONTRIBUTORS.mdis updated (via all-contributors bot) - When
.all-contributorsrcchanges - Manual workflow dispatch option
Automation:
- Automatically generates updated image
- Commits changes with
[skip ci]tag to prevent workflow loops - Only commits if image actually changed (diff check)
4. README.md Integration
Update the Contributors section to:
[](CONTRIBUTORS.md)
- Image remains clickable → links to full CONTRIBUTORS.md
- Much faster load time vs individual avatar requests
- All existing contribution tracking preserved
Why This Solution?
✅ Seamless integration - Works with existing all-contributors workflow
✅ Follows p5.js patterns - Uses utils/ structure like other generation scripts
✅ Fully automated - Zero manual maintenance required
✅ Performance optimized - Single ~2-3MB image vs 690+ individual HTTP requests
✅ Scalable - Handles growing contributor list efficiently
✅ Inclusive - All contributors remain visible in README
✅ Well-documented - Includes README with usage instructions
My Background
I'm familiar with:
- Node.js, image processing libraries, and GitHub Actions
- Open source contribution workflows and best practices
- The p5.js project structure and existing automation
I've thoroughly read the CONTRIBUTING.md guidelines and understand the AGENTS.md expectations. I'm committed to:
- Clear, ongoing communication throughout the process
- Iterating based on feedback from stewards and maintainers
- Writing clean, documented, maintainable code
- Testing thoroughly before submission
Next Steps
If this approach aligns with your vision, I can:
- Create a working prototype within 3-4 days
- Test locally to ensure it works with the current CONTRIBUTORS.md
- Submit a PR with the implementation + documentation
- Iterate based on team feedback
Could you please assign this issue to me? @ksen0 , I'm excited to contribute to making p5.js more inclusive and would appreciate the opportunity to work on this feature.
Thanks for considering! Looking forward to being part of the p5.js community!
Hi! I'm new to p5.js and would love to work on this issue. If it’s available, could you please assign it to me?
@ksen0 I can take this up and submit a PR.
My approach is to add a lightweight contributors overview image to the README and keep it automatically updated via a small GitHub Actions workflow. The image would be regenerated periodically using the GitHub contributor graph (similar to the TypeORM example), while CONTRIBUTORS.md remains the canonical and fully inclusive contributors list.
One limitation to note is that the image reflects GitHub’s contributor graph, which may lag or exclude some contributors depending on branch structure or merge strategy (e.g. dev-2.0 vs main). For this reason, the README image is intended as visual recognition only, with full attribution continuing to live in CONTRIBUTORS.md.
If this approach sounds good, I’ll open a PR targeting dev-2.0.
