How to use export & import in p5.js

p5.js Coding Questions
1

Hello guys!
I have some code stored in my GitHub repository…here is its jsdelivr link https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js

Now, I try importing this into the p5.js editor

import {pointCoord} from 'https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js';

function setup() {
  createCanvas(400, 400);  
}

function draw() {

  background(120);
  pointCoord
}

However, the console reads:
image

I don’t really get what is wrnog and how to fix it. What should I do?

Thank you in advance:)

2

Hello, @JaPatProccesingDis, and welcome to the Processing Forum!

Several changes need to be made.

  • Remove the export statement from your remotely hosted file.
  • Remove the import statement from your local p5.js script.
  • Add the following line to the head portion of the index.html file that is associated with your p5.js script:
  <script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/gh/JaPatGitHub/EduSimulations@main/Tools/x-y-coordinate%20pointer.js"></script>
  • In your local p5.js script, change this …
pointCoord

… to this, so that the pointCoord function gets called …

pointCoord();

Your script should now look like this:

function setup() {
  createCanvas(400, 400);  
}

function draw() {
  background(120);
  pointCoord();
}

Please let us know how it works out. :smiley:

EDITED on August 14, 2021 to clarify where the changes need to be made.

2 Likes
3

Hi! Welcome to the forum!

While @javagar 's post shows how to make it work, it’s not a solution to javascript import/export. I can explain a bit about modules, but in short, I don’t suggest to use p5.js with javascript modules because it’s too complicated.

The way how it works is you need to add type="module" when importing the script (and as javagar suggested, you need to call the function pointCoord() in draw).

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

However, this code won’t work in your case because p5.js is not properly loaded when the script is loaded as a module. Also, your module pointCoord depends on p5.js, so that the module has to load p5.js as well :exploding_head:

I think the only way to make this work is to write everything in instance mode and use tools like browserify to add p5.js dependency to your pointCoord module. I know this is ridiculous, but since p5.js (global mode) itself is a “hack”, sadly it won’t work out of the box with features like JS modules.

3 Likes
4

I’ve got these 2 old sketches using JS modules w/ p5.js: :asterisk:

2 Likes
5

nice! I guess you are passing the p5 instance as an argument to the modules, right? I guess this is the most straightforward way although you have to stick to the instance mode.

6

Nope! In global mode its instance reference is stored in p5.instance static property:

export default class Ball {
  constructor(world, p = p5.instance) {
    this.world = world;
    this.vel = (this.p = p).createVector();
    this.body = this.c = null;
    this.respawn();
  }

My both online module examples use p5.js’ global mode.

The “Matter.js Bouncing Colorful Balls” is also available in p5js’ instance mode.

1 Like
7

I see! So it’s in the global mode but you need to reference the instance. Also setup / draw has to be defined as a member of window to be picked up by p5.js. Based on your code I adapted the OP’s code:

1 Like
8

That’s right! A JS module got 2 global contexts: A private 1 and a shared 1.

Explicitly appending to window or globalThis assures those properties can be accessed by both vanilla & module scripts which are sharing the same global context.

9

It does work @javagar. Thank you so much!!

1 Like
10

Thank you @micuat! I was curious about using the import/export functionality in p5.js