> For the complete documentation index, see [llms.txt](https://learnpython.strivemath.com/p5-python-web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d.md).

# 2D

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>rect() - Rectangle</td><td></td><td></td><td><a href="/pages/bYA8nmT3d2kivYhnTZhs">/pages/bYA8nmT3d2kivYhnTZhs</a></td><td><a href="/files/7amVUj45uF4ODCcYAOFY">/files/7amVUj45uF4ODCcYAOFY</a></td></tr><tr><td>triangle() - Triangle</td><td></td><td></td><td><a href="/pages/PVut8Jqx4H1yM1DBZqmq">/pages/PVut8Jqx4H1yM1DBZqmq</a></td><td><a href="/files/i88QR1dnWJIDaDcaz4x2">/files/i88QR1dnWJIDaDcaz4x2</a></td></tr><tr><td>point() - Point</td><td></td><td></td><td><a href="/pages/OxYPxN0cfPSNJSpVd6uH">/pages/OxYPxN0cfPSNJSpVd6uH</a></td><td><a href="/files/7XOVGKWRem5ESDwb2huM">/files/7XOVGKWRem5ESDwb2huM</a></td></tr><tr><td>line() - Line</td><td></td><td></td><td><a href="/pages/5nCMcvPYoHpCvlil33io">/pages/5nCMcvPYoHpCvlil33io</a></td><td><a href="/files/sxzmmOiR6X6RSao1lvQW">/files/sxzmmOiR6X6RSao1lvQW</a></td></tr><tr><td>ellipse() - Ellipse</td><td></td><td></td><td><a href="/pages/iU8vWALUatJ7eChPtL9R">/pages/iU8vWALUatJ7eChPtL9R</a></td><td><a href="/files/o4YqLaEsFhF6JqsXlOnc">/files/o4YqLaEsFhF6JqsXlOnc</a></td></tr><tr><td>circle() - Circle</td><td></td><td></td><td><a href="/pages/9Opzr26lkq8uuLxN9zaq">/pages/9Opzr26lkq8uuLxN9zaq</a></td><td><a href="/files/cVulYgK7KKcmJo6Zly21">/files/cVulYgK7KKcmJo6Zly21</a></td></tr><tr><td>arc() - Arc</td><td></td><td></td><td><a href="/pages/lNgCl27bUCyoDWGVk6Nn">/pages/lNgCl27bUCyoDWGVk6Nn</a></td><td><a href="/files/VKqO9BXItjLvK7LOtYZX">/files/VKqO9BXItjLvK7LOtYZX</a></td></tr><tr><td>quad() - Quadrilateral</td><td></td><td></td><td><a href="/pages/B5bAYHA6MXTv8SL3O0q9">/pages/B5bAYHA6MXTv8SL3O0q9</a></td><td><a href="/files/xQFsAy0ZFASKZHsV1s3C">/files/xQFsAy0ZFASKZHsV1s3C</a></td></tr><tr><td>beginShape() - General Polygon</td><td></td><td></td><td></td><td><a href="/files/wNCDAg5vDN7gaO6Ok4W1">/files/wNCDAg5vDN7gaO6Ok4W1</a></td></tr></tbody></table>

## How are 2D Shapes drawn?

In 2D mode, shapes are defined by a sequence of **vertices** that are then **connected into edges** to form a **closed region**.

<div><figure><img src="/files/v1j17cd93ZH5U29elPul" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9YfyCfdVMoW05QrAPTcG" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/cqRgDqCmzUSmkWrXprmw" alt=""><figcaption></figcaption></figure> <figure><img src="/files/TdDJW6uDnfrao2jrbp30" alt=""><figcaption><p>This is what the final shape looks like</p></figcaption></figure></div>

The region can be filled with any color using [fill()](/p5-python-web/reference/colour-and-outline/fill.md), and the edges can be colored using [stroke()](/p5-python-web/reference/colour-and-outline/stroke.md).

### Shortcut to common shapes

Some shapes have a **known configuration of vertices** (for example, we all know what the vertices of a square look like), and this gives us an **advantage to use other simpler information** (like the center of the square, and the length of its sides), and from that, we can calculate all the other vertices.

Shapes like [circle()](/p5-python-web/reference/shapes/2d/circle.md), [ellipse()](/p5-python-web/reference/shapes/2d/ellipse.md), [arc()](/p5-python-web/reference/shapes/2d/arc.md), [square()](/p5-python-web/reference/shapes/2d/square.md), [rect()](/p5-python-web/reference/shapes/2d/rect.md) offer that shortcut. You can always resort to using [beginShape()](/p5-python-web/reference/shapes/2d/beginshape.md), [triangle()](/p5-python-web/reference/shapes/2d/triangle.md), or [quad()](/p5-python-web/reference/shapes/2d/quad.md).

#### Vertices

<figure><img src="/files/DxizO0TXgYLOQCR94tcm" alt=""><figcaption></figcaption></figure>

```
quad(x1, y1, x2, y2, x3, y3, x4, y4)
```

#### Shortcut

<figure><img src="/files/ZQkEjehyNozBOCL3ixzF" alt=""><figcaption></figcaption></figure>

```
rect(x, y, size, size)
```

{% hint style="info" %}
Find these documents helpful? Let the people who made them help your child learn to code at [**Strivemath**](https://www.strivemath.com/)<mark style="color:blue;">**!**</mark>

We'd love to hear your Feedback/Comments [here](https://docs.google.com/forms/d/e/1FAIpQLSeqorBAGTya-YBRI-VFjJxtgQtCz3ucGDI96K96sNyuaGuvdw/viewform?usp=sf_link).
{% endhint %}