[p5.js 2.0 RFC Proposal] : AI-powered Assistance for a More Accessible P5.js

[ceilTempest]

Increasing access

Natural Language Prompts: By enabling users to describe their creative vision in plain English, AI could generate foundational p5.js code, alleviating the need for extensive coding knowledge. This would be particularly beneficial for beginners or those unfamiliar with JavaScript syntax.
Improved Learning and Debugging

Real-time Error Detection: An interactive development environment (IDE) that incorporates AI could constantly analyze the code, pinpointing errors and suggesting corrections as the user types. This would provide immediate feedback, helping users identify and fix mistakes more efficiently.
Targeted Guidance: AI could offer tailored explanations or examples based on the nature of the error, fostering a deeper understanding of p5.js concepts. This would be especially valuable for learners who are still grasping the fundamentals.

Which types of changes would be made?

• Breaking change (Add-on libraries or sketches will work differently even if their code stays the same.)
• Systemic change (Many features or contributor workflows will be affected.)
• Overdue change (Modifications will be made that have been desirable for a long time.)
• Unsure (The community can help to determine the type of change.)

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)

What's the problem?

The Problem: P5.js Accessibility and Learning Curve
Although P5.js is an excellent environment for creative coding, it still has issues with accessibility for novice users and students. The following is an outline of the issues that this proposal seeks to resolve:

1. An inclined learning curve :
   Because P5.js uses JavaScript, it may be intimidating for people who have never coded before. Before users can construct the visualizations they want or interact with the data, they must invest time in learning the syntax and ideas.
   It might be difficult for novices to comprehend how the p5.js environment's code, graphics, and interaction relate to one another

2. Error Handling Difficulties:

Debugging errors in code can be frustrating, especially for new users who might not be familiar with error messages or how to interpret them.
Standard error messages can be cryptic and lack clear explanations for why the code isn't working as expected.

What's the solution?

1. Natural Language Prompts:

Users would be able to describe their creative vision in plain English, allowing the AI to generate foundational p5.js code as a starting point.
This would significantly lower the barrier to entry for beginners and those unfamiliar with JavaScript syntax.
Users would still retain full control over the code, allowing them to customize and refine it further.
2. Real-time Error Detection and Guidance:

The AI would continuously analyze the code as the user types, pinpointing errors and suggesting corrections.
This would provide immediate feedback, helping users identify and fix mistakes more efficiently.
Targeted explanations or examples based on the nature of the error would be offered, fostering a deeper understanding of p5.js concepts.
Addressing Originality:

To ensure originality and prevent plagiarism, the following measures can be taken:

Focus on Code Structure and Logic: The AI would primarily assist with the overall structure and logic of the code, avoiding generating specific variable names, function names, or comments that could be easily copied.
Randomization and Variation: The AI could introduce slight variations in the generated code to further reduce the risk of exact matches being found.
User Control and Customization: Users would always have complete control over the code, allowing them to modify and personalize it as needed, ensuring the final code is unique.
Overall, this AI-powered solution aims to:

Pros (updated based on community comments)

Lower Barrier to Entry:
Makes p5.js more accessible to beginners and those with no coding experience by enabling them to start creating with natural language prompts.
Reduces the intimidation factor of code syntax and empowers users to focus on their creative vision.
Enhanced Creativity: By lowering the barrier to entry and providing more intuitive guidance, AI could spark new creative ideas and approaches to p5.js projects.
Wider Audience Reach: AI-powered assistance could attract a more diverse user base to p5.js, including those from non-coding backgrounds.
Community Collaboration: The AI could potentially assist in generating code examples or tutorials, which could be further refined and shared within the p5.js community.

Cons (updated based on community comments)

otential for Over-reliance:
Users might become overly reliant on AI-generated code, hindering their understanding of core p5.js concepts and ability to troubleshoot issues independently.
This could create a crutch that prevents users from developing their own coding skills in the long run.
Accuracy and Control Concerns:
The accuracy and reliability of AI-generated code cannot be guaranteed, potentially leading to unexpected behavior or errors.
Users might lose control over their code if the AI suggestions are not easily customizable or if the generated code is difficult to understand.
Increased Complexity:
Integrating AI features could add complexity to the p5.js library, potentially making it more challenging to learn and use, especially for beginners.
The additional functionality might introduce new dependencies or learning curves for users.

Proposal status

Under review

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[limzykenneth]

There are a few things here I think and not all of the necessarily relates to p5.js:

1. AI assistant to write code - This sounds like something that is more likely to be implemented in the web editor rather than the library itself. We are only considering changes to the p5.js library and not to the web editor as that is a separate project. For the web editor itself as well, it is probably unlikely this will be implemented because of the potential cost involved.
2. Error handling - p5.js already has a Friendly Error System that provides useful, easy to understand, and friendly errors when they occur. It also has the ability to detect potential problems such as checking variable and function names, checking function arguments, and more. Again this is a library feature, not a web editor feature though, and it would not make sense for the library to be connected to a LLM API which has associated cost, account requirement, and extra network requirements.

[dhowe]

Could also be implemented as a library, though as @limzykenneth points out, there is complexity re: accounts, API keys, resource-use, etc. There is also the question of whether this aligns with larger goals of the project.

[mvicky2592]

Check out this online code editor which already has some of the features you suggested:

https://aijs.io

[RandomGamingDev]

I agree with @limzykenneth that this is something to be implemented in the web editor instead

Also, I think that adding AI to p5.js would likely go against a lot of things that AI stands for. Also, your point about

An inclined learning curve :
Because P5.js uses JavaScript, it may be intimidating for people who have never coded before. Before users can construct the visualizations they want or interact with the data, they must invest time in learning the syntax and ideas.
It might be difficult for novices to comprehend how the p5.js environment's code, graphics, and interaction relate to one another

p5.js is designed to be a simple to understand and code in language, and javascript is quite a simple language ignoring its oddities (which beginners likely wouldn't have to deal with). Adding AI to this mix would be making what's already a minor curve even smaller while drastically decreasing the benefit.

As others have noted the cost of hosting such a isn't negligible as well and even if we were able to implement a solution that were implemented on the user side that would just be locked away to those with more powerful machines. Honestly, I believe that a feature like this is better left to other libraries, and that AI would hurt more than help beginners. (If you're interested in an AI browser IDE with a similar feel to the p5.js and processing editors thing try AIJS)

Plus, the nature of p5.js and what I think a lot of people agree its general goal incorporates, is the idea of code as an end itself rather than just a mean for an end.

However, while I do believe that incorporating NLP AI like Github Copilot into the editor (just a reminder that this isn't something to be implemented into the library itself) is a poor decision for p5.js's goals, I do believe that the editor still needs a better autocomplete hinter considering how poorly it works right now, not even hinting for variables, classes, or functions created by the user themselves.

My opinion after testing it is that it's been a much more irritating way to access which p5.js functions are accessible, that clogs your screen and covers code, but that doesn't even show you what it does. At this point, I honestly believe that just using search on the documentation is better than the autohinter, and thus why I think that a better job needs to be done in that aspect.