Interaction Stream · Toolkit

Interactive Prototyping Companion

Think through, make, test and document electronics-enabled interactions.

ProjectUntitled interactionSaved locally
01 · EXPLORE

What could I make?

Start with the interaction, not the electronics. Choose something the prototype could sense and something it could do.

INPUT

What could it sense?

OUTPUT

How could it respond?

CURRENT COMBINATION
Choose an inputchoose an output
LEARN · INPUT

Learn more about touch

Understand how the Circuit Playground can sense this input and where it can be useful.

LEARN · OUTPUT

Learn more about light

Understand how this output can communicate status, change or feedback.

FIELD NOTES

What are you noticing?

Use this space for loose thoughts, possibilities or questions.

Stuck in Explore?Make a support snapshot before contacting your tutor or technical staff.
02 · DEFINE

Define the interaction

Use the Input / Process / Output model to describe what the prototype senses, how it changes what happens, and how it responds.

INPUTTouchWhat does the prototype sense?
PROCESSHow the prototype changes or connects what it senses to what it does.
OUTPUTLightWhat does the prototype do?
INTERACTION CHAIN

Does anything else happen?

Keep the first prototype legible. Add one parallel response or one following stage only when it is necessary to describe the interaction.

Foundation
LEARN · PROCESS

Learn more about trigger

Understand what this process means and see a concrete interaction example.

FIELD NOTES

Capture your thinking

Record decisions, uncertainty or anything you want to remember before you make it.

Stuck in Define?Share this interaction definition so someone can help you decide what to try next.
03 · MAKE

Implement in MakeCode

Your IPO definition determines the starting logic. Reproduce the block pattern in MakeCode, then adapt it deliberately.

YOUR INTERACTION LOGIC

Touch · Trigger · Light

A starting pattern based on your current Input / Process / Output definition.

Use this as a starting point, not a finished solution.Build the pattern in MakeCode, run it on the Circuit Playground, then change one thing at a time.
BLOCK REFERENCE

This reference translates your interaction into a block pattern to reproduce in MakeCode. It is intentionally schematic rather than finished code.

LEARN

Circuit Playground reference

Use the official reference to understand the board's built-in sensors, inputs and outputs while you work in MakeCode.

FIELD NOTES

Record the making process

Keep notes about what you changed, tested or had to work out.

Stuck in Make?Your support snapshot captures the IPO definition, interaction chain and field notes. Take it to technical support or your tutor.
04 · TEST

Observe another person using it

Give the prototype to someone else. Watch what they do before explaining how it works.

Tester instructionDo not lead them through the interaction. Let their actions show you what the prototype communicates on its own.
FIELD NOTES

Capture anything else

Record small observations that may become useful later.

Stuck in Test?You can create a help report even when the prototype is behaving unexpectedly rather than failing completely.
05 · REFLECT

Record what you learned

Prototyping gives you evidence. Record what changed in your understanding, not just what you built.

FIELD NOTES

What do you want to remember?

Keep a brief record of the insight you do not want to lose.

Stuck in Reflect?Show your tutor what you know, what remains uncertain and what you want to investigate.
06 · REPORTS

Save and share checkpoints

A report is a meaningful snapshot of your process. Keep the history so you can see how your thinking changed.

CURRENT PROJECT

Untitled interaction

No report snapshots yet.

Report history is retained in this project.Create a snapshot when you reach a useful checkpoint; export all reports together when sharing the project.
LOCAL STORAGE
This project lives in this browser only.

Browser data can be cleared or lost. Export the project file regularly so you have a portable copy of your work and report history.

Need support?Create a support snapshot from the stage where you are stuck. It is saved in the project history like any other report.
PROJECT TOOLS

Manage this project

ImportantProjects use browser localStorage. Export regularly, especially before changing devices or browsers.
PROJECT

Name project

HOW TO USE THIS TOOL

Interactive Prototyping Companion

Use this tool to think through an electronics-enabled interaction before, during and after you make it in MakeCode.

01 · EXPLORE

Start with what the interaction could sense and do

Choose an input and an output. Think about the physical action you want the prototype to detect and the response it could produce. These choices establish the starting point for your interaction.

02 · DEFINE

Use IPO to describe the interaction

Define your interaction as Input → Process → Output. Input is what the prototype senses. Process describes the rule or behaviour between the input and response. Output is what the prototype does.

Processes include patterns such as Trigger, Toggle, Threshold, Delay, Sequence and Repeat. You do not need to memorise these. Use the Pattern Library to understand them when they become useful.

03 · MAKE

Implement the interaction in MakeCode

This companion does not replace MakeCode. Use the interaction logic and block reference as a starting point, then open MakeCode to build and modify the program for your Circuit Playground.

Record what you changed and what you found difficult in Field Notes. Keep the implementation connected to the interaction you are trying to create.

04 · TEST

Watch another person use the prototype

Ask someone else to interact with your prototype while you observe. Record what you expected, what actually happened, what they did and what surprised you. Testing is about learning from the interaction, not proving that the prototype is correct.

05 · REFLECT

Record what the prototype taught you

Capture discoveries, changes in your thinking, what matters most and what you are struggling with. A working prototype is evidence for design thinking, not simply a technical achievement.

06 · REPORTS

Save meaningful checkpoints

Create a report snapshot when you reach a useful point in the project. Snapshots are retained in the project history and can be exported individually or together.

SENSE · PROCESS · RESPOND

Use the Pattern Library when you need more context

The Pattern Library explains interaction inputs, process patterns and outputs in more detail. It also points to external references for Circuit Playground and, when useful, other platforms such as Arduino, ESP32 and Raspberry Pi Pico.

The concepts transfer between platforms even when their implementation changes.

IMPORTANT

Your project is stored locally

This tool uses browser localStorage. Browser data can be cleared or lost, so save and export your project regularly. Create a report snapshot before seeking support and export it when sharing your work.

COMPLEXITY CEILING

Know when to stop and ask for help

This companion intentionally supports only a small interaction chain. If you need more inputs, outputs, conditions or stages, the interaction is becoming complex.

Pause, create a support snapshot and speak with your tutor or technical staff before continuing in MakeCode.

INTERACTION PATTERN LIBRARY

Sense · Process · Respond

Use the library as a reference while you work. The concepts are transferable; Circuit Playground is simply the starting platform.

COMPLEXITY LIMIT

This interaction is getting complex

Pause before adding more logic.

This companion deliberately supports only a small interaction chain. More inputs, outputs, conditions or stages can quickly create technical dependencies that are difficult to diagnose.

Generate a support snapshot and discuss the interaction with your tutor or technical staff before proceeding in MakeCode.

LEARN

Learning resources

SUPPORT SNAPSHOT

Package the problem

Your current project information will be included. Add enough detail for a tutor or technical staff member to understand what you were trying to do and where you became stuck.