documentation help wanted!

[lmccart]

Hi 👋👋👋

We are using this issue to focus on documentation! Documentation is essential for new learners and experienced programmers alike. It helps make our community inclusive by extending a friendly hand to those that are less familiar with p5.js. It also helps us find the bugs and issues with the code itself, because we test and try things out as we document.

There are several ways to contribute, you can read more about them on this page.

If you are adding some documentation, please comment below. And don't forget to add yourself to the contributors list!

Welcome! We're so glad you're here! ❤️ the p5.js community

[m90]

For anyone who wants to work on adding missing examples and doesn't know where to start, this seems to be where there are still examples missing right now:

src/io/files.js:1329: method p5.save missing example
src/webgl/material.js:14: method p5.loadShader missing example
src/webgl/material.js:125: method p5.shader missing example
src/webgl/p5.Geometry.js:52: method p5.Geometry.computeFaces missing example
src/webgl/p5.Geometry.js:94: method p5.Geometry.computeNormals missing example
src/webgl/p5.Geometry.js:133: method p5.Geometry.averageNormals missing example
src/webgl/p5.Geometry.js:154: method p5.Geometry.averagePoleNormals missing example
src/webgl/p5.Geometry.js:247: method p5.Geometry.normalize missing example
src/webgl/p5.Shader.js:270: method p5.Shader.setUniform missing example

[constanceyu]

I would love to help out porting the tutorials from processing (https://processing.org/tutorials/) to p5. @lmccart I can work on more text based tutorials such as "typography" and "strings and drawing text" since I noticed they are still missing. Or do you have a particular one you would like me to start on first?

[lmccart]

@faithwyu that would be great!

[raulgrell]

I'm going through the processing.org examples - some of the stuff that is missing seems to address the language itself as opposed to the library. For example, processing.org talks about "Integers and Floats" and "Datatype Conversions". Should I make Javascript equivalent entries like "Numbers" and "Dynamic Types"?

[lmccart]

@raulgrell good question. not yet. we're not set up with the right website/reference infrastructure yet to be able to display those correctly.

[cecilebertin]

Hi, I'd like to work on porting the examples from the processing example page to the p5.js example page.

[lmccart]

👋@cecilebertin welcome! all the instructions for porting examples should be in the issue notes above. but let us know if you have any questions or encounter problems and we'll do our best to get back to you as soon as we can

[cecilebertin]

@lmccart I will start with porting the Data: Integers and Floats example.

[cecilebertin]

@lmccart Should I call this example Data: Numbers instead? Since there is only the Number datatype for numbers in JavaScript.

[lmccart]

@cecilebertin that makes sense to me

[cecilebertin]

Hi @lmccart, I made a pull request for the Numbers example.

[raulgrell]

@lmccart - I was trying to ask the same question as @cecilebertin, but I seem to have suffered a momentary lapse of eloquence =P

Unfortunately, that also means I'm not sure I understood your reply. Did you mean you don't yet have a way to show something like console output?

[lmccart]

@raulgrell oh! i'm sorry, i misread and thought you were talking about the processing reference entries where they have entries for "String" or "Float". now I have reread and realize you are referring to the examples page. yes, I think that makes sense to rename as you suggest!

[cecilebertin]

So sorry @raulgrell !! I didn't see you wanted to work on this. I only checked the issues in the processing/p5.js-website repository to check if someone was working on this example.

[raulgrell]

@lmccart @cecilebertin No worries, I could have been clearer! There are still more examples to do =)

I'll send a PR for Strings, and possibly something for Data Types as well that deals with type coercion and whatnot

[lmccart]

thanks everyone! 🙏 🙌 🎉

[raulgrell]

Oh dear, I completely forgot about this! That weekend I participated in a Game Jam where we actually used p5 to make a little neuroscience experiment disguised as a game and I never got round to finishing the examples... check it out: https://github.com/raulgrell/NeuroJam

Unfortunately, I've got a big presentation for uni on Monday and I won't be able to dedicate any time to this right now...

[lmccart]

thanks @raulgrell no worries. we'd welcome the additions anytime, no rush. thanks for sharing the game jab result, it's great!

