Skip to content

Instantly share code, notes, and snippets.

@jonohayon
Last active April 20, 2017 11:38
Show Gist options
  • Save jonohayon/b059a029755f84f42b29f005323ec165 to your computer and use it in GitHub Desktop.
Save jonohayon/b059a029755f84f42b29f005323ec165 to your computer and use it in GitHub Desktop.
p5.js data.json fields explanation

data.json for syntax highlighting and autocomplete

Disclaimer

Warning - this is still very very WIP, so it's not complete yet.

Fields

  • modules
  • classes
  • classitems

modules

The modules part of the file isn't needed for autocomplete. It's essentially a blueprint to the main reference menu (http://p5js.org/reference/).

classes

The classes part is the part which has the definitions of the different classes in p5.js.

Example object blueprint

{
  "p5.Element": { // Class name
    "name": "p5.Element", // Class name, again
    "shortname": "p5.Element", // Class name, again
    "classitems": [],
    "plugins": [],
    "extensions": [],
    "plugin_for": [],
    "extension_for": [],
    "module": "DOM", // The section in the reference menu the class belongs to
    "submodule": "DOM", // The subsection in the reference menu the class belongs to
    "namespace": "",
    "file": "src/core/p5.Element.js", // The file where the class is defined
    "line": 9, // The line in the file where the class is defined
    "description" "<p>Base class for all elements added to a sketch, including canvas,\ngraphics buffers, and other HTML elements. Methods in blue are\nincluded in the core functionality, methods in brown are added\nwith the <a href=\"http://p5js.org/reference/#/libraries/p5.dom\">p5.dom\nlibrary</a>.\nIt is not called directly, but p5.Element\nobjects are created by calling createCanvas, createGraphics,\nor in the p5.dom library, createDiv, createImg, createInput, etc.</p>\n", // The class description
    "is_constructor": 1, // Whether the definition in the file is a constructor or not
    "params": [{ // The constructor's parameters
      "name": "elt", // The parameter's name
      "description": "<p>DOM node that is wrapped</p>\n", // The parameter's description
      "type": "String" // The parameter's type
    }, {
      "name": "pInst", // The parameter's name
      "description": "<p>pointer to p5 instance</p>\n", // The parameter's description
      "type": "Object", // The parameter's type
      "optional": true // Whether the parameter is optional or not
    }]
  }
}

classitems

The classitems field has a few types of objects inside of it (the type of the object is defined in the itemtype field of every object), of which the most important one for syntax highlighting and autocomplete are method and property.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment