editor.p5js.org

Let’s take a look at the P5js online editor.

Sign In

I’ll go to my Mac and open Safari. I like working with Safari because it handles full screen really well, and I like working “distractions-free”, i.e. without a bunch of interface elements. I open editor.p5js.org and through this editor, I will go to the top right, enter my login name along with my password. And voilà - it recognizes me: “abstractmachine”.

New Sketch

P5 generates a sketch for me with a temporary name that I can keep or rename: “Sepia Mozzarella”, I supposed that means “mozzarella in sepia”. We will therefore try to make a little mozzarella in sepia.

And so here we have the P5 environment as a whole.

Experimentation

As I explained in a previous video, the basic philosophy of Design By Numbers - which subsequently became Processing, which has now become P5 - is to propose a learning space: an exploration and experimentation space as simple as possible for learning and exploring programming.

The way this translates in P5 (and originally in Processing) is via a minimum of interface elements.

Writing Space

We have a space for writing. P5 uses code more complex than the original Design By Numbers project, but which is still more or less understandable: we see the “setup”, that is to say the preparation of a drawing with the creation of a canvas. Then we have the space where the drawing is described, here we “draw()” with a background color. You may not understand it yet, but this instruction gives the color gray. So this is a space where I write instructions.

Play

Then we see a “Play” button, which I can press to view my drawing. Here I see a square. You may or may not be able to see very well, but on the right there is a gray square. If I lower the values ​​of this square - I put 150 maybe - you will see that the gray is a little more pronounced. If I go up to the maximum - 255 - I have white. If I put 0 for the background color, I have black.

Write, Play

So it’s an environement where I can write instructions on the left, and on the right I see what they give me as a result.

Console

At the bottom there is also something that has been around since the early days in Processing called the Console. You can hide this if it bothers you; you can hide it if you want to have a little more writing space. But it is very useful because it will show you errors.

When we try to directly write “draw a sheep”, for example … let’s say I don’t really understand what I’m doing, I understand that we have to put parentheses but I don’t know why … so I imitate by writing the word “drawASheep()” without defining what “draw a sheep” means … ok, let’s be a little more polite and ask it to “draw me a sheep” … well if I press the “play” button, it will not understand. It will tell me in the Console that there were errors.

In this case, the console does not explain my script errors very well, but in any case if we forget to give certain instructions — for example inside the “background()” action parentheses — it will tell me that it expected see at least one color argument inside of the background color description. The explanations of the errors therefore take place at the bottom, in the Console.

Workflow

So that’s just about everything. I have “sketches” with titles that will go into my personal space. I write the instructions. I press “Play” and I see the results on the right. That’s about all there is to it.

Which is all for the best. There are more sophisticated things, which we will see later, when, for example, we want to add images. There is a small space that can be opened to add an image: to be able to draw with a GIF image instead of a black, white, colored brush, etc. There are small spaces to put media, to put code - and for even more complex things like separating the code into several parts.

Conclusion

Basically, the work in P5 is what you see here. I write things, I hit “Play”, I watch what happens, and I try to understand my mistakes. That’s pretty much all you need to know to use the P5 editor.