1

I have recently been working in p5.js in the Atom ide and have been trying to use a local p5.js library downloaded from their website. As a minimal example, I have tried to execute a basic sketch.js file using the atom online web server package (atom-live-server-plus) and by referring to the p5.js library which is positioned in the parent folder of the atom project. This way I only need one copy of the p5.js library and all my numerous p5.js projects can refer to the same library without it needing to be repeated. The issue: I have been unable to execute the code since an issue occurs when I specify the p5.js library location in the .html file using '..' syntax. Example:

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

Through tests I have managed identify this as an issue by finding two alternative methods to get the sketch.js file to work: A) insert the p5.js library file into the root directory, ie the project folder (test_1) and call it directly in the .html file. Example:

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

B) Call an online http: website version of the p5.js library in the.html file. Example:

<script src=https://Unpkg.com/p5></script>

In both cases the sketch.js file loads on the online server as expected. However, I would like to understand why the syntax '..' to describe the path to a parent folder does not work especially as I have recently downloaded the Generative Design book code examples (https://github.com/generative-design/Code-Package-p5.js) which require an extensive set of libraries to run each code's own sketch.js file and therefore it is in my best interests to use the local library folder and keep it in the parent folder rather than copy it into each individual code project's directory. I, therefore, need to find a way to refer to a parent folder library in the .html file. Please could you provide any insight into my issue?

Minimal Example Code Structure:

p5_work
 |
 +-- libraries
 |  |  
 |  +-- p5.sound.js
 |  |    
 |  +-- p5.js
 |    
 +-- test_1 (Atom project)
    |    
    +-- index.html
    |    
    +-- sketch.js

index.html Code:

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>p5.js test_1 example</title>
  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="..\libraries\p5.js"></script>
  <script src="sketch.js"></script>
</head>

<body>
  <main>
  </main>
</body>

</html>

sketch.js Code:

function setup() {
  createCanvas(720, 400);
  background(0);
}

function draw() {
    fill(255,0,0)
    ellipse(50, 50, 80, 80);
}
Ikiro
  • 35
  • 4
  • Have you tried `../` instead of `..\`? The windows operating system used `\` for path directories, but most applications use `/` for noting path directories – Samathingamajig Dec 14 '20 at 00:13

2 Answers2

1

While I am not that qualified to answer any question regard to JavaScript and P5. I tried to build a repository similar to the one I am doing always with Python then I faced this problem. Which almost made me quit the P5 learning project. After reading many and many articles I found the following:

It probably won't work. If your server setup is normal only public and the folders below it are accessible from the client-side. From the client's point of view, the public is the root, there is nothing above that.

As for importing bootstrap, see if you can browse what node is making available in your browser. It's probably hosting the scripts you need to reference on the client-side at another URL. You might also find the URL in the bower documentation/examples.

You could solve this by copying or symlinking the scripts into the public directory, but that would be a bit hackish, save it for if you get completely fed up with finding the intended way.

See more details here: Referencing a parent directory in HTML

The best solution I found so far is based on the p5-manager npm library. Quick Start

$ npm install -g p5-manager

There are several use case of p5-manager, Before going further, choose the one best describe your requirements and go ahead.

Step 1: Initialize a new collection

$ p5 new my_collection

By running this command, it will create a collection directory and some p5 libraries to it. See the output log:

# create : my_collection 
# create : my_collection/libraries 
# create : my_collection/libraries/p5.js 
# ...

Step 2: Generate a p5 project

$ cd my_collection
$ p5 generate my_project
# or... 
$ p5 g my_project

This will generate a p5 project folder with default templates in it. (Make sure you are running this command in a collection directory.)

# create : my_project 
# create : my_project/sketch.js 
# create : my_project/index.html

Step 3: Start the server and have fun!

$ p5 server
# or... 
$ p5 s

Now edit your sketch.js and go to localhost:5555, then p5-manager will do the rest. The server supports live reload as default. (Notice: You should run the p5 server in a collection directory, instead of a project directory.) More details are here: https://www.npmjs.com/package/p5-manager

Now, I can run as many as I want of sketches that are referred to the same index.html. My previous setup was about creating multiple downloads of the P5 library for each sketch., but now I overcome this problem and the structure is ready for my P5 learning journey. I hope you will find this post helfpul.

 └──     Library/
 │  ├────     index.html
 │  └────     sketch.js
 ├──     LICENSE
 ├──     README.md
 └──     database/
 └──     develop/
 └──     libraries/
 │  ├────     p5.dom.js
 │  ├────     p5.js
 │  └────     p5.sound.js
 └──     node_modules/
 └──     notes/
 ├──     package-lock.json
 ├──     package.json
 └──     services/
 └──     src/
 │  ├────     index.html
 │  └────     sketch.js
 └──     testing/
 └──     typescript

Last Note I promise: This issues appeared in many places, and still not solved by so many.

Dr Neo
  • 724
  • 6
  • 11
0

The file is called p5.min.js not p5.js.

Taitep
  • 1
  • 3