First Sketch
Goal:
This first exercise will show you how to set up a sketch using p5.js.
Try it here:
https://thimble.mozilla.org/projects/39372/remix
Basics:
To create a sketch using p5.js you will need 3 files.
- p5.min.js - the library.
- index.html - a simple html file that you will create
- first.js - the sketch itself
The first thing you will need to get is the p5.js library which you can download from p5js.org. If you download the complete version, you will have all the files you need. For now, the only file you will need is the p5.min.js file.
The second file is an html file. In this example, it is named index.html. If you are using thimble and you wish to publish your sketch you should keep it named index.html. If you are just interested in seeing the result in preview mode, or you are working locally, you can name it whatever you want.
<html>
<head>
<script src="p5.min.js" type="text/javascript"></script>
<script src="first.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
The file above is nearly empty. All you need to do is put in the two script tags in the head section of the file. This is all that is needed in the html file. If your project has more than one script file you can add them using another script tag.
The third file is the sketch file itself. In this case, I'm calling it first.js. If you wish to name it something else you are welcome to do so but you will need to change the script tag in your index.html file to reflect that change.
This sketch will draw a circle. To create your first sketch put the contents below into first.js.
function setup(){
}
function draw(){
//ellipse(x,y,width,height);
ellipse(30,30,50,50);
}
Details
p5.min.js
To use p5.js, you need to get the p5.js library file from p5js.org. There are several different components to the library (essentially the basic library and the plugin components). For now, all we will need is the basic library (though later examples will use the other plugins). There will be two versions of the basic library file. p5.js and p5.min.js. One is unminified, the other is minified. You can use either, but unless you are planning to make changes to the library itself, the minified version is better.
In the world of web, libraries are often delivered in two versions. The minified and the unminified version. The minified version of a library is essentially an extremely compact version of the exact same code. All variable names are shortened (often to unmeaningful single characters) and all unnecessary whitespaces, comments are removed. In short, it is code that your browser will understand but you will have a hard time reading. This is done to minimize the size of the script to download. As we will not be altering p5.js itself, it is better to use the minified version of the library.
index.html
As p5.js delivers contents through a web page, we will need to set up an html file. However, because what we put on the webpage is essentially controlled by our sketch, the web page itself is very minimalistic. We simply need to put in the p5.js library file and our own sketch file(s). The sketch will determine the rest of the content of the web page.
first.js
The examples in this book will mostly involve coding in the sketch files. first.js is the sketch file for this first example. This is the file that contains the p5.js sketch.
A p5.js sketch typically has at least 2 functions.
function setup(){
//this function is called exactly one time when the sketch starts
}
function draw(){
//this function is called 60 times per second
}
It is possible to add other functions. For now, we will look at only setup and draw().
The setup() function is a function that is called once at the start of the program. It is used to do things like initialize variables, create dom elements(buttons, textboxes etc.) and other tasks that you wish to do exactly one time at the start of the program.
The draw() function is automatically called 60 times per second by default. Thus, if you want to create an animation, you simply allow the draw function to draw something different each time it is called. This is typically done by altering variables or states of objects. We will explore this later.