# P5.js not found in parent directory

**URL:** <https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981>\
**Category:** Beginners\
**Created:** [June 18, 2020, 6:03pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981 "2020-06-18T18:03:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)\
**Post date:** [June 18, 2020, 6:03pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/1 "2020-06-18T18:03:49Z")

</div>

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:

```auto
<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.

Any advice is greatly appreciated!

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 18, 2020, 8:09pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/2 "2020-06-18T20:09:39Z")

</div>

Hello and welcome @astrogeek, 🥳

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?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 18, 2020, 8:38pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/3 "2020-06-18T20:38:06Z")

</div>

> [@astrogeek](#):
>
> Any advice is greatly appreciated!

> [@Sketch is displayed twice inside my index.html page](https://discourse.processing.org/t/sketch-is-displayed-twice-inside-my-index-html-page/15335/9):
>
> My advice is to begin w/ a minimum runnable “index.html” template file like this 1: bulb \<script defer src=https://Unpkg.com/p5\>\</script\> \<script defer src=sketch.js\>\</script\> Once verified it’s working, you can add more stuff to it little by little. sunglasses Here’s some online sketch using this very same minimum template: smile_cat

> [@CDN for 0.10.2?](https://discourse.processing.org/t/cdn-for-0-10-2/14804/2):
>
> Use the “index.html” minimal template file from this sketch below instead: bulb index.html: \<script defer src=https://Unpkg.com/p5\>\</script\> \<script defer src=sketch.js\>\</script\> Other alternative CDNs: file_cabinet[Unpkg.com/p5/](http://Unpkg.com/p5/)[cdn.JsDelivr.net/npm/p5/](http://cdn.JsDelivr.net/npm/p5/) As a last recourse, we can grab “p5.min.js” directly from their site: shushing_face[p5js.org/assets/js/p5.min.js](http://p5js.org/assets/js/p5.min.js)

> [@Help! Why I cannot use the P5JS](https://discourse.processing.org/t/help-why-i-cannot-use-the-p5js/18067/2):
>
> For an absolute beginner, my advice is to start on some p5js online editor, such as this 1: man_student[OpenProcessing.org/sketch/create](http://OpenProcessing.org/sketch/create) Some sketches I’ve got there btW: grinning By using such specialized p5js online resources we don’t need to make our own “index.html” file. wink When you decide it’s time to learn how to code your own “index.html” file, you can use more generic JS online editors, such as these 2 below: sunglasses You can also take a look at my sketches I…

---

<div class="post-metadata">

**Author:** ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)\
**Post date:** [June 19, 2020, 4:25am UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/4 "2020-06-19T04:25:35Z")

</div>

Hi Sven,

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](http://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.

---

<div class="post-metadata">

**Author:** ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)\
**Post date:** [June 19, 2020, 6:02am UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/5 "2020-06-19T06:02:06Z")

</div>

Hi GoToLoop,

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.

Thanks for the advice!

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 19, 2020, 9:15am UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/6 "2020-06-19T09:15:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ARNAV\_A\_GUPTA](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/arnav_a_gupta/32/9660_2.png) [@ARNAV\_A\_GUPTA](https://discourse.processing.org/u/ARNAV_A_GUPTA)\
**Post date:** [June 19, 2020, 9:19am UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/7 "2020-06-19T09:19:02Z")

</div>

basically index.html is finding another folder within your directory and finding your code there. it would work like this…

---

<div class="post-metadata">

**Author:** ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)\
**Post date:** [June 19, 2020, 12:56pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/8 "2020-06-19T12:56:20Z")

</div>

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. 🙂

---

<div class="post-metadata">

**Author:** ![astrogeek](https://avatars.discourse-cdn.com/v4/letter/a/e95f7d/32.png) [@astrogeek](https://discourse.processing.org/u/astrogeek)\
**Post date:** [June 19, 2020, 11:08pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/9 "2020-06-19T23:08:17Z")

</div>

Hi Sven,

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!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 19, 2020, 11:16pm UTC](https://discourse.processing.org/t/p5-js-not-found-in-parent-directory/21981/10 "2020-06-19T23:16:01Z")

</div>

> [@Image not loading](https://discourse.processing.org/t/image-not-loading/11892/9):
>
> In my own Atom, I use packages “atom-live-server-plus” + “tool-bar” for such functionality: package Package “atom-html-preview” is also nice for a quick preview inside Atom: atom_symbol

> [@P5.js - not displaying static gif image](https://discourse.processing.org/t/p5-js-not-displaying-static-gif-image/20948/9):
>
> Some notes about your posted “index.html” file: You’re loading the same library 2 times: the unmodified & minimized versions. That is, “p5.js” + “p5.min.js”, “p5.gif.js” + “p5.gif.min.js”. Should pick 1 or the other: And a more serious 1: you’re loading p5.js addon libraries before the p5.js main library! Here’s their correct order for each category: \<!-- p5.js main library: --\> \<script defer src=https://cdn.JsDelivr.net/npm/p5\>\</script\> \<!-- p5.js addon libraries: --\> \<script defer src…