How to Make 3D Shapes in Scratch — Draw Cubes, Pyramids & Cylinders Using Pen Extension

Published by Kodex Academy — Learn. Build. Innovate.
Scratch Tutorial
How to Make 3D Shapes in Scratch - Draw Cubes, Pyramids & Cylinders Using Pen Extension

Introduction — 3D Shapes in Scratch

Welcome to Kodex Academy's Scratch Tutorial Series! If you've ever wondered how to make 3D shapes in Scratch or create 3D geometry using code, you're about to dive into a creative world of math, animation, and programming fun.

In this tutorial, we'll explore:

  • ✓ How to use the Pen Extension in Scratch
  • ✓ How to draw 3D shapes like a Cube, Pyramid, and Cylinder
  • ✓ How to apply math (coordinates, sine, cosine) to simulate 3D depth
  • ✓ And finally, how to enhance your project with animations, controls, and colors

This project is perfect for beginners and intermediate learners interested in Scratch programming, geometry in Scratch, and creative coding.

What You Will Learn:

This comprehensive guide teaches you how to:

  • ✓ Use the Pen Extension to draw geometric shapes
  • ✓ Create custom blocks for reusable code
  • ✓ Apply trigonometry (sin, cos) for smooth curves
  • ✓ Build 3D illusions with offset squares and connecting lines
  • ✓ Add keyboard controls and animations
  • ✓ Implement color cycling and rotation effects

👉 Watch the Full YouTube Tutorial Here:

How to Make 3D Shapes in Scratch — 3D Geometry with Code | Pen Extension in Scratch | Kodex Academy

Project Overview: What You'll Build

In this project:

  • A Cube made from two offset squares + 4 connector lines (trigger key A)
  • A Pyramid (square base + 4 lines meeting at an apex) (trigger key B)
  • A Cylinder built from two ellipses and two vertical side lines (trigger key C)
  • All drawing is done with the Pen Extension (no sprite costumes) so code actually draws shapes on the stage.

This tutorial uses Scratch-style pseudo-blocks you can copy into Scratch block-by-block. I explain every block and why it's used.

Scratch Code - 3D Shapes in Scratch

Prerequisites

Before we start, make sure you have:

  • ✓ A Scratch account at scratch.mit.edu
  • ✓ Basic understanding of Scratch coding blocks
  • ✓ Familiarity with x-y coordinates in Scratch

If you're new to Scratch, check out the official Scratch Getting Started Guide.

Preparation (one-time)

  1. Open Scratch: https://scratch.mit.edu/create
  2. Delete default Cat sprite (right-click → delete).
  3. Add Pen extension (bottom-left "Extensions" → choose Pen).
  4. Create variables (for convenience): side, offsetX, offsetY, rx, ry, apexX, apexY, angle, depth, a, xpos, ypos — many are optional but useful when experimenting.

Global: Basic setup script (recommended)

Place this under Events → when green flag clicked. It sets defaults and clears the stage.

when green flag clicked
erase all
set pen size to 4
set pen color to [#00AA00] // default color
set rotation style [all around v]
set [side v] to 100 // default square side length
set [offsetX v] to 20 // default back-square offset (cube)
set [offsetY v] to 20
set [rx v] to 60 // cylinder horizontal radius
set [ry v] to 20 // cylinder vertical radius
set [apexX v] to 0 // pyramid apex x
set [apexY v] to 80 // pyramid apex y (height)
set [angle v] to 0 // used in rotation examples
set [depth v] to 30 // used in rotation examples

Why: erase all clears previous drawings. set rotation style all around avoids left/right flips if we use direction or sprite rotation math. Variables let learners change dimensions easily.

Utility: Create custom blocks first

Two reusable custom blocks will make scripts cleaner:

1) Draw Square

draw square (x) (y) (side) (dir)

Purpose: draw a square given top-left (or chosen corner) coordinates, side length and direction.

Define Block:

