Part II: vimeo.com/157289349
Versión en español: vimeo.com/156838984
In your P5 sketches, you have probably been including p5.js.min. You might have opened it, and seen that it’s a long unreadable file:
it has no comments, no line breaks, no spaces: this makes it hard for us to read, but faster for the browser to download.
This is a compressed version of p5.js, is a longer, but human-readable file. p5.js holds the entire p5 library:
if you look into it you will find the definitions of ellipse(), random(), and the other functions you use in your sketches. The code that calls your setup() function once, and then keeps calling draw() forever, is also in this file.
Having the entire library code in one file is good for distributing it,
but not very practical for developing ––Imagine editing any kind of text file that has more than 27000 lines. This is why p5 is divided into modules,
like Shape, Typography, Image, and many others. They are interdependent: to draw a curve, for example, the Shape module uses functions that are defined in the Math module.
All these modules are defined within a folder in the P5 project. it’s called /src, which stands for source code. To generate the p5.js file a tool looks into these dependencies (like the Shape module using functions from the Math module), and pastes the code in the right order.
So, to recap:
p5 is made of many modules,
which are concatenated into a long file called P5.js,
which is ‘minified’ into p5.js.min,
which is then included in your p5 sketches.
So now you know why there is a src and a lib folder when you download the p5 source code.
You might notice there are other folders as well: build/tasks, docs, test, and some other files, like package.json.
While it might seem that they only make things more complicated, these are all there to support us as we develop p5, and ultimately make our lives easier. In the next video, we will take a first look at the p5 development process, and the tools we use to support it.
This tutorial started being drafted by the Education Working Group at the p5.js contributor conference, held at the Frank-Ratchye Studio for Creative Inquiry, Carnegie Mellon University in May of 2015.