Hi all,
I’m a teacher introducing p5 to beginning programmers. I didn’t want to walk students through a complicated editor setup, but I was finding myself a bit frustrated with the web editor and openprocessing editor because I’ve gotten very used to Intellisense (from Visual Studio Code) in my own p5 coding (I use p5 in typescript mode myself). If you don’t know what Intellisense is, it’s essentially a way to get documentation about functions and auto-completion automatically in an editor (I’m a new user so I can’t post a screenshot here of my VS code).
I created a github project that attempts to solve this problem. It is a simple npm-based starter p5 project, but it is designed to leverage the GitPod tool - an amazin, simple to use online dev environment - to automate setup and essentially give students an experience kind of like the p5 web editor, but with a more powerful editor environment including Intellisense. If launched in gitpod automatically installs all the depencies, launches a web server, opens a preview of the server in a sidebar, and hides all of the files except for index.html, index.js, and the readme. See the screenshot below, including some intellisense magic:
The github project with the code is here
To launch the project in GitPod and see it in action, click here. You will need a GitHub account to launch it. If you want to save your work, you essentially need to leverage git; you’ll want to go to the github project page, duplicate the repository into your own account, then launch gitpod from your own copy. That will give you the ability to edit the code permanently.
It’s not perfect, and I still wish there were something as simple to use as the p5 web editor or codepen that provided the same level of documentation and autocompletion, but until those come to be this is a nice option and I will be using it with my students. Hope others enjoy as well!