Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.2 Your First Sketch

In this lesson, you’ll learn how to create a basic webpage that uses the p5.js library. You’ll also learn the basics of a p5.js “sketch”.

Related Links

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.

Back to the top