Learn how to draw and color shapes in your p5.js sketches!

Drawing and Coloring Shapes with p5.js

Congratulations! You now know how to draw and color shapes using p5.js! They are the building blocks of the p5.js library and soon you will be adding many more dynamic interactions to them. Let's review what you've learned in this lesson:

* The p5.js library has many built-in functions to draw 2D shapes to the canvas:
   * `point()` and `line()`
   * `rect()` and `square()`
   * `ellipse()` and `circle()`
   * `triangle()` and `quad()`
* There are style functions that must be called before drawing shapes:
   * `background()`
   * `fill()`
   * `stroke()`
   * `strokeWeight()`
* p5.js allows for many ways to specify color:
   * gray value (0 - 255)
   * RGB values (0 - 255)
   * Named CSS color (like `'purple'` and `'yellow'`)
   * 3 or 6 digit hexadecimal values (like `'#FE0'` and `'#1557FF'`)
* `for` loops make it easy to draw many shapes at once.

In the next lesson, you will learn more about the `draw()` loop and how to turn our static p5.js drawings into animations!

Review

Let's look at our first closed shape, the rectangle! Did you know that there are more rectangular shapes in the world than any other shapes?

Rectangles can be drawn to the p5.js sketch using the `rect()` function. The function has four parameters, the first and second parameters are the x and y coordinates for the top-left corner of the shape, and the third and fourth parameters set the width and height of the rectangle.

![Diagram of rectangle](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/rectangle.png)

A square is a special type of rectangle where the height is the same length as the width. They are drawn using the `square()` function and need three parameters: x and y coordinates for the top-left corner of the square and the width.

![Diagram of square](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/square.png)

