We’ve updated JavaScript libraries from Processing.js to p5.js! Although some of your projects may need slight adjustments in order to work in this updated library, p5.js allows you to program touch interactivity, enable multiple key interactions at once, as well as access the WEBGL renderer to create projects in a 3D environment.

There are a few subtle changes, however, that may prevent an older project written with processing.js from working in Code Naturally after the update. Below are some pages from our Creator’s Guide that explore these new features and differences in depth. These detail the changes resulting from the p5.js update that are most likely preventing your older projects from working.

Summarizing function setup ( ) and the Global Scope:

Using shape or design commands in the Global Scope, outside the curly brackets of function draw or function setup, will cause a script error. Be sure you declare your variables in the Global Scope, but include all of your shape and design functions inside the local scope of either function setup (which executes each line only once) or function draw (which executes each line of code in a loop, 60 times per second).

Summary of Interaction Syntax Changes:

• mousePressed is now mouseIsPressed
• keyPressed is now keyIsPressed
• (Be sure to include Is before Pressed.)
• keyCode names have also changed: UP is now UP_ARROW etc.

From all the information provided, you should be able to restore your older projects to working order. Just remember to keep your eyes peeled for any necessary syntax changes involving key and mouse interactions. CTRL + F can be useful for searching for every occurrence of a certain function so you can adjust it.

Using function setup to contain the lines of code we want to execute only once, versus having that code reside in the Global Scope, is something else which might be frustrating to keep track of at first. Yet, over time, using function setup and the Global Scope correctly will make us more organized and intentional programmers.

We hope this information helps make your adjustment to p5.js smooth and painless. If you’ve studied these pages thoroughly, adjusted an older project and you are still having issues running your code, please feel free to reach out to us at codenaturally@gmail.com.

-the Code Naturally Team

Be in the know! Join our mailing list