1. Introduction

1.1 What Is p5.js?

Hello, and welcome to Interactive Art with p5.Js, a tuts+ tutorial with me, Stuart Memo. In this course we'll be learning the p5, the client side library for creating interactive graphics and artwork in the browser. You'll learn the fundamental structure of a p5 project, or sketch, as they're known in p5 land. Learn how to draw and handle user inputs. And as we go along we'll be building up an instracted piece of art in the browser. The p5.Js is heavily inspired by the program language processing, which reversed itself as a flexible software sketchbook. Processing was created in 2001 with the purpose of teaching non-programmers how to code. But since then, it has become the language of choice for tens of thousands of artists, designers, and students to create artistic works and prototypes. P5.Js, however, is different. p5 brings processing to the browser, and with that it uses JavaScript. Don't worry if you don't have much experience with JavaScript, as the code we're writing will hopefully be clear enough for you to understand what's going on. Speaking of which, when you're watching this course, you can either follow along with what I write on screen, pausing the video to write the commands as I do, or you can sit back and take in what's going on and download the code from GitHub afterwards. Okay got the picture? Good, let's get started.

1.2 Your First Sketch

So P5 is designed to work in your web browser. So to begin, we'll need a web page. Create a directory in your computer for a project. Then create a bare bones HTML file called index.html. We'll need all the standard bits involved like so. Okay, we've got an HTML element, a head, title, and body, looks good. Let's open this page in our browser and take a look. If we inspect the page using the browser's def tools, you'll notice that, by default, there's an eight pixel margin around the body element. Let's get rid of that, so we have the whole browser window for our future masterpiece. Back in our HTML, just open a style tag. And then say specify the body element, and give it a margin of zero. Let's just check that. Okay, great. Next we'll use the power of the web and visit p5js.org. You probably get distracted by whatever cool background sketch they have going on, so once you're done, hit download. Then scroll to the single file section and just download the plain old vanilla version of p5. Save this to the root of your directory, or download it to your usual place and move it there manually. Okay, so this p5.js file is the p5 library itself. It's the only file we'll be using in this course. There are some plugins available, we won't be needing them right now. So let's just go and update our html page to reference the p5 library. At the bottom of our page, just before the closing body tag, add a script to our element with the src attribute being the location of the p5 library. And if you've saved it to the rest of your project folder, then it will just be p5.js. Now to continue the processing analogy of a sketchbook, individual works and pieces you create with p5 are called sketches. So in keeping with this, let's create a file called sketch.js, and again, save it to the root of the project. Let's just add a console.log message here, so we can check that the fail works okay. I'm going to reference it from our html file, like so. We'll need to put the script tag below p5, so that it's available to us in our sketch file. Right, save that and we'll take a look in the browser. Open up the JavaScript console and great, there's our little message. Okay, back to our editor and sketch.js. Let's just remove that console message. Now we're ready to start our sketch. In the next lesson, we'll learn some core concepts of p5, and use them to start drawing in the browser.