# Can't run P5.js code in Processing IDE (even in P5.js mode)

**URL:** <https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001>\
**Category:** Beginners\
**Created:** [August 27, 2018, 12:01am UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001 "2018-08-27T00:01:20Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sdespr](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sdespr](https://discourse.processing.org/u/Sdespr)\
**Post date:** [August 27, 2018, 12:01am UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/1 "2018-08-27T00:01:20Z")

</div>

Hi, pretty new to Processing. I’m trying to run some P5.js code (in P5.js mode in the Processing IDE) that I found on OpenProcessing. When I run the code, it opens up a new web page, and I see that’s loading… but nothing happens. Any advice on this?

 ![42%20PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/ca1ac17f624c838764759482f342d021c9a73c95.png)

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 27, 2018, 12:06am UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/2 "2018-08-27T00:06:06Z")

</div>

Can you check your [developer tools](https://happycoding.io/tutorials/javascript/developer-tools) for errors?

Can you please post a [MCVE](https://stackoverflow.com/help/mcve)?

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [August 27, 2018, 4:30am UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/3 "2018-08-27T04:30:58Z")

</div>

@Sdespr what code example are you trying to run and does the code use a library?

---

<div class="post-metadata">

**Author:** ![Sdespr](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sdespr](https://discourse.processing.org/u/Sdespr)\
**Post date:** [August 27, 2018, 11:02pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/4 "2018-08-27T23:02:11Z")

</div>

Thanks for answering folks. I’m aware about MCVE, but since it affects all P5 codes, not sure how to re-answer that. And I have no experience regarding Developer tools in chrome or other browsers. I opened up the scripts in Visual Code but can’t find an answer there either. I’m wondering about updates, I’m using the latest Processing version.

So none of the P5.js codes work at all. Here is a small example of a code that doesn’t run on the Processing IDE in P5 mode. The results are always the same, a webpage opens with nothing running. I don’t recognize the Ip address either. It’s probably some stupid, but I can’t put my finger on it. Any insights would be appreciated.

```auto
var mic, fft;

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  mic = new p5.AudioIn();
  mic.start();
  fft = new p5.FFT();
  fft.setInput(mic);
  colorMode(HSB, 360);
  strokeWeight(3);
}

function draw() {
  background(RGB, 100,100,100);
  var spectrum = fft.analyze();
  var circRad = 400;
  var circThick = 25;
  var maxSpectrum = 200; //spectrum.length
  
  for(i = 0; i < maxSpectrum; i+=1) {
    var circi = map(i, 0, maxSpectrum, 0, 360);
    var dist = spectrum[i]; 
    //map(spectrum[i/2], 0, 255, 0, 360);
   stroke(spectrum[i],100,515,370)
    line(width/2 - CircleX(circi, circRad+dist+circThick), height/2 + CircleY(circi, circRad+dist+circThick), width/2 - CircleX(circi, circRad-dist-circThick), height/2 + CircleY(circi, circRad-dist-circThick));
  }  
}

```

```auto

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [August 28, 2018, 1:50am UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/5 "2018-08-28T01:50:01Z")

</div>

Can you please post your html file as well?

* * *

### _Please format your code_ 😊

It consist on these two steps:

1. In your code editor (PDE, VS code, Eclipse, etc) ensure you execute the beautifier function. This function automatically indents your code. Auto-indenting makes your code easier to read and helps catching bugs due to mismatch parenthesis, for instance. In the PDE, you use the key combination: `ctrl+t`
2. You copy and paste your code in the forum. Then you select the code and you hit the formatting button aka. the button with this symbol: `</>`

That’s it! Please notice you do not create a new post in case you need to format something you already posted. You can edit your post, copy the code to the PDE, indent the code properly there and then past it back here, format the code and \>\> **save** \<\< the edits.

## Extra info:

Formatting your code makes everybody’s life easier, your code looks much better plus it ensures your code integrity is not affected by the forum’s formatting (Do you know the forum processes markup code?) Please visit the sticky posts or the FAQ section/post to learn about this, other advantages and super powers you can get in this brand new forum.

Kf

---

<div class="post-metadata">

**Author:** ![Sdespr](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sdespr](https://discourse.processing.org/u/Sdespr)\
**Post date:** [September 7, 2018, 7:00pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/6 "2018-09-07T19:00:30Z")

</div>

Thank you! Done…🙂

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 7, 2018, 8:04pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/7 "2018-09-07T20:04:18Z")

</div>

What browser were you using? Or which ones did you try your code on? What OS?

This is an obvious question but, did you load p5.sound.js as well? You might need p5.dom.js as well.

When it opens in a browser, it might ask you permission to use the mic. Do you get any prompt?

Kf

---

<div class="post-metadata">

**Author:** ![Sdespr](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sdespr](https://discourse.processing.org/u/Sdespr)\
**Post date:** [September 7, 2018, 9:42pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/8 "2018-09-07T21:42:47Z")

</div>

I’m using Chrome, runs fine in OpenProcessing. But won’t run in OpenProcessing using safari. OS High Sierra 10.13.3. So I downloaded the complete P5 library including P5.sound.js and P5.dom.js. Now all of this opens up in Visual Studio Coder. I’m not familiar with Visual Studio Code, don’t understand why it opens there and how come I can’t run it in the Processing PDE in P5.js mode. I’m missing something here.

I don’t get a prompt. Mic is inputing fine on OpenProcessing.

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 7, 2018, 10:29pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/9 "2018-09-07T22:29:55Z")

</div>

> [@Sdespr](#):
>
> So I downloaded the complete P5 library including P5.sound.js and P5.dom.js. Now all of this opens up in Visual Studio Coder. I’m not familiar with Visual Studio Code, don’t understand why it opens there and how come I can’t run it in the Processing PDE in P5.js mode.

I don’t understand why it opens Visual Studio Coder either. Like you click in your pde file?. What you need to do is this. You open the PDE. You set the p5.js mode. Then you open your pde file there. Then, if you hit run, it should load in your browser. What browser does it launch?

If you have a codepen for this, please share it here.

Kf

---

<div class="post-metadata">

**Author:** ![Sdespr](https://avatars.discourse-cdn.com/v4/letter/s/3bc359/32.png) [@Sdespr](https://discourse.processing.org/u/Sdespr)\
**Post date:** [September 9, 2018, 7:22pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/10 "2018-09-09T19:22:55Z")

</div>

Thank you for taking the time, I do appreciate it. So I’ve been doing exactly as you mentioned. When I copy an example code from the P5.js website, it runs exactly as it’s supposed to. Opens a window in my browser and I can see the code running. But when I copy a P5.js code from OpenProcessing, and paste it into the Processing Pde in P5.js mode it opens a browser window but doesn’t run. There’s nothing. This is how I’ve been trying to perform the task, perhaps it might help in shedding some light.

Method 1: In open processing, I copy the code and paste it the Processing Pde in P5.js mode. This doesn’t work obviously.  
Method 2: I download the code from OpenProcessing, the code downloads as a Zip file and contains .js files, in the example above, the Zip file contains the following: Circle Functions.js, Index.html and mySketch.js. I don’t see any .pde files. So where is this .pde file?

SD

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [September 9, 2018, 11:27pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/11 "2018-09-09T23:27:18Z")

</div>

> [@Sdespr](#):
>
> the Zip file contains the following: Circle Functions.js, Index.html and mySketch.js. I don’t see any .pde files. So where is this .pde file

Actually, there is not pde file when you set the PDE in p5.js mode. By default, a new file in PDE in p5js mode provides a js file for your javascript and an html file for your web page.

Kf

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 10, 2018, 5:04pm UTC](https://discourse.processing.org/t/cant-run-p5-js-code-in-processing-ide-even-in-p5-js-mode/3001/12 "2018-09-10T17:04:06Z")

</div>

> [@kfrajer](#):
>
> there is not pde file when you set the PDE in p5.js mode

Right. File formats are different for each Processing language mode:

- Processing (default Java mode): main .pde, optional additional .pde and .java files
- p5.js: main .js and .html, optional additional .js files and web resources (css, etc.)
- Processing.py: main .pyde file, optional additional .py files
- Processing.R: .rpde …
- …etc. etc.