Before diving into code, let’s take a look at the web technologies that p5.js uses. If you are relatively new to web programming, remember that web applications typically require three types of files: HTML, CSS, and JavaScript. The same applies to a p5.js program! Here are lists of roles that each of these components plays to render a p5.js sketch.


  • HTML is used for the content of a web page.
  • The HTML file is where you can view the output of your p5.js program in the browser.
  • You’ll also have to link your p5.js sketch file and the p5.js library as <script> tags. For more information about how you can download and include the p5.js library in your HTML document, refer to the Creating a Local p5.js Project article. During your p5.js learning journey on the Codecademy platform, you don’t need to worry about this. We will focus on learning about the library itself.


  • CSS stylesheets are used to style HTML elements.
  • p5.js will create an HTML <canvas> element that you can style using CSS. We will talk more about the <canvas> element in the next exercise.


  • JavaScript is used for adding functionality to a web application.
  • A JavaScript file, typically named sketch.js, will contain the code for your p5.js application.
  • p5.js is a JavaScript library that contains built-in variables and functions to help you develop visual programs.


Take a look at the diagram on the right to explore the anatomy of a p5.js Sketch!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?