Summer’s over — what’s your move? Join Pro for 50% off using code [MAKEITHAPPEN](https://www.codecademy.com/checkout?periods=year&plan_id=proGoldAnnualV2&discountCode=MAKEITHAPPEN)


Get an introduction to creative coding with p5.js and learn the fundamental concepts about how a p5.js program works.

Introduction to Creative Coding with p5.js 

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:__  
- 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](https://www.codecademy.com/content-items/afb30bd43e459950d831f09a907101fd) 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:__  
- 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:__  
- 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.

Anatomy of a p5.js Sketch

We learned about the structure of a p5.js sketch and that p5.js will automatically call the `setup()` function! There's only one more built-in function to learn about before we start programming our own graphics&mdash;the `draw()` function!

The `draw()` function is similar to the `setup()` function in that p5.js will automatically execute it at the right time. The `draw()` function will run after all the code in the `setup()` function is complete. Note that like the `setup()` function, the `draw()` function should not be explicitly called. 

Unlike the `setup()` function, the `draw()` function will repeatedly execute in what is known as the _draw loop_. The `draw()` function is also referred to as the `draw()` loop because the code block in the function will execute infinitely until the sketch ends by closing the browser window or navigating away from the sketch. The draw loop will also terminate when the [`noLoop()`](https://p5js.org/reference/#/p5/noLoop) function is called.

Draw Function

Amazing! You've now written your first dynamic visual sketch with only a few lines of code! 

In this lesson, we learned about the p5.js library and how it simplifies visual programming in the browser. We also learned about how a p5.js sketch operates. First, the HTML page loads the library, then the `setup()` function is automatically called once and creates an HTML `<canvas>` element, and finally, the `draw()` function runs in an infinite loop.

In the following lessons, we'll learn about using the p5.js library to create more dynamic and interactive sketches. Next, we'll learn how to draw two-dimensional shapes to the canvas&mdash;the basic building blocks of p5.js.

Review

Great! You just called your first p5.js function! You might not be able to see anything in the browser yet because the canvas is empty, but it's there! 

Let's break down the code from the last exercise. Remember the `setup()` function where we called the `createCanvas()` function?

```js
function setup() {
  // Setup code goes here
  createCanvas(400, 400);
}
```

The `setup()` function is a built-in p5.js function used to set the sketch's initial state when the sketch begins. It is typically used to create the canvas, set the framerate, or set initial styles (such as stroke and fill color) for the shapes to be drawn in the sketch. It runs only once at the start of the sketch.

You might have noticed that the `setup()` function is never explicitly called in the sketch. That is because the p5.js library automatically executes a sequence of functions, like `setup()`, which should be called by the library, not the programmer. 

Let's take a look at the order of events when an HTML page that includes the p5.js library and a p5.js sketch file is loaded:
1. Scripts in the `<head>` element of the HTML page are loaded.
2. The `<body>` element of the HTML page loads, and an [`onload` event](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload) fires, which triggers the next step.
3. The p5.js library is started, and all built-in p5.js functions can be used in your sketch file.
4. The p5.js library will automatically call the `setup()` function and create an HTML `<canvas>` element.

At this point, the canvas is made, but we can't see it because it is empty. To view the created canvas, we'll introduce a new function to fill the canvas with a solid color, the `background()` function. We'll go into more detail about this function in the [Drawing and Coloring Shapes](https://www.codecademy.com/content-items/c4bc31adcf3a7649d6dccc3ec4700175/exercises/p5-drawing-coloring-shapes?latest_draft_applied=true&preview=true) lesson but know for now that `background()` takes an integer value between 0 and 255 as an argument, representing a gray color value where 0 is pure black, and 255 is pure white. 

```js
function setup(){
  createCanvas(640, 640); // Creates a 640px x 640px canvas
  background(200); // Sets canvas background to light gray
}
```

We can call the `background()` function after the canvas is created to set a solid color for the background. The `background()` function is only executed one time, because it is called in the `setup()` function.

Setup Function

Welcome to the wonderful world of p5.js! 

p5.js is a _JavaScript library_ that makes it incredibly simple to get started with creative coding by providing a suite of pre-written functions to quickly develop interactive visual programs. With only a few lines of code, you can dynamically create visualizations with shapes and even manipulate media elements like images and videos!

Using the metaphor of a sketchbook, p5.js encourages an approach to programming called _sketching as code_, where it is easy to add, remove, and change lines of code to create generative programs. We refer to programs made with p5.js as _sketches_. However, you're not limited to your drawing canvas&mdash;you can think about the whole browser as your sketch. p5.js makes it easy to interact with HTML objects and the world wide web!

An open-source community actively develops the p5.js library, and you can contribute to its development at [p5js.org](https://p5js.org) and get involved with Codecademy's [forum](https://discuss.codecademy.com/) to share creative coding sketches and experiments.

If you are new to creative coding, then this course is for you! No prior creative coding knowledge is expected. We will start at the very beginning and move slowly.

If you are new to JavaScript, consider taking our [Learn JavaScript](https://www.codecademy.com/learn/introduction-to-javascript) course and then returning to p5.js.

What is p5.js?

Programming graphics with p5.js is a lot like drawing on graph paper, except the HTML `<canvas>` element is your paper! The `<canvas>` element is an HTML element that renders graphics created with JavaScript's [Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). As you can see in the diagram below, the `<canvas>` element can be used alongside other HTML elements on the web page.

![A gif displaying a canvas embedded in a webpage](https://static-assets.codecademy.com/Courses/Learn-p5/intro/webpage-canvas.gif)

Utilizing the Canvas API behind the scenes, the p5.js library provides many built-in drawing functions that simplify drawing to the HTML `<canvas>` on the fly using JavaScript. The p5.js library removes pesky nuances such as rendering context and introduces more familiar function names when drawing to the `<canvas>`.

The p5.js library's built-in `createCanvas()` function dynamically creates an empty HTML `<canvas>` element to the web page. The function takes two arguments: the width and height of the canvas element in pixels. 

```js
// Creates a canvas with the width of canvasWidth and the height of canvasHeight
createCanvas(canvasWidth, canvasHeight);
```

Once the `createCanvas()` function has been called, the canvas can be styled further using CSS to, for example, position the canvas at the center of the web page.

If the `createCanvas()` function is not explicitly called, p5.js will automatically create an HTML `<canvas>` element that is 100 pixels wide and 100 pixels tall. If, for some reason, your p5.js sketch does not require a canvas, explicitly call the [`noCanvas()`](https://p5js.org/reference/#/p5/noCanvas) function to stop p5.js from creating a canvas at the start of the program.
