Unable to get console output with p5.js mode in Processing IDE

p5.js Beginners
1

For some reason I am unable to get console output in Processing using p5.js mode. Nothing shows up in the Processing window or in the web output screen.

function setup() {
  createCanvas(400, 400);
  background(220);
  console.log("console log setup");
  print("print setup");
}

function draw() {
  console.log("console log draw");
  print("print draw");
}
3

When it is opened, do you get any output in the JavaScript console of your browser?

The following is from a MacBook Air with macOS Monterey, Processing 4.0b2, and Chrome:

p5.js console.log
p5.js console.log1920×997 135 KB

What configuration do you have on your system?

4 
do you get any output in the JavaScript console of your browser

No, and that’s a problem. I’m using macOS Big Sur version 11.6, Processing 4.0b2, and Safari on a Mac mini(2018). Here’s what I see:

browser
browser3786×1728 122 KB

5

What do you see in Safari, running without the Processing IDE, if you open a JavaScript console, and view an HTML file that references your sketch?

1 Like
6 
if you open a JavaScript console, and view an HTML file that references your sketch?

Unfortunately, I’m ignorant about all of this. How would I open a JavaScript console? I do have experience with p5.js web editor and OpenProcessing, but I’m accustomed to using the Processing IDE and prefer to use it if I can get some output. However, it’s really hard to debug code if I can’t see console output.

1 Like
7

I did a google search and came up with this: https://balsamiq.com/support/faqs/browserconsole/. I was able to see some html code. How would I connect this to Processing IDE?

1 Like
8

Okay, I get it. Once Processing IDE has run I need to add the js console to the browser window that it supplies:

browser_2
browser_23802×1250 392 KB

And there’s all my console output from the demo. Thanks a million.

1 Like
9

Yeah, it was all about isolating the source of the problem.

in p5.js Mode, when you click the Run button, the job gets handed over to the browser. Then it is up to the browser to read the HTML, and render the page and manage the JavaScript console, according to the linked p5.js library, the linked sketch script, and any CSS that might be linked in or embedded. So, at that stage it becomes unlikely the the problem is with the Processing IDE itself. That sends our focus to the browser or the code for the source of the problem. The code looks good, so that leaves the browser, including its settings.

EDITED on January 17, 2022 to add a couple of sentences to the above.

10 
in p5.js Mode, when you click the Run button, the job gets handed over to the browser.

Is there any way to change the browser that it is handed over to?

11

You could change your default browser, but the one you choose would become the default for opening all HTML files, even outside the Processing Development Environment.

See the following:

12 
change your default browser

I was trying to avoid that if I could. No good solution it seems. I’ve been having trouble with some p5.js code not running in Safari, while it will run in Chrome. The only other option would be to use a different p5.js editor in lieu of Processing (assuming that I could direct its output to Chrome). I think Dan Shiffman has his set up that way (at least it looks like it in his videos).