[justinsunho]

Hi @lmccart, is https://github.com/processing/p5.js/issues/1954 an up to date list of examples we could take on? Or is there an active list of tutorials that could be worked on? Don't want to be re-doing anyone else's work/ work that's already been done.

[mukulkhanna]

For anyone who wants to work on adding missing examples and doesn't know where to start, this seems to be where there are still examples missing right now:

src/io/files.js:1329: method p5.save missing example
src/webgl/material.js:14: method p5.loadShader missing example
src/webgl/material.js:125: method p5.shader missing example
src/webgl/p5.Geometry.js:52: method p5.Geometry.computeFaces missing example
src/webgl/p5.Geometry.js:94: method p5.Geometry.computeNormals missing example
src/webgl/p5.Geometry.js:133: method p5.Geometry.averageNormals missing example
src/webgl/p5.Geometry.js:154: method p5.Geometry.averagePoleNormals missing example
src/webgl/p5.Geometry.js:247: method p5.Geometry.normalize missing example
src/webgl/p5.Shader.js:270: method p5.Shader.setUniform missing example

Can this be updated please? Thank you.

[Spongman]

src\io\files.js:1402: method p5.save missing example
src\webgl\material.js:151: method p5.shader missing example
src\webgl\p5.Camera.js:187: method p5.createCamera missing example
src\webgl\p5.Camera.js:298: method p5.Camera.perspective missing example
src\webgl\p5.Camera.js:380: method p5.Camera.ortho missing example
src\webgl\p5.Camera.js:671: method p5.Camera.camera missing example
src\webgl\p5.Geometry.js:50: method p5.Geometry.computeFaces missing example
src\webgl\p5.Geometry.js:92: method p5.Geometry.computeNormals missing example
src\webgl\p5.Geometry.js:131: method p5.Geometry.averageNormals missing example
src\webgl\p5.Geometry.js:152: method p5.Geometry.averagePoleNormals missing example
src\webgl\p5.Geometry.js:245: method p5.Geometry.normalize missing example
src\webgl\p5.Shader.js:274: method p5.Shader.setUniform missing example

[lmccart]

closing this, all key info has been moved over here: https://github.com/processing/p5.js/blob/main/developer_docs/contributing_documentation.md we can continue to open specific issues for documentation that needs work, and maybe reopen this issue for the next mozsprint

[lmccart]

actually, reopening this because I think it's a nice issue to have around for people looking for ways to help out

[GaurangTandon]

@lmccart Could you please update this link: https://github.com/processing/p5.js-website/wiki/Adding-examples ? It is mentioned on the Contributing docs under section "Make examples". Visiting it redirects me to the p5.js-website github repo.

Also, is there a running list of missing ports as was mentioned in this comment? There seem to be quite a lot of examples that have been covered on both sides, and it seems to hard to be able to possibly check each and every sketch for inclusion.

[lmccart]

I've updated the text and linked to the page where we have all this info in more complete and correct form. Thanks!

[GaurangTandon]

@lmccart Hey thanks! Could you please also link to the list of examples that are yet to be ported?

[lmccart]

@GaurangTandon The list of examples needed and info about how to generate them is in the first paragraph on the adding inline documentation page

[grege2]

@lmccart Hi, I'd like to regain access to edit the "JavaScript basics" Wiki. I'm helping someone else learn JavaScript and I re-read it in the last few days, and there are some small improvements and corrections I'd like to make. Thanks.

[lmccart]

hi @grege2 sorry for the delay, you should have received an invitation that will give you edit access to the repos and the wiki. thanks!

[grege2]

Hi @lmccart thanks, no problem re delay. Really enjoying my involvement with p5.js, I'm coding it with it several hours a day the last few months, on a large project of 4000 lines I'm collaborating with someone else on, not actively looking for bugs or doco/examples errors/typos although if only there were 48 hours in the day I could. Congrats on the 0.9.0 release, nothing broke for me in the upgrade from 0.8.0, not that that's critical in beta, but starting to look really tight product. Thanks for the edit access. Ciao GE

