Light Up a Story With Code: From Tinkercad to Scratch

by Tinkercad for Education in Teachers > 5

3485 Views, 13 Favorites, 0 Comments

Light Up a Story With Code: From Tinkercad to Scratch

Untitled (2400 x 2000 px) (1200 x 1000 px).png

This cross-platform activity was created by the Autodesk Tinkercad and Scratch education teams to help students experience the power of computational design and storytelling through code during CSEdWeek and beyond. The Hour of AI is a global campaign from CSforALL, in collaboration with Code.org.

Recommended grades: 5–8

Curricular Connections

This activity bridges STEM, art, and design through computational creativity. Students engage in a hands-on exploration of geometry, coding, and storytelling that connects directly to key academic disciplines:

  1. Mathematics: Reinforces spatial reasoning, geometric relationships, ratios, and measurement as students manipulate radius, height, and rotation variables in 3D space.
  2. Science & Engineering: Models the engineering design process by encouraging students to prototype, test, and refine digital solutions—mirroring real-world workflows used in architecture and environmental design.
  3. Computer Science: Strengthens algorithmic thinking through loops, variables, and decomposition while fostering creative computing across platforms.
  4. Art & Design: Emphasizes aesthetic choices, symbolism, and narrative—transforming mathematical structure into expressive storytelling through color, light, and motion.
  5. Sustainability & Civic Imagination: Encourages systems thinking by challenging students to design resilient, eco-conscious structures that connect to community needs and environmental contexts.

By merging design and computation, learners experience how creativity and engineering intersect—seeing themselves as both makers and storytellers who use code to shape ideas across worlds.

You can find relevant ISTE, NGSS, and CSTA standards and a student reflection sheet that can be downloaded in the first step.

Lesson Overview

How do 3D models become part of digital stories or games we play? In this lesson, students will explore how algorithmic thinking connects the physical and digital worlds. Starting in Tinkercad Codeblocks, they’ll remix an existing lighthouse design to experiment with parameters like radius, height, and number of sides—discovering how small changes in code can transform form and function.

Then, students will export their model into Scratch, where it becomes part of an interactive animation or story. By combining design and storytelling tools, learners practice computational creativity—seeing how geometry, art, and code can work together to express ideas.

Throughout the experience, students reflect on how human imagination and machine logic intersect, and how tools like Tinkercad and Scratch help bring abstract ideas to life.

In this lesson, students will:

  1. Identify and remix key algorithmic structures within a Tinkercad Codeblocks program
  2. Modify variables and loops to redesign a 3D lighthouse or similar structure
  3. Export the 3D model to use as a visual element for storytelling in Scratch
  4. Animate the design with code to tell a story, simulate movement, or integrate sound and effects
  5. Use AI-powered Face Sensing blocks (optional) to explore human–computer interaction
  6. Share and reflect on their creative process and design decisions


Estimated Instructional Time:

60–90 minutes (extendable to 2+ class periods for remix or storytelling extensions)

Supplies

51.png
  1. Computer with internet access
  2. Free accounts for Tinkercad and Scratch
  3. Lighthouse base file (Tinkercad Codeblocks example)
  4. Access to Scratch (you can use the offline or online versions to animate, but will need the online version if you’d like to use the optional Face Sensing Extension)
  5. Webcam, if you’d like to use the optional Scratch Face Sensing Extension
  6. Optional: 3D printer, headphones for sound design, student reflection sheet

Teacher Prep

Untitled design (98).png
  1. Click the Copy and Tinker button on the starter lighthouse Tinkercad Codeblocks design and create a few quick remixes, so students see how one change cascades through the design.
  2. Have two versions ready: baseline and remixed (e.g., different colors/roof/railing). This sets up the “remix” idea.
  3. Optional: Watch this webinar with the Scratch and Tinkercad teams for tips on getting started with the activity and framing conversations about creating with AI.


Vocabulary (review quickly)

  1. Variable: named value that controls dimensions or counts; or container that stores an assigned value
  2. Loop/Repeat: repeating through a block (step in the algorithm) or set of blocks
  3. Rotate around axis: turn or copy a shape evenly in a circle by dividing 360° by the number of repeats (for example, 360° ÷ 8 makes 8 shapes spaced evenly around a center point)
  4. Group: combine two or more shapes together, creating a unique new shape


Download relevant ISTE, NGSS, and CSTA standards and the Student Reflection Sheet from the Supplies section above.

Warm-Up Prompt (5 Min)

Screenshot 2025-11-01 at 2.40.10 PM.png

[Image courtesy of Insomniac Games]

