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

Processing Beginners
1

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
Screen Shot 2018-08-26 at 7.57.42 PM.png3338×254 34.9 KB

2

Can you check your developer tools for errors?

Can you please post a MCVE?

3

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

4

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.

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));
  }  
}
5

Can you please post your html file as well?

Please format your code :blush:

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

6

Thank you! Done…:slight_smile:

7

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

8

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.

9

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

10

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

11

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

12

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.
3 Likes