Livecoding

Here is a little trick to speed up your work in P5. We are going to use a button that you may have noticed, a little button we can activate and deactivate. The idea of ​​”Auto-refresh” brings me closer to something that can be called “live coding”, meaning that I will no longer need to press the “play” button every time I modify my canvas.

Auto-refresh

Here I have a program which starts with the setting up of my canvas - the setup() - with the creation of a canvas which fills up all of the available surface. If I use an instruction to color the background with a black color, I normally have to press the “play” button to see my canvas fill up. But there is this button which is called “Auto-refresh” and which allows me to make modifications in real time to my instructions. After a little pause - which is very handy, just to be sure that we have finished filling the line - after this small pause, P5 updates the modifications on my canvas (on the right). It is as if we are painting in real time, but with writing, with code (on the left).

Debugging

If you encounter errors, or problems, you can always go back to a more classic use by disabling “Auto-refresh” - and then re-enabling, moment by moment, each time you make a change in order to “debug” and find your errors. If ever there is something that doesn’t behave the way you want, you always have that option.

Painting With Code

While I work, I personally often use “Auto-refresh”. It allows me to work in a very dynamic way, painting with code.