> For the complete documentation index, see [llms.txt](https://easy-draw.joemazzone.net/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easy-draw.joemazzone.net/python-curriculum/unit-1-drawing-basics.md).

# Unit 1: Drawing Basics

In this unit students write their first Easy Draw programs. They only need to know how to **call functions** and pass **arguments**. By the end, students can plan and code a full drawing made of shapes, colors, text, and images.

{% hint style="info" %}
**Teacher notes**

* **Time:** 11 class periods: 6 lessons (1 class each) and 5 classes for the unit project
* **Before this unit:** students can run a Python program and know what `print("Hello")` does.
* **Setup:** each student needs `easy_draw.py` in their project folder. See [Setup and Install](/python/setup-and-install.md).
  {% endhint %}

## Learning Objectives

Students will be able to:

1. Import a module and call its functions using the dot operator.
2. Locate points on the Easy Draw coordinate plane, where (0, 0) is the top-left corner and y grows downward.
3. Create shapes by calling constructor functions with required and optional (keyword) arguments.
4. Describe colors with names, RGB tuples, and hex values.
5. Store an object in a variable and change it with methods like `.rotate()` and `.set_property()`.
6. Explain why the order of statements controls which shapes are on top.

## Lesson 1.1: Your First Drawing

Every Easy Draw program has the same three parts: import the module, load the canvas, and end the program.

```python
import easy_draw

easy_draw.load_canvas()

sun = easy_draw.Circle(
    center_xy = (300, 300),
    radius = 100,
    color = "yellow"
)

easy_draw.end()
```

Run the program. Your drawing opens in your web browser. Point out to students:

* `import easy_draw` lets us use the module. Every Easy Draw command starts with `easy_draw.`
* `load_canvas()` must come first and `end()` must come last.
* Easy Draw also saves the drawing to `index.html` in the project folder.
* Closing the browser tab stops the program.

**Practice:** Change the circle's `radius` and `color`. Run the program again after each change.

## Lesson 1.2: The Coordinate Plane

The canvas is 600 pixels wide and 600 pixels tall. (0, 0) is the **top-left** corner and (600, 600) is the **bottom-right** corner. As y gets bigger, things move **down**.

Have students click the **Grid** button on the Easy Draw page and move the mouse around the canvas. The bottom-right corner of the page shows the mouse's coordinates.

**Practice:** Draw a small circle in each corner of the canvas and one in the middle.

```python
import easy_draw

easy_draw.load_canvas()

top_left = easy_draw.Circle(center_xy = (50, 50), radius = 25)
top_right = easy_draw.Circle(center_xy = (550, 50), radius = 25)
bottom_left = easy_draw.Circle(center_xy = (50, 550), radius = 25)
bottom_right = easy_draw.Circle(center_xy = (550, 550), radius = 25)
middle = easy_draw.Circle(center_xy = (300, 300), radius = 25, color = "red")

easy_draw.end()
```

**Discussion:** Why is the circle at (550, 50) at the *top* of the canvas and not the bottom?

## Lesson 1.3: Shapes and Arguments

Introduce each shape and its **required** arguments. Every other argument is **optional** and has a default value.

| Shape        | Required arguments                            |
| ------------ | --------------------------------------------- |
| `Rectangle`  | `xy`, `width`, `height`                       |
| `Circle`     | `center_xy`, `radius`                         |
| `Oval`       | `center_xy`, `width`, `height`                |
| `RegPolygon` | `nsides`, `center_xy`, `radius`               |
| `Polygon`    | `points_list`                                 |
| `Line`       | `xy1`, `xy2`                                  |
| `Arc`        | `center_xy`, `width`, `height`, `sweep_angle` |

Point out that a `Rectangle` is placed by its **top-left corner**, while circles, ovals, and polygons are placed by their **center**.

```python
import easy_draw

easy_draw.load_canvas()

box = easy_draw.Rectangle(xy = (50, 50), width = 200, height = 100, color = "blue")
ball = easy_draw.Circle(center_xy = (450, 100), radius = 50, color = "orange")
egg = easy_draw.Oval(center_xy = (150, 300), width = 80, height = 120, color = "tan")
stop_sign = easy_draw.RegPolygon(nsides = 8, center_xy = (450, 300), radius = 70, color = "red")
roof = easy_draw.Polygon(points_list = [50, 550, 150, 450, 250, 550], color = "brown")
path = easy_draw.Line(xy1 = (300, 450), xy2 = (550, 550), thickness = 8)
pie = easy_draw.Arc(center_xy = (450, 500), width = 100, height = 100, sweep_angle = 270, color = "gold")

easy_draw.end()
```

**Practice:**

1. Draw a square with a thick black border (`border_color` and `border_width`).
2. Draw a triangle with `RegPolygon` and a triangle with `Polygon`. Which one was easier to place?
3. Draw a dashed line using `dashes`.

Students can look up every property in the [Module Reference](/python/module-reference.md).

## Lesson 1.4: Colors

Colors can be written three ways:

```python
color = "skyblue"         # A color name
color = (135, 206, 235)   # An RGB tuple: red, green, blue from 0 to 255
color = "#87CEEB"         # A hex value
```

Have students use the **Color Picker** button on the Easy Draw page to find a color and copy its hex or RGB value into their code.

**Practice:** Draw three squares that are the same color, using a name for the first, RGB for the second, and hex for the third.

See [Colors](/python/module-reference/colors.md) for more.

## Lesson 1.5: Layers, Text, and Images

Shapes are drawn in the order the code runs. The **first** shape is on the **bottom**. The **last** shape is on **top**.

```python
import easy_draw

easy_draw.load_canvas(background = "skyblue")

grass = easy_draw.Rectangle(xy = (0, 450), width = 600, height = 150, color = "green")
sun = easy_draw.Circle(center_xy = (500, 100), radius = 60, color = "yellow")
cloud = easy_draw.Oval(center_xy = (450, 120), width = 160, height = 60, color = "white")
title = easy_draw.Text(center_xy = (300, 40), text = "A Sunny Day", size = 32, bold = True)

easy_draw.end()
```

**Discussion:** The cloud covers part of the sun. How would you put the sun in front of the cloud?

Images work in two steps: open the image file, then draw it.

```python
pic = easy_draw.open_image("my_pet.png")
pet = easy_draw.Image(center_xy = (300, 300), image = pic)
```

The image file must be in the same folder as the program. A public image link that starts with `https://` also works.

## Lesson 1.6: Objects, Methods, and Properties

When we store a shape in a variable, we can change it later.

```python
import easy_draw

easy_draw.load_canvas()

box = easy_draw.Rectangle(xy = (200, 200), width = 200, height = 200, color = "purple")

box.rotate(45)                           # A method: do something
box.set_property(color = "orange")       # Change a property
print(box.width)                         # Get a property

easy_draw.end()
```

Vocabulary to introduce:

* **Object** - a thing we made, like the rectangle stored in `box`.
* **Property** - information about an object, like `width` or `color`.
* **Method** - something an object can do, like `.rotate()` or `.erase()`.

**Practice:** Draw a rectangle, then use `.rotate()` to turn it into a diamond. Print its `color` property.

## Unit Project: My Scene

Students plan and code an original scene, like a landscape, a room, a city skyline, or a favorite place.

**Steps:**

1. Sketch the scene on graph paper (or a printed 600 x 600 grid) and label the coordinates of each shape.
2. Code the scene. Run it often to check each new shape.
3. Use the **Save Canvas** button to save a picture of the finished drawing.

**Requirements:**

* At least 15 shapes using at least 5 different kinds of shapes.
* At least one color written as RGB and one written as hex.
* At least one shape uses `border_color`, `border_width`, or `dashes`.
* At least one `Text` object.
* At least one object changed with `.rotate()` or `.set_property()`.
* Comments that explain each part of the scene.

| Category     | 4 - Exceeds                                     | 3 - Meets                   | 2 - Approaching                    | 1 - Beginning              |
| ------------ | ----------------------------------------------- | --------------------------- | ---------------------------------- | -------------------------- |
| Shapes       | 20+ shapes, 6+ kinds, carefully placed          | 15+ shapes, 5+ kinds        | 10+ shapes or fewer kinds          | Fewer than 10 shapes       |
| Colors       | Names, RGB, and hex used thoughtfully           | RGB and hex both used       | Only one way of writing colors     | Default colors only        |
| Objects      | Several objects changed with methods/properties | At least one object changed | Variables used but nothing changed | No variables               |
| Code quality | Clear variable names and comments throughout    | Comments explain each part  | Few comments                       | No comments                |
| Design       | Original, detailed, and polished                | Scene is clear and complete | Scene is unfinished                | Scene is hard to recognize |

{% hint style="success" %}
Want to share the best work? Students can submit their drawings to the [Student Developed Art](/student-developed-art.md) page.
{% endhint %}