Skip to content

UX Prototyping & Protopie

  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI
  • Principles
    • Educational
    • Figma Integration
  • Patterns, Pitfalls, Ploys
    • Patterns
    • Pitfalls
    • Ploys
  • More …
    • People-Centered Design
    • Thinking about AI

Receive and Assign hazard

When you receive a value with a message from a component, it is quite common to assign a variable with some function of that value (e.g. length).

The issues can be seen in this simple pie here   which has two input fields each set to show the entered text in a field below once the text is 4 or more characters long. If you try it you will find that the one on the left only shows the text when it is 5 characters long, whereas the one on the right does it at 4. And yet the condition controlling both is the same (if length > 3).

The reason this happens is that Protopie responses happen simultaneously (unless delayed … but conditionals cannot be delayed).

Thus in the left hand version, the condition is applied before the assignment has fully happened – even though the order on the page suggests it happens first.

In the right hand version the code is arranged as a Receive (and Assign) and then Detect. the Receive trigger only does the assignment of the new length variable. And then the Detect trigger picks up that the variable has changed.  In this way the condition only happens after the length variable has changed.

Once put down side-by-side, this hazard seems kind of obvious, but the difference in the two methods is very subtle conceptually.

The end result is that when one assigns a value in a response to some trigger (whether a receive or a detect) one should avoid using that variable in a condition in the same trigger. instead after assigning the variable one should then program a detect trigger for a change in that variable.

This is particularly relevant if you are passing an array of values – your first step is to receive the array and then assign each of your variables to appropriate value within the array. The you can either do a detect on one of those variables, or, better still, change the value of some other variable (called temp possibly) from 0 to 1, and then detect the change in it. In the response to that detect, the first step is to change the value of temp back to 0. And then you can have conditionals based on the values from your array.

Use Variables

Variables are very powerful simplifying tool and they do not seem to have any impact on Protopie's performance.

Use Components

It will often seem as though it will be faster to use individual elements than to use components, but in the end the time saving almost always goes the other way.

Playing with time

A message sent to the current scene will be received by the object that sent it. But a message sent to Protopie Studio (Connect) will not be received by the pie that sent it. B ut what if there is nothing out there to respond to it?

Sending messages to two places

Whilst it is important to be careful in sending messages to the right places, it is also very powerful to send a message to two different places at the same time (or maybe with a small delay).

Distinctive initial variable values

It can sometimes be very helpful to use -99 and "null" for the initial values for your number and text variables.

Viewing variables within Components

The variable debugger doesn't work when the variable that needs to be viewed is inside a component. There are two relatively easy ways to deal with this.

Good Prototyping Practice

IDEO's 3R prototyping principles from the late 1990s still apply - "Right, Rough, Rapid" but in the UX and UI space they are easily misunderstood.

How to inspect variables inside a component

Even all-Scenes variables are not accessible inside a component. And this can lead to hard to find errors when a variable with the same name is used in a component, but its value is not sync'd with the scenes.

Use overridable variables in components

Rough, Rapid, Right

How to inspect variables inside a component

Put code inside components

Use Variables

Why use Protopie?

  • Welcome
  • What’s New?
  • About
  • Welcome
  • What’s New?
  • About

info@peoplecentereddesign.org

© 2026 David Gilmore