processing / processing/p5.js

Using / in HTML code for linking modules

Open
#7,386 11 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Bug
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
p5.js version

1.11.1

Web browser and version

Firefox

Operating system

Linux

Steps to reproduce this
Steps:

Seems very strange: in the head of the index.html i write:

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

Note the / at the beginning of the path…in this case.working fine…

But in the div of the canvas:

<div id="sketch-holder">
        <script src="src/sketch.js" type="module"></script>
    </div>

Works but

<div id="sketch-holder">
        <script src="/src/sketch.js" type="module"></script>
    </div>

With the / doesn’t work, also i have to write type=“module” in other tutorials don’t appear this type only:

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

Also i still think that window.setup = setup and window.draw=draw at the end of sketch.js should no be there…if you export and import a js file, just it, don’t know why window is doing here…

Would be nice if any dev could fix this-

Code
https://drive.google.com/file/d/1J_BBQANpS7U7OEIRlrfx-UCeveXPhDUG/view

Also could be an idea or enhancement for p5.js 2.0

Snippet:

// Paste your code here :)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the reported paths in index.html, including src/scriptindex.js, libraries/p5.min.js, and src/sketch.js, using the linked example if available. Check whether the behavior is specific to p5.js or to browser module and root-relative URL handling. Done means identifying a reproducible p5.js issue with a clear code or documentation change, or confirming that no repository change is needed.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.