Accessing Files with p5.js in Visual Studio Code

Question

I'm a newbie getting started with p5.js and just got it working with Visual Studio Code and am having problems using any of the functions that access a file, be it image or text. My goal is to load a text file so I can parse it into vocabulary data.

Following the reference documents I added preload. You can see I also tried doing this with an image file and it produced the same results.

function preload(){
fileContents = loadStrings('defaultvocab.txt');
//img = loadImage('AthensDemocracy.jpg');
}

The result is this set of error messages and a hang in the preload.

I'm not sure if it's a setting with VSCode or something I need to do in the JSON file it created, which I had to add the file to to get it to work also, so it's probably something to add in there but I'm not having much luck in finding it. Currently launch.json is this:

{

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}",
        "file":"index.html"
    }
]

Please forgive the sad 90s web design and thank you for the help!

Answer 1

It looks like the webpage is still loading via the native file system path rather than the local web server (localhost:8080).

If you manually open htts://localhost:8080 in your browser does that run (is the web server actually running?)

Personally, I use Sam Levigne's p5.vscode addon:

1. install it
2. right click on your index.html
3. click Open with Live Server

I find the live coding (auto-reload on save) super useful, especially when prototyping.