MakeCode: Simple and Visual, Good First Step to Learn Programming
As I mentioned in my last post (Technologies that influenced fashion), I recently had the chance to take a small interactive fashion course, Introduction to Interactive Fashion Design by Jeremy White and James Pearce, at the Fashion Institute of Technology. In that post, I did some research on interactive fashion design precedents that inspired me.
In this entry, I would like to cover the tool that we used, MakeCode, because I was fascinated by how easily it could be used to teach programming to beginners. MakeCode by Microsoft is a web-based visual code editor for microcontrollers such as Circuit Playground by Adafruit. Adafruit was founded by a former MIT student, Limor Fried, in 2005, and the company has designed and manufactured open-source electronic hardware. On the course, we learned how to use MakeCode to program Circuit Playground. Although the video below shows how MakeCode works for micro:bit, not Circuit Playground, it demonstrates how a visual code editor can be an easy tool to grasp the fundamental programming concept.
MakeCode basics: inputs, loops, logic… and preview javascript
Even though I have experimented with different programming languages in the past, I find it difficult to explain simple concepts- Loop that continuously runs based on different conditions, Input that runs as an external trigger calls, Variables, and Logic, for example. MakeCode interestingly categorizes these most commonly used instances and illustrates them, so users simply need to stack different pieces to construct a programming logic.
As an intro to the course, I built a simple logic to mimic a bike signal, and here are the basics for how the logic works and how it was created.
The default state of the signal is when all LEDs flicker slowly, switching between red and yellow slowly. Then a rider can turn either a right or left signal on: red LEDs on either the left or right half of the circuit flicker quickly 6 times.
Step 1:
The default state is a loop to light up LEDs in 2 different colors. To do so, I use the Forever loop, which the commands inside would run endlessly. Within the loop: 1) it turns all pixels red: 2) it pauses for 1 second: 3) it turns all pixels yellow (from red): and 4) it pauses for 1 second.
Step 2:
To check whether a biker turned the signal on or off, I created new boolean variables to define the condition when the left or right arrow should be on. These variables are set to be false as their default, and become true as either button A or B are clicked.
Step 3:
Lastly, I just need to change the lighting conditions depending on the boolean logic. When either arrow is on, the LED pattern flickers for 6 times. To repeat the lighting pattern for 6 times, we can use the repeat function in the loop category. When either boolean variable in the step 2 is true, it runs this signal pattern with the repeat function. Otherwise, the default lighting pattern runs.
One of the most unique and powerful features of MakeCode is its quick and easy preview of the javascript version of the program. Although there are many unique syntaxes used for MakeCode, it’s fascinating to see the visual and text versions next to each other. We can also type text codes directly into this text editor, and the changes would be reflected in the visual editor as well.
The project concept
MakeCode for Circuit Playground comes with Network, which is essentially an infrared interface to communicate between two boards. Visualizing a connection between people in a physical space has been my big interest.
In Montreal, 21 interactive swings were installed in a public space back in 2012. With this 21 Balançoires (21 Swings) by Mouna Andraos & Melissa Mongiat, each swing played a different musical note. Some participants tried it with others, and observed if they could match their tempos or how their different movements could influence the collective music. When there are two or more interactive inputs, it’s natural for us to try with others together, observe, attempt to sync, and also discover the joy in their differences.
The exact replication of the project in this or close scale was not realistic for a one day workshop, but my hope was to create a simpler and smaller logic that could be easily imagined to apply for larger interactive installations. For instance, when two people could input two circuit boards and if they could communicate, I could create an LED strip with each end representing different colors from each circuit, with a constantly changing gradation connecting these two colors. The LED strip could also try to fade into the median color of these two different colors.
Media Block Chair from teamLab is an interactive LED box based on a similar concept. Each block is lit with a different color, and their colors change when another block with a different color is placed next to it, or “plugged”. My project is going to be a smaller version, but with the same concept.
Significant components for the project
For the project, several different operations and tools in MakeCode were created and used. I recreated the most significant components as an individual project and shared their links, so it’s easier to understand how each segment works.
1. Network to send an integer
Network, which is a given infrared interface in MakeCode, was used to communicate between multiple circuits. Below is a simplified version from the final project. To set up, I created two variables that represented each circuit’s color. When button A on the circuit is clicked, it will send an integer that represents its own color variable to the other circuit via the network.
An infrared receiver always waits for another circuit to send an infrared signal. When it receives an integer via the signal, the second color variable would be updated with the value.
2. Set colors to the LED strip
The next segment of the project is assigning an array of 30 RGB colors to the LED strip. Later, each of the R, G, and B values will be calculated on the fly based on different inputs, but I kept it simple in this component.
At the beginning state(On Start), it sets 30 pixels on an LED strip to be powered by a circuit’s pin A0. Then the operation to update the color array (It does not change in this example yet) and assign the array to the LED strip loops. When the color calculation is added later, it will be handled in the former part of this operation.
By experimenting, I found that assigning colors to each pixel on an LED strip was a heavy lifting task for a simple Circuit Playground; it created a small ticking sound when it ran. Therefore, I added a small pause in the forever loop so the operation does not run every frame, thus preventing over stressing the circuit.
3. Create a color gradation between two colors
The last segment of the project calculates the delta between two variables, representing a color from each circuit. These colors then create the color arrays representing the gradation between them, and slowly fade into the median color. This and the previous operations combined together can make an animated LED strip. By also combining the first network component and having two circuits with the same programming, two circuits can send their own color variables to each other.
The final result
Here is the final project. It may look extremely simple, but I was excited when I could successfully send color variables to another circuit and the LED strip starts to change its color.
I found MakeCode an extremely interesting educational tool of programming. I saw that other classmates, who had no coding background, understood the fundamentals quickly. However, I also found frustrations in using a visual coding editor for a project bigger than this scale. For example, I could only send an integer using Network, creating arrays was a cumbersome process, and it’s harder to copy a portion of the code from another project. However, I highly recommend anyone who is new to programming and I guarantee that they will find it much more accessible.
Original post: http://www.ta-kuma.com/programming/makecode-simple-and-visual-good-first-step-to-learn-programming/
References
Hands on computing education | Microsoft MakeCode
Circuit Playground Express, Supported by #MakeCode | @Microsoft @MSMakeCode #MicrosoftEDU
You Can Code With Microsoft MakeCode | Microsoft Education
Media Block Chair / teamLab exhibition “We are the Future” (beta ver.) | teamLab
