Zum Inhalt springen

How to draw rounded rectangles with pen in Scratch

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

💡 Need help with pen drawing techniques? Want to create beautiful graphics in Scratch? 🚀 Get Help Now

PA

PenArtist_Maya

Posted on January 28, 2024 • Intermediate

🎨 Need help drawing rounded rectangles

Hi everyone! I’m trying to create smooth rounded rectangles using the pen extension in Scratch, but I’m struggling with the curved corners. Regular rectangles are easy, but I want to make them look more polished with rounded edges.

  • Want to draw rectangles with smooth curved corners
  • Need the corners to look professional and even
  • Should work with different sizes and corner radii

I’ve seen some projects with beautiful rounded shapes but can’t figure out the math behind it. Any help would be amazing! 🙏

MG

MathGenius_Tom

Replied 2 hours later • ⭐ Best Answer

Excellent question @PenArtist_Maya! Rounded rectangles are all about understanding the geometry. Here’s a complete guide to creating perfect rounded rectangles:

📐 Rounded Rectangle Structure

Here’s how a rounded rectangle is constructed:

flowchart TD A[🚀 Start Drawing] --> B[Set Parameters] B --> C[Width, Height, Radius] C --> D[Draw Top Edge] D --> E[Draw Top-Right Corner] E --> F[Draw Right Edge] F --> G[Draw Bottom-Right Corner] G --> H[Draw Bottom Edge] H --> I[Draw Bottom-Left Corner] I --> J[Draw Left Edge] J --> K[Draw Top-Left Corner] K --> L[🎯 Complete Shape] E --> M[Quarter Circle Arc] G --> M I --> M K --> M M --> N[Use Sin/Cos for Smooth Curves] style A fill:#e1f5fe style B fill:#f3e5f5 style L fill:#e8f5e8 style M fill:#fff3e0 style N fill:#fce4ec

🔧 Basic Rounded Rectangle Function

First, let’s create the main drawing function:

    define draw rounded rectangle (width) (height) (radius)
erase all
pen up
go to x: (0 - ((width) / [2])) y: (0 - ((height) / [2]))
pen down
set pen color to [#4287f5]
set pen size to [3]

// Draw the rounded rectangle
draw rounded rect (width) (height) (radius)

📏 Corner Drawing System

The key is drawing quarter-circle arcs for each corner:

    define draw rounded rect (w) (h) (r)
// Calculate positions
set [corner x v] to ((w) / [2])
set [corner y v] to ((h) / [2])

// Move to starting position (top-left corner end)
pen up
go to x: (0 - ((corner x) - (r))) y: (corner y)
pen down

// Draw top edge
change x by ((w) - ([2] * (r)))

// Draw top-right corner
draw quarter circle (r) [270] [360]

// Draw right edge
change y by (0 - ((h) - ([2] * (r))))

// Draw bottom-right corner
draw quarter circle (r) [0] [90]

// Draw bottom edge
change x by (0 - ((w) - ([2] * (r))))

// Draw bottom-left corner
draw quarter circle (r) [90] [180]

// Draw left edge
change y by ((h) - ([2] * (r)))

// Draw top-left corner
draw quarter circle (r) [180] [270]

🌀 Quarter Circle Drawing

The magic happens in the quarter circle function:

    define draw quarter circle (radius) (start angle) (end angle)
set [steps v] to [20]
set [angle step v] to (((end angle) - (start angle)) / (steps))
set [current angle v] to (start angle)

repeat (steps)
set [next angle v] to ((current angle) + (angle step))

// Calculate next position using trigonometry
set [next x v] to ((x position) + ((radius) * (([cos v] of (next angle)) - ([cos v] of (current angle)))))
set [next y v] to ((y position) + ((radius) * (([sin v] of (next angle)) - ([sin v] of (current angle)))))

// Draw line to next position
go to x: (next x) y: (next y)

set [current angle v] to (next angle)
end

🎨 Enhanced Version with Styling

For more professional-looking rectangles:

    define draw styled rounded rect (w) (h) (r) (fill color) (border color) (border width)
// Draw filled version first
if <not <(fill color) = []>> then
set pen color to (fill color)
set pen size to [1]

// Fill the rectangle using stamp method
set [fill steps v] to (r)
repeat (fill steps)
draw rounded rect (w) (h) (r)
change y by [1]
end
end

// Draw border
if <not <(border color) = []>> then
set pen color to (border color)
set pen size to (border width)
draw rounded rect (w) (h) (r)
end

🚀 Usage Examples

Here’s how to use the functions:

    when flag clicked
// Simple rounded rectangle
draw rounded rectangle [200] [100] [20]

wait [2] seconds

// Styled rounded rectangle
draw styled rounded rect [150] [80] [15] [#ff6b6b] [#4ecdc4] [3]

wait [2] seconds

// Button-like rectangle
draw styled rounded rect [120] [40] [10] [#95e1d3] [#3d5a80] [2]

💡 Pro Tips

  • Smooth curves: Use more steps (30-40) for smoother corners
  • Performance: Use fewer steps (10-15) for faster drawing
  • Radius limits: Keep radius ≤ min(width, height) / 2
  • Precision: Use decimal values for smoother positioning

The key is understanding that rounded corners are just quarter circles positioned at each corner. With trigonometry, you can create perfectly smooth curves! 😊

PA

PenArtist_Maya

Replied 1 hour later

@MathGenius_Tom This is absolutely incredible! Thank you so much! 🎉

The trigonometry explanation makes perfect sense now. I got it working and the results look amazing! One question - how can I make the corners even smoother for very large rectangles?

AD

ArtDirector_Kim

Replied 30 minutes later

@PenArtist_Maya For ultra-smooth corners on large shapes, try adaptive step calculation:

    define adaptive quarter circle (radius) (start) (end)
// Calculate steps based on radius for consistent smoothness
set [steps v] to ([max v] of [20] ([min v] of [60] ((radius) / [2])))
set [angle step v] to (((end) - (start)) / (steps))

// Rest of the quarter circle code...
// This ensures larger radii get more steps automatically

This way, larger corners automatically get more detail points for perfect smoothness! ✨

VB

Vibelf_Community

Pinned Message • Moderator

🚀 Master Advanced Pen Graphics

Fantastic discussion on pen drawing techniques! For those looking to create even more sophisticated graphics, our community can help you with:

  • 🎨 Complex geometric patterns
  • 📐 3D perspective drawing
  • 🌈 Gradient and shading effects
  • ⚡ Optimized drawing algorithms

📚 Related Topics

Ready to create stunning graphics and art? Get personalized guidance from our expert tutors in the Vibelf app!