p5.js-website icon indicating copy to clipboard operation
p5.js-website copied to clipboard

Refine the syntax section of the reference

Open nickmcintyre opened this issue 1 year ago • 3 comments

The syntax section of the reference could be clearer in a few places.

Methods

The reference pages for methods such as p5.Vector.add() display the following syntax:

add(x, [y], [z])

add(value)

add(v1, v2, [target])

It'd be helpful to demonstrate the dot operator, and to distinguish between instance and static methods. I suggest standardizing on p5.X.method() and myX.method(), as in:

myVector.add(x, [y], [z]);

myVector.add(value);

p5.Vector.add(v1, v2, [target]);

Side note: I'm not sure whether we should encourage copy/pasting syntax snippets.

Events and Structure

The reference pages for event functions such as doubleClicked() display the following syntax:

doubleClicked([event])

It'd be helpful to demonstrate that these functions are declared, not called, as in:

function doubleClicked([event]) {
  // Code to run.
}

🤦🏽‍♂️ I just noticed that the code snippets for these are broken and will make a pull request soon!

nickmcintyre avatar May 25 '24 22:05 nickmcintyre

Hi! I’d love to help with this enhancement. I will work on refining the syntax section for p5.js methods and events to improve clarity.

Please let me know if there are any specific guidelines or further details to consider.

Thanks!

Rishabh821 avatar Dec 30 '24 02:12 Rishabh821

Thanks @Rishabh821, I think the key thing would be figuring out how to distinguish between static methods (e.g. p5.Vector.add), global functions (e.g. fill), and instance methods (e.g. myVector.add). It would be great if you could look into the code and see if that information is available to begin with, and to see what it might take to specify a default instance name for instance variables.

davepagurek avatar Dec 31 '24 18:12 davepagurek

Hi @davepagurek and team,

Thanks for the detailed pointers! Here’s how I plan to address this:

Methods:

  • Clarify the syntax to distinguish between instance and static methods.
  • Use p5.Vector.method() for static methods and myInstance.method() for instance methods.

Event Functions:

  • Update the syntax to show them as declarations (e.g., function doubleClicked(event) { ... }) instead of calls.
  • Fix any broken code snippets for event functions.
  • I’ll also explore the codebase to see how we can ensure a consistent format and specify default instance names (e.g., myVector).

Let me know if there’s anything else you’d like me to consider before I start.

Thanks!

Rishabh821 avatar Jan 01 '25 00:01 Rishabh821