VeeLang Rectangle Deep Dive! 📐¶

Master the art of drawing amazing rectangles in VeeLang

Welcome Back, VeeLang Builder! 🏗️¶

You've conquered circles, and now it's time to explore rectangles! Rectangles are amazing because they're the building blocks of so many things we see every day — houses, books, phones, windows, and even this screen you're reading on!

Your First Rectangle 📦¶

Let's start with the simplest rectangle:

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 200,200

Just like circles, you can draw a rectangle with just a position. But rectangles become much more exciting when you customize them!

Rectangle Properties — Make It Yours! 🎨¶

Size Properties 📏¶

width — How wide your rectangle is (left to right)
length — How tall your rectangle is (top to bottom)

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 200,200 having width 100, length 60

Color Properties 🌈¶

color — Sets both inside and outline color (the quick way!)
fill — Just the inside color
stroke — Just the outline color
thickness — How thick the outline is

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 200,200 having width 150, length 80, fill "lightblue", stroke "navy", thickness 3

Rectangle vs Circle — What's Different? 🤔¶

Feature	Circle	Rectangle
Size	radius	width and length
Shape	Always round	Always has corners
Position	Center point	Top-left corner*

*When you say at 200,200 for a rectangle, that's where the top-left corner goes!

Rectangle Naming — All Three Ways! 🏷️¶

Just like circles, rectangles can be drawn in multiple ways:

Method 1: Name First, Draw Later¶

// Default canvas: 800 wide, 600 tall, white
rectangle box at 100,100 having width 200, length 100, color "gold"
draw box

Method 2: Name and Draw Together¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle box at 100,100 having width 200, length 100, color "gold"

Method 3: Draw Without Naming¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 100,100 having width 200, length 100, color "gold"

Rectangle Magic — Corner Power! 🔮¶

Here's where rectangles become super powerful! Once you name a rectangle, you can access ALL of its corners:

The Four Corners¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle house at 200,200 having width 120, length 80, fill "brown"
draw circle at house.topLeft having radius 5, color "red"
draw circle at house.topRight having radius 5, color "blue"
draw circle at house.bottomLeft having radius 5, color "green"
draw circle at house.bottomRight having radius 5, color "yellow"

This draws a brown rectangle with colored dots at each corner!

Corner Shortcuts¶

VeeLang gives you two ways to access corners:

Descriptive Names (Easy to Remember):
house.topLeft — Top-left corner
house.topRight — Top-right corner
house.bottomLeft — Bottom-left corner
house.bottomRight — Bottom-right corner
Number Names (Quick to Type):
house.corner1 — Same as topLeft
house.corner2 — Same as topRight
house.corner3 — Same as bottomRight
house.corner4 — Same as bottomLeft

All Rectangle Properties You Can Access! 📋¶

When you name a rectangle, VeeLang remembers:

Property	What it gives you	Example
width	How wide it is	`having width box.width`
length	How tall it is	`having length box.length`
topLeft	Top-left corner position	`at box.topLeft`
topRight	Top-right corner position	`at box.topRight`
bottomLeft	Bottom-left corner position	`at box.bottomLeft`
bottomRight	Bottom-right corner position	`at box.bottomRight`
corner1	Same as topLeft	`at box.corner1`
corner2	Same as topRight	`at box.corner2`
corner3	Same as bottomRight	`at box.corner3`
corner4	Same as bottomLeft	`at box.corner4`

Cool Rectangle Examples! 🎯¶

Example 1: Building a House¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle house at 200,250 having width 140, length 100, fill "lightblue", stroke "darkblue"
draw rectangle door at house.bottomLeft having width 30, length 50, fill "brown"
draw rectangle window at house.topRight having width 25, length 25, fill "lightyellow", stroke "brown"

Example 2: Picture Frame¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle frame at 150,150 having width 200, length 160, fill "gold", stroke "darkgoldenrod", thickness 8
draw rectangle picture at frame.topLeft having width 180, length 140, fill "white"

Example 3: Robot Face¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle head at 200,200 having width 100, length 120, fill "silver", stroke "gray", thickness 2
draw circle at head.topLeft having radius 8, color "blue"
draw circle at head.topRight having radius 8, color "blue"  
draw rectangle mouth at head.bottomLeft having width 60, length 10, fill "black"

Width vs Length — Understanding Size! 📐¶

Think of it Like This: - Width = How far you stretch your arms (left ↔ right) - Length = How tall you stand (top ↕ bottom)

Real World Examples: - Phone screen: Small width, longer length (portrait) - Computer screen: Larger width, smaller length (landscape) - Door: Small width, tall length - Table: Large width, shorter length

Color Combinations — Make It Pop! 🎨¶

Solid Rectangle¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 100,100 having width 80, length 60, color "purple"

Outlined Rectangle¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 200,100 having width 80, length 60, stroke "red", thickness 4

Two-Color Rectangle¶

// Default canvas: 800 wide, 600 tall, white
draw rectangle at 300,100 having width 80, length 60, fill "lightyellow", stroke "orange", thickness 2

Building with Rectangles! 🏗️¶

Rectangles are perfect for creating: - 🏠 Buildings and Houses — Use different sized rectangles for walls, doors, windows, and roofs - 📱 Devices and Screens — Phones, tablets, computers, and TVs are all rectangles! - 🎮 Game Elements — Platforms, blocks, barriers, and UI elements - 🎨 Art and Design — Frames, borders, backgrounds, and geometric patterns

Challenge Time! 🏆¶

🌟 Challenge 1: Traffic Light — Create a tall rectangle, then add three circles (red, yellow, green) inside it
🌟 Challenge 2: Simple House — Build a house using rectangles for the main structure, door, and windows
🌟 Challenge 3: Robot — Design a robot using rectangles for the body and circles for joints
🌟 Challenge 4: Picture Gallery — Create several "picture frames" using rectangles with thick strokes and different colored "pictures" inside
🌟 Challenge 5: Corner Decoration — Create a rectangle, then place small shapes at each corner using the corner properties

Pro Tips for Rectangle Masters! 💡¶

✅ Size Planning — Start with rough sizes, then adjust. Remember: width = left/right, length = top/bottom
✅ Corner Magic — Use corners to perfectly align other shapes. topLeft and bottomRight are especially useful for positioning
✅ Color Coordination — Use the same rectangle's properties to keep colors consistent. Try fill and stroke for outlined effects
✅ Building Blocks — Think of rectangles as LEGO blocks; combine different sizes to create complex structures

Rectangle vs Square — What's the Difference? 🤷‍♀️¶

Rectangle: Any four-sided shape with right angles (this tutorial!)
Square: A special rectangle where width = length

In VeeLang:

// Default canvas: 800 wide, 600 tall, white
draw rectangle  // Any rectangular shape using width and length
draw square at 200,200 having size 200  // Perfect squares using just the size property

Both shapes use the same color properties and corner access!

What's Next? 🚀¶

You're now a VeeLang rectangle expert! You can: - ✅ Draw rectangles of any size - ✅ Color them with fills and strokes - ✅ Name them and reference their properties - ✅ Use all four corners for perfect positioning - ✅ Build complex structures by combining rectangles

Coming up next: squares and ovals, two close cousins of the rectangle and the circle!

Remember: Every app, website, and game interface is built using rectangles as the foundation. You're learning the building blocks of digital design! 🏗️✨