runnings p5.js and processing.js on the same webpage?

I have some old sketches I wrote in processing that I want to put online. My website that I want to post them on uses p5.js to dynamically create a background image. This p5 script only has a setup function, no draw function, it draws the image to the background once and that's it. At the end of the setup function it makes a call to noLoop().

The problem is my processing.js sketches run really slowly when they're put on the same page with the p5 sketch. If I comment out the entire body of the setup function, but leave the function itself, the sketches still run slowly. If I comment out the p5 code entirely but leave everything else exactly the same, then the processing.js sketches run smoothly.

Anybody know why this is and how I can fix it?


  • edited January 2015

    Both "p5.js" & "processing.js" create their own web canvas. If you merely wants 1 of the frameworks to change page's background, there's no need for any extra canvas.

    As you told us, running both frameworks in the same page seriously affect performance, even w/ noLoop().

    "JavaScript Mode" supports ".js" named tabs. We can write JS syntax in those tabs instead of Java syntax from regular ".pde" tabs.

    You can write a JS function inside a ".js" tab and call it from a ".pde" tab in order to render page's background via JS syntax!

Sign In or Register to comment.