P5.js: Basic Library setup issue

[Cobwebster]

So i'm struggling to setup p5.js as a library in my project, I've followed a load of tutorials with just the same result.

It doesn't seem to acknowledge p5.js as a library, for example it wont even auto complete createCanvas.

Error, https://gyazo.com/4a1d92a38177469331ee489af0ee12b0
Error, https://gyazo.com/cab5ec8df66a5661aef9c0420167d6d8

I've tried putting all files within the same file location, didn't seem to work. I've also edited the locations.

Is there a simple tutorial/way of just setting it up? Seems like every tutorial just tells you to select a folder and it works for them right away, whereas when I do it. it just doesn't acknowledge the basics as a valid thing.

Sorry for putting a basic issue like this here.

 <script src="p5.js"></script>
<script src="p5.dom.js"></script>
<script src="p5.sound.min.js"></script>

<script src="sketch.js"></script>

--- The default which was generated didn't work either. (this is taken from my example where it was all in 1 folder)

• Using sublime text 3 and brackets. neither worked.

[limzykenneth]

The errors you are seeing in your editor all stems from the linters you have installed (jslint and eslint).

Looking at your directory structure, you should have required your p5.js file like so

<script src="libraries/p5.js"></script>

For p5.dom.js and p5.sound.js will depend on whether you have them in an addons folder in the libraries folder or not. The src term in the <script> tag represents the path to find the files so if you did not include the folder path, it will just look for the file in the current folder, ie. the folder index.html is in.

Have a look at the example project structure you can download from https://p5js.org/download/ for an idea of how to structure your folder and files.

[Cobwebster]

Disabling them has resolved the issue. Is there any way I can add in auto complete? So if I type CreateC it suggests CreateCanvas etc.. Makes learning so much easier.

[limzykenneth]

If you are using the p5.js-complete package, you should not move the index.html file out of the empty-example folder. Here's what the folder structure of the p5.js-complete package should look like:

├── addons
│   ├── p5.dom.js
│   ├── p5.dom.min.js
│   ├── p5.sound.js
│   └── p5.sound.min.js
├── empty-example
│   ├── index.html
│   └── sketch.js
├── p5.js
└── p5.min.js

The index.html file in there with this set of script tags

<script src="../p5.min.js"></script>
<script src="../addons/p5.dom.min.js"></script>
<script src="../addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>

expects this kind of folder structure.

If you want to use your folder structure (as shown in the screen shot), you will need to replace them with the following:

<script src="libraries/p5.min.js"></script>
<script src="libraries/addons/p5.dom.min.js"></script>
<script src="libraries/addons/p5.sound.min.js"></script>
<script src="sketch.js"></script>

Note the src attribute on the lines above.

It would be easiest to download the p5.js complete package and simply double click on the index.html in the empty-example folder (without moving any of the files inside around), if you just want an empty example to start with.

[Cobwebster]

I'm now using the default example, the example I had before was just me trying a load of different things to work. The default example is fine for me, the only "issue" I'm having right now is that I don't have auto complete. I'm not sure if its a thing with p5.js. aka what what other response says.

[limzykenneth]

Autocomplete depends on your code editor, I'm not sure how brackets deal with that (somehow automatically or expect a plugin)

[Cobwebster]

Appreciate your replies, do you happen to know any good sources to obtain auto complete on sublime text 3?

[limzykenneth]

I don't really know of any, most of them are based on plugins and there isn't any official p5.js plugin for any code editor yet. Sorry

[bmoren]

@tstefanich has made a sublime text version of my p5js snippets for atom (https://atom.io/packages/p5js-snippets) which should give you the suggestions you desire: https://github.com/tstefanich/p5js-snippets.sublime-completions

Although, he hasn't updated it in a year so some of the more recent p5 functionality might not be there. You could follow in his footsteps to use https://atom.io/packages/atomizer to convert my most recent atom package to sublime text.

good luck and happy coding!

[Cobwebster]

Thanks guys, this can be closed now. (not sure how). Appreciate your guys time.

[Spongman]

Visual studio code can do what you want if you add the typescript definitions to your project. See my comment here: https://github.com/processing/p5.js/issues/1339#issuecomment-354351574

[Cobwebster]

So like this? https://gyazo.com/b5265b3ceb0d502c3d2210e60209dda0

EDIT*

looks to work! tyvm.

[Spongman]

Yes nearly , you need a triple-slash comment before the '