Post the hook: “How do 3D models become part of digital stories or games we play?”

Ask:

  1. Where have you seen 3D models used in 2D games or videos?
  2. What design choices help a 3D model tell a story—through its shape, color, or how it could move?

Transition: “We’ll code a lighthouse in 3D, remix it, then send it to Scratch to animate a story.”

Tour of Codeblocks & Parameters (5 Min)

Codeblocks Workspace.png

Begin by showing how the Codeblocks workspace is organized: block categories, shapes panel, blocks editor, 3D viewer, playback controls, etc. Check out the Official Guide to Tinkercad Codeblocks for more information.

Next, show the lighthouse design and reveal its top-level variables. In Codeblocks, each template block defines a reusable shape that you can add throughout your design as many times as you need them. Think of them as making a pattern for a shape that you can tell Codeblocks to build over and over. This eliminates the need to re-stack the same code repeatedly.

For example, in the lighthouse design, the tower acts as the foundation for everything else — the other parts align with it. Inside it has variables for height, radius, and number of sides.

The fenced edge is the railing or balcony near the top of the tower. It contains a loop that creates evenly spaced posts around a circular edge using rotate around axis (360 ÷ postCount). It’s a modular piece, meaning the railing can be moved or duplicated independently.

Each element in the design is defined parametrically and can be modified without rebuilding the entire structure.

Demonstrate this concept by changing the tower height and/or the tower diameter and run to see the global impact.

Teacher Tip: Narrate the why: “We use variables so one change edits the whole design—exactly how pros work.”

Modify the Tower (5 Min)

lighthouses.jpg

Teach how radius, height, and sides variables control the tower’s silhouette. Encourage students to play with the design guided by this prompt:

“Can you change the shape by adjusting the top and bottom radius values of each segment?”

Examples:

  1. Make it straight-sided (same top and bottom radius).
  2. Make it hourglass-shaped (alternate widening and narrowing).
  3. Make it cone-like (decrease radius consistently with height).

Remix Sprint (15 Min)

uodated badges.png

After exploring the base lighthouse, students will remix the design to make it unique. Each student (or pair) selects one remix pathway, makes at least two meaningful changes, and edits one variable and one loop in their code.

Remix Pathways:

  1. Architectural Remix: Add windows, a base-level entry door, balconies, ledges, docks, or accessibility features such as ramps.
  2. Style Remix: Redefine color schemes or add patterns to tell a story (e.g., pirate hideout, pastel cottage-core, or sci-fi beacon). Reimagine the lighthouse as a community hub, art space, or lookout.
  3. Resilience Remix: Design a “storm-ready” structure by elevating the lowest floor, adding natural flood-protection landscaping, or including renewable-energy systems such as solar panels, wind turbines, or rainwater collectors.

Bonus Challenge:

Use randomization blocks so the lighthouse generates a different variation each time it runs!

Teacher Note:

Encourage students to submit their finished designs to the Tinkercad Light Up a Story with Code Challenge [live from November 17-December 30, 2025.] You might also reward their work with Autodesk’s Design & Make Skills badges. The Coding badge aligns most directly with this challenge, but student work may also demonstrate skills relevant to the Architecture, 3D Artist, or Sustainability badges—especially when they connect storytelling, structure, and environmental design.

This is also a natural place in the lesson to pause and introduce the Student Reflection Sheet.

Next step:

Students will upload this asset to Scratch to animate the rotating light, ocean scene, sound effects, and/or Face Sensing interactions.

Prepare Asset for Scratch (5 Min)

TinkercadtoScratch.png
  1. Click Share, and then choose Screenshot. Rotate and tilt objects to choose a flattering angle.
  2. Export a screenshot. (The workplane should automatically be hidden.)
  3. Crop the image and/or remove the background with the Scratch Paint Editor select and eraser tools (after uploading) or using an application (like Remove.bg or Photoshop) before uploading to Scratch, if desired.
  4. Upload the final result into Scratch as a sprite or backdrop costume: Log in to your free account if you’d like to save your work. Create a new project, and choose “Upload Sprite” from the Sprite Menu. Select your screenshot png and it will be added as a costume.
  5. If you haven’t removed the background yet, you can use the tools in the Scratch Paint Editor to do so. In bitmap-mode, use the eraser tool to remove the image background or other pieces you don’t want from your image. (You’ll know you are in bitmap-mode when you see the “Convert to Vector” button at the bottom of the screen. Find more resources on Sprite Creation here.)

Animate Your Object Using Scratch (30 Min)

AnimateLighthouse.png