define draw square (x) (y) (side) (dir)
pen up
go to x: (x) y: (y)
point in direction (dir) // e.g., 90 = point right
pen down
repeat 4
  move (side) steps
  turn clockwise 90 degrees
end
pen up

Notes:

  • Using go to x:y centers or positions the square precisely.
  • dir lets you control orientation (90 = draw to the right first).
  • Keep pen up before traveling, pen down during actual drawing.

2) Draw Ellipse

draw ellipse (cx) (cy) (rx) (ry)

Purpose: draw an ellipse centered at (cx,cy) with radii rx (x-axis) and ry (y-axis). This uses sin() and cos() — Scratch uses degrees.

Define Block:

define draw ellipse (cx) (cy) (rx) (ry)
pen up
set [a v] to 0
repeat 360
  set [xpos v] to ((cx) + ((rx) * (cos (a))))
  set [ypos v] to ((cy) + ((ry) * (sin (a))))
  go to x: (xpos) y: (ypos)
  pen down
  change [a v] by 1
end
pen up

Important math notes:

  • x = cx + rx * cos(angle)
  • y = cy + ry * sin(angle)
  • a loops from 0 → 359 (degrees). In Scratch the cos and sin blocks expect degrees.
  • Keep pen down while iterating through points so the ellipse draws smoothly without gaps.

3) CUBE — step-by-step (trigger: A key)

Event script

when [A v] key pressed
erase all
set pen size to 4
set pen color to [#00FF00]

set [side v] to (100) // can be changed
set [offsetX v] to (20)
set [offsetY v] to (20)

// front square centered at 0,0 => start at -side/2, -side/2
set [startX v] to ((- (side) / 2))
set [startY v] to ((- (side) / 2))
draw square (startX) (startY) (side) (90)

// back square (offset for depth)
set [backX v] to ((startX) + (offsetX))
set [backY v] to ((startY) + (offsetY))
draw square (backX) (backY) (side) (90)

// connect corners
// 1) front bottom-left -> back bottom-left
go to x: (startX) y: (startY)
pen down
go to x: (backX) y: (backY)
pen up

// 2) front bottom-right -> back bottom-right
go to x: ((startX) + (side)) y: (startY)
pen down
go to x: ((backX) + (side)) y: (backY)
pen up

// 3) front top-right -> back top-right
go to x: ((startX) + (side)) y: ((startY) + (side))
pen down
go to x: ((backX) + (side)) y: ((backY) + (side))
pen up

// 4) front top-left -> back top-left
go to x: (startX) y: ((startY) + (side))
pen down
go to x: (backX) y: ((backY) + (side))
pen up

Detailed explanation — each chunk

  • Positioning: To center the square at origin, start at -side/2, -side/2 so the square occupies [-side/2 .. +side/2] in both axes. That makes scaling and centering easier.
  • Offset second square: offsetX and offsetY simulate depth — they must be the same relative values for all four corners to maintain shape alignment.
  • Connect corners: The connector lines must map corresponding corners in same order. If you reorder, the cube will look broken.

Tuning tips

  • Increase offsetX to make the cube look more "deep".
  • Try negative offsetY to move the back square downward instead of upward.
  • Change pen size and color for visual emphasis.

Concept recap: Draw front square + back square offset by (offsetX, offsetY), then connect corresponding corners.

4) PYRAMID — step-by-step (trigger: B key)

Event script