The x and y coordinates for the `rect()` and `square()` functions are also known as the _anchor point_, which is the origin of all transformations. By default, rectangles and squares anchor at the top-left corner of the shape. For now, you can think of the anchor point as the coordinates where shapes are drawn to. The location of the anchor point and how parameters of the `rect()` and `square()` functions are interpreted can be changed using the `rectMode()` function, which will be covered in detail in the [Grouping and Transforming Shapes](https://www.codecademy.com/content-items/4ee46b8cd72cf9dc5b0e5234901f0db3/exercises/p5js-grouping-and-transforming-shapes) lesson. 

Square and Rectangle

The last two drawing functions we'll learn are `triangle()` and `quad()`, which are closely related to the `line()` function in that they take the coordinates of each corner of the shape as arguments. These arguments are used to define the perimeter of the shape.

The `triangle()` function takes a total of six arguments or three pairs of x and y coordinates.

![Diagram of triangle function](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/triangle.png)

The quadrilateral shape function, `quad()`, needs eight arguments, or four pairs of x and y coordinates for each of its four points. 

![Diagram of quadrilateral](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/quad.png)

Triangle and Quad

So far, we've only been using static values as arguments when drawing shapes. However, you can use dynamic values to create drawings that adjust to a canvas's width and height. With dynamic values, you don't have to keep track of the exact values of your arguments&mdash;they will automatically adjust for you!

Before using variables for our drawings, it's helpful to know that drawing function arguments can use _operators_ like `+`, `-`, `*`, and `/`, to calculate the values. Consider the following:

```js
ellipse(40, 100, 40, 60);
```

Above code can be rewritten using operators:
```js
ellipse(20 + 20, 120 - 20, 20 * 2, 120/2);
```

This might not seem like much now, but in a bit, you will see how powerful using operators can be.

p5.js also allows you to use *variables* as function arguments. The p5.js library provides useful built-in variables, including `width` and `height` that store the width and height of the p5.js canvas.

Consider this ellipse drawn using static values:  

```js
function setup(){
   createCanvas(400, 400);
}

function draw(){
   ellipse(200, 200, 400, 400);
}
```

If you were to resize the canvas while keeping the same dimensions for the ellipse, you would have to change the values of the `createCanvas()` function and then change the four arguments of the `ellipse()` function.

Instead, you can provide built-in variables as arguments to the `ellipse()` function, so that values will automatically change based on the canvas dimensions.

```js
function setup(){
   createCanvas(400, 400);
}

function draw() {
  ellipse(width/2, height/2, width, height);
}
```

The biggest change here is using the `width` and `height` variables to calculate the position and size of the ellipse. `width/2` gives you the horizontal center of the canvas, and `height/2` gives you the vertical center. Similarly, `width` returns the full width of the canvas and `height` of the canvas. 

Now, to change the size of the canvas and keep the relative size and position of the ellipse, you would only have to change the arguments of the `createCanvas()` function. You don't have to change anything else because the value of the `width` and `height` variables will automatically change. 

Dynamically Sizing Shapes

The p5.js library provides many built-in functions to interact with the canvas with easy-to-remember drawing functions for shapes. While you can call drawing functions in the `setup()` function, it is typical to use drawing functions in the eponymous `draw()` function. Let's begin with the basics by drawing a point to the canvas!

The p5.js library provides the `point()` function, which draws a single pixel to the canvas. This function requires two arguments: an x coordinate for the horizontal position and a y coordinate for the vertical position of the point.

![Diagram of point](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/point.png)  

The built-in `line()` function draws a direct path between two points. To draw a single line, we need four arguments: x and y coordinates of the starting point and x and y coordinates of the endpoint. 

![Diagram of line](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/line.png)

Point and Line

You can think about the canvas as the graph paper that your p5.js sketch is drawn on. The canvas uses a two-dimensional grid with ordered pairs used to describe its space. The upper-left coordinate, or the origin, has the coordinate of (0, 0). The first entry of the ordered pair is used to describe the x-axis of the canvas or the distance of pixels from the left edge of the canvas. The second entry of the ordered pair describes the y-axis or the distance of pixels from the top edge of the canvas. 

The convention of coordinates makes it easy to construct complex patterns and shapes using mathematical properties of graph systems.


The Coordinate System

The next shapes that we'll look at are some of the most popular shapes in modern architecture&mdash;ellipses and circles! 

The `ellipse()` function is similar to the `rect()` function in requiring four parameters when called. The first and second parameters are the x and y location of where the ellipse is drawn to, but instead of the corner, ellipses are positioned by their center! The third parameter sets the width or the diameter along the x-axis of the canvas, and the fourth parameter is the diameter along the y-axis. 

![Diagram of ellipse](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/ellipse.png)

A circle is a special case of ellipse where the height is equal to the width of the circle. The `circle()` function has three parameters: the x and y coordinates for the center, and the width, or the diameter of the circle.

![Diagram of circle](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/circle.png)

The way that the parameters for the `circle()` and `ellipse()` functions are interpreted can also be changed with the `ellipseMode()` function, which will be covered in detail in the [Grouping and Transforming Shapes](https://www.codecademy.com/content-items/4ee46b8cd72cf9dc5b0e5234901f0db3/exercises/p5js-grouping-and-transforming-shapes) lesson.

Circle and Ellipse

Now that we know the basics of drawing with p5.js, we can begin to make complex designs based on algorithmic rules. So far, our code has worked by executing each line of code one after another. If we were to draw four lines, we would write four separate calls to the `line()` function. Instead, we can use the `for` loop to draw multiple shapes without having to repeat the code. We can also produce interesting patterns by modifying arguments of shape and style functions upon each iteration. 

Let's take a look at the sketch below that draws three lines:

 ```js
function draw() {
  line(75, 0, 75, height);
  line(150, 0, 150, height);
  line(225, 0, 225, height);
}
```

![4 Lines drawing](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/4_lines.PNG)

Notice that each line we draw uses the same y positions, but each x position increments by 75 pixels. We can simplify the above sketch by using a `for` loop and adding multiples of 75 to each iteration's x position.

```js
function draw() {
  for(let lineX = 0; lineX < 4; lineX++){
    line(75 + lineX * 75, 0, 75 + lineX * 75, height);
  }
}
```

This might not seem like a lot now, but what if you want to draw 99 lines?

```js
function draw() {
  for(let lineX = 0; lineX < 99; lineX++){
    line(4 + lineX * 4, 0, 4 + lineX * 4, height);
  }
}
```

![99 Lines drawing](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/99_lines.PNG)

You can use use `for` loops to change a number of parameters such as position, fill, stroke, color, size, and more! Take a look at the sketch below that draws 255 ellipses. With each iteration, the fill color increments from black to white, and the size decrements from 255 to 1.

```js
function draw() {
  background(220);
  for(let i = 0; i < 255; i++){
    fill(i);
    circle(width/2, height/2, 255-i);
  }
}
```  

![Concentric circles](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/sphere.png)

You can put any code within a `for` loop, so why not another `for` loop? A common use case for nested `for` loops is to make grids of shapes. You use one `for` loop to form a row, and another `for` loop to repeat the row to form a grid!

```js
function draw() {
  for(let posX = 0; posX < 4; posX++)  {
    for(let posY = 0; posY < 4; posY++)  {
      circle(posX * 25, posY * 25, 50);
    }
  }
}
```

![Nested for loop](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/nested_loop.svg)

Creating Patterns with For Loop

Let's add color to our shapes! 

The first style function for shapes you should know is the `fill()` function. `fill()` allows us to set the fill color, or the inside color of a shape. The default fill color for shapes is white and all shapes, except for points and line, have a fill. The `fill()` function must be called prior to calling the shape function. 

We can set the fill color of shapes by calling the `fill()` function and passing color arguments like for the `background()` function. This will set the active fill color until the `fill()` function is called again with a different color argument. 

![fill() example](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/fill.png)

To disable the fill of a shape and make the fill transparent, you can call the `noFill()` function. 

![noFill() example](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/noFill.png)

fill() and noFill()

Let's add some color to our drawings!

We use the `background()` function to fill the p5.js canvas with a solid color. We previously used it when we looked at the `setup()` function in the [Introduction to Creative Coding with p5.js](https://www.codecademy.com/content-items/4b974fb3e5cf6dbb6be5da3c5d7daa81/exercises/p5js-setup-function) lesson. The `background()` function can be used in the `setup()` function to set the initial color of the canvas when the sketch begins. 

The `background()` function can also be called in the `draw()` loop to clear the canvas at the beginning of each frame, which is useful for creating animations that will be introduced in a later lesson. 

The `background()` function takes a color as an argument and the p5.js library allows many ways to specify color. 
* You can provide a grayscale integer value between 0 and 255, with 0 being pure black and 255 pure white.  

![Grayscale value illustration](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/grayscale_value.png)

* You can also specify color in RGB (Red, Green, Blue) notation which uses three integers between 0 and 255, with 255 being fully saturated.

![RGB value illustration](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/rgb_value.png)

* [Named CSS color keywords](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) are also valid color values given as a string.

![Named color value illustration](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/css_value.png)

* Both three-digit and six-digit hexadecimal color codes can also be used like below.

![Hexadecimal color value illustration](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/hex_value.png)

* Alpha (transparency) value can be added for grayscale and RGB color notations as an additional argument.  

![Hexadecimal color value illustration](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/alpha_value.png)
    
There are more ways to represent colors which can be found on the [p5.js reference](https://p5js.org/reference/#/p5/background).

Background and Color

At this point, you might have noticed that the order in which functions are called matter. Style setting functions such as `fill()`, `stroke()`, and `strokeWeight()` must be called before drawing a shape and will be active for subsequent shapes until the functions are called again to change the styles. 

Additionally, the functions placed inside the `draw()` function will be executed from the top-down. When drawing shapes in the p5.js sketch, the last shape in the `draw()` function will be drawn on top of previously drawn shapes. 

When the `draw()` function loops again, the last set styles will be used for the shape functions called at the beginning of the loop. Take a look at the code below:

```js
function draw(){
  // After the first loop, this rectangle will have purple fill color
  rect(width / 2, height / 2, 100, 100);

  fill('purple');
  ellipse(100, 300, 50, 50);
}
```

The first time the above `draw()` loop runs, the fill color of the rectangle will be white by default and the ellipse's fill color will be set to `'purple'`. The second time the `draw()` loop runs, the rectangle's fill color will also be purple because the set styles carry over until they are explicitly changed with style functions. To make sure the rectangle has a different fill color than the ellipse, the `fill()` function will have to be called before the `rect()` function.

```js
function draw(){
  // Now the rectangle will have red fill color
  fill(255, 0, 0);
  rect(width / 2, height / 2, 100, 100);

  fill('purple');
  ellipse(100, 300, 50, 50);
}
```

Ordering

We've learned a lot about what happens in the background when a p5.js sketch starts! The `setup()` function is automatically called, creating an HTML `<canvas>` element in our __index.html__. Now, let's learn how to use the p5.js library to draw two-dimensional shapes!

The p5.js sketch, or HTML `<canvas>` element, is a native HTML element that can be dynamically drawn to using JavaScript. The p5.js library provides a suite of drawing functions for common shapes and graphics that simplifies interacting with the canvas. In this lesson, we will explore the coordinate system that the canvas uses, p5.js shape and style functions, and how to create patterns using `for` loops.

In this this lesson, we will introduce the following shape functions:  
- `point()` and `line()`
- `rect()` and `square()`
- `ellipse()` and `circle()`
- `triangle()` and `quad()`

We will also introduce how to change the style of shapes using:
- `stroke()` and `strokeWeight()`
- `fill()` and no `noFill()`

Let's start by learning about the coordinate system that p5.js canvas uses!

Drawing and Coloring Shapes

Shapes have another color as well&mdash;stroke! 

The stroke is the color used to draw lines or the borders around shapes. All the shapes we have seen so far are drawn with a default stroke color of black. You can set the stroke color with the `stroke()` function the same way we did for the `fill()` function. It takes a color as input and must be called before drawing the shape.

![stroke() example](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/stroke.png)

The thickness of strokes can be set with the `strokeWeight()` function. The `strokeWeight()` function takes a numeric value as input for the width in pixels.

![strokeWeight() example](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/strokeweight.png)

You can disable the stroke from being drawn by calling the `noStroke()` function.

![noStroke() example](https://static-assets.codecademy.com/Courses/Learn-p5/shapes/noStroke.png)