Scratch encourages multiple pathways of engagement to foster a wide diversity of projects and support different experience levels (learn more about Scratch’s Creative Learning Philosophy here).

For example, a lighthouse could be used as:

  1. scenery, where we add a rotating light and an active ocean scene behind it in a storytelling project
  2. a chess piece in a game project
  3. the focal point of an information project about a famous lighthouse

Try using the Scratch Design Journal to brainstorm and plan your project before beginning to code.

There are many ways you can animate the scene or sprite (explore Scratch’s Learning Library resources for more help and ideas). Possible ideas include:

  1. Add a sound
  2. Layer digital drawings on top or below to add features
  3. Use effects blocks like “set brightness” or “change ghost”
  4. Move the sprite around the stage
  5. Place in a scene and create a story
  6. Set in a parallax

Scratch’s Learning Resource Designer, Maren, has shared an example Scratch project (projects/1177669539) to demonstrate some possibilities. In this example, the ocean is a parallax that responds to mouse movement, the brightness is stored as a variable so all elements can get darker or lighter simultaneously, fish move across the stage as if swimming in the water, a clickable door has been added using the Scratch paint editor tools, and a sprite to replicate a rotating light loops through a series of costumes for continual animation.

Does your classroom have mixed levels of experience coding with Scratch? Consider pair programming opportunities where students work together, taking turns acting as the “driver” (creating scripts), while the other is a “navigator” (reviewing, advising, etc.).

Optional — Try Controlling Sprites With Your Face!

AnimatewithFS.png

Want a challenge that gets your body moving? Try using Scratch’s recently launched Face Sensing blocks and the features of your face to control the animation!

These AI-powered blocks use a machine learning model to detect if they see a face and where a nose, eyes, ears, mouth, etc., are. When you use Face Sensing blocks, only your computer can sense your face. None of your data is stored or sent to Scratch or any other site. Making it a safe, fun, and creative way to explore the possibilities of AI.

  1. Add the Face Sensing extension blocks by clicking on the extension menu in the lower-left corner of the project editor. Face Sensing blocks use the device’s camera. If you haven’t enabled the camera in your browser, you may be prompted to give permission.
  2. Click the “go to nose” block while your face is visible on the stage. Did the sprite go to your nose? What if you choose another feature?
  3. How can you make the sprite constantly follow your nose? (Hint: try a forever loop.)
  4. How can you utilize additional blocks (like “turn clockwise 15 degrees” from the Motion category) to add more animation?

Scratch’s Learning Resource Designer, Maren, has shared an example Scratch project (projects/1216333706) using Face Sensing blocks to demonstrate some possibilities. In this example, the boat continually goes to one’s mouth, and is coded to change costumes if touching the water or not. The light on the lighthouse is angled based on the angle of the face tilt.

Find more on Face Sensing in the Scratch Learning Library, including an additional lesson plan, example projects, and student-facing coding cards.

Wrap-Up

TinkercadtoScratch-Reflect.png

Shine on, makers! You and your students just lit the way for creative coding. Together, you explored how algorithms can shape design—and how 3D models can tell stories when they move across worlds. We hope your students had as much fun remixing their lighthouses in Tinkercad Codeblocks as they did bringing them to life in Scratch.

Before you close the lesson, don’t forget to make time for reflection. The student reflection sheet in the Supplies section of this lesson is a key part of the experience, helping learners capture their design choices, coding decisions, and storytelling insights while connecting creativity with computation. You can print it for classroom use or assign it digitally for students to complete independently. It’s a simple but powerful way to prompt discussion, assess understanding, and celebrate growth in coding, design thinking, and problem-solving.

Celebrate!

Scratch Cat stars.gif

Once projects are complete, take a moment to celebrate your students’ creativity—and consider recognizing their achievement with Autodesk’s Design & Make skill badge for Coding, which honors their developing expertise in computational design.

Looking to share your Scratch projects? One option is to create a class studio to gather shared projects. Studios, in the Scratch online community, are a space where users can collect projects related to a particular theme, idea, or prompt. (Learn more in the Scratch Studios Guide.) Or set up a gallery walk. Have each participant's project open on their computer or other device. Participants can walk around a room, or take turns sharing their screen in a virtual space, to experience each other’s creations. Learners are encouraged to take time to look at projects and read/listen/interact with them to learn more about their peers.

And when the lights dim and the stories have been shared, don’t forget to let us know how it went! We’d love to see your students’ creations or hear how your classroom made this lesson your own.

Share your stories, designs, and reflections with the Tinkercad and Scratch communities, and keep the creative spark glowing. If you share your students' creations on social media, be sure to tag @tinkercad and @scratchteam!