In a broader sense, Processing is a language script that focuses mainly on the programmer's feasibility while creating software prototypes quickly. It can be also termed as a method of quickly experimenting and implementing to check out if the particular works fine or not. Thus the name Processing(p5) and is usually termed as sketches.
p5.js has no preferred editors. Developers can opt for various options available like VS Code, Sublime Text, or Bracket, but the best alternative for working with p5.js is the official p5.js Web Editor available online. It is highly constructed based on a web-based programming environment.
Let's discuss more about p5.js along with some coding examples.
Note: The setup() function is executed only once when the program begins and the creatCanvas must always be the first statement. Similarly, the draw() function is executed when the execution of the program is stopped. Each of the statements are executed in sequence and soon after reading the last line, first line is executed again.
Web Editor Anatomy of p5.js
The web editor offered specifically to support p5.js is a fabulous tool that can make you start programming right away. To use this editor, it is recommended to sign up or log in to use it efficiently. It is a real-time editor which on creating and running different functions can be visualized. Consider the below image and observe how the control flow is delivered.
The Web Editor offers an easy-to-use interface that has less confusion in using the features. You can debug, re-program seamlessly, and therefore is an amazing tool offering all sorts of design methods based on the p5.js programming paradigm.
Let's understand with some more examples to get a clear picture of how different things can be graphically designed with p5.js.
In the above code snippet, we have defined a function() to start for once when the program is getting executed. In the next function draw(), we have a pre-defined eclipse() function that takes dimensions of the circle to be drawn. We have taken a small dimension for displaying the radius or diameter of the circle which is quite easy to understand from the code itself
P5.js offers various design methods. To name a few there are pre-defined functions for creating a rectangle, eclipse, taking coordinates, fill and stroke. Thus, in the below example we would be using some of these in-built functions to understand how collectively these work. Consider the below code for better understanding.
It is quite easy to understand that the above functions dynamically work if we can understand the design patterns and their dimensions. In the above code, we have taken into consideration various methods for designing including rect() and stroke() methods that add some interesting design to the shapes defined in the above code snippet.
Similarly, p5.js has tremendous design modules that help in designing the way we want.