Looking for a p5 2.x.x tutorial

Hi all,

I’m looking for a tutorial which illustrates the structural changes from p5 1.x.x to p5 2.x.x. I’m talking about font loading, image loading, how preload() has gone, async issues, the new improved async-ness of 2.x.x, any important changes to the Datatypes, eg. is p5.Color any different, is the format of p5.Color stored differently in browser Local Storage etc. Not immediately looking for detail on new 3D modes and shaders.

This is in the context of moving a very large mainly 2D code from 1.x.x to 2.x.x. I’ve looked around but didn’t see what I needed, but could easily have missed it.

I’ve run my code unde 2.2.0 and it mainly works and survives, so things are good, but I’d like to know more details.

Many thanks,

GE.

2 Likes

Hi @grege2

Thanks for your question. For folks transitioning from p5.js 1.x to 2.x, the compatibility guide is a great place to start:

https://github.com/processing/p5.js-compatibility

There’s also a helpful interview with Kit Kuksenok that gives additional context about the 2.0 release, with links to further resources in the show notes:

https://timrodenbroeker.de/kit-kuksenok-on-p5-js-2-0/

2 Likes

Hi @grege2 !

The 2.x reference is on https://beta.p5js.org/ - this has been updated to reflect new API (like the typography methods in the interview Raphaël linked) and updates in Color and other parts. 2.x specific content also includes loading multiple images at once with Promise.all and a couple new tutorials, including this postcard tutorial that uses various new features.

The compatibility link @sableraph gave is the main information about the changes. The README contains list of changes as well as side by side code for 1.x and 2.x. Lastly, if you want to use 1.x but with some 2.x features, this is also possible with the add-ons in the above library. For example, to use 2.x + preload, these settings would work:

Any problems you encounter, gaps, etc - please file issues there or @ me in this thread! I am happy to improve these resources.

Best,
Kit

2 Likes

Thanks! Will check all that.

Thanks also! Will check all that.