[mbtamuli]

Hey people, is there any specific section of the documentation that needs some work? I'd like to take a dig if there's any.

[stalgiag]

Hi @mbtamuli thanks for the interest! You should definitely start off by checking out the contributing documentation readme. Also any issue tagged 'documentation'. This might be a good issue to start with. Good luck!

[zoyron]

Hello people, I would like to work on the documentation. If there is any specific task for a beginner then please guide me, I am more than happy to contribute. Thank you.

[fenilgandhi]

Hey guys, i want to contribute to this project. To start with i am working on updating description and adding examples for p5.Geometry.js.

[fenilgandhi]

Hey guys, while updating documentation, i am facing 2 issues, if somebody can check and verify if these are legitimate bugs or just something wrong with my setup.

1. The alternative text for the examples in the reference documentation is not getting read by a screen reader even where it is available. You can check for the following methods arc, quad.
2. In the local development environment, The reference docs generated by npm run grunt yui:dev are not properly aligned. The description text overflows, the example is displayed above the example code. For example, here's a screenshot of plane method.

[limzykenneth]

@fenilgandhi Is this the development preview of the documentation that is hosted in this repo (as opposed to the one on the website repo)? If so it could very possibly be that some of the code that is stored in this repo for the documentation preview has gone out of date and wasn't able to render the reference correctly.

[fenilgandhi]

Yes @limzykenneth, it is the development preview of documentation in this repo. If that may be the issue, I would like to fix it, can you give me some pointers on where to start looking from ?

[limzykenneth]

The code for rendering documentation in this repo is here, while that is generated (awhile ago) from the original templates and scripts, now moved over to the website repo, here.

Honestly the codebase is quite convoluted so there's no pressure for you to fix it now, I do plan on doing some clean up next time I have some free time on my hand, but if you can that'll be a great help!

[fenilgandhi]

Thank you soo much @limzykenneth. I think i would learn a lot fixing it so i would really like to have a go at it. Will get back to on it soon.

[ykabusalah]

Has anyone completed this? Could I try tackling this issue?

[lmccart]

@ykabusalah you are welcome to contribute documentation, just open a pull request and we can review.

[fenilgandhi]

Oh hey, @ykabusalah, Yes i have solved the issue with CSS overflow for canvas over here. https://github.com/processing/p5.js-website/pull/580. But the docs in development mode can definitely benefit from some CSS updates. So feel free to work on it and open a PR.

[ykabusalah]

Alright awesome. I'll do that. Can you assign me? @fenilgandhi

[lmccart]

@ykabusalah we're not assigning people via the interface for this one because more than one person can work on it at once, and we don't want to discourage them. but you consider yourself "assigned" :)

[ykabusalah]

I have some thoughts and would like your feedback if possible:

The asterisk-design-element on the https://p5js.org/get-started/ page causes an accessibility issue; the language controls are inaccessible to color blind users due to the colors of the asterix and the color of the languages. Either move the asterix below the language or change colors of the language bar on that page

• The asterisk-design-element on the home page collides with the text and makes it hard to read, so move it to the bottom right corner
• On the download-page the asterisk-design-element, on small screen sizes, the asterix collides with the nav, making it unusable; scale down the asterisk on that page to make this happen
• On the reference page, same as above

[Rizz0S]

Could someone provide some guidance of what needs help with documentation rn? I really want to start contributing to the community, but most of the open issues right now are either already being worked on or out of my experience range. Thanks!

[montoyamoraga]

thank you @Rizz0S, i think the most straightforward help to contribute, instead of adding more documentation, would be to help us mantain the one we already have, so i suggest going through the reference and examples, making sure that they don't have bugs, and that they are written in a clear way :)

[samporapeli]

Hello :wave:

I noticed a tiny incoherence in this reference page and decided to fix it (in a way that makes sense to me). I created a pull request draft #4817 and would appreciate if I could get some feedback on it :)

Best, Sampo

[fal-works]

Just linking docs-related issues which i recently opened:

4988

4991

[shreyan-invalid]

Hey if this issue is open I would like to contribute.