If a function prints an object with p5.Graphics object, the function won't print anything else

[VinkentLi]

p5.js version

1.11.1

What is your operating system?

Windows

Web browser and version

Chrome version: 132.0.6834.160

Actual Behavior

The program doesn't log anything, even though draw() calls console.log();

Expected Behavior

The program should log "test" and the obj object every frame.

Steps to reproduce

Steps:

1. Create object with p5.Graphics object
2. Try to print something in a function along with the object

Snippet:

let obj = {graphics: null};

function setup() {
  createCanvas(400, 400);
  obj.graphics = createGraphics(400, 400);
}

function draw() {
  background(220);
  console.log("test");
  console.log(obj);
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[kammeows]

Are you talking about the browser's console or the in-built console in p5.js, because it does log the output in the former.

[VinkentLi]

The built-in console in the p5js editor

[kammeows]

I think the built-in console doesnt support complex objects like p5.Graphics, so it might fail to stringify it because of which nothing appears.

And in the browser console too, it does log the output but after sometime it starts giving Maximum call stack size exceeded error, so there's a recursion issue possibly because Immer.js may not be able to handle non-serializable objects like p5.Graphics

[kammeows]

console.log(JSON.stringify({ width: obj.graphics.width, height: obj.graphics.height }));
this line logs the output in the built-in console.

[Jatin24062005]

@VinkentLi, there seems to be a misunderstanding regarding the draw() function in p5.js. The draw() function is called once per frame, while the object you created is an instance of a class from the graphics library. Since it is being recursively called within draw(), it leads to a stack overflow.

To avoid this issue, you should instantiate the object independently outside the draw() function. This ensures that it is created only once and prints the required information correctly.

#Fixed - Code
let obj = {graphics: null};

function setup() {
createCanvas(400, 400);
obj.graphics = createGraphics(400, 400);
}

function draw() {
background(220);
console.log("test");

}

console.log(obj);

Thank You for your Interest if you need Any help regarding these you can feel free to ask. !

[dipamsen]

This seems to be the same issue as #3178