I’m just starting out with the p5js library, so this is a really basic question. I have downloaded the library file and unzipped it. I started messing around with the files in the “empty example” directory using Brackets in Windows 10. I can add HTML to index.html and it displays in the browser. However, anything I add to sketch.js is ignored. The browser console reports p5.js is not found (404).
By default, p5.js is located in the parent directory as this snippet from index.html shows:
<script src="../p5.js"></script>
When I copy p5.js into the same directory as index.html and sketch.js, the p5js elements in the webpage work correctly.
I am at a loss to explain why the parent directory relative path – “…/p5.js” – is not interpreted correctly.
I have no experience with Brackets, but does it run some kind of web server? If so, you could serve the sketch from the local filesystem instead, by opening index.html directly in a browser. Is the weird behavior present then?
Thanks for the advice. Brackets is one of the flavors of code editors that was recommended for beginners. It does run a local server that synchronizes the browser view to the edited files. In the examples I worked through as part of an intro course on coursera.org, the p5.js or p5.min.js file was always in the directory with index.html and sketch.js. But the index.html in the “empty example” in the p5 library download has p5.js and p5.min.js in the parent directory. That was new to me. Funny thing, the index.html runs just fine when I open it directly in the browser.
Thanks for the tip on the remote(?) call to p5js at Unkg.com. That seems to provide accessibility to the p5 library.
However even with this fix, Brackets still acts like it cannot see the library. As described in the older post you linked to, I see many red warnings in the left margin of the Brackets window displaying a sketch.js. These all appear to be warnings that p5 functions like createCanvas are undefined. These errors appear even when the page and sketch work as expected. Any thoughts on how to correct this behavior in Brackets?
I do have a bit of p5 experience in a browser-based editor from a previous course. So my leap this week is to understand the marriage of index.html and p5js. I’m watching the Coding Train series on YouTube and learning a lot.
are you sure the index.html and p5.js file are in the same folder or sub-folder??if not, do it/ remove the …/ after the script and check again @astrogeek
The warnings you describe sound like they could come from some kind of linter tool. Do you know of Brackets come with that? A linter is a tool that analyzes your source code to, among other things, flag potential errors and propose stylistic changes. It may be that the linter doesn’t know about p5.js and flags createCanvas as undefined, although it really isn’t.
That would explain why you get “errors” even when the page and sketch work as you expect. It’s just the linter acting out.
After a little investigating, I discovered Atom has an available package that highlights p5 syntax just fine. Since both editors are capable, I guess I’ll go with Atom for my p5 coding.
Thanks again for the pushes in the right direction!
