Triangles and Polygons 🔺¶

Three corners, three sides, endless possibilities

Your First Triangle 🔺¶

// Default canvas: 800 wide, 600 tall, white
draw triangle at 150, 100 having fill "green"

Without any corners, VeeLang draws a triangle standing up, 100 wide and 100 tall. Just like a rectangle, at is the top-left of the box around the triangle.

Choosing the Corners 📐¶

The fun part of triangles is that you choose exactly where each of the three corners goes, with corner1, corner2 and corner3:

// Default canvas: 800 wide, 600 tall, white
draw triangle having corner1 at 50, 250, corner2 at 350, 250, corner3 at 200, 50, fill "skyblue"

Corners can go anywhere, so triangles can be tall, flat, or lopsided:

// Default canvas: 800 wide, 600 tall, white
draw triangle having corner1 at 50, 200, corner2 at 120, 200, corner3 at 85, 20, fill "purple"
draw triangle having corner1 at 150, 200, corner2 at 350, 200, corner3 at 250, 170, fill "orange"
draw triangle having corner1 at 50, 280, corner2 at 350, 220, corner3 at 100, 230, fill "teal"

Finding corners

In the playground, the numbers along the edges of your drawing show positions. Hold down the Ctrl key to see grid lines across the whole drawing.

Moving a Whole Triangle 🚚¶

If you give corners and at, the whole triangle moves so that its box starts at at. The shape stays exactly the same:

// Default canvas: 800 wide, 600 tall, white
draw triangle having corner1 at 0, 100, corner2 at 100, 100, corner3 at 50, 0, fill "pink"
draw triangle at 200, 100 having corner1 at 0, 100, corner2 at 100, 100, corner3 at 50, 0, fill "red"

Using the Corners Later 🎯¶

Name a triangle, and you can use its corners and its center to place other shapes:

// Default canvas: 800 wide, 600 tall, white
draw triangle t having corner1 at 100, 250, corner2 at 300, 250, corner3 at 200, 80, fill "lightyellow", stroke "orange", thickness 3
draw circle at t.corner1 having radius 10, fill "red"
draw circle at t.corner2 having radius 10, fill "green"
draw circle at t.corner3 having radius 10, fill "blue"
draw circle at t.center having radius 6, fill "black"

Shapes with Equal Sides ⬡¶

Many famous shapes have sides that are all the same length: the triangle on a road sign, a square, a stop sign, the cells of a honeycomb. To draw one, just say how many sides it has:

// Default canvas: 800 wide, 600 tall, white
draw polygon hexagon at 150, 150 having sides 6, size 160, fill "gold", stroke "orange", thickness 4

at is the center, like a circle's.
size is how wide it is. All its corners sit on a circle that wide.
The first corner always points straight up, like a clock hand at 12 o'clock.

Here are 3, 4, 5 and 8 sides, all the same size:

// Default canvas: 800 wide, 600 tall, white
draw polygon at 80, 100 having sides 3, size 120, fill "tomato"
draw polygon at 220, 100 having sides 4, size 120, fill "gold"
draw polygon at 360, 100 having sides 5, size 120, fill "yellowgreen"
draw polygon at 500, 100 having sides 8, size 120, fill "skyblue"

Notice the 4-sided one stands on its corner, like a diamond, because its first corner points up. For a square sitting flat, use square.

The more sides a polygon has, the more it looks like a circle. Try sides 30!

More Corners: Polygons ⭐¶

A shape with equal sides is neat, but sometimes you want corners exactly where you choose. Start from the first corner and go to each next one, just like drawing a line. VeeLang joins the last corner back to the first for you:

// Default canvas: 800 wide, 600 tall, white
draw polygon from 100, 20 to 180, 180 to 20, 180 having fill "gold"

Four corners make a kite:

// Default canvas: 800 wide, 600 tall, white
draw polygon kite from 150, 20 to 230, 120 to 150, 280 to 70, 120 having fill "orange", stroke "brown", thickness 3
draw line from kite.corner3 to 150, 380 having color "brown", thickness 2

And ten corners, going out and in, make a star:

// Default canvas: 800 wide, 600 tall, white
draw polygon star from 150, 20 to 180, 110 to 270, 110 to 195, 165 to 225, 255 to 150, 200 to 75, 255 to 105, 165 to 30, 110 to 120, 110 having fill "gold", stroke "orange", thickness 3

A polygon's corners are called corner1, corner2 and so on, in the order you wrote them, and its center is right in the middle. Like a triangle, you can move a whole polygon with at:

// Default canvas: 800 wide, 600 tall, white
polygon arrow from 0, 20 to 60, 20 to 60, 0 to 100, 40 to 60, 80 to 60, 60 to 0, 60 having fill "teal"
arrow.at = 100, 100
draw arrow

Let's Build a House 🏠¶

A square for the walls, a triangle for the roof, and a rectangle for the door:

// Default canvas: 800 wide, 600 tall, white
draw square walls at 100, 150 having size 200, fill "wheat"
draw triangle roof having corner1 at 80, 150, corner2 at 320, 150, corner3 at 200, 50, fill "firebrick"
draw rectangle door at 175, 260 having width 50, length 90, fill "saddlebrown"
draw square window at 120, 180 having size 40, fill "lightblue"

Challenge Time! 🏆¶

🌟 Challenge 1: Draw a Christmas tree from three green triangles stacked on top of each other, plus a brown rectangle trunk.
🌟 Challenge 2: Draw a sailboat: a triangle sail on top of a long, flat rectangle.
🌟 Challenge 3: Put a small circle at every corner of your house's roof.
🌟 Challenge 4: Draw a honeycomb: hexagons side by side.
🌟 Challenge 5: Draw a stop sign: a red polygon with 8 sides and the word STOP on it.

What's Next? 🚀¶

You can now draw triangles with or without corners, draw shapes with any number of equal sides, draw polygons with corners wherever you like, move them with at, and use their corners to place other shapes.

Next up: drawing words! ✏️