I have been learning P5.JS for a while now and though it would be nice to share the process and progress in form of a tutorial, which will motivate me to continue learning and give others access to it.
``` index.html lib/p5.min.js ``` ``` We will then create `run.js`, this file will contain all the code we will be writing. Our project should look something like this. `````` index.html lib/p5.min.js run.js ``` ``` Time to write some `HTML` in the `index.html` file. ``````Sketch App ``` ``` As you can see above we have the `p5.js` library before `run.js`, since web browsers read code line by line it is important that the library is interpreted before `run.js`, otherwise all the code we have written will contain error because the web browser does not know what we are trying to do. In P5.JS all the naming convention is followed based on what the function does and what it contains, this makes it easy to understand to a beginner. It’s time to edit the `run.js` file. The first function will be `setup()`. This will contain all the code that will initialize the program more like rules and instruction to follow. `````` function setup() { } ``` ``` We will create the `draw()` function below `setup()`. The `draw` function will contain all the drawing tasks that will be running inside the canvas element that we will create in the next step. `````` function draw() { } ``` ``` The code should look something like this. `````` function setup() { } function draw() { } ``` ``` Creating the canvas inside `setup()` using `createCanvas()` function. The `createCanvas()` element takes two parameters, width, and height. `````` function setup() { createCanvas(800, 800); // width, height } ``` ``` If you open the web page you will see a white box with a size of 800 x 800 surrounded by a border of 2px. You can change the background color using the `background()` function that takes one parameter. `````` function setup() { createCanvas(800, 800); background(85); // you can choose between 0 and 255. } ``` ``` Let’s add some functionality to `draw()` which will make the magic happen. `````` function draw() { if(mouseIsPressed) { rect(mouseX, mouseY, 2,2) // X location, Y location, weight, height } } ``` ``` As you can see in the above code we have an `if` statement that has the `mouseIsPressed` function, this function checks if the mouse is pressed, using the `if` statement we are telling it to draw a rectangle with the `rect()` function on the X axis and Y while maintaining a width and height of 2px. With the `fill()` function, we will make rect have its interior have white color. `````` function draw() { if(mouseIsPressed) { fill(255); / Choose between 0 to 255 rect(mouseX, mouseY, 5,5) // X location, Y location, weight, height } } ``` ``` We can remove the stroke around the rectangle by adding a `noStroke()` function, this will remove the stroke surrounding the rect we draw. `````` function draw() { if(mouseIsPressed) { fill(255); // Choose between 0 to 255 noStroke(); rect(mouseX, mouseY, 5,5) // X location, Y location, weight, height } } ``` ``` The project is done. Excellent job! The complete code in `run.js` should look like the snippet below. `````` function setup() { createCanvas(800, 800); background(85); } function draw() { if (mouseIsPressed) { fill(255); noStroke(); rect(mouseX, mouseY, 5, 5); } } ``` ``` This is how the [final version should look](https://jsbin.com/teyalen/3/edit?html,js,output). You can download the [completed source code](https://github.com/DarrylDias/sketch-p5) of this project from [GitHub](https://github.com/DarrylDias/sketch-p5). Happy Coding and Happy New Year.