SimplexNoise is not defined

p5.js Libraries
1

Hello, I’m a beginner of P5.JS. And I found openprocessing is really great place to start. I was learning this interesting sketch made by Takawo 210612a - OpenProcessing(a really nice sketch), when I want to run it locally, the console keeps telling me SimplexNoise is not defined. From my basic coding knowledge, I think I have already defined it, please help me figure out the issue. Thanks!

2

If you go to his 210612a - OpenProcessing sketch and click on the far right icon w/ 3 lines to open a panel you’ll see in the “Libraries” section at that panel’s bottom that he’s using an extra library file called “simplex-noise.min.js”: simplex-noise

In order to run a p5.js sketch outside a specialized p5.js hosting service you’re gonna need some HTML file w/ <script> tags to load all required libraries plus you’re own JS files.

The “index.html” file below is the most simplistic template to achieve that:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>

However, the fact that you need this extra “simplex-noise.js” library below:
cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js

You’ll also have to add an extra <script> tag for it inside the HTML; making sure it loads before your own JS files:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script defer
  src=https://cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.min.js>
</script>

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

Also make sure to run it using a local server. Good luck!

1 Like
4

Hi! Thanks for explaining step by step, I appreciate for that. I still have the error in my console after following the instruction, I must did something wrong. I wonder if you can have a look at this sketch p5.js Web Editor

5

No worries, you didn’t. After a closer look I’ve spotted the library fails at the very start:
Object.defineProperty(exports, "__esModule", { value: true });

There’s no existing exports in the browser’s JS environment.

But rather exports exists for code running in the Node.js server-side environment.

That is, the library Simplex-Noise is primarily meant for server-side apps, not client-side browsers.

However not all is lost: Besides the CommonJS (cjs) version:
cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js

There’s also an EcmaScript Module (esm) version:
cdn.JsDelivr.net/npm/simplex-noise/dist/esm/simplex-noise.js

But b/c a module JS file has a different behavior compared to a vanilla JS file, we’ll need some extra code in order to actually import it:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>

<script type=module>
  // Imports class SimplexNoise from module file "simplex-noise.min.js":
  import SimplexNoise from
    "https://cdn.JsDelivr.net/npm/simplex-noise/dist/esm/simplex-noise.min.js";

  // Makes imported class SimplexNoise globally available:
  globalThis.SimplexNoise = SimplexNoise;
</script>

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

As you can see above, a module JS file needs the keyword import in order to grab it:

I believe the template above should work this time. Good luck!

1 Like
7

Yes!!! It works. Thanks for your patience! I’m so happy I always get kindly help and new knowledge from here.

1 Like
8

For any1 interested in @momo’s online sketch, here it is: