So I have been using p5js in the desktop editor, but it is starting to annoy me that a lot of the p5js keywords and functions show up as just regular text. Is there any way I can manually add these keywords or is there a better editor to use?
I know about openprocessing and other web editors, but I want something that can be easily saved directly to my desktop.
1 Like
Hi, have you tried “Atom”? - https://atom.io/ This editor can open files and projects from whatever location on your computer.
1 Like
I’ve downloaded it now and have been messing with it for a little. It still doesn’t have quite the syntax highlighting I wanted, but is better. I am also now realizing that there needs to be an easy way to run it too, because simply running the html file gets some error about loading local images (which I am using) so I think I’ll just deal with Processing because it does some magic that works when I run it.
1 Like
1 Like
Running atom is a good desktop alternative. I’ve created a few plugins to help you get a more PDE like experience with atom
first is the toolbar which boots up a webserver to run your sketches with a play button like the PDE: https://atom.io/packages/p5js-toolbar
Second is a syntax helper / snippets: https://atom.io/packages/p5js-snippets
Atom uses themes for it’s syntax highlighting, so it’s likely you can find a theme to suit your needs. You can also easily make themes using CSS if you happen to know a bit of that!
search for them here: https://atom.io/themes
Here’s one I made a while back based on p5’s color scheme: https://atom.io/themes/p5js-syntax
How to install packages:
https://flight-manual.atom.io/using-atom/sections/atom-packages/
4 Likes
@GoToLoop This is not a complete answer, It’d be more helpful if you could add context for your replies beyond just linking to another place without any other information.
The reason that this is not working is because of browser restrictions, to load images with p5.js you need to be running a webserver. this might be a server in some other place on the internet or just running one on your localhost / on your local computer. Here are some good tips on running a local server in tandem with p5js: https://github.com/processing/p5.js/wiki/Local-server
the p5js-toolbar atom package I mentioned above fully takes care of this for you!
3 Likes
This is further from the truth! The advice I give in my linked post is in odds to your statement! 
FF has always been able to run JS under the file:// scheme since the beginning! 
1 Like
chrome/webkit can run JS under the file:// scheme also, but it cant load the images because it treats it like a cross origin request. In order to load them, you need to run a local server (I find this preferable even when using FF since it more closely replicates the environment for a real deployment in the future if the sketch is going to be web based)
It depends on what browser your running!
ps.
I wasn’t trying to say that you were wrong, just that the answer you provided lacked context (especially for a beginner) to understand why this would work in FF vs another browser! In the future, even a a few words to say why you linked to a post would be super helpful for a beginner.
2 Likes
These definitely help. I was able to find a p5js theme, but I still don’t like the syntax highlighting of it. The colors aren’t very distinguished and it’s hard to tell the difference between them at first glance unless you look closely. Also, I don’t really know why this is, but there is just a line in the editor which is really making me mad. https://gyazo.com/ea94c8c6b437c70efa442c1c2875b040
Secondly, is there a way to make it so when you open something it just opens it rather than a bunch of welcome windows?
I’ll just chime in here and encourage you to not get too attached to any one editor or theme. Throughout your programming career (even if you aren’t a full-time programmer), you’re going to encounter different editors, different operating systems, different languages. I’d encourage you to get comfortable adapting to a bunch of different environments instead of trying to stick with one thing. But it’s up to you. Good luck!
1 Like
check out that atom flight manual, you need to read and uncheck the open welcome windows on start check boxes (have a read through those pesky windows before closing them). I think that line has to do with the text wrap. To get the text to wrap, turn on soft wrap in the settings menu.
@Kevin has a great point about not getting too attached to one editor or theme. Things change fast. Atom is maybe the 5th 10th? editor I’ve used in my career and likely if you ever collaborate in the future, you’re collaborator will have a completely different setup than you will so its good to get used to looking at all sorts of editors & syntax themes.
1 Like
Even for loading stuff under the file:// scheme on Chromium-based browsers, there’s a “hack” for it: 
It may seem my main browser is FF-based; but actually I mainly use SlimJet, which is Chromium-based, w/ the “–allow-file-access-from-files” flag enabled in its shortcut. 
However, since when p5js started to convert some of its loading API to rely on the Fetch API, that flag “hack” stopped working on them; for example loadTable(). 
The Chrome devs made the Fetch API to reject the file:// scheme on purpose! 
Of course the Fetch API works on FF under the file:// scheme just like anything else! 
The FF quick & dirty “solution” is given as the simplest & easiest 1. 
I don’t see how temporarily running JS scripts under the file:// scheme would impair n1 to deploy them under the https:// scheme later.
This is all great info, super helpful! and much more supportive!
one issue that you might run into is using the audio or dom libraries to get the mic or camera, or using geolocation which afaik need to be run under https or localhost to function so it may be file and easy to run file:/// for very simple things 
but it might be a good idea to get into the habit of a localhost or https:// setup early on so you don’t run into these issues later.
1 Like
SlimJet blocks them all (and others) by default for all URLs! 
I’d have to unblock each 1 of them for each site. 