TIMING{;}
30 min
---
GRADES{;}
4th- 12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Programming the BBC micro:bit |
“Hello World!” is a term in the computer science and programming world that references a simple program or project that you build and get working to make sure that everything is in working order and that you correctly set everything up. The 'Hello World’ for the Code-a-Key backpack is to get the micro:bit to press a single Makey Makey key (inputs a W key press) when you press the A Button on the micro:bit. NOTE: If you have never programmed your micro:bit using MakeCode we strongly encourage you to take some time and spend some time walking through the tutorials listed here. About the BBC micro:bitThe micro:bit is a pocket-sized, programmable computer designed to make learning and teaching coding and electronics accessible and fun. It was developed by the BBC in the UK as part of their Make It Digital initiative to promote digital skills among young people. The micro:bit is equipped with various sensors, LEDs, buttons, and a Bluetooth module, making it a versatile platform for creative projects. |
Adding the Code-a-Key MakeCode Extension |
In your new project, the first thing we need to do is add the Code-a-Key Extension!
To add extensions to your MakeCode projects, click on the Extensions drawer that is just under the Math drawer. This will open up a window of different extensions for you to choose from.
In the search box, type “Makey Makey” or “Code-a-Key,” and you should be presented with a photo of the Code-a-Key backpack. Click on the image to add the Extension to your program coding blocks.
MakeCode will take a few seconds to load the Code-a-Key package blocks and then you will see it in the menu of drawers. You are now ready to start programming the micro:bit with the Code-a-Key Extension! |
|
Your First Code-a-Key Program |
Starting with your blank MakeCode project and the added Code-a-Key Extension, you are now presented with two starting blocks: on start and forever. The two blocks are the basis of all MakeCode programs! In our Hello World project, the first thing we need to do is to add our first and probably the most important block for Code-a-Key, and that is the initialize Makey Makey block. This block tells the micro:bit that it is hooked up to a Code-a-Key backpack and starts specific processes behind the scenes. This block should be placed at the top of the on start block every time you plan to use a Code–a-Key backpack. Next, add a show icon block under the initialize block to display a heart on the micro:bit LED display when the initialization is complete.
With the initialize Makey Makey block in place you are now free to use the Code-a-Key block set as you see fit.
For this basic program, our goal is to have the micro:bit press and release the W key when you press the A button on the micro:bit. We add the on A button pressed event block to our program, and inside of that, we place a press and release W block from the Code-a-Key Extension to it. Now, any time that you press the A button on the micro:bit, it will trigger the W key on the Makey Makey (and consequently on your computer) to be pressed!
Now, upload your program to your micro:bit. If you have not yet paired your micro:bit with your computer now is a great time to do so! Next to the Download button, click the three dots and select “Connect Device.” From the pop-up menu select your micro:bit and click “OK”. With your micro:bit now paired, all you have to do is click on the Download button to download the code onto your micro:bit. When the code is done loading onto your micro:bit, it should start the program right away, and you should see a heart icon appear on the LED display. Your first Code-a-Key project is now ready to use. Leave your micro:bit attached to its USB cable for now as you will probably be changing the code soon. |
Using the Project |
You successfully coded your micro:bit to put the Code-a-Key backpack to use. Let's assemble the Code-a-Key backpack to work with Makey Makey.
Following the instructions on the card insert, align the backpack pins with the headers on the Makey Makey and gently squeeze together.
Then grab your micro:bit and place it with the LED array facing out as shown above. Now is the time to test out your code with the Makey Makey Alarm App!
Once the Makey Makey Alarm App is opened, we need to make one change before using it and that is to change what key triggers the alarm. From the Settings window on the right, arrow through the choices to change the TRIGGER KEY to “W”.
Now press the A button on the micro:bit. You should see the Green LED next to the keyboard icon on the Code-a-Key backpack light up, and set off the alarm app! Success!!!! |
If it Doesn’t Work… |
Projects don’t always work the first time! That is OK! Be sure to double check the following things…
|
|
Changing the Input |
Great work on your “Hello World!” Now let’s take it up a notch and kick the tires on the micro:bit a little more. Jump back into your MakeCode program, and let’s change a few blocks around! We are going to use a different sensor other than the A button on the micro:bit. We are going to use the microphone to trigger the W key when it senses a “loud noise”. From the Input drawer, bring in the on loud event block. Drag the press and release [W] key block from the on button A Pressed event and place it in your new on loud block.
NOTE: If you are using a V1 micro:bit, you do not have a microphone on your micro:bit. We recommend replacing the on loud block with the on shake block!
So, now the micro:bit will be using the microphone to listen to the ambient sound around it, and when it gets too loud, it will execute the press and release the W key block. Now, upload your code and retest your project with the Alarm App. Now when you yell or make a loud noise the alarm should go off. NOTE: If you are using the on shake block instead of the on loud block your micro:bit will trigger when you shake the micro:bit instead of it being too loud. Repurpose Your Project!With your sound-triggered Makey Makey project, you are now at the point of asking yourself “What else can I do with this?” A great place to be! As a start to repurposing your “Hello World” we recommend using your simple controller to play a single-button game of some kind. We highly recommend using our Runner App which can be configured to the W key! Open the Runner AppWith the Runner App open, use the settings menu on the right to change the Jump key to “W”. Now click the play button in the bottom right corner of the window. You can now yell or make loud noises to make Carl jump and avoid tripping or the sharp tools flying at him! |
|
Exploring the MakeCode Package |
With a good grasp on triggering a key press with the Code-a-Key backpack and MakeCode we want to take a closer look at the other blocks in the Code-a-Key Extension and unlock the possibilities of what you can invent with the ability to Code-a-Key! Initialize Block
The initialize Makey Makey block, as stated before, is required for the Code-a-Key backpack to work with your micro:bit! Place this block in your on start block in all of your Code-a-Key MakeCode projects! Key BlocksThe following are descriptions of the basic blocks that control and use the keyboard keys on the Makey Makey.
Mouse BlocksThe following are descriptions of the basic blocks that control and use the Mouse controls on the Makey Makey. For more fun projects, check out:Code-a-Key Project #0 Hello World (this guide) Code-a-Key Project #1 Stomp Switch Code-a-Key Project #2 Bouncy Face Tilt Controller Code-a-Key Project #3 Flashlight Piano
|
|
SUBTITLE{;}
Have you ever wanted to combine Makey Makey and micro:bit? The Code-a-Key Backpack enables you to do just that! Trigger key presses in your Makey Makey projects with motion, temperature, light, and sound to unlock a new realm of possibilities!
“Hello World!” is a term in the computer science and programming world that references a simple program or project that you build and get working to make sure that everything is in working order and that you correctly set everything up.
]]>
TIMING{;}
30 min
---
GRADES{;}
3rd- 12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Assembling the Backpack |
In this project, you will code a counter, so you can build a physical controller for your micro:bit!
Gather all of your supplies, and then assemble the Code-a-Key backpack, Makey Makey and BBC micro:bit as shown on the instruction card included with the Code-a-Key backpack. Remember, when plugging the micro:bit into the backpack, the LED array should be pointing out from the backpack.
|
|
Building the Stomp Switch |
We love stomp switches, they are a great way to trigger a keypress on a Makey Makey by getting up and doing something physical! If you have never built a stomp switch before, don’t worry about it, we have you covered! Check out our tutorial on how to build one out of cardboard. Don’t worry, we will wait right here for you to get your stomp switch built! Build a Stomp Switch!Once you have your cardboard stomp switch built, it is now time to hook it up to your Makey Makey! Using two alligator clips, clip your stomp switch to EARTH on the Makey Makey and the Space key.
Do a quick test of your stomp switch by plugging your Makey Makey into the USB port of your computer and pressing (or stomping) on your stomp switch. The LED by the keyboard icon on the Code-a-Key backpack should light up, and it should produce a spacebar keypress on your computer! Tip: You can set your mouse cursor into the navigation bar or open a writing app (like Google Docs) to see the cursor moving a space every time you stomp. |
|
Programming the BBC Micro:bit |
The next step in building this physical counter is to program the BBC micro:bit. Connect the micro:bit to your computer USB port using the micro B USB Cable that came with your micro:bit. Next, open up your web browser to the Microsoft MakeCode page for the micro:bit and start a new project. To use the Code-a-Key backpack with the micro:bit, we need to first add the Code-a-Key Extension to your MakeCode project. Click on the Extensions drawer and put “Code-a-Key” in the search bar of the Extensions window. The Code-a-Key Extension should be the only package that shows up. Click on the image to add it to your programming drawers. With the Extension added, we can now create our MakeCode program! Start by pulling the initialize Makey Makey block from the Makey Makey code drawer and place it inside the on start block. This will set everything up correctly for the micro:bit to be able to use the Code-a-Key backpack. One best practice that we recommend for programs that use the Code-a-Key backpack is to also add visual feedback on the LED array at the start of your program to let you know that the micro:bit is done initializing everything. We do this by adding the display icon block after your initialize block. The icon choice is up to you, but we like to use the heart icon! With the Code-a-Key extension ready, let’s program the micro:bit to wait and listen for a keypress from the Makey Makey and then count how many times it is pressed.
The first thing we are going to do is to do some foundational work. We are going to create a variable in MakeCode to store the number of times that the stomp switch is pressed. To create a variable, click on the Variables drawer and click on Make a Variable. A window will pop up and ask you to name your variable. Type in “Stomps.” With the variable created, we now have access to a few new blocks in the Variables drawer. Click and drag on the set Stomps to 0 block from the drawer and place it inside of your on start event block, just below the show icon block. This block will set your variable named “Stomps” to value 0 at the start of your program. It is a best practice to do this when creating new variables, as you can guarantee that variables will reset to 0 each time the micro:bit turns on. Now, from the Makey Makey drawer, bring the when Makey Makey key pressed event block into your program. This event block will be triggered when you press any keyboard key on your Makey Makey. So, when you press the stomp switch, which is connected to Space key, it will execute this code. What code do you want it to execute? Good question! How about increasing or “incrementing” the stomps variable? From the Variables drawer, drag the change Stomps by 1 block into your when Makey Makey Key Pressed event block. The variable is already increasing by 1, so each time a key is pressed on the Makey Makey, your variable will increase by the value of 1. The next step in creating our micro:bit program is to display the value of the stomps variable on the LED display! From the Basics drawer, click and drag the show number 0 block and place it inside of your forever event block.
To have the display show the number of the Stomps variable, we need to open the Variables drawer and drag the Stomps variable block into the show number 0 block, replacing the 0 as its value so your code will now read show number stomps.
The final step in programming our counter project is to create a way to reset the counter back to 0. This can be done a number of ways, but the most straightforward way to do it would be to leverage the buttons on the micro:bit for now.
From the Inputs drawer, drag in the on button A pressed event block into your program. Now from the Variables drawer, drag in your set Stomps to 0 block and place that inside of your on button A pressed event block. So, when the A button is pressed on the micro:bit, it will reset your variable back to 0! When you complete your program, double-check that all of your key presses and releases match our example, and then download the code to your micro:bit. When your code is done being downloaded to your micro:bit, the icon you chose should show up on the LED array. You can find our complete program example here! NOTE: If you are having trouble downloading your code to your micro:bit review the Getting Started guide for the Code-a-Key backpack or the instructions on the MakeCode website. |
Using Your Counter |
Now that you have successfully coded your physical counter with the micro:bit and Code-a-Key backpack, it is now time to test it and see how accurate it is!
Unplug the micro:bit USB from your computer and plug the Makey Makey into your computer. You should see the Makey Makey go through its start-up LED sequence and then your micro:bit should show the initialize icon you gave it, followed by the number 0. Success! Now, the fun part… Stomp on your stomp switch! The number on the micro:bit display should increase by one. Stomp again and check for the number changing. Now, press the A button on the micro:bit and reset the value to 0!
You now have a physical counter that uses a stomp switch! The question is now “What to use it for?” Here are a couple of ideas that have come up to inspire you to get out there and start counting…
|
|
Going Further |
In using your counter, you may have noticed that you have to keep looking at the micro:bit to see if the keypress was triggered or not. Wouldn’t it be nice to add some sort of audio feedback to the project? If you have a micro:bit 2.0 you can add that audio feedback easily by adding a single block to your makeCode program!
Plug your micro:bit back into your computer and pull up your MakeCode program for the counter. From the Music drawer drag the play giggle until done block and place it at the bottom of your when Makey Makey key pressed event block code.
You can click on the giggle dropdown menu to select a sound of your choice and then change the until done dropdown menu to the option called : in background. This will play the sound effect while continuing to run the rest of your code and not delay anything while it is playing! Download your code to your micro:bit and test the project out again. You now have a project that gives audio feedback when the key is triggered! For more fun projects, check out:Code-a-Key Project #0 Hello World Code-a-Key Project #1 Stomp Switch (This guide) |
|
---
SUBTITLE{;}
Computers do a great job of counting and keeping track of numbers. Let’s put that strength to good use and build a physical stomp counter using the BBC micro:bit and the Code-a-Key backpack! Let’s get physical with our computing projects!
]]>TIMING{;}
30 min
---
GRADES{;}
8th-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Materials and Assembling the Backpack |
This project focuses on creating a light-controlled piano, but as you build along with us be sure to be thinking about other applications and other keys that you could control. When we get to using your piano, take some time to explore the options you have available to you! It’s OK to color outside of the lines with this project.
This project is a simple one and only needs the following materials:
When you have everything together assemble the Code-a-Key backpack, Makey Makey, and BBC micro:bit as shown on the instruction card included with the Code-a-Key backpack. Remember, when putting the micro:bit into the backpack the LED array should be pointing out from the backpack.
|
Adding the Code-a-Key MakeCode Extension |
To program the micro:bit, open Microsoft MakeCode for micro:bit and start a new project. NOTE: If you have never programmed your micro:bit using MakeCode, we strongly encourage you to take some time and spend some time walking through the tutorials listed at the beginning of this guide. The first step in building this tilt controller is to program the BBC micro:bit. Connect the micro:bit to your computer USB port using the micro B USB cable that came with your micro:bit. Next, open up your web browser to the Microsoft MakeCode page for the micro:bit and start a new project. To use the Code-a-Key backpack with the micro:bit, we first need to add the Code-a-Key Extension to your MakeCode project. Click on the Extensions code drawer and put “Code-a-Key” in the search bar of the Extensions window. The Code-a-Key Extension should be the only package that shows up. Click on the image to add it to your program. With the Makey Makey Extension added we can now create our MakeCode program! Start by pulling the initialize Makey Makey block from the Makey Makey code drawer and place it inside the on start block. This will set everything up correctly for the micro:bit to be able to use the Code-a-Key backpack. One best practice that we recommend for programs that use the Code-a-Key backpack is to also add a visual feedback on the LED array at the start of your program to let you know that the micro:bit is done initializing everything. We do this by adding the display icon block after your initialize block. The icon choice is up to you, but we like to use the heart icon! |
|
Calibrating the Light Sensor |
Now that everything is added to your MakeCode project we can program the light sensor to trigger a key press based on varying degrees of light! Our approach to the light sensor project is going to be a little different than the projects and the code we have done in previous projects. In those projects we have relied on a lot of program event blocks to execute code when it is “loud” or when the micro:bit is “tilted left” or “shaken". These event blocks are wonderful and we use them all of the time, but sometimes we need a little more accuracy beyond just a “tilt”. This is where the good old fashioned if statement comes into play!
The general logic behind this project is that the light sensor will be four parts. First, we will calibrate the light sensor when the micro:bit powers up as well as when you press the A button. Then we will take the full spectrum of light values from the light sensor and then use an algorithm to map them to 5 values. Finally, we will read the ambient light above it and the Code-a-Key backpack and use an if/else statement block to press a specific key depending on that value. When that sensor value falls within a specific value the micro:bit will trigger a Makey Makey keypress. So, let’s jump in and start programming! The first step in programming this project is to create a variable. This variable will store a calibration value initially at the start of our program as well as when we press the A button after that. Click on the Variables drawer and click the create variable button. Name your variable “Cal”. Once you have completed naming blocks the drawer will then have blocks to manipulate variables. From the drawer drag the set__ to __ block into the top of your on start event block. Set the variable name to your Cal variable. We are now going to replace the value in this block with a reading from the light sensor. Open the Inputs drawer and scroll down and find the light level block.
Drag the light level block and replace the value in the set Cal to block. This will now take a single light level reading on start and store that value as a calibration value for us to use later in our program. |
Polling the Light Sensor |
After setting a calibration value we now need to program the micro:bit to regularly capture the light sensor and translate that broad range of values (0-255) to six useful whole numbers (1-5) to use with an if/else statement. We will take the raw light sensor value and run it through an algorithm to produce our useful number. An algorithm is a set of rules or calculations in a program. It is a fancy way of saying “math equation”! We have to build our equation with blocks in MakeCode! To build our algorithm we need to create another variable and we will call it “lightCalc”. This variable will store the final product. From the Variables drawer create a new variable and name it “lightCalc” and then drag in a set__ to __ block and place it at the top of your forever block. Change the variable you are setting to ‘lightCalc’. Instead of a hard number we are going to set the value of our variable to our algorithm. When building algorithms in blocks we tend to work from the inside out. The first operation we need to do is map the light sensor value (0-255, with 0 being dark and 255 being bright) to a smaller range to work with (1-6). There is a block for that!
From the Math drawer find and drag the map __ from low __ high__ to low__ high ___ and place it on its own in your program space. Once we finish the algorithm we will place the whole thing in our variable block. The map block seems complicated, but once you understand its function it becomes super useful and will make sense to you. It takes a value (A) which has a known range of (B) to (C) and then scales or “maps” that value to an output range of (D) to (E). We need to scale the light, so let’s plug in values.
The first value (A) is going to be the light value variable block. From the Inputs drawer drag that block and place it at location (A). We know that the low value from the sensor will be 0 or dark. Type 0 into (B). The high value (C) is a little different. We will use our Cal variable block from the Variables drawer and place it into (C). We use this value instead of 255 because the calibration value is the highest ambient value from the micro:bits surroundings rather than assuming it is fully bright around the sensor.
Finally, we want to map that value range to a low of 1 to a high of 6 (D and E). We do this to give us just 6 choices of values to apply logic to rather than a possibility of 256 different values that we then have to do the math to figure out. Let’s work smart, not hard! The final step of building our algorithm is to take the value produced by the map block and round it to the nearest whole number. To round the number, open the Math drawer and find the round__ block. Now drag it into your program. What are you going to round? Yep, you are correct!
Drag the entire map block with all of its values into the round__ block. the set__ to __ block in your forever event block. Before moving on, be sure to double check your algorithm with our programming and ensure all of your values and blocks match! |
Programming the Logic |
Now that we have a mapped and rounded value of the light sensor, we can now dig into the rest of our program. From the Logic drawer drag an If block into your forever event block, just below your lightCalc variable. This if statement will control the logic of the light sensor. The if/else block has a hidden super power! It can expand for more complicated logic into an if/else if/else block by clicking the small plus sign at the bottom of the block. An if/else if/else is similar logic to a basic if/else block, but allows us to have multiple if options to be “true” rather than just a single one.
Click the plus sign so there are a total of 6 statements we can use as shown in the screenshot.
Now, let’s build the first logical operator statement for the top if statement. From the Logic drawer drag in a __ = __ logic block (Logic blocks always have pointy ends!) and place it inside of the top if statement. From the Variables drawer bring in the lightCalc variable block and place it in the left side of the __ = __ block. We will be comparing that against the value of 1. The statement checks the mapped and rounded light sensor reading to a value and if it equals the value of 1. Now, to populate the other logic statements! Let’s work smart and not hard and just duplicate the statement we just placed. Right click on the completed lightCalc = 1 block and select “duplicate” from the drop down menu. Place the copied statement into the next opening down and change the value from 1 to 2. Repeat this process until all of the statements are filled and the values are changed up to the value of 6. Your if statement should look like our example above before moving on!
|
|
Pressing Keys |
All we need to do is populate the if/else if/else statement with what we want it to execute when the micro:bit receives different light values! We are going to map each logic statement value (1-6) to a keyboard key on the back of the Makey Makey (W,A,S,D,F and G). In the end, we will use our piano app and play piano keys for each of these values! Each value will trigger a key press of one key and a release of all of the other keys not being used! From the Makey Makey drawer drag in the press key __ block and place it inside of the first If statement. Select ‘W’ as the key from this block. Now, to add a release key __ block from the Makey Makey drawer and place it just below the press key__ block. Select ‘A’ as the key to release. Repeat this process for the other keys to be released which are S, D, F and G. After placing your release key blocks your first if statement should look like the screenshot above. We now need to repeat this whole process for each value and change which key is being pressed and which keys are being released. You can duplicate blocks that you already have in your program and change the key values, or drag new ones in from the Makey Makey drawer. The lightCalc values should of 2-6 should correspond to the following keys as shown here:
When completed your program should look like this example code. |
Recalibrating your micro:bit |
We have one last piece of code to add to our program and this is more of something nice to have rather than a requirement. When your micro:bit turns on it calibrates the light sensor by capturing the ambient light around it. But, what happens when those conditions change, or you were leaning over the micro:bit when it turned on? We need a way to recalibrate the micro:bit without just turning it off and back on again. We will do that by simply programming one of the buttons to do that for us! From the Inputs drawer drag an on button A pressed event block into your program. We want to capture the light value into our cal variable again, so we will just duplicate the same set __ to __ block from the on start block and place it inside of our on button pressed block. Finally, we want to give a bit of visual feedback to confirm that the recalibration took place. From the Basics drawer drag in a show icon __ block and place after the set__ to __ block. We chose a check mark icon, you can choose whatever you like. Finally, drag a clear screen block from the basics drawer and place that just after the show icon___ block. This will show the icon for a bit and then clear it so the led array can be used as the light sensor! Our final program is really long and hard to show in a screenshot while being legible. Please open the final project to reference and check your program against. With that your program is complete! Save your program to your micro:bit and now it is time to put it to use! |
|
Using Your Controller |
Now it is time to make beautiful music with light! Get out your flashlight or light source and get ready!
Open up the Makey Makey Interactive Sheet and change the controls settings to match the screenshot above making sure that you have keys W,A,S,D,F and G mapped to piano keys. When they do, plug your Makey Makey with the micro:bit in the Code-a-Key backpack.
You should be able to hold your flashlight over the micro:bit and a key should be pressed each time the light changes which will then play a piano key. Move the phone up and down and this will play a series of different notes! See if you can play all 6 notes with your flashlight.
If you don’t seem to get a full range of keys, hold your light closer to the micro:bit and press the A button to recalibrate the light sensor. You should now have a full range of 6 notes to play! See if you can play a song with light!!! |
Troubleshooting: If your Controller Doesn’t work |
This program has a number of places where things can go wrong! Here are a couple of things to check that we know can be issues…
|
|
Going Further |
Take the concept of a light based controller and play around with it.Try different apps or games with the controller. See if you can invent an instrument that controls the light around the Code-a-Key and produce different key presses. Maybe something that can produce a predictable key press! Here are some applications that we thought of…
For more fun projects, check out:Code-a-Key Project #0 Hello World Code-a-Key Project #1 Stomp Switch Code-a-Key Project #2 Bouncy Face Tilt Controller Code-a-Key Project #3 Flashlight Piano (This guide) |
|
SUBTITLE{;}
Sometimes pressing a button is just too much! What if you could use light to control your mouse clicks, press a key or better yet… make music on your computer! Using the Code-a-Key backpack with the micro:bit, we can do just that… build a flashlight piano!
]]>TIMING{;}
30-45 min
---
GRADES{;}
3rd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Gather supplies and Assemble the Backpack |
An accelerometer is a sensor that detects gravitational pull on a device. If a device is moving slowly or sitting still it is one of the best ways to detect orientation of an object. Think of a cell phone… When you turn the phone screen from vertical to horizontal the accelerometer of your phone is the sensor that detects that orientation change and you phone rotates your screen accordingly. We can do the same thing with the micro:bit and use it to build amazing controllers with the Code-a-Key Backpacks.
When you have everything together assemble the Code-a-Key backpack, Makey Makey and BBC micro:bit as shown on the instruction card included with the Code-a-Key backpack. Remember, when plugging the micro:bit into the backpack the LED array should be pointing out from the backpack. |
Programming the BBC micro:bit |
The first step in building this tilt controller is to program the BBC micro:bit. Connect the micro:bit to your computer USB port using the micro B USB Cable that came with your micro:bit.
Next, open up your web browser to the Microsoft MakeCode page for the micro:bit and start a new project. To use the Code-a-Key backpack with the micro:bit, we need to first add the Code-a-Key Extension to your MakeCode project. Click on the Extensions drawer and put “Code-a-Key” in the search bar of the Extensions window. The Code-a-Key Extension should be the only package that shows up. Click on the image to add it to your program. With the Extension added, we can now create our MakeCode program! Start by pulling the initialize Makey Makey block from the Makey Makey drawer and place it inside the on start block. This will set everything up correctly for the micro:bit to be able to use the Code-a-Key backpack. One best practice that we recommend for programs that use the Code-a-Key backpack is to also add a visual feedback on the LED array at the start of your program to let you know that the micro:bit is done initializing everything. We do this by adding the display icon block after your initialize block. The icon choice is up to you, but we like to use the heart icon! Now, from the Input drawer, bring in the on shake event block. This event block is an event block that executes the code inside of it depending on the physical orientation or gesture of the micro:bit. If you click on the drop down of “Shake” you will see all of the different orientations you have to choose from. For this first event block, select tilt left from the menu. Now, whatever code blocks you place in this event block will be executed when you tilt the micro:bit to the left. We want the micro:bit to press the ‘a’ key to move when we tilt left and therefore move the paddle of the Bouncy Face to the left. To do this, grab a press key W from the Makey Makey drawer and place it inside the on tilt left block and change the key being pressed to 'a'.
We do want to add a second code block to release any other key that might be pressed. Grab the release key block and change the ‘w’ to the ‘d’ key. So, when the micro:bit is tilted left the ‘d’ key is released and the ‘a’ key is pressed. With the first event block completed, we now need to duplicate (right click on the event block and select 'duplicate' it two more times. But, you will need to change the two new events to be triggered by something other than tilt left! We need one to trigger with on tilt right and the other one to trigger when on screen up.
The on tilt right event block is used to move the paddle to the right, so we want to change the code to say: on tilt right release A and on tilt left press D. Finally, the screen up event block should stop all movement (not moving right or left). This means that both keys (A and D) should be released. When you complete your program, double-check that all of your key presses and releases match our example, and then download the code to your micro:bit. When your code is done being downloaded to your micro:bit, the icon you chose should show up on the LED array. You can find our complete example code here! NOTE: If you are having trouble downloading your code to your micro:bit review the Getting Started guide for the Code-a-Key backpack or the instructions on the MakeCode website.
TIP: For debugging purposes, you might want to add a display icon or show leds to show your micro:bit is pressing the key when you tilt left or right. However, once you are sure your code is working, you’ll want to take this display code off as it will delay the speed at which your controller presses left or right. |
Using the Controller |
Now that you have successfully coded your tilt controller with the micro:bit and Code-a-Key backpack it is now time to test it out with the Bouncy Face app! Open Bouncy Face AppOpen the Bouncy Face game! Before jumping in and playing the game, it will take some basic setup to change the controls to the propper keys for your controller to work. In the settings on the right side of the window change the LEFT PADDLE to trigger with the A key press and for RIGHT PADDLE to tilt with the D key press.
Before you start the game, plug your Makey Makey into your USB port on the computer. The micro:bit should light up, and the LED array should show the icon you set in your program!
Now, click the play button on the app! To move your paddle to the right, tilt your Makey Makey controller to the right. If you need to move it to the right, tilt it to the right. To stop moving the paddle, hold the controller level with the LED display pointing up. |
|
If Your Controller Doesn’t Work… |
|
Going Further |
You now have a controller that responds to tilting. Install your controller on something interesting… a balance board, skateboard, or even a hat and play Bouncy face or any other game that uses A and D as right and left controls! For more fun projects, check out:Code-a-Key Project #0 Hello World Code-a-Key Project #1 Stomp Switch Code-a-Key Project #2 Bouncy Face Tilt Controller (This guide) |
SUBTITLE{;}
The BBC micro:bit has a number of sensors on it! One of the most exciting sensors to use with the Code-a-Key Backpack is its accelerometer! In this project you will be building a simple right / left tilt controller to play one of our games called Bouncy Face.
]]>
TIMING{;}
30 min
---
GRADES{;}
3nd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Welcome to MakeCode Arcade |
In this getting started guide, we will walk you through creating a new game in MakeCode Arcade, including navigating the environment, adding the Makey Makey code extension, and creating a simple “Hello World” program to move a character around the screen with Makey Makey. |
Get Acquainted with MakeCode Arcade |
MakeCode Arcade is a block-based programming environment similar to Scratch or Blockly where you “snap” or place different code blocks together to build a program and, in this case, a game. Navigate to arcade.makecode.com click on ‘New Project’ and give your game a quick name. You should now be on a window similar to the image below. Let’s get oriented to the MakeCode programming environment where you will be programming and building your games. (1)The main focus of the window is taken up by your programming space where you assemble your game code. (2)You can find all the code blocks you need to build a game in color-coded and sorted drawers . These drawers are themed around the functionality of the programming blocks they hold. Microsoft has also color-coded the blocks to make it easier to find things. Quick Tip: If you ever have difficulty finding a block you are looking for, you can always use the search box at the top of the block drawers! (3)When you start to build your game, it will be previewed in the simulator window where you can test the game out by clicking on the controls or using keyboard controls. In our case, we will be using a Makey Makey rather than a keyboard and mouse! (4)You can save your work by naming the file and clicking Save. This will download the file to your computer, but it will also save the game to the cookies on your computer in case you want to work on it later. (5) When you get to the point of wanting to share your game for others to play, you can use the share button and choose from a number of ways to share your game with others, embed it in a website or blog, or even add it to a MakeCode Arcade Kiosk (more on that later!) (6) Finally, as you build your skill and understanding of coding you can switch between the drag and drop blocks and different text-based languages (javascript or Python) for some advanced programming options. |
Let's Start Programming |
As a first program, we will create a basic demo level of a game and a character we can move around with the controls. First, we need to create the game's setting by adding a background. When you create a new program, your programming space starts with an on start block. Any code blocks you place inside of that block will execute or run at the start of your game. So, the first thing we do will be to add a set background color to ___ block inside of the on start block. You can find the set background color block under the scene drawer. Click and drag the block into the on start block. If the volume is turned up on your computer, it should snap into place with a satisfying clicking noise. From there, you can select a color of the background you want by clicking on the color swatch inside of set background color to ___. Once you choose a color, your simulator window should change to that color. Now, to add a character! With the background color set, it is time to place a character for us to control on the screen. We do this by opening the Sprites drawer and dragging in a set mySprite to____ block into your programming space and inserting it into the on start just below the background block. After placing the block, select an image for your sprite. Click on the swatch just inside of the blue sprite block opening up a sprite editor. In MakeCode you can draw your own characters, but for this example, we will select an existing image from the gallery by selecting the “Gallery” tab at the top; feel free to choose any sprite you want from the list! When you return to your programming window, you should see an updated simulator with your character in the center of the window. Now we have a character but no way of controlling it! This is because we haven’t programmed the character to move yet. A computer is only as smart as its programmer. Let’s make this game a little smarter! To enable controlling a sprite with your computer's keyboard keys (or the simulator buttons), we need to add the move mySprite with Buttons block from the Controller drawer. This block will enable you to move the selected sprite with the controller buttons and keyboard arrow keys, or even better… a Makey Makey! You should now be able to go over to the simulator with your mouse and hover over the window to bring it to focus. Press the arrow keys on your computer keyboard to see if your character moves around. Your final MakeCode Arcade program should look something like the above screenshot! |
|
Plug and Play with Makey Makey |
Using your USB cable, plug the Makey Makey into your computer's USB Port. It is ready to use once the Makey Makey has gone through its blinky cycle. Since Makey Makey works by completing a circuit, touch EARTH with one finger and then touch the right arrow key with another finger. Make sure to press them at the same time. Touching EARTH and an arrow key input should complete the circuit between the two pads, and your character should move in the direction of the arrow key you pressed! If your character doesn’t move for some reason, here are some troubleshooting tips:
Inactive controller
|
|
Adding the Makey Makey MakeCode Extension |
Many games are simple enough to use Makey Makey with just the move with buttons block. However, you will quickly find that you want to use other buttons in MakeCode, like the A and B buttons. These buttons are not mapped to the Makey Makey natively, so we created a MakeCode extension to make the Makey Makey fully functional with MakeCode arcade for both single-player games and more elaborate two-player games. Adding the Makey Makey extension to your MakeCode Arcade games is pretty straightforward. Once you have created a game, it is just a few clicks away! To add the extension, click on the Extensions drawer, which will open up a selection of community extensions that enable you to add different packages of blocks to your program. In the search bar, type “Makey Makey” and it will bring up our extension. Click on it to load it into your project. Once the extension loads, you will have a Makey Makey drawer with coding blocks specific to Makey Makey. Click on the Makey Makey drawer to see the Makey Makey coding blocks! The first block maps the Makey Makey keys to the MakeCode Arcade keys (mapping A and B buttons to SPACE and CLICK on your Makey Makey). This will be one of your new favorite coding blocks! All you have to do is to add this block to the top of your on start event block in any program. This block will make Makey Makey work for all the MakeCode Arcade buttons right out of the box! The second block is a more in-depth block to map the different inputs on the Makey Makey to other controls for different players. You will use this in the case of a multiplayer game or if you want to use different inputs for player 1 in a single-player game. If you would prefer to control your sprite with WASD rather than the arrow keys, this block is what you would use to do that. We will incorporate this block into more advanced games in our How-to series!
Where to go now? Now that you have the basics of building and playing games in Microsoft MakeCode Arcade, we recommend you check out our series of project How-To guides! We walk you through how to program different games and recommend controllers to explore with Makey Makey to control those games! To get started, check out the first game in the series - Tag! |
|
---
SUBTITLE{;}
If you have never used Microsoft MakeCode before, it is a wonderful tool to start learning how to code. Originally developed and released as a programming platform for the BBC micro:bit several years ago, it has now expanded to include several other platforms in the hardware and software space. Let’s start with the MakeCode version called MakeCode Arcade, a game development platform for you to create your own old-school style video games! With Makey Makey, you can invent your own controllers for the games you code!
]]>TIMING{;}
30-45 min
---
GRADES{;}
4-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
TAGS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Setting the Scene for Your First Game |
If this is your first time using Microsoft MakeCode be sure to start with our Introduction to MakeCode Arcade with Makey Makey for a brief introduction to the environment and using Makey Makey with MakeCode Arcade.
First, create a new game in MakeCode and name it whatever you like, but we will name our game ‘Tag.’
The best games tell a story, and the best stories have a great setting. So, we need to set the stage for our game and that is done through setting the background. In the introduction, we used background color; we will use a background image instead for this game. From the Scene drawer, select the set background image to___ block. This block is similar to the background color block but enables you to use an image rather than just a color. Place the block at the top of your on start block and click on the swatch, then find a thumbnail image in the Gallery tab to choose your setting. Remember, we are telling a story here, and the background sets the mood and theme of that story! So choose wisely! Once you select the background image of your choice, click Select, and you can edit it further if you want. Once finished, click done in the lower right corner. |
|
Create a Player Sprite |
With the background selected, we now have to add the character we will control: our sprite. We add a sprite by opening the Sprite drawer and adding the set mySprite to___ block, placing it just below the background block in the on start block as the image shows. The set mySprite to__ block is a valuable and powerful block; you will use it a lot in creating games in MakeCode, so we will take a moment and review it in more detail here. It has three components, each of which will help you as your games get more complex. Let’s dive in and see what these components are. First off, your sprite has a name! When you create a new sprite, MakeCode gives it a generic name of mySprite. If you were to create a new sprite, MakeCode would name it mySprite2 and so on. This is just fine for simple games, but as you add more and more sprites, you may want to name them something more descriptive. You can create a custom sprite name by clicking on the drop-down next to the mySprite name and select rename variable and type in whatever name you would like! Next up is the sprite image. You have experience with this already, so let’s select the image for your player sprite now! Remember to think about the story you are telling and to choose a sprite that would make sense for your game.
|
|
Create an Enemy Sprite |
Now, create a sprite for the character who is ‘it’! From the Sprite drawer bring in another set mySprite to ____ block and place it just below your first sprite.
|
|
Set Location |
Once you create your 2nd sprite, you will notice that both sprites start one on top of the other. So, we need to change the starting location of the characters. First, the one who is it, and we do that by using the set Sprite position to x __ y __block. This block sets the X and Y coordinates location of the sprite. Place the block as shown, select your ‘it’ sprite, and click on one of the numbers in the block. This will bring up a tool to let you choose the spot on the screen without having to guess the x and y coordinates. We selected the very top of the window. This tool then populates the correct X and Y coordinates for you. You should see your sprite move up to that position once the simulator runs. If you want to start your player somewhere else on the screen, you would repeat the process: adding another location block, assigning it to that sprite, and selecting a spot.
|
|
Controlling the Sprite |
Now, to get things moving! We need to code movement for our player character that we want to control with the arrow keys, but we also want to code the “it” sprite to chase our player.
As in the getting started guide, we need to add the move mySprite with buttons block from the controls drawer to our program just below the set position blocks. We do not need to add anything other than this block to get our player sprite to move with basic controls. There is a handy block for getting the bad guy or the “it” sprite to chase us! It is called the set ____ to follow ____ block. This block tells one sprite to follow another sprite. That is perfect for a game of tag! The one issue is that the sprite doing the following will be really fast! To change the speed of the following sprite, click on the block's plus sign (+) and change the value to something lower; we recommend starting at 50. Now, test your game! You should be able to move your player sprite around the window while the “it” sprite chases you. There is a problem, though! Nothing happens yet when the “it” sprite touches you because you need to write the program to tell the game what to do. |
When Sprites Collide |
We will now program the tag functionality and tell MakeCode what to do when the two sprites touch each other. Enter the on sprite of kind Player overlaps otherSprite of kind player block! This is an event block, meaning it will only run the code inside it when the given event trigger is true. In this case, when two different sprites overlap one another, it will trigger the event. For this first game, we will use this in its most simple form and add complexity to it in future games. Open the Sprites drawer, and you can find this block towards the bottom of the list under the Overlaps category. Drag it into your program. It should be on its own and shouldn’t fit into the on start block. The functionality of an event block is that it is its own little program inside of a program! There is one change you need to make to this block, and that is to change the second sprite kind to an enemy kind of player, so the event will be triggered when one player sprite overlaps another sprite of the enemy kind.
Now, what happens when you are tagged? In this game we want the game to be over! Find the game over ___ block from the Game drawer and drag it into the overlap event block. Now, change the state of the game over ___ block to lose. When you test your game, you should be able to run around and avoid the it sprite, but when it finally catches you, the game should end in a losing state!
|
Winning Scoring |
But how do you win? That is a great question, and to be honest, the biggest issue with tag in general is that there isn’t really a winner! To be fair, we will add a game component of keeping score so you can compete against your friends. We will track how many seconds you can go without getting tagged and reward you with a score by incorporating another event block that will trigger scoring! The event block we use is called the on game update every _____ms block. This block is triggered in increments of time. You can find the block in the Game drawer. Click and drag one out into your program just below your on start event. Using the dropdown menu, change the value to 1 second (1000 milliseconds). Triggering this event every second! Now, we want to change the score every second you aren’t tagged! From the Info drawer, find the change score by ____ block and drag that to the on game update every _____ms block. Now, when you test your game out, you should see a score counter in the upper right corner of your window, increasing each second that you are not tagged. When you are tagged, the Game Over window will show your final score! That is how you program tag in Microsoft MakeCode! For a full coding reference, you can check out the completed game below (check out the game in MakeCode here.)
|
|
Recommended Controller and What's Next? |
There are so many ways to incorporate a Makey Makey controller into this game. The one requirement is that it needs the four direction arrows for you to control your character’s movements: up, down, left, and right. A couple of controller options that we recommend are as follows. Taking Your Game to the Next Level… We know that this game is rather simple and can get old quickly. It is designed to be a starting point for you to build from, not a finished product! We urge you to take the game to the next level and add to it. Change it up and make it your own! A couple of ways you can explore how to do this…
|
|
SUBTITLE{;}
In this project, we will build a basic tag game for our first real game with Microsoft MakeCode Arcade. In the introduction, we created a character or ‘sprite’, and we were able to move it around the screen using the arrow keys on our keyboard or with our Makey Makey. We will build on that concept and add another sprite that will follow/chase our player sprite. The game's goal will be to go as long as you can without getting tagged (obviously).
]]>TIMING{;}
30-45 min
---
GRADES{;}
4-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
TAGS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Setting the scene |
If this is your first time using Microsoft MakeCode, be sure to start with our Introduction to MakeCode Arcade with Makey Makey for a brief introduction to the environment and using Makey Makey with MakeCode Arcade. Create a new game in MakeCode and name it whatever you like, but we will call our game ‘Fruit Catcher.’We need to set the stage for our game, and that is done by setting the background. In the introduction, we used background color. For this game, we will use a background image instead. From the Scene drawer, select the set background image to ____ block. This block is similar to the background color block but enables you to use an image rather than just a color. Place the block at the top of your on start block and click on the swatch/thumbnail image in the block. This should bring up an editor window similar to the one we have used to create a sprite. At the top of the window click on the Gallery tab and select the image of the tree/forest image. Remember, this game is called “Fruit Catcher,” and the fruit is falling from the trees, but if you want to change the theme from fruit, feel free! Once you select the background image, click Select. If you want to edit the background you can do that in the editor. To keep things simple, we will skip the editing and get to coding by clicking done in the lower right corner. |
Set Player Sprite |
With the background selected we can now add the character (the catcher) who will be our player character. We add a sprite by opening the Sprite drawer, adding the set mySprite to_____ block, and placing it just below the background block in the on start block as the image shows. The set mySprite to_____ block is a useful and powerful block, and you will use it a lot in creating games in MakeCode Arcade. We went over the details of the different parts of this block in our first game (Tag). If you need a quick refresh on these components, check out the sprite section in the Tag Coding guide. Let’s set the sprite image. You have experience with this already, so let’s select the image for your player sprite now! Remember to think about the story you are telling and to select a sprite that would make sense for your game.
|
|
Set Sprite Location and Move with Buttons |
With our player sprite created, we now need to place the sprite in the correct position on the screen as well as program it to be able to move back and forth. From the Sprites drawer, drag the set mySprite location to x ___y ___ block and place it in your on start just below the set mySprite to ____ block. Make sure you select your player sprite name, and to set the location, click on either the X or Y number to bring up the location tool. Select somewhere at the bottom middle of the screen. Now, apply controls to your character! Select the move mySprite with buttons block from the Controller drawer and drag it just below the sprite location block. Similar to the tag game, this block does a lot for us, but the main difference is that for this game, we only want the player character to move left and right and not up or down. To change that, click on the plus (+) sign on the block to open up the block details. This shows two velocity settings (vx and vy). Change vy to 0. Now your sprite will only move left and right, which means we’ve essentially turned the up and down movement off! The final block to add to our program regarding character movement is to keep our character sprite in the window and not run off to infinity! We simply add a block from the Sprites drawer called set mySprite stay in screen block. This block does what it says and allows you to apply a rule to a sprite to stay in the screen with an on/off option. We want to set it to our character sprite and set the rule to ON. Test your game! Your character should be able to move back and forth, but not up and down. |
|
Create Food Sprite and Code Velocity |
With our player character dialed in and running back and forth, it is time to make the fruit fall for it to catch! We need to repeat the process for creating the fruit sprite but in a different way. In our game, the fruit falls at a timed interval from a random location at the top of the screen. So, we need to create multiple sprites, one every 500 milliseconds (half a second) or so. Enter the on game update every ___ ms event block! This event block is a timer, and the code inside is executed in increments of whatever time you set it to in milliseconds/seconds. Open the Game drawer and drag the block into your program area. The block’s standard timing is 500 milliseconds (half a second). Click on the drop-down and change it to 1 second! We can now populate the event block with the required blocks to create our fruit sprite with an image of your choice and a player kind called food. This is similar to the player sprite and will be important later on! Now let's learn the magic of creating the random starting location! We will be using the set mySprite location to x___ y___ block as we did with the player sprite, but we will be coding the x and y values ourselves rather than using the location picker tool. The Y value is easy; we want something just barely on the screen in the Y direction, and we found that a value of 5 works perfectly. But the X value takes a little more effort! Use the pick random block to set a random X location for the fruit sprite. The pick random block accepts two values: a minimum and a maximum. This block, each time it is called or used, will produce a random number between those two values. We recommend setting 10 as your minimum and 140 as your maximum. This way, all fruit will stay on the screen, but still offer a challenge for the player. Finally, we need to make the fruit fall! We can add velocity to the fruit sprite using the set mySprite velocity to vx___ vy ___ block from the Sprites drawer. Drag it in and place it at the bottom of your on game update event block. This block accepts two values: a velocity in the X direction (vx) and the Y direction (vy). We want to add velocity in the Y direction to simulate the fruit falling! We do this by setting vx to 0 and vy to 50. Note: You can adjust your vy value as you see fit to make your game easier or more challenging!
Now, test your game! Your character should be able to move around (side to side), and fruit should start falling from the top of the screen. But, when you go to catch it nothing should happen! Why is that? Well, we haven’t programmed anything to happen yet… Let’s do that now! |
|
When Sprites Collide! |
To collect the fruit with our player, we need to add another event block that will be a foundation for future games you create. This event block is one that is triggered when two sprites overlap or collide! Look for the on sprite of kind Player overlaps otherSprite of kind Player event block. This block resides inside the Sprites drawer under Overlaps. Drag it into your program! This block is an event block that executes code when two sprites of the specified kinds overlap! This event block allows you to check the types or kinds of each sprite and trigger an event when these two types of sprites overlap or cross paths. In this game, we have two types. The first sprite is a Player kind and the second otherSprite sill be set to a Food kind. This event will only trigger when our Player sprite overlaps with a Fruit sprite and not when a Fruit sprite overlaps with another Fruit sprite. This event block also has what are called local variables. Local variables are the red sprite block and otherSprite blocks in the block's title. This enables you to work with just the two sprites that are actually colliding rather than all of the fruit sprites at the same time. Why would you want to do that? As an example, we want to destroy the fruit sprite that we overlap with and only that sprite, not all of the fruit in the window. So, from the Sprites drawer, drag in the destroy otherSprite block and place it inside of your on sprite of kind Player overlaps otherSprite of kind food event block. Now from the title of the event block drag in the red otherSprite block into the Destroy block. When this code is executed, it will only destroy the fruit that overlaps with our player (locally) and not destroy all of the fruit (globally). Test your game! You should be able to move back and forth and when you overlap a fruit it should disappear! |
|
Adding Timer and Scoring |
Our final step towards completing our Fruit Catcher game is to add two things… a time limit and scoring. These things are fairly simple and only require a single block to add that functionality!
For setting a time limit for your game, open the Info drawer and drag the start countdown__(s) block into the bottom of your on start event. This will allow you to start a countdown time at the start of the game that then ends the game when it reaches 0. Setting the countdown to 30 seconds feels like a good game length. However, you can change yours to whatever you want! Finally, for scoring, we again open the Info drawer and drag the change score by ___ block into the overlap event, under the destroy otherSprite block. This will increase your score by whatever number you insert into this block. We kept it simple and just left it as 1. With that, your Fruit Catcher game is complete! Feel free to catch as much fruit as possible, modify the game to make it a little harder, and challenge your friends to catch as much fruit as they can! That is how you program Fruit Catcher in Microsoft MakeCode! For a full reference of what our code should look like, you can check out the full game and code in MakeCode here.
|
|
Create a Controller and Next Steps |
Recommended Makey Makey Controller There are so many ways that you can incorporate a Makey Makey controller into this game. The one requirement is that it needs the four direction arrows for you to control your character’s movement: up, down, left, and right. A couple of controller options that we recommend are as follows. Taking Your Game to the Next Level… We know that this game is rather simple and can get old quickly. It is designed to be a starting point for you to build from, not a finished product! We urge you to take the game to the next level and add to it. Change it up and make it your own! Here are some ideas to explore.
When you are satisfied with your game, head to the next guide to learn how to code a Drag Race game! (Link Coming SOON!) |
|
SUBTITLE{;}
This game is called Fruit Catcher, and it is a run-and-collect game where fruit tokens fall from random points at the top of the screen, and the player controls a character to move back and forth and collects the fruit before it hits the ground. Let’s dig in and start catching fruit!
]]>TIMING{;}
45 min
---
GRADES{;}
4th- 12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
TAGS{;}
STEM
MakeCode Arcade
Variables
Velocity
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Programming the Game / Setting the Scene |
If this is your first time using Microsoft MakeCode, be sure to start with our Introduction to MakeCode Arcade with Makey Makey for a brief introduction to the environment and using Makey Makey with MakeCode Arcade. Create a new game in MakeCode called ‘Drag Race’
We need to set the stage for our game by setting the background. In the introduction, we used a background color. For this game, we will use a background image instead. From the Scene drawer, select the set background image to ____ block. This block is similar to the background color block but enables you to use an image rather than just a color. Place the block at the top of your on start block and click on the swatch/thumbnail image in the block. This should bring up an editor window similar to the one we used to create a sprite. At the top of the window, click on the Gallery tab and select the cityscape image. We are designing a car racing game, so the street background seems appropriate. You can take this game and modify the sprites and background later to create any other type of racing game!
|
|
Create and Code Car Sprites |
With the race location set, it is now time to create our contestants. This is a drag race game between two cars, so we must create two car sprites. This part of creating sprites has been covered in detail in previous games. We will create two different sprites using the set mySprite to_____ block from the Sprites drawer (one for each). Name the sprites ‘Player1’ and ‘Player2’, and set them both to a ‘Player’ kind. MakeCode Arcade has several different colored car sprites in many different orientations. For this game, we will cars race from left to right on the screen, so we chose the cars facing the left! Now, we need to set the starting location of the two cars! From the Sprites drawer, drag in two set mySprite position to x__ y__ blocks at the bottom of your on start block. Use the location finder tool to set the X and Y coordinates for each sprite. Be sure to set the x coordinates to the same value to make it a fair race as that is the starting position! (Note: we covered the location finder tool in the last guide.)
|
|
Code speeding cars! |
We have two cars in position, it is now time to get them moving! In previous games, we have moved sprites using the simple move mySprite with buttons block, we will use a different block for this game! We will use the on __ button pressed event block. This event block executes whatever code we insert into it rather than just moving the sprite with buttons. This block has two options; the first is what button it controls, and the second is the state of that button (pressed, released, repeated). We will need two of these blocks, one for each player. Player1 will use the left arrow key and Player2 will be attached to the right arrow key. Both states should be ‘pressed’. Our goal is to have either car be controlled and move when its matching on__ button pressed block is executed. To cause the cars (sprites) to move when the button is pressed, we use variables to track the “speed” of each car. Variables in MakeCode are like a digital bucket; they hold things. In this case, variables hold numbers, and the number we want to hold in this project is the speed of each car. To create these variables open the Variables drawer. This drawer will be relatively empty until you fill it. Click on Make a Variable… and name your new variable ‘car1Speed’. This will be the variable that stores the speed of the Player1 car! Repeat the process and create a variable for ‘car2Speed’. Now, when you open the Variables drawer again, you should have some newly created blocks! The primary blocks that you will use when working with variables are blocks that set a variable (place something into that bucket) using the set __ to __ or you can change a variable in some way using the change __ by __ block. Both of these blocks are quite handy and you will use them to store information as you build more complicated games. You will also notice the rounded pill shape blocks as well. These blocks are the variables themselves. You will use these when you want to access and use their values. For our game, now that we have our two speed variables we need to set both of those variables to 0 at the start of the game. From the Variables drawer, drag two set__to__ blocks into the on start event block. For each block set the variable option (one each for car1Speed and car2Speed) and their value both should be 0. With this variable now set to 0 at the start of the game, we can now manipulate or change them in our button press event blocks. From the Variables drawer, drag a change __ by __ block for each button press event block. For the on left button pressed block, select the ‘car1Speed’ variable and change it by a value of 3. This will add 3 to whatever value is currently stored in the variable. Repeat the process for the right arrow key and ‘car2Speed’. Before testing our game for the first time, we need to tell the cars to use the speed variables and move! We update the velocity of the two sprites every 100 milliseconds using the on game update every __ ms event block. From the Game drawer drag in an on game update every __ ms event and set the milliseconds value to 100. Inside the event block, we want to update the speed of each car sprite. From the Sprites menu drag a set __ velocity to vx __ vy___ block in for each sprite. Be sure that each block is set to the different sprites as shown. Then from the Variables drawer drag in the ‘car1Speed’ variable and place it into the vx value for the player1 and repeat the process for the ‘car2Speed’ in the player2 set velocity block. You can now test your game! Start the game, and the more you press the left arrow, the faster the player1 sprite will go, and the more you press the right arrow, the faster the player2 sprite will go. |
|
Code Friction! |
The cars move and you can race one another, but you may notice a few odd things. Primarily, the cars do not slow down when you stop pressing the buttons like they would in real life. When you take your foot off of the gas pedal, your car slows down. We can simulate the slowing down of the car by friction and gravity using an if statement to manipulate the speed variables. We want to use an if / else statement that uses the following logic: “If the car is moving (speed greater than 1); subtract 1 from the speed, else (the car is less than 1) set the speed to 0 (because we don’t want negative speed)” Let’s create this statement in blocks for one of the cars and you can test it out. From the Logic drawer, drag an if ____ then ___else ____ block and put it at the bottom of the on game update block. Now, create the comparison block to insert into the if statement. From the Logic drawer, drag a greater than (>) block into your if / else block. Next, from the Variables drawer, bring in the car1Speed variable and place it in the greater than block as shown. Change the other value to the number 1 and now the statement should read car1Speed > 1. If this statement is true, we want to subtract the value of 1 from the car1Speed variable using the change __ by __ block with car1Speed being changed by (-1). If the statement is false ( this would be the else section of the if statement) then we set the speed to 0 using the set car1Speed to 0 block as shown above. You should repeat the process for the car2Speed variable in a completely new if / else statement below the first one. Be sure that you are working with the car2Speed variable in it and not accidentally use the car1speed variable.
|
|
Create Winners! |
Your cars now function like a car in the real world. But we still need to program winning and losing. It is a car race, there should be a finish line. So, let’s create one! Let’s start by creating our finish line sprite! Drag a set __ to __ block from the Sprites drawer and insert it just below your other sprite block in the on start event block. Instead of selecting a pre-drawn sprite, let’s create our own using the drawing tool! First of all, the finish line is going to span the entire roadway, so the sprite needs to be much larger than the standard sprite size of 16 x 16 pixels. In the lower left hand corner you can change the image size in width and height. Change the dimensions to 4 x 120. The image should change size and shape. We are going to keep things simple and go with a one-color finish line, you can get as fancy or elaborate as you want. Using the paint bucket tool from the toolbar and select a color of your choice from the options provided, the paint bucket tool will flood the image with color when you click on the object. Click the Done button! This creates a red stripe that we can now move around and use as a sprite and as our finish line. The final step here is to select a new kind from the sprite kind drop down menu and call it Goal. Now, we can place the finish line wherever we want, but the ideal location would be the far right side of the screen and spanning the roadway in our background. Drag a set__ position to __ x __y block from the Sprites drawer. Set the location using the tool to something to the far right side of the screen and spans in front of both cars. The final step is to program in what happens when a car overlaps with the finish line! We use the on sprite of kind ___overlaps otherSprite of kind ____ event block. You can find it in the Sprites drawer and drag it into your program. Change the final kind option to Goal. We will place two blocks in the event block to broadcast the winner and both are found in the Game drawer. The first block is the use message____ for win block which will allow you to create custom messages for a win state at the end of the game! Drag it into your event block and add the text “WINNER!!!” as the message. Finally, drag the game over win block from the Game drawer and place it just below the message block. This will end the game and display the “WINNER!!!” message. Now, test your game! With any success, both cars should be able to drive and the first one to touch the finish line will win and trigger the Game Over screen! That is how you program Drag Race in Microsoft MakeCode! For a full reference of what our code should look like, you can check out the completed game here!
|
|
Create Controllers and Take it the Next Level |
Recommended Makey Makey Controller There are so many ways that you can incorporate a Makey Makey controller into this game. The one requirement is that you need one controllers for each player. Your game works with the direction arrows on Makey Makey: Left arrow input, and Right arrow input. A couple of controller options that we recommend are as follows.
Taking Your Game to the Next Level… We know that this game is rather simple and can get old quickly. It is designed to be a starting point for you to build from, not a finished product! We urge you to take the game to the next level and add to it. Change it up and make it your own! Here are some ideas to explore.
|
|
SUBTITLE{;}
This game is called Drag Race, and it is our first 2-player button-mashing game where each player controls a car! The faster each player presses their assigned key, the faster their car goes. We will explore locations, simulating friction, and specific key event blocks. Let’s get our engines revving!
]]>TIMING{;}
1 hr
---
GRADES{;}
2nd- 6th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Craft a Paper Clock |
Learn to craft and code an interactive clock using Makey Makey and Scratch so students can physically engage with the clock, reinforcing their understanding in a tangible way.
5 Minute Interval Makey Makey ClockTo get started, craft a clock with two pieces of cardstock. If you have a Cricut cutter, you can use this design in the Cricut Design Space to draw and cut your clock. Use contrasting color so the time intervals show up clearly.
Cut a minute hand and hour hand out of cardstock. Cover the minute hand with foil and use a brass fastener to hold the hands in place. Make sure the foil in the minute hand connects with the brass fastener as this will be the EARTH connection for your Makey Makey clock controller.
|
|
Add Conductive Touchpoints |
Add brass fasteners at 12, 3, 6, 9 intervals to make an easy clock with conductive touchpoints at 15 minute intervals. If you want to code each 5 minute interval, place more brass fasteners around the clock.
You can code your clock to say time phrases, the minute hand, or even speak the time phrases in different languages! Create a "change mode" section with two brass fasteners so you can have multiple functions with this one clock. One brass fastener will function as EARTH and the other will function as Space key. When someone touches both as once, this will change the mode of the clock. Make sure to label all the key presses on the back of the clock to stay organized.
|
Wire Up Project |
You'll have two EARTH connections on this controller. One EARTH connection will be the minute hand on the clock and one will be in the "change mode" section. On the back of your clock, use conductive tape to connect the EARTH connections and now you will only need one alligator clip for EARTH!
For the easy clock wire the following intervals to the appropriate key press on Makey Makey.
Makey Makey Easy Clock
If you want to wire up the 5 minute intervals, add these connections:
Makey Max 5 Minute Clock:
Up Arrow : 00 minutes W key : 5 minutes A key : 10 minutes Right Arrow : 15 minutes S key : 20 minutes D key : 25 minutes Down Arrow : 30 minutes F key : 35 minutes G key : 40 minutes Left Arrow : 45 minutes Number 1 : 50 minutes Number 2 : 55 minutes |
|
Optional: Remap for Makey Max |
Make sure you have a Makey Makey of 1.4 or higher to use with the Makey Makey Backpack. (You can remap 1.2 or higher and use jumper wires if you do not have the Makey Makey Backpack bundle) Click here to open remap page!Follow the illustration on the remap page to place alligator clips. One clip from the up arrow to down arrow and one clip connected from the left arrow to the right arrow. This will put Makey Makey into a remap state.
Once you are in the remap software, hold EARTH and move the cursor on the page by pressing the arrow key inputs on Makey Makey. When you get to the mouse header section, press click, then navigate to change the top mouse input to the number 1. Repeat until you've changed all of the mouse inputs to the numbers 1-6. (For this project you only need to change two mouse controls to the numbers 1 and 2.)
Make sure to save your settings!After all keys are remapped, click the down arrow and tap SAVE to maintain the remapped keys. Until you put Makey Makey into a remap state again, these inputs are now remapped to your new choices. You might want to label your Makey Makey so you remember that it is remapped! (You can always go into remap mode and put Makey Makey key inputs back to the default.) Once your Makey Makey mouse controls are remapped, you are ready to attach the Makey Max backpack. Align all pins on the backpack board with the headers on Makey Makey. Gently squeeze the boards together with even pressure, making sure all pins enter the corresponding holes. Test your inputs on Makey Max with the piano app, or open a document and see if pressing the remapped inputs works as the number 1 and 2. Wire up your clock and you are ready to get started coding! |
|
Coding in Scratch |
For this Scratch project, when the minute hand touches each interval, it will speak the minutes, time phrase, or a time phrase in another language. To do this, you need to add the Speech to Text and Translate extensions in Scratch. Then you can easily combine translate with "Text to Speech" to have a talking multilingual clock! Sprite CostumesYou'll want to create a clock sprite with multiple costumes that show the time based on the each key press. Make sure to label each costume with the time interval.
Create BackdropsCreate backdrops for time phrases, minutes, and any language translations you want to code.
Each backdrop will actually function as the logic that lets the program know which phrase to speak.
Once you have costumes and backdrops created, you are ready to code each key press. The easiest way to do this is to code the first key and then duplicate the program.
To use this mode concept to play multiple phrases from one key press, you will nest if/else statements inside of each other. When you press the trigger key, the program will look to see which backdrop variable you are on and then play the sound accordingly. (So if the backdrop number is equal to one, it will play the sound "00 minutes." However, if the backdrop number is equal to 3, it will translate "Top of the hour" to Spanish and speak the translation outloud.)
You'll need to place a "backdrop number" reporting block into the operator block "blank = blank."
We will nest these if/else statements to tell the project, "If the backdrop number equals a certain number" do this. Otherwise check to see what number the backdrop is on and do that command instead! Nest each "if/else" statement so that the code will read from the top to the bottom and look for the backdrop number variable that is showing in the project and then will "speak" accordingly.
Here is the full code for one key press at "Zero Minutes or 12 o clock." Repeat this process for each key press. Clock Face and Key PressesSimple clock:
|
|
Play with Time! |
After it's coded and wired up, you are ready to play with time! Easy Clock with 15 minute intervals
|
|
SUBTITLE{;}
Unlock the potential of interactive clocks to revolutionize the way time is taught. Dive into the "How-To Guide: Interactive Clocks Edition" and watch as learning comes to life in a whole new way. Get ready to inspire, engage, and innovate!
]]>TIMING{;}
20 min
---
GRADES{;}
4-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Craft a Scrappy Joystick |
(Note: This is an adapted build from Michael Carroll's Scrappy Joystick) To recreate an 8 point joystick you are going to create a joystick that is able to move by using a paper clip! You will also use paper clips as the conductive inputs for each directional input. Unfold the small end of a paperclip to a 90 degree angle from the large end of the paperclip. This will be our joystick base. Poke this through a 3"X3" square of cardboard. (Use a pencil if you need to pre-poke a hole!) Place tape over the large end on the bottom of the cardboard to stabilize your joystick. Take a 3" X 3" piece of cardstock and roll it up to be your second layer of joystick. Use a pice of tape to keep it together. Place onto your paper clip base. Use a 4" by 4" piece of foil. Roll the cardstock with the foil. You will have extra left over the end. You need it for the next step! Place the foil covered cardstock onto the paper clip joystick base. Take the extra end of foil off at diagonal to the corner of your cardboard. Alligator clip to the foil to create an EARTH connection. To make your directional inputs, take four paper clips and bend the larger end away from the smaller end at about a 90 degree angle and push the small end into the cardboard.
Fold paper clip in and mold the end so it is rounded and there is more surface area for your foil joystick to make contact. Plus into the soccer app and test your input!
Repeat fo the other 3 sides and test your joystick with the Makey Makey Soccer App.
Want to prototype your own game controller? See: Invention Literacy Foundations: Prototype Game Controller for Makey Makey Soccer App |
|
SUBTITLE{;}
Use a Makey Makey with common items in uncommon ways to reinvent how we interact with the physical and digital worlds. In this build, use everyday paperclips to build your own functional joystick!
]]>TIMING{;}
60 min
---
GRADES{;}
2nd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Overview |
This project was originally shared as a blog post on Always Computing and on our blog as a featured educator post, but we wanted to share this microguide for you! This can be a cross-curricular project, but you will to spend a little time thinking about art and how the pictures will go with the story, then spend some time in literacy with how the story will be built, and then as they connect it to think about how the electronics will work. Your goal is to create a four page story that will play on Scratch by pressing the arrow keys.
|
|
Step Two |
The challenge is to create a four page story in one hour. Create a booklet by drawing four even rectangles like below. (Or folding a sheet of paper into four even quadrants.)
Put a piece of conductive tape on each page. Make sure when you fold your booklet that the conductive tape strips do not touch each other.
One of the best things about this prompt is once you have made the four page book, you have to ask yourself, "How will I use Scratch to bring it to life?" |
|
Code in Scratch | |
When Matt did this project with teachers, a few wrote about their journey to the Scratch conference. (How I got from Holland to Cambridge, etc) One teacher made an “All about me” book, and he played the trumpet so he had the trumpet sound. Some teachers recorded voices and others made sound effects. This teacher shared the process of a butterfly!
|
|
|
Applications |
What will you make your book about?
|
|
SUBTITLE{;}
Matthew Moore shares great Makey Makey and other computing projects on his Always Computing blog and shared this awesome Makey Makey Interactive storybook idea at Scratch Europe conference.
]]>We all know Makey Makey can trigger sound effects with Scratch, Soundplant, Midi controllers, etc.... But what if you want to trigger images with a custom controller?
Get ready to find out in our micro-guide! In this guide, you'll learn to change an image with Scratch. We have found two quick ways to do this!
]]>TIMING{;}
30 min
---
GRADES{;}
2nd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Option 1: Upload Image as Sprite and Change Costumes |
One way to control an image is to upload images as a sprite in Scratch. A sprite is any character you control in your project, but Scratchers often upload many design elements as a sprite. All you have to do is upload the image you want to trigger as a sprite and all other images as costumes for that same sprite. Then using the Makey Makey extension, you can change the Sprite Costumes with a key press. Let's say you are teaching your class about character traits, or vocabulary, or anything that a student could act out quickly. You can create a new sprite, and then using the "camera" feature in Scratch, kids can take a picture of an emotion or word, etc. Each new costume can be a word or an idea. Then just have students rename the costume to the image they are creating. Match each key press to the costume and then create your own physical controllers with conductive materials and hook it all up with Makey Makey! |
|
Option 2: Controlling an Image As a Backdrop |
Another way to change images is by controlling the backdrops in Scratch. To do this, look for the backdrop area in the lower right hand of your Scratch screen. Then upload as many images as you want to control with key presses. It is helpful to name each backdrop! To code each backdrop for different key press, use the Makey Makey "When key pressed" block and "switch backdrop to __" block. Again, remember to have students rename each backdrop to make it easier when they start connecting physical components. To have the image only change when the key is pressed, add a "wait __ seconds" and "switch the backdrop" back to the original image. What will you teach? Now that you know this super quick idea, how will you incorporate it into your lessons? Will you have kids act out vocabulary? Create hands on prefixes and suffixes for learning new words? Share a character's emotions as they go through a story's plot?
|
|
Teaching Ideas: |
Use this concept to teach vocabulary, create math equations, or share emotions! The sky is the limit!
|
|
SUBTITLE{;}
We all know Makey Makey can trigger sound effects with Scratch, Soundplant, Midi controllers, etc.... But what if you want to trigger images with a custom controller?
Get ready to find out in our micro-guide! In this guide, you'll learn to change an image with Scratch. We have found two quick ways to do this!
]]>TIMING{;}
45 min
---
GRADES{;}
4th-10th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Step One |
The invention she and Mark came up with is the hula hoop controller! By using Makey Makey, conductive tape, and a hula hoop, Katie could make a therapeutic exercise where he worked on all the same targets, but by playing a fun computer game.
This project uses a Hula Hoop, but that doesn't mean that you need to stick to just that to make your controller. If you prefer something else or do not have a Hula Hoop laying around, not a problem! Go look for other interesting oversized objects. Something like a large beach ball, frisbee or even a garbage can lid (as long as it is plastic.)
|
Images
|
Building the Controller |
Grab your Hula Hoop and other materials and let's build our controller! This project does take a new skill to some people and that is working with raw spooled wire. Let's take a bit of time and work through the proper way to cut it and strip off the insulation.
Cutting and Stripping WiresLet's start by cutting the wires needed for the four touch points around the Hula Hoop! Begin by measuring and cutting 4 equal length pieces of wire, the desired length is dependent on diameter of hula hoop and should measure to at least ½ the size of the hula hoop plus additional length to allow for plugging the controller into the Makey Makey. Using the wire strippers, strip the ends of each piece of wire exposing at least 1” of the wire. If you are using wire stippers that have different gauges (sizes) like us, find one that barely cuts through the plastic. Also, most wire insulation has the gauge printed on it, check your wire for a number like "AWG20" or something similar and that is your gauge (20 in this case). Create Conductive Touch PointsNow it's time to make a few decisions! Where do you want the four touch points around the Hula Hoop? For our example we are going to keep it simple and space them equally around the hoop at the Top, Bottom, Left and Right. Begin by taking 1 piece of the prepared wire and place one end of the exposed wire on top of the tape touch point. Take your conductive tape, and tape down the exposed speaker wire directly on top of the touch point. Doing this will allow the electrical current to pass through and secure the connection. Next, secure the existing wire along the hula hoop using some clear tape making sure to not cover other aluminum touch point areas. Repeat these steps on all four spots on the Hula Hoop. A great tip here is to label each wire with a piece of tape so that if you want to use your Hula Hoop later you know which wire is which! Secure all 4 wires together at the bottom of the hula hoop using tape to ensure wires remain together. Maker Tip: Colored duct tape can be used to outline the touch points which can act as a visual cue to allow the participant to easier locate the targeted touch point. |
|
Hooking Everything Up to the Makey Makey |
With the Hula Hoop Controller build complete, it is now time to get it hooked up to Makey Makey!
Now it is time to put your finished Hula Hoop controller in action! Begin by plugging the USB cable into your Makey Makey and your computer.
Now hook each alligator clip to its corresponding area on the Makey Makey (UP wire to UP input).
Use the Anti-Static Electric bracelet, metal piece of jewelry, or attach an alligator clip somewhere in direct contact with skin to ground the participant. Hook up this grounding alligator clip to an ‘EARTH’ input on the Makey Makey.
Now it is time to get playing! The Hula Hoop controller can be paired with any game/app with directional keys.
|
|
Drawing with a Hula Hoop! |
With your Hula Hoop controller built it is now time to put it to good use as a controller for our NEW Make-a-Sketch App!
The Make-a-Sketch App is what it looks like. It is a digital app version of the tried and true childhood toy magnetic doodling toy! Our app version is mapped to the Makey Makey arrow keys (UP, DOWN, LEFT, RIGHT) so it is plug-and-play as soon as you start using it. This means you can start drawing in the app right away with your Hula Hoop controller.
If you open up the control panel in the app you will notice that you can make a few changes to your pen size as well as the color. If you are looking for just a random color you can also use the Makey Makey "W" key to change the color to a random one. If you want to erase your drawing click on the Reset button in the app with your mouse. It is as simple as that! Now, let's see if you can level up your drawing skills. As an inspiration, check out what our 12 Year old artist created...
Doodle on the Make-A-Sketch AppTroubleshootingNobody likes it when things don't work the way you think they should! If you are having trouble with your guitar check out the following troubleshooting tips:
Control Make Makey Arcade Games!Use this controller to control one of our new plug and play arcade games. Going to the Next Level!You have only scratched the surface when it comes to alternative controllers and inputs with Makey Makey! Check out the list of other cool project ideas we have seen that use the Makey Makey in curious ways.
Once you've had your fill of Hula Hooping and need something a little different with Makey Makey, check out these other projects that come with the Get Up & Go! Booster Kit. |
|
SUBTITLE{;}
Katie Butzu and Mark Lyons designed this oversized directional controller to help gamify physical therapy practice. Beyond that it is a great way to incorporate whole body movement into playing digital games on your computer!
The Hula Hoop Controller was created specifically for a student with cerebral palsy who needed to work on gross motor coordination and targeted reaching. In his case, reaching above shoulder level. Katie wanted more creative ideas to help him with this work. She was thinking about how much he loved race cars and wondered if she could create something with a hula hoop that would help him work on his goals like improving his range of motion and control his movement patterns?
]]>TIMING{;}
45 min
---
GRADES{;}
5th-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Introduction |
Each sensor you build with Makey Makey can also be used with these special devices called "microcontrollers". This project is an open-ended way for you to play, create, and tinker with creating your own handmade sensors out of everyday stuff. As a start we are making a tilt sensor we will use as a joystick, but that is only the start! Once you build your fist sensor a whole new world of ways to physically interact with your computer will open up to you. All it takes is time, some recyclable materials and an open mind. This activity requires you to dig in and build something. Though the list of tools and materials is short, there are a few specific things that you will need... Tools
Materials
Need Supplies? Time to Get Resourceful!Maybe you want to make your project bigger, more refined, or use this idea with a bucket rather than a cup. All awesome ideas and we totally want you to play with the materials you have on hand. You may have noticed that not all of the materials above are included in our kits! That is OK and intentional; we want you to be resourceful and use materials that you can find at home, in the classroom or even out of a dumpster! It’s great to know this ahead of time so we recommend thinking about creating a stockpile of materials when you find them. We recommend holding onto the following materials / items when you find them…
|
|
What is a Sensor? |
What's a Sensor?Sensors and microcontrollers power and control much of our digital lives. But what is a sensor? And what is a microcontroller? To put it simply, a sensor is an input device that senses something (light, motion, sound) and makes it useful within a system. That system can be something as simple as an alarm clock or a toaster oven, or as complicated as the break system in a car or the life support system on the International Space Station. To simplify the idea of a sensor we can think that electronic systems are a lot like us! Let’s take a brief look and we hope it will help you further your understanding of what a Makey Makey does and how you can expand the complexity of your projects by building and adding sensors to it. Just like us, most electronics have a nervous system. You have probably learned about a circuit and that they can be compared to our nervous system… It's our wiring that connects our inputs and outputs to our brain. With that information our brains make decissions and react accordingly. Let's see how this plays out in our comparison to electronics! SensorsSensors are like our 5 senses. We have smell, sight, hearing, touch and taste. That is how we measure the world around us. Light is measured with our sight, temperature with skin and sound with our ears. All of those senses have a range of value that our body measures; a degree of hot or cold as an example. But, our skin doesn’t make the decision that it is really hot and it's time to go get a drink of water or that something is too loud and we need to cover our ears, that is done by our brain. Our brains use our five senses to measure more complicated things. A great example is that we can feel the temperature getting cooler outside and see a dark cloud on the horizon. Both of those pieces of information on their own mean little to us, but by combining them with our experiential knowledge of weather, or brain takes that information and tells us that a storm is coming. In the same way digital electronics use sensors to collect information and then logic or a decision making process is programmed into its brain... the microcontroller. A MicrocontrollerBut what the heck is a microcontroller? Microcontrollers are tiny little computers that have very specific functions; a simple brain in our illustration. Most microcontrollers unlike our brains are programmed to do a single thing over and over again. Microcontrollers are all around us and are what drives and controls electronic devices to make decisions based on sensor inputs and react with specific outputs accordingly. Someone designed those systems and programmed the microcontroller to react in specific ways to given inputs from sensors. Your thermostat in your home is a great example. You set a temperature you want it to be, which is an input from you. The thermostat then periodically takes the temperature of the room and then controls your furnace to turn on when it is colder than that temperature or turn off when it is higher. A Makey MakeyYour computer mouse has a microcontroller that probably uses a laser to sense the direction you are moving the mouse. A handheld calculator has a microcontroller chip inside that tells it how to behave like a calculator. If you look at the back of your Makey Makey circuit board, you’ll see a tiny black blob of plastic. Under that blob is a microcontrollersquare with silver legs that resembles a bug. THAT IS THE BRAINS OF YOUR Makey Makey! This little microcontroller tells your computer that you’ve plugged in an external keyboard. The Makey Makey board has 6 “inputs” on the front that function as your computer keys. When an EARTH is connected to a key press input, you complete a circuit.The microcontroller sees that that circuit was completed and responds by telling the computer that you pressed that specific key. Since Makey Makey allows you to tell your computer that everyday stuff is now your computer keyboard, you can “make” any conductive thing (like a banana) one of your computer “keys.” That’s why it’s called a MaKey MaKey! You can think of the Makey Makey as a computer's version of your sense of touch. When someone touches your hand, you respond in some way. The computer just responds by interpreting that as a space bar rather than a high-five. Sensors for Makey Makey!There are hundreds of different sensors out there and people use then with a lot of different microcontrollers like Raspberry Pi, Arduino, and Micro:bit, but with a bit of ingenuity you can actually create your own sensors out of simple materials to use with any of these boards. In fact we want to let you in on a little secret… Many seemingly “advanced” sensors are just engineers being clever with the idea of a switch or series of switches. Many of our kits and projects will help you get inventive by creating switches, motion sensors, weather sensors, and more! Go, be clever and build your own sensors!
|
|
Building a Tilt Sensor |
As a first experience for building a more advanced sensor we will be building a Joy Stick that is a two axis tilt sensor that completes circuits based on you tilting it left, right, forward or backwards. If you strip away all of the plastic this is a similar way that many motion control game controllers work. Sweet! Let's jump in... The first step to making your 2 axis tilt sensor is to create one conductive pad for EARTH in the base of your yogurt cup. Take a piece of foil and place your yogurt cup on top to trace the bottom and make an EARTH conductive touch pad that you will place inside the yogurt cup. Use a gluestick to adhere the foil to the bottom of your cup. Place the ball inside and make sure the EARTH touchpoint does not come up on the walls of the cup. In the next step, you’ll use tape to create conductive touchpoints. The metal ball will bridge the tape touchpoints to EARTH and complete the circuit. To make your X and Y axis you need to place four pieces of conductive tape from the inside of the cup to the outer rim. Make sure your tape comes close to your EARTH touchpad, but does not touch it. (Otherwise, you’ll already be closing that circuit!) Make sure to place your tape at 0 for up, 180 for down, 90 for right, and -90 for left. Place the tape near EARTH (but not touching) and use your thumb to press the tape smoothly against the wall of the yogurt cup. Then wrap the tape around the edge and cut the tape. Use the metal thumbtack from your kit to press through the EARTH touchpoint so you can clip an alligator clip on the outside bottom of the cup. Plug an alligator clip from the up arrow to the tape placed at 0 , Place the left arrow alligator clip to -90, the right arrow key alligator clip to 90 and the down arrow key alligator clip to 180. Now plug in your Makey Makey and put a metal marble into your cup! Will the marble connect the EARTH touchpad to each tape connection? Make sure there are no short circuits and get ready to roll some music! Open the NEW Piano app and try your connections and use your controller as a funky instrument. As the ball rolls, it should make contact with the EARTH input and tape inputs to play musical notes! Open the New Piano App! |
More App Ideas and Troubleshooting |
The Makey Makey Piano App may be a quirky way to play music, but after a bit, you probably could think of a hundred better ways to do it. So, we set about thinking of a good app that the Tilt DIY Joystick would be fun and interesting to use with and we came up with our own Etch-a-Sketch style app called Make-a-Sketch! The Makey Makey Make-a-Sketch App is designed to work with Makey Makey right out of the box. The left and right knob controls are set to the Makey Makey LEFT and RIGHT as well as the up and down knob controls set to the UP and DOWN keys on the Makey Makey. So, your Joystick controls should work right away. If you want to get fancy (which we hope that you do!) you can open up the control panel by clicking on the lock button in the upper right of the app and change the pen thickness and the color of the pen as well. To reset (shake) your drawing, press the spacebar. Now, go draw the Mona Lisa with your new DIY Controller and show it off to your friends… Doodle on the NEW Make-a-Sketch App!
We hope that this fun DIY joystick controller inspires you to build other DIY senors and think outside of the box, or in this case outside of the cup when it comes to using Makey Makey to create your own custom game controllers. TroubleshootingWhen you build your own sensors they don't always work the way you think they may right away. If you are having troubles with your DIY sensor here are a few tips from us...
Going to the Next Level!Now that you created your own DIY sensor with Makey Makey, you can start building your own inventions or other sensors! When we learn how things work so we can make new things, we call this Invention Literacy. Makey Makey was created to help you see the world as a construction kit! One of the coolest things about Makey Makey is you can use it to prototype new inventions and ideas. What is a prototype? It's like a rough draft of an invention. Since you can use everyday items from around the house to create inventions, Makey Makey is a great way to make a rough draft of an invention idea! Each draft of your invention is called an iteration. Here are a few ideas and other projects that can help you iterate on this project and bring your ideas to the prototype stage...
|
|
SUBTITLE{;}
Our hope is that you build custom sensors and inputs with Makey Makey using everyday materials to emulate sensors you find in different goods and products around you. Better yet, we want to inspire you to invent something completely new and innovative!
]]>TIMING{;}
30 min
---
GRADES{;}
3rd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Step One: Get Grounded |
Let's get started with Makey Makey! Visit the digital Makey Makey bongo page. This is a simple website that creates bongo sounds by pressing either the spacebar and/or the left arrow on your keyboard. Check out the sounds and see how it gets boring to play bongos on your keyboard. This is our norm, baseline, or starting point- a computer-based bongo playable by pressing the space bar or left arrow.
Demo 2 - Touch (Human Earth)Plug your Makey Makey into a computer and watch the green LEDs blink near each input. Hold it at the bottom of the board where it says “Earth.” Notice in the demo, we are holding the bottom silver row marked EARTH. This is deliberate. With your other hand, touch the space and left arrow contact on your Makey Makey to drop a beat. This happens because you are a conductor, not a person in a suit waving a wand in front of a bunch of violins. A small electrical signal is carried through your skin to connect the Earth and the contact you are pressing (space or left arrow). Now we have used the Makey Makey to recreate what our keyboard did. Demo 3 - No Earth? Doesn’t Work!Now place the Makey Makey on a table. Touch the same contacts. Nothing will happen. Discuss how this is because you are no longer touching the Earth row. Your body is no longer carrying a small electrical signal from an input to the Earth row. With one finger, touch the Earth row. With another finger touch and input. Observe the relationship between your body connecting Earth and an input. You are a wire- a conductor!
Demo 4 - Wired EarthConnect an alligator clip wire anywhere on the Earth row. Now tap the opposite, empty end of the alligator clip against the space or left contacts. Make sure the metal part of the alligator clip is touching, not the plastic. With each tap, you should see a green light near that input turn on and hear a bongo sound.
|
|
Step Two: Get Wired |
Demo 5 - Wired Input (Thing Earth)Connect an alligator clip wire to the space or left arrow contact. Show everyone how when you touch the metal parts of the alligator clip to the one connected to the Earth row, it makes the bongo sound. You might need to wiggle the plastic cover back to expose more of the metal end.
Demo 6 - Team Bongo (Human Earth)The demonstrator should hold the metal end of the alligator clip connected to the Earth row. Ask a volunteer to hold the metal end of the alligator clip connected to space or the left arrow. Now high-five each other You are a switch! The electrical signal is passing through both of your bodies and completing the circuit. You are the conductor (electronically and musically speaking) and the air in between both of you is the insulator.
Demo 7 - Conducting ElementsGrab a paper clip with your alligator clip. Now you have added a conductive element to your circuit. When you touch the paper clips, the bongo plays. Switches are made out of conductors (like the paper clips) connecting and disconnecting. This is what happens inside a light switch, two metal pieces connect and disconnect.
Demo 8 - Making Contact (Human Earth)Slide two paper clips next to each other on a piece of cardboard. Make sure they are close, but not touching. Connect an alligator clip to each paper clip. Now anything conductive that connects the two paper clips will trigger the Makey Makey. This can be a human hand, foot, or arm. It can be an item that is conductive like some grass or a wet paper towel (it doesn’t need to be dripping wet—wring it out first). See this post on conductors and insulators for more ideas.
This is how the switches on most circuit boards function. Conductive contacts lay next to each other. A conductive object is lowered on top to complete the connection. This is how keyboard keys, remote controls, and gamepad buttons work. The conductive object being lowered with each press is usually a flexible rubber membrane. A button pushes the rubber membrane down and this is what triggers the contact. Demo 9 - Non-Conductive Object TriggersNow tape a paper clip to the bottom of any object. Use two pieces of tape and just cover the paper clip at the tips so that as much of the paper clip as possible is not covered with tape. Place the object on top of the stretched paper clips so the taped paper clip touches both of the stretched out paper clips and completes the circuit. Many insulators can be used to trigger a Makey Makey switch if you add a conductive element, like a paper clip or aluminum foil, to them. Demo 10 - Push Switch (Thing Earth)Remove both paper clips from the cardboard. Open one paper clip so it makes a V shape. Insert the smaller loop into the corrugation on your cardboard. The larger loop should not rest above the cardboard at an angle. Slide another paperclip on the cardboard so it is under the V shaped one. Connect an alligator clip to each paper clip. One should connect to space or the left arrow on your Makey Makey. The other should connect to the Earth row.
Now if you press down on the bent paper clip, it should lower and touch the other paper clip below it. This connection should trigger a Makey Makey bongo sound.
Now you are ready to make a People Piano! |
Step Three: People Piano |
A Makey Makey is a bridge between the digital and physical worlds that allows anyone to become an inventor. Today, we challenge you to invent a piano with your friends! One friend will be EARTH also known as the piano player and the other four friends will be piano notes. You will hold EARTH to be the piano player, then have each friend hold an alligator clip associated with a piano key. Have them hold out their hands and when you tap their hand, the piano notes will play! |
|
SUBTITLE{;}
]]>
TIMING{;}
30 min
---
GRADES{;}
3-8
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Vocabulary and Building an Experiment |
Invention Literacy Vocabulary: A conductor is any item that allows electrons to flow through it with little effort. If an item has any conductivity, Makey Makey will detect it. Most metals are great conductors! Pure water is actually an insulator, once water comes in contact with things like salt, humans, etc, it becomes contaminated. Because of this, free ions in water are what make water conductive. Conductivity is changed by humidity and temperatures. An insulator is any item that does not allow electrons to flow through it. Things like masking tape, hot glue, paper, are insulators that do not allow electrons to flow Prototyping is the first step to inventing. A prototype is an early or beginning model of an idea (generally an invention.) Inventors prototype ideas to test the concept of their inventions. If a prototype is still buggy or doesn't work right, an inventor will create another version of their idea. Iteration is the next step of prototyping. An inventor will continue to draft and rework their ideas by making more versions or iterations of a design idea. Once you start inventing, you'll want to make multiple versions of your idea to make sure you have a successful prototype or invention idea! Build a Testing StationYou've had some hands-on experience with Makey Makey. However, you can use all kinds of items for inventing with Makey Makey! You'll need to do some experimenting to see what items are conductive. Did you know everything in this world is either a conductor or an insulator? In this lesson, we experiment with all sorts of objects to find out what is conductive so you can start designing your own inventions. Here is a quick example of what your finished experiment will look like. Now grab some foil and a piece of cardboard and let's make your own "Is it Conductive?" testing station! Make sure to the “Is it Conductive?" Make sure to print out your t-chart, or make your own chart on paper so you can record what is conductive and what is an insulator. Test an item by laying it across the conductive tape traces. If it is conductive, the game will tell you! Sometimes, it helps to use a plastic ruler to press down on the item so you don't accidentally set off the conductive radar with your hands! Label the item in your t-chart as you test them! Link: Is it Conductive?Discussion Questions:
|
|
Conductor or Insulator? What's the Difference? |
A Little Science Behind Makey Makey Makey Makey is a resistive touch board that means it is programmed to sense when an item is conductive. An item that is conductive is a material that allows electrons to flow, while an insulator is a material that does not allow electrons to flow. The Makey Makey is also programmed to send a signal to your computer when you complete a circuit that you've pressed a computer key. Try using the Makey Makey to be your SPACE key like in this image!
Invent an Alarm Challenge!Your journey to inventing begins here! Now that you know how to craft a circuit and how to test items with Makey Makey, you can start building your own inventions! When we learn how things work so we can make new things, we call this Invention Literacy. Makey Makey was created to help you see the world as a construction kit! One of the coolest things about Makey Makey is you can use it to prototype new inventions and ideas. What is a prototype? It's like a rough draft of an invention. Since you can use everyday items from around the house to create inventions, Makey Makey is a great way to make a rough draft of an invention idea! Each draft of your invention is called an iteration. Head to the next guide to invent your own alarm! |
SUBTITLE{;}
Makey Makey works by alligator clipping into everyday things that have some conductivity. When you hook an alligator clip into a banana and you hold an alligator clip connected to EARTH, you are actually the conductive stuff that closes the circuit and makes Makey Makey work!
But what materials can we use with Makey Makey besides bananas?
What does it mean for an item to be conductive? or an insulator? or even a resistor? Let's set up a simple experiment to find out!
In this lesson, you will make a conductivity testing board to test items for conductivity; learn that everything in the world is either or conductive or an insulator; and start to ideate inventions with everyday stuff you can find in your home.
]]>With our new plug and play alarm app, you can spend your time inventing your physical alarm trap!
Up until now you've learned how circuits work and explored Makey Makey. But now let's go further by exploring the switch concept. Switches are a simple type of sensor. Sensors and microcontrollers power our world. But what is a sensor? And what is a microcontroller? And how do they work together? Let's get started! And invent a sensor to trigger an alarm!
]]>TIMING{;}
30 min
---
GRADES{;}
2nd- 12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Sound the Alarm! |
Today you are going to invent an alarm system! To do this, you will build a sensor that activates our alarm app. When you connect a sensor to a Makey Makey, you can detect specific types of information and adjust what you want the output to be with the code that you create. For this project, we did the coding and created an alarm, but you get to decide how the alarm will work.
Momentary Switch Doorbell or Door AlarmBefore we invent our own alarm system, let's create some simple switches first! Vocabulary: A switch is a component that requires a physical action to close a circuit. Just like the keys on your keyboard! A Switch can be momentary or maintained. Let’s make a momentary switch first. This means the switch will only be “on” as long as the switch is actuated. Normally a switch is an open circuit until it is actuated. Meaning the circuit is open until you push the switch to activate it. Just like a keyboard button, or a calculator button. You can also easily make a maintained switch with office supplies. A maintained switch remains on once you turn it on or off once you turn it off. Just like a light switch in your house. The best way to learn about switches to make a few different types. First let's build a doorbell with paperclips and brass fasteners! Put two brass fasteners through a small piece of cardboard. Place a paper clip on one fastener, and bend it so it doesn't touch the other fastener. Clip SPACE to paper clip fastener and EARTH to the other. When you press the paper clip to the second fastener, you close the loop and complete the circuit. This switch most resembles a keyboard key or a morse code machine! Plugged into our alarm app, this will sound the alarm that the doorbell has been triggered! What other type of trigger could you build that would be actuated when someone presses on or steps on something? And what purpose will your alarm serve? Brainstorming and Testing Alarm SystemsDesign considerations:
In this video below, you can see how you could wire up your momentary push button as a doorbell outside your door. I used a phone with an adapter so I could leave the Makey Makey behind the door. To transform the doorbell into an alarm, I used a wire coat hanger (make sure you sand off coating to expose the metal if you use a coat hanger) hung it above a door and connected the coat hanger to the "Up arrow" on Makey Makey. On the door, I placed a strip of HVAC tape connected to "EARTH" on the Makey Makey. This alarm is triggered when someone opens the door as the coat hanger closes the circuit when it touches the aluminum foil strip. Also, the coat hanger is held with a binder clip to allow for movement! (Make sure to ask your parents before using any thumbtacks or applying tape to walls or doors in your room! )
|
Maintained Switch Alarm |
What if you want an alarm that is always set and will blast when someone opens the box that holds your precious goods? You can make a simple maintained switch by clipping EARTH to one binder clip and SPACE to another. When the two binder clips touch, the circuit is closed and complete! When you separate the binder clips, the circuit is open once again. Get more cool ideas like this from Scrappy Circuits! You can use these same switches to light up LEDS. Plus, the folks at Scrappy Circuits have even more cool ideas for building switches out of scrappy everyday stuff! This switch is more like a light switch (which is a toggle switch) it comes on when you flip it and off when you turn the switch to "off." That means a light switch works by closing a circuit to turn on the light when you flip the switch one way, and turns it off (opens the circuit) when you flip the switch the other way. Design considerations:
|
SUBTITLE{;}
With our new plug and play alarm app, you can spend more time inventing your physical alarm trap since we took care of the coding on this one!
Up until now you've learned how circuits work and explored Makey Makey. But let's go further by exploring the switch concept. Switches are a simple type of sensor. Sensors and microcontrollers power our world. But what is a sensor? And what is a microcontroller? And how do they work together? Let's get started! And invent a sensor to trigger an alarm!
]]>TIMING{;}
30 min
---
GRADES{;}
3-10
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Makey Makey Buzzer App
This app is designed to emulate a game show style buzz-in system. The “host” or leader of a game can “start” a session and then each individual participant can “buzz-in” by pressing the key assigned to them. In this guide, we'll share a few different devices you can invent with your Get Up + Go or Craft + Code booster kit! Colorful BuzzersThese colorful buzzers are quick and easy way to create a quiz show device! Simply cut foil and connect foil alligator clip to Makey Makey inputs. If you want some distance, use the wire in our Get Up + Go booster kit to extend your connections to be as long as you want! Cut foil to place on a colorful square. Make sure to use the conductive tape in the booster kit to attach the desired length of wire to the foil. (Note: The outside of the wire is insulated, so you have to strip the end of wire to make sure the conductive metal touches the conductive foil!) Simply alligator clip to the exposed wire to connect this blue buzzer to your Makey Makey kit.
If you don't need length, you can use the conductive tape from your booster kit to create a clippable spot for your alligator clip. Alligator clip directly to the tape to connect this green buzzer to the left arrow on your Makey Makey. Now you are ready to connect to our buzzer app! Scroll down to learn how to adjust the buzzer app for more (or less!) touch points! Note: With this build, your Quiz show participants will still need to hold EARTH to activate the colorful buttons. The extra long alligator clips in the Get Up + Go booster kit are a great solution! Make sure your Quizzers are holding the metal on the alligator clip. Display your Quiz and then get ready to see who will end up on the leaderboard! |
|
Slap Hand Buzzer |
This is another fun Quiz Show device you can build with foil as your conductor. Simply trace your hand on foil and cut it out. To make sure quizzers don't have to hold EARTH, you can cut the hand in half and then gluestick the two pieces of foil hand to the paper, make sure the two halves of the hand do not touch. This will create two touch points. Use conductive tape to extend to the your connection so you can alligator clip on the edge of the paper. Clip one half of the hand to an input on the Makey Makey (Left/Up/Right/Down/ Space or WASDFG) and connect the other half of the hand to EARTH.
Now your handy device has a key input connected to Makey Makey and an EARTH input connected to Makey Makey. The insulator is really the gap between the two conductive touch points. The quiz show participants will bridge the gap when they slap their hand over the foil hand! In our design, we made a foil EARTH in order to only clip one alligator clip to EARTH. You can make an EARTH bar like we did or clip multiple alligator clips to EARTH on the Makey Makey.
This is handy device is also a great build forour counter app!This is also a great build for making a voting machine, exit ticket, or whatever you want to tally or count! We had a teacher during a workshop use the counter to have students vote on their favorite snack! We've seen librarians use our counter app to track the amount of students by grade level that come into the library during the day. There are tons of great ideas for this application! |
Slap Switch |
You can also build a sturdier switch by making a slap switch. (We were inspired by John Lynch's slap switch design here.) You just need cardboard, foil, brass fasteners and conductive tape. Cut the foil in whatever shapes you like; we modeled foil after the shapes in the buzzer app. Glue stick the two pieces of foil to your cardboard and make sure the two pieces do not touch. Use a brass fastener to poke through to the back side of the cardboard. You could alligator clip directly to the brass fasteners, but to make our design a little more sturdy, we used conductive tape to extend our connections so the alligator clips can clip directly to the edge of the cardboard. Plug one conductive point to a key press and the other touch point to EARTH. As with the handy design above, the two points are insulated by air (and cardboard) and when a hand slaps down it will bridge the gap and close the circuit! |
Buzzer App and Building a Quiz Show |
Now that you have your devices built, you can plug your Makey Makey in and start your quiz show with our Buzzer app! Simply display your questions and let the fun begin! AdjustmentsYou can adjust the amount of buzzers in the control panel to start making adjustments. If you want to change the key presses on each buzzer device, just click on the desired shape and changing the trigger key.
Press the space key to activate the buzzer and see who buzzes in first! Go to Buzzer App!There are multiple ways to display your quiz show questions! You could display a Google Slide, host your quiz in Mentimeter or use Quiz Maker to display pictures as answers! Making a Quiz for Whoosh on Quiz MakerYou could build all kinds of amazing devices for quiz shows! You could even use our infamous stomp switch to have participants jump to buzz in first!
|
|
SUBTITLE{;}
Want to make a Jeopardy-style quiz show for your classroom or maybe have a trivia night at home? With our new Buzzer App, you can easily build your own custom switches. Our app does all the work to see who buzzed in first!
]]>TIMING{;}
30-45 min
---
GRADES{;}
2nd- 8th grade
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Literacy to Inspire Making |
In this guide, you will use a picture book to inspire your making! Read Doll-E 1.0, then dig through your pile of spare parts to create your own talking creation. After building, you'll create a soundbites in our Sampler App to increase your creation's database. So the first step is to read Shanda McCloskey's Doll-E 1.0 book! |
|
Create a Spare Part Invention |
You’ll be creating a doll/robot/invention out of spare parts using conductive and non-conductive materials. (Non-conductive materials are an insulator) Now you have some design decisions. How do you want to program your creation? How do you want to trigger the creation's sound effect? Did you know that your spare part invention could also be called a bricolage artwork? (It sounds like "brick-o-lazh.") bricolage
You need to make sure you will have 4-5 conductive spots on your doll that are conductive that you can activate by touching or closing the switch. You can make your creation look like a robot, animal, or whatever you'd like it to look like! You'll be attaching your Makey Makey to the conductive parts of your robot with alligator clips.
Or you could make a conductive paper circuit sidewalk for your doll/robot by putting conductive tape or foil on a cardboard. You could make multiple inputs this way similar to making a piano on cardboard. When you place your doll/robot on the track, the Sampler will be triggered. (Make sure the conductive spots will bridge the gap otherwise, it will not trigger Sampler)
You will give a voice to your invention by recording your own sound bites in the Makey Makey Sampler app. |
|
Write your database |
In your inventor's notebook (or on the printable), write a list of sayings you would like to add to your doll's database. (The funnier the better!)
Download this template for your students! |
|
Step Four |
You can record your voice samples in our Sampler app and connect straight to Makey Makey for a plug and play experience! Make sure to read your sound bites with enthusiasm! Click on the microphone to record a soundbite. Make sure to allow access to your microphone. Press and hold to record. (You have a limit of five seconds) Let go when you are done recording.
Press to test your sample, and click on the sound wave to trim.
Name your sample and save it to the library. (It will only be stored for this session, so if you like all your recordings and want to use them again. Make sure to export your sample pack once you have all your samples recorded and placed on the sampler. (Video tutorial) Place all your sound bites on the sampler where you want each Makey Makey input to play.
Then Export your sample pack. Save the exported sample pack to your drive or Google Drive and then you can upload your sample pack when you are ready to plug it to your creation.
|
|
Hook up to Makey Makey |
Hook one alligator clip to the SPACE input on your Makey Makey and another alligator clip to an EARTH input on your Makey Makey. Clip one alligator clip to one conductive spot on your doll/robot and the other alligator clip to the another conductive spot. Create multiple activation points by adding more conductive spots on your creation and alligator clip to the arrow key inputs on Makey Makey |
Play and Share! |
Share your creation with your friends! How did they make theirs? What other way could you trigger your sound effects? Could you add more inputs? Keep playing and learning! |
|
SUBTITLE{;}
In this guide, you will be inspired to make your own creation after reading Doll-E 1.0. Then you'll create soundbites to add to your doll's database using our Makey Makey Sampler app.
]]>Did you know that pencil lead is conductive even though the wood surrounding a pencil is not? (Check out Drawdio a cool invention Jay Silver made with a pencil before Makey Makey!)
Since pencil lead (also known as graphite) is conductive, that makes pencils and drawings a really cool material for inventing with Makey Makey!
In this project, you will make four drawings that tell a story, hook a Makey Makey up to it and use it with a few of our audio sampler apps to let the paper tell the story for you!
]]>TIMING{;}
30-45 min
---
GRADES{;}
3rd-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Drawing Circuits |
Did you know that pencil lead is conductive even though the wood surrounding a pencil is not? (Check out Drawdio a cool invention Jay Silver made with a pencil before Makey Makey!) Since pencil lead (also known as graphite) is conductive, that makes pencils and drawings a really cool material for inventing with Makey Makey! In this project, you will make four drawings to tell other about you, hook a Makey Makey up to it and use it with a our poster app to let the paper do the work for you! Pencil ExperimentYou may not have realized until just now that there are different types of pencils that are classified by the hardness of their lead. Are all types of pencil leads conductive? When presented with a question, the best thing to do is test and explore possible answers to that question. Follow along with this video to test different pencil types. |
|
Draw a Self Portrait |
To tell others about you, create four drawings on one piece of paper. To work with Makey Makey, you'll need to follow some basic guidelines.
Once you've created your drawings, test them out with our piano app and make any adjustments needed!
|
|
Recording Sound Bites and Taking Pictures in Poster App |
Now you are ready to create your own images and soundbites for your unique interactive poster! Go to https://makeymakey.com/poster Full Tutorial in adding images and soundbitesYou can take photos with the app, or search for creative common images to add to your poster. To add your own sounds and images, make sure to allow accept permission to use your camera and microphone. To add a sound or visual to a key press, select a key, click on the corresponding button. You can also select the keypress you want by using your Makey Makey! On the right side you have a visual creator and an audio creator. With a keypress selected (the selected keyboard key turns yellow when selected), click on the upload arrow in the visual creator to add a web, jpg, png, or gif file. Or click on the audio creator to upload a wav or mp3 file. Make sure to allow the app to use your camera and microphone. Once you've uploaded a photo to a key press, you will see it in the visual creator on the right hand side of the screen. Make sure you've enabled your microphone and hold the button to record sound, just like in our Sampler app. With your sound and image uploaded, now when you hold down the up arrow key, the picture and sound you added will display in the screen area. Add up to 18 images and sounds. When you have all of your images and sounds mapped, you can click the download arrow in the center of the screen to export the entire poster and re-upload as needed. If you want to add more inputs and you have our Makey Max backpack you will want to r remap your Makey Makey. Here is a guide on how to do that. |
Adding Gifs to KeyPresses |
You can add a GIF as your image, to give your poster an even more unique experience! With a keypress selected (the selected keyboard key turns yellow when selected), click on the upload arrow in the visual creator to add GIF. Now when you press that key input, your GIF will play.
|
|
SUBTITLE{;}
Create a self portrait that will talk for you! Create four drawings (a self portrait or things you like!) and alligator clip each drawing to Makey Makey so you can add images and sound to each drawing with our Interactive Poster App.
]]>To start inventing your own controller, let's create both a divergent (or different than normal) d-pad controller with Play-doh and then craft a scrappy joystick with paperclips!
After creating a few examples, you will be challenged to invent your own controller like Mr. Fogle's class!
]]>TIMING{;}
45 min
---
GRADES{;}
2nd-10th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Joystick History |
Joysticks were first used as controls for aircraft in the early 1900s. In the late 60s Sega introduced a two way joystick. By 1973, a four way joystick was released by Taito as part of an arcade racing game! The classic Atari joystick with a single button wasn't released until 1977. Shortly afterward in the mid 80s, Nintendo's d-pad became the standard game controller! To start inventing your own controller, let's create both a divergent (or different than normal) d-pad controller with Play-doh and then craft a scrappy joystick with paperclips! After creating a few examples, you will be challenged to invent your own controller like Mr. Fogle's class! |
|
Play-doh D-pad |
Create four contacts with Play-doh to control your soccer player moving up, down, left, and right. To keep your alligator clips clean, consider clipping to a paper clip and pushing the paper clip into the play-doh. Attach Play-doh Dpad to Makey Makey
Test your controller with the Makey Makey Soccer app. |
|
Craft a Scrappy Joystick |
(Note: This is an adapted build from Michael Carroll's Scrappy Joystick) To recreate an 8 point joystick you are going to create a joystick that is able to move by using a paper clip! You will also use paper clips as the conductive inputs for each directional input. Unfold the small end of a paperclip to a 90 degree angle from the large end of the paperclip. This will be our joystick base. Poke this through a 3"X3" square of cardboard. (Use a pencil if you need to pre-poke a hole!) Place tape over the large end on the bottom of the cardboard to stabilize your joystick. Take a 3" X 3" piece of cardstock and roll it up to be your second layer of joystick. Use a pice of tape to keep it together. Place onto your paper clip base. Use a 4" by 4" piece of foil. Roll the cardstock with the foil. You will have extra left over the end. You need it for the next step! Place the foil covered cardstock onto the paper clip joystick base. Take the extra end of foil off at diagonal to the corner of your cardboard. Alligator clip to the foil to create an EARTH connection. To make your directional inputs, take four paper clips and bend the larger end away from the smaller end at about a 90 degree angle and push the small end into the cardboard.
Fold paper clip in and mold the end so it is rounded and there is more surface area for your foil joystick to make contact. Plus into the soccer app and test your input!
Repeat fo the other 3 sides and test your joystick with the Makey Makey Soccer App.
|
|
Invention Challenge |
How does playing the same game with different controller types change the experience of the game? What other ways could you alter the size, materials, and locations of inputs to make a diverse controller? It's time for you to invent your own controller!
Follow this design cycle to create your invention. Test your idea with others and share your divergent controllers with us on social media! (Make sure to ask for parent permission if you are under 18.) Here are even more custom controllers to inspire you from AlexVsCoding! |
|
SUBTITLE{;}
In this guide, you will make a few different types of joystick game controllers and then be challenged to design your own invention!
]]>TIMING{;}
30-45 min
---
GRADES{;}
3-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Remap Makey Makey Mouse Controls |
For this project, if you want to use 18 inputs, you will remap the mouse controls on the back of Makey Makey to numbers 1-6. When you attach the Makey Max Backpack after remapping, the mouse controls will now be numbers 1-6. Download your own Remap WorksheetMake sure you have a Makey Makey of 1.4 or higher to use with the Makey Makey Backpack. (You can remap 1.2 or higher and use jumper wires if you do not have the Makey Makey Backpack bundle)
Follow the illustration on the remap page to place alligator clips. One clip from the up arrow to down arrow and one clip connected from the left arrow to the right arrow. This will put Makey Makey into a remap state.
Once you are in the remap software, hold EARTH and move the cursor on the page by pressing the arrow key inputs on Makey Makey. When you get to the mouse header section, press click, then navigate to change the top mouse input to the number 1. Repeat until you've changed all of the mouse inputs to the numbers 1-6.
Make sure to save your settings!After all keys are remapped, click the down arrow and tap SAVE to maintain the remapped keys. Until you put Makey Makey into a remap state again, these inputs are now remapped to your new choices. You might want to label your Makey Makey so you remember that it is remapped! Once your Makey Makey mouse controls are remapped, you are ready to attach the Makey Max backpack. Align all pins on the backpack board with the headers on Makey Makey. Gently squeeze the boards together with even pressure, making sure all pins enter the corresponding holes. Test your inputs on Makey Max with the piano app, or open a document and see if pressing these inputs outputs the numbers 1-6.
|
Adjustable Piano App |
On the piano app, click on the lock in the control panel to make changes. Then change the amount of inputs to 18 and adjust the scale type to Chromatic. |
Create Interactive Piano and Scale |
To make a physically interactive sheet music, download this printable piano and musical scale.
Then grab the brass fasteners and conductive tape from your Craft + Code Kit and let's make this paper interactive! Place brass fasteners through each musical note on the scale. Then fold brass fasteners down on the back side of the paper and place conductive tape from the fastener to the top edge of the paper. Add sharps to the physical piano, by drawing them in! Use your Makey Makey optimized pencil to fill in the black keys. Make sure to draw to the edge of the paper for the alligator clip to connect. Place a fastener through for each piano key. You can do this before the tape and make sure the tape touches the brass fastener for each note on the scale and the piano. Or you can use an exacto knife on the front of the paper to cut a small slit through the paper and tape. Then push a brass fastener though the piano note and through the tape. On the back side of the paper, fold down the brass fastener legs onto the tape to ensure a connection!
Test your inputs by placing an alligator clip in EARTH and testing each mouse movement to see if they are correctly remapped to the numbers 1-6.
Test Keys and ScaleClip all of the arrow key inputs on the front of Makey Makey and then clip WASDFG and numbers 1-6 on Makey Makey Max according to how you've set up your piano on the piano app.
Alligator clip to the max!Now you are ready to test out your full scale piano! What musical masterpieces will you invent?
|
|
Extensions |
|
|
SUBTITLE{;}
Did you know you can get a full scale #piano with your #MakeyMakey invention kit? Use the ##MakeyMaxbackpack to plug and play all the inputs on your next musical invention! #STEM #STEAM
]]>TIMING{;}
30-45 min
---
GRADES{;}
3-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Interactive Piano and Scale |
Inspired by InstructablesWe were blown away by this Instructable by Lina Maria: Teaching Music, a MUSIC SHEET That Actually SOUNDS!
Check out this Instructable:Teaching Music, a MUSIC SHEET That Actually SOUNDS!To make an interactive sheet music, first download this printable piano and musical scale.
Then grab the brass fasteners and conductive tape from your Craft + Code Kit and let's make this paper interactive!
Place brass fasteners through each musical note. Then fold brass fasteners down on the back side of the paper and place conductive tape from the fastener to the top edge of the paper. Place a fastener through for each piano key. You can do this before the tape and make sure the tape touches the brass fastener for each note on the scale and the piano. Or you can use an exacto knife on the front of the paper to cut a small slit through the paper and tape. Then push a brass fastener though the piano note and through the tape. On the back side of the paper, fold down the brass fastener legs onto the tape to ensure a connection! Alligator clip arrow inputs and SPACE key on front of Makey Makey to each corresponding piano key. Attach the Player 2 Backpack from the Backpack Bundle to plug and play the next six piano keys. Now that the Player 2 Backpack is attached, you can alligator clips the inputs WASDFG to your musical scale. Make sure the clips touch the conductive tape. This connects the brass fasteners on the piano key and the musical scale to that key press! Now you are ready to create a four bar musical masterpiece and play it with paper! Open up the Makey Makey Interactive Sheet Music App and start inventing music! |
Interactive Sheet Music App |
To use our Interactive Sheet Music App, use your mouse to place notes on the scale and use your interactive Makey Makey Piano and Scale to test out your four measure invention! |
Creating Your own Sheet Music |
Print out a blank Interactive Sheet Music template.Place conductive tape from one of our booster kits on the back of printed scale for each note. On the front side, attach alligator clips to each musical note and connect to Makey Makey. Draw where you want to place musical notes. On the front of the sheet music. Push brass fasteners through for each note you want to play.
Make sure to press the fasteners on the back so the fastener makes contact with the tape. (Also make sure it only touches each note you want to play.) Hold EARTH and touch each note to play the song! |
|
Extensions |
Can you create your own four bar musical masterpiece on our Sheet Music app? Write your own song and then you can generate a link by pressing the link icon!
|
|
SUBTITLE{;}
Imagine playing a piece of sheet music by actually touching the notes on the scale! Try out our new app (in beta) and this project to make your own tappable, playable interactive sheet music!
]]>TIMING{;}
30 min
---
GRADES{;}
4th-8th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Dream up Apple Dip Simulator |
We wanted to create a game to replace bobbing apples. But since apples have a waxy surface, we also had to think of a way to use apples to act like we are dipping them in caramel! Check out our solution in this video. |
|
Create a game in Scratch or MakeCode Arcade |
Ready to create a game in Scratch that works with this caramel apple dip simulator? Choose a backdrop, create an apple sprite, and code the apple to dip into caramel on a key press! Adding sound effects is optional, but a fun way to let your user know they've successfully dipped an apple! MakeCode ArcadeYou could also make this game in MakeCode Arcade! The code is a little more complicated, but you can click over to MakeCode Arcade and click "edit code" to see how to make your own game. Click the game to edit the code |
|
Play and Reiterate! |
Have others play your game and get feedback. What are some other ways you could build your simulator? What are other ways you could code this project? |
|
---
SUBTITLE{;}
A fun carnival game idea to replace bobbing for apples. A virtual caramel apple dip game using Scratch and #MakeyMakey !
]]>TIMING{;}
45 min
---
GRADES{;}
5-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Dig Dug Simulator and Coding in MakeCode Arcade |
You can make really fun simulators now with Makey Makey and MakeCode Arcade thanks to our new MakeCode Arcade extension! How do I use the Makey Makey extension?Head to MakeCode Arcade, in the drawers of coding blocks, you will find the Extensions drawer at the bottom of the list. Click the + Extensions to open the drawer and add the Makey Makey extension. You can search for "Makey Makey" or scroll for the extension. Just look for our logo! Once you've added it, you'll have a Makey Makey drawer that has two distinct blocks of code. What do the Blocks do?The easiest way to use Makey Makey with MakeCode Arcade is to add the "use makey makey default keys" block to the "on start" event block. Then you can build (or mod a preexisting game) and play this game with your own alt controller built with Makey Makey!
|
Dig Dug Controller |
Making a Dig Dug simulator is really fun and pretty easy! Cut 5 cardboard squares and one triangle. Cover them with foil. These will be your conductive touchpads. You will make an oversized dpad with EARTH in the center. The Player will stand on EARTH and use their feet to touch each dpad controller to move the sprite (aka character) in your uniquely coded game!
Since we are making Dig Dug, you will want to create a shovel and make the entire shovel conductive with foil and/or HVAC tape.
This will be your digging controller! When the shovel touches SPACE, your sprite will dig in the direction you are moving.
To connect each conductive touchpad to Makey Makey , cut 5 long strips of wire. Make sure to strip the ends so the wire is exposed. Connect one wire to each cardboard square covered in foil. Use conductive tape to create a strong connection.
Do this for all 5 square pads. Make sure the wire is securely taped to the touchpad.
Create a digging controller all around the dpad with HVAC or conductive tape. This tape trace will be connected to SPACE and will dig in the direction you are pressing with your foot. So if you are pressing the down arrow with your foot, you will dig down. To dig left, touch the left dpad arrow with your foot and touch the shovel to the tape trace. Since the player is standing on EARTH, the shovel will make a connection to SPACE when the shovel touches this tape trace going around your controller.
|
Coding Your Own Games: Code Ninjas Paddle Skedaddle |
We love this extension so much! Our friends at Code Ninjas made this rad game in Make Code Arcade called Paddle Skedaddle. Put the Extension to the Test with Code Ninjas. Fill out this form to "Explore A World Where Kids Write the Code!" You'll get to Treasure Hunting Game and you can learn to code your own project based on the Code Ninja game! |
|
SUBTITLE{;}
Keep scrolling if you want to make a super cool DIY controller with your kids! Build this project to make an oversized stand up Dig Dug Simulator with Makey Makey, foil, and cardboard.
]]>Wanna make something fun and wacky? Check out this kayak simulator with a pool noodle! Plug and Play with MakeCode Arcade!
The easiest way to use Makey Makey with MakeCode Arcade is to add the "use makey makey default keys" block to the "on start" event block. Then you can build (or mod a preexisting game) and play this game with your own alt controller built with Makey Makey!
]]>TIMING{;}
45 min
---
GRADES{;}
5-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Kayak Controller |
You can make really fun simulators now with Makey Makey and MakeCode Arcade thanks to our new MakeCode Arcade extension! To make this really fun kayak simulator you just need a few supplies! Kayak is optional! All you need is foil, a pool noodle, long wires, cardboard, and a Makey Makey kit. You can use a kayak, but you can also sit on a table, on the ground, or make your own cardboard boat! To make your pool noodle into a controller, wrap aluminum foil on both ends and secure foil with tape. Grab wire from the Get Up + Go booster kit and cut two long pieces. Alternatively, you can use the long wires in the STEM pack. Strip the insulation off both ends of the wire. Secure wire to the foil and make sure the exposed end of the wire makes a good connection with the foil. Use conductive tape across the wire to doubly ensure a connection! Don't leaves those wires hanging! Tape loose wire to the center of the pool noodle. Repeat this process for both sides of the pool noodle.
One side of the pool noodle will be connected to the LEFT ARROW input and the other side will be connected to the RIGHT ARROW.
To finish your controller, put foil on two cardboard pieces for EARTH. You will have one EARTH for the left side of your kayak and one EARTH for the right side. But both will connect to the EARTH rail on Makey Makey.
Connect Pool Noodle wires to the left and right inputs on Makey Makey. You can use the exposed end or you can add an alligator clip to the end of your wire. Almost ready to play! You can find an existing game, or code your own in MakeCode Arcade!
|
|
Use with Existing MakeyCode Arcade Games
|
To with Existing MakeCode Arcade games, you just need to add the Makey Makey extension and control your sprite "with buttons." How do I use the Makey Makey extension?Head to MakeCode Arcade, in the drawers of coding blocks, you will find the Extensions drawer at the bottom of the list. Click the + Extensions to open the drawer and add the Makey Makey extension. You can search for "Makey Makey" or scroll for the extension. Just look for our logo! Once you've added it, you'll have a Makey Makey drawer that has two distinct blocks of code. What do the Blocks do?The easiest way to use Makey Makey with MakeCode Arcade is to add the "use makey makey default keys" block to the "on start" event block. Then you can build (or mod a preexisting game) and play this game with your own alt controller built with Makey Makey! |
Paddle Skeddaddle from Code Ninjas |
We love this extension so much! Our friends at Code Ninjas made this rad game in Make Code Arcade called Paddle Skedaddle. Put the Extension to the Test with Code Ninjas. Fill out this form to "Explore A World Where Kids Write the Code!" You'll get to Paddle Skedaddle and you can learn to code your own project based on the Code Ninja game! |
|
SUBTITLE{;}
Wanna make something fun and wacky? Check out this kayak simulator with a pool noodle! Plug and Play with MakeCode Arcade!
The easiest way to use Makey Makey with MakeCode Arcade is to add the "use makey makey default keys" block to the "on start" event block. Then you can build (or mod a preexisting game) and play this game with your own alt controller built with Makey Makey!
]]>Having a large STEAM day event at your school? This sensory maze is a super fun project to get your students excited about Makey Makey! Fraser Mckay created a guide for making a roll-up Makey Makey maze that really inspired me because of the portability and sustainable aspect of it, and I thought it would be great to mash up with sensory paths I've seen schools putting in hallways to help fidgety students with concentration.
For this project, you are designing and creating a sensory path for two players. Each player walks a conductive pathway and both players need to maintain the connection by holding hands. The have to work together to figure out the sensory movements (smell the flowers, skip the insulators, etc) needed to get through this "maze" without breaking their connection.
]]>TIMING{;}
1- 3 hr
---
GRADES{;}
All ages
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Draw Out a Plan and Start Making a Conductive Path |
Having a large STEAM day event at your school? This sensory maze is a super fun project to get your students excited about Makey Makey! Last year, Fraser Mckay created a guide for making a roll-up Makey Makey maze. It really inspired me because of the portability and sustainable aspect of it, and I thought it would be great to mash up with sensory paths I've seen schools putting in hallways to help fidgety students with concentration. For this project, you are designing and creating a sensory path for two players. Each player walks a conductive pathway and both players need to maintain the connection by holding hands. The have to work together to figure out the sensory movements (smell the flowers, skip the insulators, etc) needed to get through this "maze" without breaking their connection. Once you get your backdrop laid out, spend some time drawing up a plan. If you are creating this for students, think about ways to get them to squat to smell flowers, or take large steps. In my drawing, I decided they would walk to the center and then turn, walk along a zig zag path, then have to put their hands on the path Twister style. Remember you need two pathways side by side. You are basically creating a giant circuit board! As the players hold hands, it is similar to the way a button a calculator is pressed to tell the brains of the circuit board what number you are pressing. For this oversized creation, we are only making one connection. So you need a path for EARTH and a path for a KEY PRESS. Close up of maze design on paperIf you are having students design the maze and want to add an interesting math element, you could have them design their maze in Scratch plotting XY coordinates as they go. This could also be a fun way to have players race the Scratch sprite on the computer as they walk the maze. When you are happy with your design, use HVAC or aluminum foil tape to start creating the player pathways. Note: You will want to test to see if the conductive is adhesive on your tape. If it isn't, you can still create the majority of your pathway with this oversized tape, but at any point where you break the tape, you'll want to use a connector tape with conductive adhesive to make sure the entire pathway is conductive. If you want to make curves and shapes with your tape, check out this video showing how to fold and press the tape so you don't have to tear it to make interesting designs. |
Get Inspiration From Sensory Hallways and Cut Your Own Shapes |
If you haven't seen the sensory hallways schools are putting in, do a little research and check out some of the cool sensory paths and movement hallways to get some design inspiration. To create conductive footprints, I drew my foot onto a piece of paper to make a template, and then cut two wide strips of conductive tape (with conductive adhesive) to make a footprint path. Since copper tape is a little difficult to cut with detail, I used my vinyl cutter to cut hand prints. I experimented with a few different types of copper tape sheets in my Cricut machine and found these copper sheets to be easiest for cutting and weeding. I used a hand design already in the design assets and just cut a few! When you place the feet and hands on your path, make sure to try them out before you adhere them. Will other students be able to do the movements? Which foot do you need to place for your movement to work? This is one of the funnest aspects to designing your own maze! Remember this maze is about movement and fun. It should be just challenging enough, but not so hard others will give up. (Not quite as hard as Flappy Bird, but close!) I also used my vinyl cutter to create images and notes of encouragement as students play. I found that on my canvas backdrop the iron-on (heat transfer) vinyl worked better than just a vinyl sticker. But if you use a giant tarp like Fraser, regular sticker vinyl should work as well! If you don't have a vinyl cutter, but you still want your players to squat or use their hands, think about creating a key that will get your players moving the right direction. You can always print notes on cardstock like "Smell the flowers" or "Squash the bugs." I made a few signs that I could easily lay out. Try brainstorming ideas with a friend or your get ideas from your physical education teacher! |
Connect Pathways With Conductive Tape and Insulate With Masking Tape |
Once you have all the elements of your maze laid out, you'll need to connect each player's path with conductive tape with conductive adhesive and insulate certain aspects with masking tape. Above you can see that the silver fabric tape connects the circle shape to the hand and then the hand to the foot path. To motivate players to "stop and smell the flowers" and not just walk the whole path, I insulated these pathways with masking tape. Below you can see how the masking tape covers the conductive pathway shown in the previous picture. If you are feeling confident with your circuit building skills, you can even have player pathways cross, as long as you insulate your circuit with Duct tape or masking tape. At the very end of my game, I used skinny tape and made a very intricate path and had player two cross over player one. The bright green tape helped player two know they needed to cross. This was a fun spot to watch players determine how to work together to get to the last step of the maze. To help players visualize their pathway during the whole game, I used a bright color for each path. Player One follows the purple path and player two follows the neon green path. At the start of the game, I placed Player One and an arrow very close to the purple path. I also used the same color arrow along the path to keep each player along their respective path. The Duct tape and masking tape not only insulate your circuit, they help keep your players safe! Sometimes this HVAC foil tape has sharp edges and you need to smooth it with your fingernail as much as possible, but along your curves, you can also protect your players by placing tape over folds and sharp edges as needed. |
Code in Scratch |
Lay your maze out, connect one pathway to EARTH and one pathway to SPACE. Let's create a quick Scratch game to let players know when they are connected and a way to know they need to get back on the conductive path. The first thing you'll want to do is have a sound that plays when your players make a connection. I found a good "circus" sounding song in the Youtube Audio Library. To have this code play only when the space key is pressed, you'll want two different if statements nested in forever loops. This will have Scratch always checking to see if the statement is true or not. I have my song playing if the space is pressed. Because of the "play sound until done" on the sound effect, I had to write a second program to get the sound to stop when my players break the connection. This uses a logic statement found in the Operator palette. This code checks to see if the space key is not pressed and if the space key is not pressed, Scratch will stop all sounds. I also wanted my sprite to look like it is walking a tightrope when the players make a connection, but to fall a little when the connection was lost. In the second picture, you can see this code. That makes the skeleton if the space key is pressed, but drop change position on the y axis by -10 when the space key is not pressed. If you don't add the wait 1 sec control here, your character will fall very quickly! The last bit of code on this event hat is to tell Scratch if the skeleton touches sprite "line" then broadcast the message "Try Again." This will signal the end of the game and the players will need to start at the beginning to try again! Make sure to include the Event hat When I receive message. I used the second backdrop, so Scratch wouldn't play the circus song anymore and instead would play the sound to "Game over, Try Again."
The code above shows how to quickly animate any character in Scratch when walking. I coded the skeleton to change costume and if you don't add the wait sec block, you won't see the costume change. You can change the variable here to suit your animation needs! If you'd like a full Scratch tutorial for this project, make sure to watch the full video, I tweak some code in the video for more animation fun. (You can also see or remix my Scratch game here.) Play and Reiterate!Now that you have your entire game created, it's time to play! Lay your maze out, connect one pathway to EARTH and one pathway to SPACE. Hit the Green flag on the computer and have players walk the path! Figuring out what to do at each sensory spot is what makes this a maze, and it's pretty fun to add a timer to keep others excited about playing. Once you are done, you can fold up your game and pack it away to play again another day. Spend some time reflecting on the process:
Reflect, reiterate, design new mazes, create new challenges, and change your Scratch game to see if you can make even more elements that work with the computer, but most of all, keep playing and learning!
|
|
SUBTITLE{;}
For this project, you are designing and creating a sensory path for two players. Each player walks a conductive pathway and both players need to maintain the connection by holding hands. The have to work together to figure out the sensory movements (smell the flowers, skip the insulators, etc) needed to get through this "maze" without breaking their connection.
]]>TIMING{;}
20 min
---
GRADES{;}
4th-12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
What is a glove controller? |
The Makey Makey Glove controller is an interactive glove in which it acts as a controller using isolated finger movements to activate various keystrokes on the keyboard. (Thanks to Katie Butzu and Mark Lyons for teaching us about this amazing controller idea!) What is it for? Individuals who struggle with delays in fine motor skills as a result of a Grab your supplies and let's go! |
Make Fingertips Conductive |
Grab your conductive tape from the Craft + Code booster kit and wrap each finger of the glove with tape. Make sure to cover a lot of the fingertip to ensure a connection. |
Create an EARTH Connection |
Cut off the thumb of the glove for your EARTH connection. The user can hold the EARTH alligator clip, and their whole body will become the EARTH connection. Then they can touch the fingertip connection to the thumb to signal a key press. |
Plug and Play! |
Connect an alligator clip to each fingertip and to an arrow key on the Makey Makey. Plug Makey Makey into your computer or tablet (with a new USB C cable) and play with any game that takes arrow key inputs! Make music with our piano app, create a second controller and play our new 2 player soccer app, or code your own project idea with Scratch or MakeCode Arcade! Just touch fingertips to thumb to play! More Apps to Try |
SUBTITLE{;}
The Makey Makey Glove controller is an interactive glove in which it acts as a controller using isolated finger movements to activate various keystrokes on the keyboard.
]]>TIMING{;}
Varies
---
GRADES{;}
K-12
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Introduce Challenge |
Challenge: Create a solution (i.e. build a prototype) to solve an actual problem. The problem you'd like to address might be one from your classroom or something in your community. Want to see examples of solutions from other teachers and students? Keep reading!
Required Sketch of Your Idea: Before you start building you must sketch your idea out on paper and discuss it with your team. You are more likely to have success when you invest wisely in the planning phase. What is Design Thinking? Design Thinking is an approach to addressing challenges in a thoughtful and fun way, where you get to apply the 4Cs -- collaboration, creativity, critical thinking, and communication –- to your own work as you develop new solutions for your classroom, school, and community. If you are new to design thinking, check out this video and read this short article from Edutopia.org.
|
Projects Built by Teachers |
Check out some amazing project examples from teachers just like you!
Anti-Water Waster - In our house is an alleged water waster who leaves the faucet running for excessive amounts of time. This Anti-Water Waster is designed to be a gentle reminder to said water wasting individual. CLICK HERE to view the Instructables of this project including video of this invention in action. Interactive book - Designed and built by two middle school technology teachers. While flipping through the book you can touch certain points on the page to hear a sound that enhances the story. Interactive clock designed by three elementary school teachers to help young students learn how to tell time in increments of 5 minutes. For example, when you push on the "1" you'll hear "5 minutes after". When you push on the "2" you'll hear "10 minutes after". Constellation teaching tool - Built by one person who works as a museum educator. Use the stylus to touch "stars" on the piece of paper to learn if they are part of a particular constellation. If that star is part of a constellation then the recording will identify the constellation. Below is the back of the constellation teacher. Each constellation hole on the front of the prototype relates to a particular piece of aluminum foil on the back. Special Populations Communication Aid - Designed and built by one person who works as a museum educator. This workshop participant works at the Orlando Science Museum where once a week the museum invites children in the community with special needs to visit. This tool is designed to help children who are nonverbal communicate their needs with greater ease. Photo Booth Requiring Teamwork - Designed and built by one person for a school fundraising event. Each person holds the conductive aluminum tape on the sides of picture frame and then they hold hands which activates the Mac Book's photo taking app. This workshop participant was planning to decorate the picture frame with school colors and other branding. Coin Counter - Counting money is a very important practical math skill that we use in our daily life. Learn on how to program and build a coin counter using Makey-Makey and Scratch. CLICK HERE to read the Instructables which includes video of this project in action. NOTE: This invention was created by a teacher working at home by herself during the online Makey Makey Invention Literacy Workshop. Sociable Syllables Activity Pad - created as an Assistive Technology teaching tool for Hard of Hearing students. CLICK HERE to read the Instructables and view video of this project in action. NOTE: This invention was created by a teacher working at home by herself during the online Makey Makey Invention Literacy Workshop. Tree Cross Section Teaching Tool - Designed and built by one person who works as a museum educator. This teaching tool shows the cross section of a tree and when you touch various areas on the cardboard you'll hear various types of audio recordings including questions, science facts, areas of further inquiry, and more. Whack-a-Mole (Banana) Game - Designed and built by two high school teachers. One person focused on writing all the code (in Scratch) while the other person built the actual device. Running Race Game - Designed and built by three teachers. One teacher focused on writing the code for the game (using Scratch) and the other two focused on building the game playing devices. This game required two players who competed with each other. As they ran on the game pads the "Sprite" (small figure in Scratch) floated to the top of the screen. The person who ran the fastest for the longest period of time caused their Sprite to float to the top faster (and win).
Learn to hold a pencil properly - Designed and built by three teaches in Lansing MI. One of the teachers works with Pre-K and Kindergarten students and she needed a device that would help students learn to hold a pencil properly. The teachers found a short piece of PVC pipe and then added conductive tape in such a way that you're able to play notes on a digital piano when the pipe (used in place of a pencil) is held correctly. If you hold the pipe incorrectly then fewer notes are played. Programming not required for this project.
Kindergarteners are learning to read, so this librarian created a word matching game based on a favorite book and created an Interactive Word Wall so children could touch the word to hear if they were matching the right word to the correct image.
|
|
More Resources |
Check out this post for more Inspirational STEAM Resources and Projects! |
|
SUBTITLE{;}
Design Thinking is a framework for ingenuity. Use this design process to solve a problem in your classroom or your community.
]]>TIMING{;}
1 hr
---
GRADES{;}
6th- 12th
---
SUPPLIES{;}
---
PRODUCTS{;}
---
ENDCAP{;}
---
INSTRUCTIONS{;}
Gather Supplies |
For this project, you will combine rows and columns for maximum drawing potential! For our project, we've created 5 rows and 5 columns, but you can adjust the Pixel Sketch web app to a minimum of 3 rows/columns and a maximum of 8 rows and columns. To change colors on the Pixel Sketch app, you will tap two inputs at once. Note: This project is designed and inspired from this Makey Makey Monome project from jdeboi on Instructables. Gather SuppliesTo create this controller, you'll need a large sheet of cardstock, conductive fabric tape and the Makey Makey pencil from our Craft and Code Booster Kit . Make sure to grab those extra alligator clips that came in your Bananaversary Backpack Bundle. Using your Makey Makey optimized pencil, draw rows around 1.5 inches apart with thick dark lines. Trace where your columns will be with a pencil. You'll be placing tape for the columns. Use your pencil to draw thick spots where the two lines will intersect. You'll be covering spot with tape to insulate your circuits. So it is important the pencil lead will be conductive all the way across the row.
|
|
Insulate Circuits |
To activate Pixel Sketch, you'll have to touch two inputs at once. Each row and each column will be its own circuit. You need to insulate the rows by placing masking or scotch tape on the row where the column will intersect. This tape will cover where you made each row thicker to carry across the conductive trace of each row. Use conductive tape from the Craft and Code Booster Kit to create columns. Make sure that the insulating tape that covers the row where the two lines intersect is wider than the conductive tape. |
|
Remap and Add Makey Max Backpack |
Your Makey Max backpack will allow you to utilize all the inputs on the back of Makey Makey. For this project, we suggest remapping the mouse controls to the number 1-6 depending on how many rows and columns you will be using. Remap InstructionsFor this project, if you want to use 18 inputs, you will remap the mouse controls on the back of Makey Makey to numbers 1-6. When you attach the Makey Max Backpack after remapping, the mouse controls will now be numbers 1-6. Download your own Remap WorksheetFull Guide on Remapping a Makey Makey Classic or Makey GoAttaching BackpackOnce your Makey Makey mouse controls are remapped, you are ready to attach the Makey Max backpack. Align all pins on the backpack board with the headers on Makey Makey. Gently squeeze the boards together with even pressure, making sure all pins enter the corresponding holes. Attach alligator clips to rows and columns based on the grid size you chose in the Pixel Sketch web app. |
|
Design Tappable Buttons and Pixel Sketch |
To help sketchers know where to tap, design buttons for your controller by using tape to extend to the center of each "button" area from each column. Draw from each row to the center of the button area. When players tap the button area, their finger will bridge the tappable button and press two inputs at once. To do this, they sketcher will need to hold EARTH wear EARTH by attaching the EARTH alligator clip to the adjustable bracelet found in our Get Up + Go Booster Kit. Now you are ready to connect to our new Pixel Sketch web app to tap and sketch with your DIY controller! |
|
---
SUBTITLE{;}
Take your inventions to the MAX with the Makey Max Backpack. This backpack enables inventors to alligator clip to the 12 inputs on the back, making the full Makey Makey board accessible for all inventors. It’s the ultimate in extreme inventing! Combine inputs to create a Pixel Sketch controller for our new web app!
]]>