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

autocomplete / autosuggest

Open therewasaguy opened this issue 9 years ago • 4 comments

I've started to look into autocompletion and autosuggest for p5 functions. The Khan Editor handles this really well:

http://khan.github.io/live-editor/demos/simple/

They're also using the ACE editor.

If you type ScratchpadAutosuggestData into the console you can see how the data is formatted, from this document

It's sorta similar to the data.json that p5 generates with grunt yuidoc for the reference pages.

A difference is that their name is "line(x1, y1, x2, y2)" rather than just "line," and they include a link to an example (in our case this would be the reference page at p5js.org). But we can probably generate both of those when parsing our data.json:

        {
            "file": "src/core/2d_primitives.js",
            "line": 198,
            "description": "Draws a line (a direct path between two points) to the screen. The version\nof line() with four parameters draws the line in 2D. To color a line, use\nthe stroke() function. A line cannot be filled, therefore the fill()\nfunction will not affect the color of a line. 2D lines are drawn with a\nwidth of one pixel by default, but this can be changed with the\nstrokeWeight() function.",
            "itemtype": "method",
            "name": "line",
            "params": [
                {
                    "name": "x1",
                    "description": "the x-coordinate of the first point",
                    "type": "Number"
                },
                {
                    "name": "y1",
                    "description": "the y-coordinate of the first point",
                    "type": "Number"
                },
                {
                    "name": "x2",
                    "description": "the x-coordinate of the second point",
                    "type": "Number"
                },
                {
                    "name": "y2",
                    "description": "the y-coordinate of the second point",
                    "type": "Number"
                }
            ],

therewasaguy avatar Jun 19 '15 19:06 therewasaguy

sounds great!

antiboredom avatar Jun 19 '15 19:06 antiboredom

The Tern library is another option

http://ternjs.net/doc/manual.html#protocol

It could be added to a user's text editor of choice, and built into ACE with something like this: http://sevin7676.github.io/Ace.Tern/demo.html

Seems like we'd generate data in this format: http://ternjs.net/doc/manual.html#typedef

I'll keep playing with this, anyone with thoughts about this feel free to chime in

therewasaguy avatar Jun 20 '15 15:06 therewasaguy

Autocomplete is a terrific tool and somewhat of a must for any good editor. However, it's also particularly tricky to balance its features with the clean simplicity of a beginner experience. I'm excited for the possibilities you mention above and happy to chat about how autocomplete works in Processing (we went around in many circles about integrating it) if that can be of help.

shiffman avatar Jun 22 '15 09:06 shiffman

Does anyone have a Tern definition json file for p5 yet? would it be easier to generate it with tern's condense tool or through yuidoc?

ducklin5 avatar Jan 03 '17 17:01 ducklin5