P5.js in IntelliJ IDEA?

Question

I started learning p5.js some days ago, and now I wanted to use IntelliJ IDEA instead of the p5.js online editor. Most things like the setup(), draw() and ellipse() functions work as expected, but the createCanvas() function doesn't - it is underlined green and the error message says "Unresolved function or method createCanvas()".

I tried using VSCode, and there it worked perfectly, but I prefer to use IntelliJ, and so I wanted to know if and if yes how I can get it to work in IntelliJ.

<script src="p5.js"></script> //p5.js is the file with all the code from the official p5js.org homepage.
<script src="sketch.js"></script> //sketch.js is the file where my code that should be executed is located

function setup() { //The setup() function is recognized as expected,
    createCanvas(1000, 1000); //But the createCanvas() function isn't.
}

The `setup()` function isn't being "recognized" by IntelliJ; you're defining a function called `setup()`. There shouldn't be anything special about the `p5.js` library, so you should follow whatever steps you normally follow to load a JavaScript library in `IntelliJ`. — Kevin Workman, Nov 04 '19 at 17:24
You can either download it from CDN (https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html#ws_js_external_library_downloaded_from_CDN) or add non-minified p5.js file as a library (https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html#ws_js_custom_third_party_library). — Oksana, Nov 05 '19 at 15:49
@KevinWorkman @Oksana Thanks for your reply, I have never loaded a library in IntelliJ, so I just followed the [link on the jetbrains website](https://www.jetbrains.com/help/idea/configuring-javascript-libraries.html). But that didn't change anything, the `createCanvas()` function still isn't recognized. I also tried the downloading it from CDN, didn't work for me either. I assume that's some kind of bug from IntelliJ's side and am going to continue using VSCode. — littlegamer757, Nov 06 '19 at 16:39
@littlegamer757 I doubt it's a bug in IntelliJ. My guess is that JavaScript requires some setup that you haven't done. There are instructions [here](https://www.jetbrains.com/help/idea/javascript-specific-guidelines.html#ws_js_start_existing_app). But in the end you should use whatever editor you're comfortable with. I normally use a basic text editor when I'm working with JavaScript and P5.js. — Kevin Workman, Nov 06 '19 at 17:05
@KevinWorkman I already configured everything listed in the guide — littlegamer757, Nov 07 '19 at 19:51

score 16 · Answer 1 · answered Nov 07 '19 at 16:28

16

p5 functions are defined as p5.prototype.<function name> = function(){}, so the IDE expects a namespace here... As a workaround, please try installing p5 typings: in Preferences | Languages & Frameworks | JavaScript | Libraries, press Downloads..., select p5 from the list. This should solve the problem

answered Nov 07 '19 at 16:28

lena

90,154
11
145
150

Thank you very much! Although downloading p5 from the Libraries list didn't solve the problem, I can live with writing p5.prototype in front of every function. I think the p5 from the Libraries list might not be the same p5 as I want to use. Thank you for your help! – littlegamer757 Nov 07 '19 at 19:56
@littlegamer757 Make sure you specify the Framework type as Prototype in the Libraries section and you won't need to do p5.prototype in your code... – Andre Van Zuydam Jul 25 '22 at 17:12

score 5 · Answer 2 · answered Apr 23 '20 at 19:54

I used to mimic the p5js online editor in IntelliJ IDEA by using the Live Edit plugin in combination with split screening Chrome and IntelliJ. The plugin will automatically update your HTML/JS in the Chrome window, s.t. you can instantly see the effects of your changes to your p5js code. It will only work when you run your HTML/JS file in debug mode.

Here's an example:

P5.js in IntelliJ IDEA?

2 Answers2