# 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="2d/rect">rect</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FdgUTNcrk8JB6sajoAMoO%2Frectangle.PNG?alt=media&#x26;token=e1c33765-e01f-4b72-9907-b44b54428798">rectangle.PNG</a></td></tr><tr><td>triangle() - Triangle</td><td></td><td></td><td><a href="2d/triangle">triangle</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F5yuaeddw87RbwVznWthW%2Ftriangle.PNG?alt=media&#x26;token=e5798d87-4ff5-4d2e-a76e-b4100770e0cd">triangle.PNG</a></td></tr><tr><td>point() - Point</td><td></td><td></td><td><a href="2d/point">point</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F7fWQG5VWb2sdTkO0Rhlc%2Fpoint.PNG?alt=media&#x26;token=51947dc2-084b-4f20-b9df-286d1e95884e">point.PNG</a></td></tr><tr><td>line() - Line</td><td></td><td></td><td><a href="2d/line">line</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FQcFK7PKsKv3LabfnqSrd%2Flline.PNG?alt=media&#x26;token=04d6480c-1534-4f8b-9978-6e2662d23b49">lline.PNG</a></td></tr><tr><td>ellipse() - Ellipse</td><td></td><td></td><td><a href="2d/ellipse">ellipse</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2Fr9aUU5xGe2WwwUaSzGBM%2Fellipse.PNG?alt=media&#x26;token=19a782b4-5235-4dc9-aa25-fd39388f05be">ellipse.PNG</a></td></tr><tr><td>circle() - Circle</td><td></td><td></td><td><a href="2d/circle">circle</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FWXovDXWpS99i29TtgcRo%2Fcircle.PNG?alt=media&#x26;token=648f9882-1e45-4c09-8adf-278fed21653c">circle.PNG</a></td></tr><tr><td>arc() - Arc</td><td></td><td></td><td><a href="2d/arc">arc</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FqkL7aXp7U6InuSwzn8rs%2Farc.PNG?alt=media&#x26;token=99827795-449b-474e-8871-f1a95f9977b1">arc.PNG</a></td></tr><tr><td>quad() - Quadrilateral</td><td></td><td></td><td><a href="2d/quad">quad</a></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F2cX41XGefN8YRojuCFBm%2Fquad.PNG?alt=media&#x26;token=b01bb22b-f557-45d2-9021-3c1180d1d81e">quad.PNG</a></td></tr><tr><td>beginShape() - General Polygon</td><td></td><td></td><td></td><td><a href="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F3ZyB9tqXG8RvZm3KCFzE%2FbeginShape.PNG?alt=media&#x26;token=2174b650-4c4d-43c2-bd27-ea2abc03b86d">beginShape.PNG</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="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2F7ianyZKv654Ju5RUFqSP%2Fpoints.PNG?alt=media&#x26;token=5d949928-1cdc-4035-9ef8-e35849be941b" alt=""><figcaption></figcaption></figure> <figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FmZsSJbdnCDarXrWJo1vr%2Flines.png?alt=media&#x26;token=1a2795ed-f2f9-45cc-b9f4-be3352b089e5" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FzblRJamnXm13CSW7Hd4K%2Fregion.png?alt=media&#x26;token=666c9daa-429d-40f5-805a-488f0ae6ac8a" alt=""><figcaption></figcaption></figure> <figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FxQDXlW2UCGXWkEw4C4Rh%2Fusual.png?alt=media&#x26;token=fb27418b-9a3f-49ce-be48-6c3d1410d084" 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()](https://learnpython.strivemath.com/p5-python-web/reference/colour-and-outline/fill), and the edges can be colored using [stroke()](https://learnpython.strivemath.com/p5-python-web/reference/colour-and-outline/stroke).

### 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()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/circle), [ellipse()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/ellipse), [arc()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/arc), [square()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/square), [rect()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/rect) offer that shortcut. You can always resort to using [beginShape()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/beginshape), [triangle()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/triangle), or [quad()](https://learnpython.strivemath.com/p5-python-web/reference/shapes/2d/quad).

#### Vertices

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FE57EI1cpd8R8Ih402Lbc%2Fbitmap_%D8%B7%D8%A8%D9%82%D8%A9%201_trial.png?alt=media&#x26;token=638d8d85-edd4-4f51-b830-f159e37080a5" alt=""><figcaption></figcaption></figure>

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

#### Shortcut

<figure><img src="https://768248463-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fqbs7pgU3AVBY06Rl9M31%2Fuploads%2FZ4Bp2hFK8jwKtkpGwD8D%2Fanother.PNG?alt=media&#x26;token=93d2e17f-f212-47f3-8944-967c3cfb557a" 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 %}
