Contributors overview image for the README.md

[ksen0]

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
• Other (specify if possible)

Feature request details

As part of #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.

[Ruchit-kumar44]

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