Introduction
Getting P5JS and Installing
To install p5js, go to http://p5js.org/download/, and download the p5.min.js under "single files". This is the minified JavaScript version. On the website you will see different ways to download the library. We use the minified version as we will not edit the library.
On the p5js site you have the option of downloading an editor made specifically for p5js. This editor is good for getting up and running. I personally do not like it. The editor I will recommend using is Brackets: http://brackets.io/. Another good editor is Atom: https://atom.io/. Feel free to use any editor you like. You have to use the latest version of one of the major browsers. P5js won't run on older browsers. Download the latest version of Chrome, Firefox, Safari, Opera or any other modern browser. I use the latest version of Chrome.
Creating our first project
Now that we have downloaded the p5.min.js file, and installed an editor of our choice, we can start our project. First create a folder and name it p5js. Create two folders inside this folder. Name one lib, and the other folder 2-shapes. Put the p5.min.js file inside the lib folder. Inside the 2-shapes folder create a file and name it shapes.js. You should have a folder structure that looks like this (without the .gitignore file):
Now let's open the index.html file. This is the file that will "run" in the browser. Write/copy the HTML code/markup below in the index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>P5JS - Interactive Visual Coding for the Web</title>
</head>
<body>
<script src="lib/p5.min.js"></script>
<script src="2-shapes/shapes.js"></script>
</body>
</html>
Don't worry if you don't know HTML. The HTML file lets us include the P5js library and our sketch. The <script src="2-shapes/shapes.js"></script> and <script src="lib/p5.min.js"></script> gives the browser access to the files.
In the next chapter we will start writing JavaScript code. This is the language we use to draw and animate things. Let's get started!