when [B v] key pressed
erase all
set pen size to 4
set pen color to [#FFD700] // base color

set [side v] to 100
set [startX v] to ((- (side) / 2))
set [startY v] to ((- (side) / 2))
draw square (startX) (startY) (side) (90)

// apex point
set [apexX v] to 0
set [apexY v] to 80
set pen color to [#FF4500] // apex-edge color

// bottom-left to apex
go to x: (startX) y: (startY)
pen down
go to x: (apexX) y: (apexY)
pen up

// bottom-right to apex
go to x: ((startX) + (side)) y: (startY)
pen down
go to x: (apexX) y: (apexY)
pen up

// top-right to apex
go to x: ((startX) + (side)) y: ((startY) + (side))
pen down
go to x: (apexX) y: (apexY)
pen up

// top-left to apex
go to x: (startX) y: ((startY) + (side))
pen down
go to x: (apexX) y: (apexY)
pen up

Explanation & tweaks

  • apexY positive places apex above the base (since base sits centered near y=0). Increase apexY for a taller pyramid.
  • Changing apexX moves the apex left or right for perspective skewing.
  • If you want triangular faces filled in using pen, you can draw many close horizontal lines within each triangle (advanced technique).

Concept recap: Draw square base, then connect each of the four base corners to a common apex (apexX, apexY).

5) CYLINDER — step-by-step (trigger: C key)

Event script

when [C v] key pressed
erase all
set pen size to 4
set pen color to [#FF0000]

set [rx v] to 60 // horizontal radius
set [ry v] to 20 // vertical radius for ellipses
set [centerX v] to 0
set [centerTopY v] to 60
set [centerBottomY v] to -60

// top ellipse
draw ellipse (centerX) (centerTopY) (rx) (ry)

// bottom ellipse
draw ellipse (centerX) (centerBottomY) (rx) (ry)

// connect left side
go to x: ((-rx)) y: (centerTopY)
pen down
go to x: ((-rx)) y: (centerBottomY)
pen up

// connect right side
go to x: (rx) y: (centerTopY)
pen down
go to x: (rx) y: (centerBottomY)
pen up

Important implementation details for ellipse

  • The repeat 360 loop increments a by 1 (degrees). Scratch cos() and sin() are degree-based — do not convert to radians.
  • If you see gaps, ensure pen down is inside the repeat loop and a increments by 1 each iteration.

Visual depth trick

To make the back (lower) ellipse appear as the "back edge":

  • Draw the back ellipse first with a lighter color or lower brightness, then draw the front ellipse (same coordinates but different y if needed) on top with a darker/normal color. Alternatively, draw the bottom ellipse faint first, then the top ellipse fully.

Concept recap: Draw two ellipses (top and bottom) with the custom draw ellipse block and connect them with vertical side lines at x = ±rx.

Enhancements — add more interactivity & polish

A) Keyboard controls to move or scale the cube

Use variables for position centerX, centerY and update them on arrow keys:

when [right arrow] key pressed
change [centerX v] by 10

when [left arrow] key pressed
change [centerX v] by -10

when [up arrow] key pressed
change [centerY v] by 10

when [down arrow] key pressed
change [centerY v] by -10

when [z] key pressed
change [side v] by 10

when [x] key pressed
change [side v] by -10

Why: Learners can interactively reposition and resize shapes to see how geometry responds.

B) Animated rotation illusion for the cube (no full 3D math, simple projection)

This draws the cube repeatedly while changing the offset using simple trigonometry:

when green flag clicked
set [angle v] to 0
forever
  erase all
  // compute a rotating offset
  set [offsetX v] to (round ((cos (angle)) * (depth)))
  set [offsetY v] to (round ((sin (angle)) * ((depth) / 2)))
  // draw cube using current offset values
  set [side v] to 100
  set [startX v] to (- (side) / 2)
  set [startY v] to (- (side) / 2)
  draw square (startX) (startY) (side) (90)
  set [backX v] to ((startX) + (offsetX))
  set [backY v] to ((startY) + (offsetY))
  draw square (backX) (backY) (side) (90)
  // connect corners (as earlier)
  change [angle v] by 3
  wait 0.05 seconds
end

Explanation: offsetX and offsetY circle around using cos/sin. This doesn't perform real 3D rotation but gives an appealing illusion of motion.

C) Color cycling

Simple loop to animate pen color:

when green flag clicked
forever
  change pen color by 5
  wait 0.1 seconds
end

Why: Fun visual effect; Scratch's change pen color cycles through the color wheel.

