Multiple small documentation issues found while learning p5.js (broken links & code clarity)

[skyash-dev]

Most appropriate sections of the p5.js website?

Tutorials

What is your operating system?

Linux

Web browser and version

Firefox - 146.0.1

Actual Behavior

While going through the p5.js documentation and tutorials over the weekend, I encountered several small issues across different pages, including:

• Broken or outdated links
• Minor inconsistencies in tutorial values
• Code examples that could be clearer or follow better practices
• A layout issue where an input box overlaps text

These issues are independent but all occur within the p5js-website documentation.

Expected Behavior

Documentation links should be up to date, examples should be accurate and beginner-friendly, and page layouts should not obstruct content.

Below is a checklist of the specific issues encountered, with links and suggested fixes.

Steps to reproduce

1. Broken Google Color Picker link
   Page: https://p5js.org/tutorials/get-started/

• Google Color Picker link is broken
• The same broken link appears twice

---

2. Incorrect height value in Conditionals & Interactivity tutorial
   Page: https://p5js.org/tutorials/conditionals-and-interactivity/

• In Step Four (“Add grass to hide the sun”), height is set to 400
• Canvas height is 400 and horizon is starting from center i.e the height of rect should be 200.
• Suggested fix: replace 400 with 200

---

3. Input box overlaps text in p5.sound reference
   Page: https://p5js.org/reference/p5.sound/

• Input field overlaps documentation text
• Likely a CSS/layout issue

---

4. Broken forum and Discord links
   Page: https://p5js.org/contribute/contributor_guidelines/

• Forum: https://discourse.processing.com/
• Discord: https://discord.gg/SHQ8dH25r9
• Links appear broken or outdated

---

5. Code clarity improvements in Repeating with Loops tutorial
   Page: https://p5js.org/tutorials/repeating-with-loops/

• Loop length should use the segments variable instead of generic length keyword.
• Variable move should be declared with let

Would you like to work on the issue?

Yes. I grouped these small issues into a single issue for convenience, but I’m happy to split them if preferred.

[skyash-dev]

The Google Color Picker appears to be obsolete.

we could replace it with a maintained color picker or update the tip to reference using any online color picker and copying the RGB values into background().

happy to follow maintainers preference.

[Vanshika110]

Hi @skyash-dev
Thanks for grouping these documentation issues — they’re very clear and reproducible.

I’d like to work on fixing the following items from this list:

• Broken Google Color Picker link (and replacing it with a maintained alternative or clearer guidance)
• Incorrect height value in the “Conditionals & Interactivity” tutorial (400 → 200)
• Minor code clarity improvements in the “Repeating with Loops” tutorial
• Verifying and updating broken forum/Discord links (if still outdated)

I’ll keep the changes small and focused, and I can split them into multiple commits or PRs if maintainers prefer.

Please let me know if this approach sounds good 👍

[Vanshika110]

Hi @skyash-dev 👋

I’ve opened a PR that addresses the items discussed above:

🔗 PR: #1059

It includes:

• Replacing obsolete Google Color Picker references with generic guidance
• Fixing incorrect height values in the “Conditionals & Interactivity” tutorial
• Improving code clarity in the “Repeating with Loops” tutorial
• Updating broken forum/Discord links
• Fixing layout overlap on the p5.sound reference page

I’ve tested the changes locally with npm run dev and verified the affected pages.

Happy to make any adjustments or split this into smaller PRs if preferred.
Thanks for the clear issue report!

[skyash-dev]

i’ve fixed the other issues locally and would appreciate @ksen0’s thoughts on the best replacement for the Google Color Picker link.