D) Broadcast modularization (good for projects / presentation)

Use broadcast messages to separate drawing tasks for clarity:

when [space] key pressed
erase all
broadcast [drawCube v]
wait 0.5 seconds
broadcast [drawPyramid v]
wait 0.5 seconds
broadcast [drawCylinder v]

when I receive [drawCube v]
... // cube code (call custom blocks)

when I receive [drawPyramid v]
... // pyramid code

when I receive [drawCylinder v]
... // cylinder code

Why: Improves maintainability and makes it easy to add sounds or transitions between draws.

Debugging checklist (common mistakes & fixes)

  • No ellipse drawn / gaps: make sure pen down is inside the repeat loop and a increments by 1 each iteration. Use repeat 360 + change a by 1.
  • Lines misplaced: check start coordinates; remember draw square expects a starting corner; using -side/2 centers the square.
  • Weird rotation or flipped drawing: ensure set rotation style [all around v] if using direction or rotation.
  • Slow performance: 360 steps for ellipses is fine; if animating many shapes at once, increase wait or reduce frame redraw frequency.
  • Pen keeps drawing between shapes: always pen up when moving to new starting coordinates.

Teaching notes and learning path

  • Beginner: implement draw square and the cube only. Learn move, turn, repeat.
  • Intermediate: create draw ellipse, learn sin/cos and degree-based loops. Draw cylinder.
  • Advanced: add rotation illusion, animate color, and expose parameters (side, rx, ry, apexY) as sliders using Scratch variables for user experimentation.

Full Code Summary

(1) Create custom block draw square (x) (y) (side) (dir) — copy the block definition above.
(2) Create custom block draw ellipse (cx) (cy) (rx) (ry) — copy the block definition above.
(3) Paste the when green flag clicked initialization script above.
(4) Add the three event scripts for keys A, B, C.
(5) Optional: add enhancements (rotation, keyboard controls, broadcasts).

Conclusion — Bringing 3D Shapes to Life in Scratch

By following this tutorial, you've learned how to use Scratch's Pen Extension to draw and simulate 3D geometric shapes — a cube, pyramid, and cylinder — using nothing but logic, loops, and trigonometry.

You now understand how:

  • ✓ Mathematical coordinates control shape positioning and proportions.
  • ✓ Pen movement in Scratch translates code into real-time visuals.
  • ✓ Trigonometric functions (sin, cos) can create smooth, curved shapes like ellipses and cylinders.
  • ✓ Custom blocks (draw square, draw ellipse) make code reusable, modular, and clean.
  • ✓ Offsets, apexes, and connectors simulate perspective and depth, giving a 2D canvas a 3D feel.

This project is a great example of how coding and geometry come together to create visually engaging designs. You didn't just draw — you programmed shapes with logic!

What's next?

  • Experiment with different angles and offsets to create new 3D illusions (like prisms or cones).
  • Add color transitions or rotations for animation effects.
  • Combine these shapes to build entire 3D structures or scenes (like a house or rocket).
  • Integrate user interaction — let players draw shapes using buttons or sliders.

Scratch proves that even without advanced 3D engines, creativity + math + code = magic ✨

👉 Watch the Full YouTube Tutorial Here:

How to Make 3D Shapes in Scratch — 3D Geometry with Code | Pen Extension in Scratch | Kodex Academy

Call to Action

  1. Don't forget to check out the full video tutorial: How to make 3D Shapes in Scratch — 3D Geometry with Code | Pen Extension in Scratch | Kodex Academy
  2. Like, comment & share the video
  3. Visit kodexacademy.com
  4. Subscribe to the Kodex Academy YouTube channel for deeper Scratch content.

Learn More with Kodex Academy

At Kodex Academy, we're passionate about helping students learn coding in creative ways. This project teaches more than Scratch—it empowers young minds to build tools that work in the real world.

Explore more:

Stay updated with new content, free tutorials, and coding challenges!

← Back to All Blogs