<center><img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="64" height="64" /></center>
<center><img src="https://image.ibb.co/fc2eDy/DSC_4940.jpg" alt="DSC_4940" width="100%" height="100%" border="0"></center>
Work with your family to design and sew your very own stuffie using e-textile components!
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/sRGErHKhC4hys1PqdC" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Follow along with this helpful guide by clicking through the links (the blue words). You can always go back a step, skip ahead, or return to this page.
Use the paper booklet to brainstorm, sketch, and reflect on Mr. Wuffles and your project.
[[Let’s get started!]]
If you've already started this activity before, you can jump to the section where you last left off.
<center><img src="https://image.ibb.co/cKZeU7/018_brainstorm.png" alt="018 brainstorm" border="0" width="32" height="32" /> [[Reflecting on reading the book|Reflect on book]]
<img src="https://image.ibb.co/gx5a2S/014_sketch.png" alt="014 sketch" border="0" width="32" height="32" /> [[Designing your stuffie|Schematic]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Sewing your stuffie|sewing]]
<img src="https://image.ibb.co/kzHzU7/011_selfie_on_phone_screen_on_a_hand.png" alt="011 selfie on phone screen on a hand" border="0" width="32" height="32"/> [[Taking a picture of your stuffie|stuffie selfie]]
<img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="32" height="32"/> [[Programming the circuit playground|level 2b_2]]
<img src="https://image.ibb.co/dV8bbn/upload_1.png" alt="upload 1" border="0" width="32" height="32"/> [[Uploading your program|level 2b_3]]</center>
[[Learn more about Tech Tales|about]]
<center><img src="https://image.ibb.co/cKZeU7/018_brainstorm.png" alt="018 brainstorm" border="0" width="64" height="64" /></center>
<div style="width:100%;height:0;padding-bottom:66%;position:relative;"><iframe src="https://giphy.com/embed/9AUI1HHGTnz7a" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
After you've read through Mr. Wuffles, look at pages 2-4 in your workbook. Write or sketch your responses there.
[[We're ready to start making our stuffie |Pick your stuffie]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/gx5a2S/014_sketch.png" alt="014 sketch" border="0" width="64" height="64" /></center>
<center><img src="https://media.giphy.com/media/11aTwy0i0atWN2/giphy.gif"></center>
It's time to pick the type of stuffie you want to create. You can design your own stuffie or use the Plush Monster template in your booklet. Feel free to print out other templates from the options below.
If you were making a stuffie for Mr. Wuffles, what would it look like?
What would it do?
<center><u>[[Plush monster]]</u>
Difficulty: <img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" /><img src="https://image.ibb.co/gw8sz7/002_star_1.png" alt="002 star 1" border="0" /><img src="https://image.ibb.co/gw8sz7/002_star_1.png" alt="002 star 1" border="0" />
Time: <img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" /><img src="https://image.ibb.co/hkjXz7/004_time.png" alt="004 time" border="0" /><img src="https://image.ibb.co/hkjXz7/004_time.png" alt="004 time" border="0" />
<img src= "https://cdn.sparkfun.com/assets/learn_tutorials/4/7/1/FinishedPlush.jpg" width="256" height="256"></center>
<center><u>[[Elephant]]</u>
Difficulty: <img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" /><img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" /><img src="https://image.ibb.co/gw8sz7/002_star_1.png" alt="002 star 1" border="0" />
Time: <img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" /><img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" /><img src="https://image.ibb.co/hkjXz7/004_time.png" alt="004 time" border="0" />
<img src= "http://1.bp.blogspot.com/-ifr9y54qAnQ/UdxM1A9RpDI/AAAAAAAABq4/Rp3cj5Dz4yw/s1600/IMG_8246+copy.jpg" width="256" height="256"></center>
<center><u>[[Dia de los Muertos cat]]</u>
Difficulty: <img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" /><img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" /><img src="https://image.ibb.co/ed1qmn/001_star_2.png" alt="001 star 2" border="0" />
Time: <img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" /><img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" /><img src="https://image.ibb.co/kgRO6n/003_time_1.png" alt="003 time 1" border="0" />
<img src= "https://cholyknight.files.wordpress.com/2017/01/088_sugarskullkittyplush.jpg?w=250&zoom=2" width="256" height="256"></center>
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://image.ibb.co/bzy0z7/010_sketch.png" alt="010 sketch" border="0" />
<img src="https://cdn.sparkfun.com/assets/learn_tutorials/3/4/0/Lily-Tiny-Monster-Tutorial-05.jpg" width="256" height="256"></center>
[[Hmm... we may want to pick a different one. |Pick your stuffie]]
[[We like this one and are ready to plan. |Schematic]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://image.ibb.co/bzy0z7/010_sketch.png" alt="010 sketch" border="0" />
<img src= "http://1.bp.blogspot.com/-ifr9y54qAnQ/UdxM1A9RpDI/AAAAAAAABq4/Rp3cj5Dz4yw/s1600/IMG_8246+copy.jpg" width="256" height="256">
<a href="http://birchfabrics.blogspot.com/2013/07/free-pattern-tutorial-henry-helga.html"; target="_blank">Tutorial</a></center>
[[Hmm... we may want to pick a different one. |Pick your stuffie]]
[[We like this one and are ready to plan. |Schematic]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/bzy0z7/010_sketch.png" alt="010 sketch" border="0" />
<img src= "https://cholyknight.files.wordpress.com/2017/01/088_sugarskullkittyplush.jpg?w=250&zoom=2" width="256" height="256">
<a href="https://cholyknight.files.wordpress.com/2016/10/sugar-skull-kitty-plush-pattern1.pdf"; target="_blank">Tutorial</a></center>
[[Hmm...I may want to pick a different one |Pick your stuffie]]
[[I like this one and I'm ready to plan |Schematic]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/bzy0z7/010_sketch.png" alt="010 sketch" border="0" />
<img src= "https://s3-us-west-2.amazonaws.com/lia-griffith-media/wp-content/uploads/2016/06/felt_octopus_00003.jpg" width="256" height="256">
<a href="https://liagriffith.com/felt-octopus-stuffie/"; target="_blank">Tutorial</a></center>
[[Hmm... we may want to pick a different one. |Pick your stuffie]]
[[We like this one and are ready to plan. |Schematic]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/gx5a2S/014_sketch.png" alt="014 sketch" border="0" width="64" height="64" /></center>
<center><img src="https://media.giphy.com/media/1ZqzbCCLvaQyzQvEmQ/giphy.gif"/></center>
When you are sewing electrical circuits, it is very important to fully plan your project.
Turn to Page 5 and 6 of your booklet to sketch out your project before you start sewing.
Where will your LED lights be on your stuffie?
Where should the battery pack and conductive thread be placed on your design?
[[We've thought things through and are ready to start planning.|Schematic_Step 1]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://image.ibb.co/gx5a2S/014_sketch.png" alt="014 sketch" border="0" width="64" height="64" /></center>
<div style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/rHeYOoBs4Qn16" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Lay the paper template over a felt piece and use pins to secure it in place.
<center><img src="https://image.ibb.co/fNN8yy/20180418_120321.jpg" alt="20180418_120321" width=100% height=100% border="0"></center>
Use scissors to cut the felt along the edge of the template.
<center><img src="https://image.ibb.co/mspGkd/20180418_120515.jpg" alt="20180418_120515" width=100% height=100% border="0"></center>
<center><img src="https://image.ibb.co/juTbkd/20180418_120843.jpg" alt="20180418_120843" width=100% height=100% border="0"></center>
On the paper templates, mark where your battery pack and LED lights will be on your stuffie.
<center><img src="https://image.ibb.co/fHoLBJ/20180418_121053.jpg" alt="20180418_121053" width=100% height=100% border="0"></center>
<center><img src="https://image.ibb.co/mF7Qdy/20180425_143330.gif" alt="20180425_143330" width=100% height=100% border="0"></center>
[[We're ready to start sewing|sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
Now you're ready to put all the pieces together and begin sewing your toy for Mr. Wuffles.
Before attaching the LEDs and battery pack to the felt, use the alligator clips to test if they all work. Make sure to connect the "+" to the "+" and the "-" to the "-"
<center><img src="https://image.ibb.co/c8X2Qd/20180418_123751.jpg" alt="20180418_123751" width="100%" height="100%" border="0"></center>
[[What should we do with the LEDs?|sewing_step 1]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
<center><img src="https://media.giphy.com/media/xT77XHIPBBGZL9m62I/giphy.gif" width="256" height="128"></center>
Conductive thread is a specialty thread made with stainless steel fibers.
You'll be using this to connect your e-textile pieces together to create circuits.
<center><img src="https://image.ibb.co/kFdFdy/20180418_114821.jpg" alt="20180418_114821" width="100%" height="100%" border="0"></center>
After securing your components, use the chalk to draw a line that you can follow connecting the battery pack to the LEDs.
<center><img src="https://image.ibb.co/eML6kd/20180418_123907.jpg" alt="20180418_123907" width="100%" height="100%" border="0"></center>
[[What do we do with this thread?|sewing_step 3]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/LabeledCircuit.jpg">
Secure your components (battery pack/LEDs) with glue to where you have planned them to be on the felt pieces.
<center><img src="https://image.ibb.co/jTMOWJ/20180418_121553.jpg" alt="20180418_121553" width="100%" height="100%" border="0"></center>
<center><img src="https://image.ibb.co/gVQ0BJ/20180418_121617.jpg" alt="20180418_121617" width="100%" height="100%" border="0"></center>
[[How will we connect these components to make a circuit?|sewing_step 2]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" />
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/Needle.jpg" width="250" height="300"></center>
Cut a piece of conductive thread approximately 2 feet long. Push one end of the thread through the eye (opening) of the needle and pull through, leaving a tail of about 5 inches.
[[Thread is cut and we're ready to start tying knots|sewing_step 4]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
Before you begin sewing your project, you will need to tie a knot at the long end of the thread to prevent you from completely pulling it through the fabric.
A starter knot is a method of starting your stitch with a knot directly on your fabric.
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/StarterKnot.jpg"/>
Stitch conductive thread around the LilyPad (battery pack) sew tabs to connect the piece to your felt. It’s important that you make three to four loops each time you connect your thread around an empty sew tab and pull the thread snug with each pass. This ensures you have made a strong electrical and physical connection between the thread and the sew tab.
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/ConnectingTabs.jpg"/>
<center><img src="https://image.ibb.co/got95d/20180418_124330.jpg" alt="20180418_124330" width="100%" height="100%" border="0"></center>
Pull loops tight before continuing your stitch.
[[Knots pulled tight, what's next?|sewing_step 5a]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning|sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
If the conductive thread is not making a tight connection to the LilyPad piece’s sew tabs, the current will not be able to flow through consistently.
<img src="https://cdn.sparkfun.com/assets/learn_tutorials/5/8/1/LooseConnection.jpg">
Some LilyPad components are polarized, meaning electric current can only flow through them in one direction. Specifically, current flows from "+" to "+" and "-" to "-".
Double check that your thread will connect "+" to "+" and "-" to "-" without crossing.
<center><img src="https://image.ibb.co/eypwJy/rev_polarity.gif" width="125%" height="125%" alt="rev_polarity" border="0"></center>
[[We've checked the direction of the current and are ready to move on|sewing_step 8]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
<div style="width:100%;height:0;padding-bottom:76%;position:relative;"><iframe src="https://giphy.com/embed/3o7bu9HvCRRp7MjpT2" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
The aliens left behind a special cape for you to use to help distract Mr. Wuffles. You'll be programming it in just a little bit.
Each of your stuffies will need to be able to wear it. You can connect the cape with your stuffie with some of the velco pieces provided.
Pick a location somewhere on your stuffie where the cape can be worn. You can sew or glue two pieces of velcro onto your stuffie about 2 inches apart. This is where you'll be able to touch it to activate its powers!
<center><img src="https://image.ibb.co/hvZGkd/20180425_104800.jpg" alt="20180425_104800" width="100%" height="100%" border="0"></center>
<center><img src="https://image.ibb.co/cDEz5d/20180418_135211.jpg" alt="20180418_135211" width="100%" height="100%" border="0"></center>
<img src="https://image.ibb.co/kzHzU7/011_selfie_on_phone_screen_on_a_hand.png" alt="011 selfie on phone screen on a hand" border="0" width="32" height="32"/> [[Take a picture of your work!|stuffie selfie]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
It's time for you to sew the pieces of felt together.
<center><img src="https://image.ibb.co/ejk0BJ/20180418_131218.jpg" alt="20180418_131218" width="100%" height="100%" border="0"></center>
<center><img src="https://image.ibb.co/gYCfBJ/20180418_132656.jpg" alt="20180418_132656" width="100%" height="100%" border="0"></center>
<center><img src="https://image.ibb.co/c9q6kd/20180418_133603.jpg" alt="20180418_133603" width="100%" height="100%" border="0"></center>
Make sure to leave a little bit of an opening so that you can add some cotton to the inside of your stuffie.
[[What do we stuff our stuffies with?|sewing_step 9]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
Stuff each body part with cotton. After each piece has been filled, sew up the last opening to complete your stuffie.
<center><img src="https://image.ibb.co/fpsQdy/20180425_122512.jpg" alt="20180425_122512" width="100%" height="100%" border="0"></center>
[[Ready for the next step!|sewing_step 10]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/cKZeU7/018_brainstorm.png" alt="018 brainstorm" border="0" width="64" height="64" /></center>
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/OFGfQ6GWwOWic" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
With your family, use sticky notes to create your own dialogue for the characters.
[[What other types of things should we be looking for?|Reflect on book]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]] <center><img src="https://image.ibb.co/kzHzU7/011_selfie_on_phone_screen_on_a_hand.png" alt="011 selfie on phone screen on a hand" border="0" width="64" height="64"/></center>
Use the computer's webcam to take a picture or video of your finished creation.
<img src="https://image.ibb.co/n6Sawx/Capture_Photo.gif" width="600" height="400" />
Save the image to the desktop so that others can see your creations.
You can also email your pics to Tech Tales! Take a picture and send it over to [email protected]
[[Great! We're ready for the next challenge.|level 2b_1]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
After sewing loops around a sew tab, a <u>[[running stitch]]</u> will enable you to connect LilyPad pieces together with a continuous length of conductive thread. Follow these steps:
Push the needle through the fabric about ¼" in the direction of your stitch path.
<img src="https://image.ibb.co/bWDnic/3x.png" alt="3x" border="0" width="600" />
Pull the slack of the thread through so it sits flush with the fabric.
Push the needle back up through the fabric another ¼" along the stitch path. Make sure to only sew through the POSITIVE hole for now.
Pull the slack of the thread through so it sits flush with the fabric.
<img src="https://cdn.sparkfun.com/assets/learn_tutorials/5/8/1/Running4.jpg">
Repeat this process to travel along the path to the next LilyPad piece you want to connect to, keeping stitches evenly spaced.
<img src="https://cdn.sparkfun.com/assets/learn_tutorials/5/8/1/Running5.jpg">
When you have completed connecting the "+" of the battery pack to the "+" of the LED light, use a finishing knot. Thread tails can cause electrical shorts, so be sure to trim your thread afterward.
<center><img src="https://cdn.sparkfun.com/assets/learn_tutorials/5/8/1/FinishingKnot.jpg" width="300" height="400"/></center>
Repeat these same steps to connect the "-" of battery pack to the "-" of the LED light. Use a different piece of conductive thread to make this connection.
[[We're ready to test for short circuits|sewing_step 6]]
<img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="32" height="32" /> [[Start the sewing steps from the beginning |sewing]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/iewhhS/013_needle.png" alt="013 needle" border="0" width="64" height="64" /></center>
In a basic running stitch, the stitching will be even on both sides of the fabric.
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/RunningStitch.jpg">
To hide the stitches so that they are not seen on the outside of the project, make a longer stitch on the back of the project and a very small stitch on the front of the project. This method is called a “hidden stitch.”
<img src="https://cdn.sparkfun.com/r/600-600/assets/learn_tutorials/5/8/1/HiddenStitch.jpg">
[[Go back|sewing_step 5a]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]Double-click this passage to edit it.<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Locate the ultimate distractor!
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/lwx4dTKwUFTwI" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Your stuffie and its mates need to create a distraction to get to their ship. Otherwise, they will not be able to distract Mr. Wuffles and the mission will be in peril.
But there is one artifact that could save the mission.
[[We're ready to look!|level 2b_1a]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Your stuffie found a backpack with a pretty advanced technological artifact in it called "Circuit Playground." If you learn how to control it, you can use it to distract Mr. Wuffles!
<div style="width:100%;height:0;padding-bottom:75%;position:relative;"><iframe src="https://giphy.com/embed/UcK7JalnjCz0k" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Let's learn how to make the Circuit Playground to program your distraction.
Open the <a href="http://www.makecode.com"; target="_blank">makecode</a> coding page.
Click on the code icon underneath the option for Circuit Playground Express.
Create a "New Project."
[[Got it, we're ready to start coding!|level 2b_2b]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Now that you have written a program, let's make sure we upload it onto the Circuit Playground and distract Mr. Wuffles!
First, you should name your code. In the blue box at the bottom of the page, write the title of your code.
<img src="https://image.ibb.co/hrtH1n/level_2b_3.gif" alt="level_2b_3" width="100%" height="100%" border="0">
Click the big pink button that says "Download" at the bottom of the page, and choose a location for where you would like to download the code.
Using the USB cable, connect the Circuit Playground to the computer.
[[Everything is connected, what's next?|level 2b_3a]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
It is time for your stuffie to wear the cape with the Circuit Playground to distract Mr. Wuffles.
Locate the two pieces of velcro on the cape and attach them to the pieces of velcro on your stuffie.
<div style="width:100%;height:0;padding-bottom:56%;position:relative;"><iframe src="https://giphy.com/embed/qAw6GCoeTtG2k" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Cats LOVE moving laser. Let's cause a distraction with lights and sounds so that your stuffie can get past Mr. Wuffles! We can use the Circuit Playground in the backpack for that, but we need to program it so that it does what we want.
[[We want to animate some lights.|level 2b_5a]]
[[We want to program some noises.|level 2b_6a]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
It is possible that Mr. Wuffles will catch you. Let's make sure we program a distraction in case he shakes you!
<div style="width:100%;height:0;padding-bottom:83%;position:relative;"><iframe src="https://giphy.com/embed/13CoXDiaCcCoyk" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Let's code the Circuit Playground so that both lights and sounds go off if Mr. Wuffles shakes you.
[[How do we program the lights?|level 2b_7a]]
[[How do we program the sounds?|level 2b_7b]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Next, find the "Light" menu and choose the "Show Ring" output. Drag it and nest it into the "Forever" loop.
<img src="https://image.ibb.co/gXeeE7/level_2b_2b.gif" alt="level_2b_2b" width="100%" height="100%" border="0">
Wanna change the colors? Click the color you want on the inside of the ring and then click the light on the ring you would like to change.
You should be able to see any changes that you make in the model pictured to the left of your coding workspace.
<img src="https://image.ibb.co/dV8bbn/upload_1.png" alt="upload 1" border="0" width="32" height="32"/> [[How do we get this code onto our Circuit Playground?|level 2b_3]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
<img src="https://image.ibb.co/fLTpE7/Screen_Shot_2018_04_18_at_9_31_28_AM.png" alt="Screen_Shot_2018_04_18_at_9_31_28_AM" border="0">
Press the "Reset" button on the Circuit Playground so that the computer can recognize it. The reset button is the small black button right in the middle of your circuit playground express.
Open a "File Explorer" window and locate the folder where you downloaded your code.
In the same "File Explorer" window, or a new one, locate the Circuit Playground; it will show up as a "device" under the name CPLAYBOOT.
Drag your code file into CPLAYBOOT. If done successfully, the Circuit Playground will eject itself automatically.
Your cape should now be flashing whatever light pattern you previously coded with the "Show Ring" function.
[[We're ready to program even more distractions for Mr Wuffles!|level 2b_5]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
<div style="width:100%;height:0;padding-bottom:48%;position:relative;"><iframe src="https://giphy.com/embed/ew8fwhlL7lDIk" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>
Find the cape in your backpack and velcro it onto your stuffie. The cape has a circuit playground express and a battery pack on it.
<center><img src="https://image.ibb.co/gRw3qd/IMG_7824.jpg" alt="IMG_7824" width="100%" height="100%" border="0"></center>
Turn the cape over and switch the battery back to the "on" position.
<center><img src="https://image.ibb.co/n9POqd/IMG_7826.jpg" alt="IMG_7826" width="100%" height="100%" border="0"></center>
[[What can we do with it?|level 2b_2]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Go to "Light" menu again, and drag the "Show Animation" command on top of the Ring you added the step before.
<img src="https://image.ibb.co/gaENbx/Mr_Wuffles_Show_Animation.gif" alt="Mr Wuffles Show Animation" width="100%" height="100%" border="0" />
You can choose from multiple kinds of animations for the ring to flash. Choose the one you think will distract Mr. Wuffles the most.
[[We got this! What else could we do? |level 2b_5d]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Go to "Light" menu again, and drag the "Set Brightness" command on top of the Ring you added the step before. Experiment with the slider to adjust how bright you want your lights to be.
Choose the level you think will distract Mr. Wuffles the most.
[[How can we change the tempo?| level 2b_5c]]
[[We got this! What else could we do? |level 2b_5d]]
<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
<img src="https://image.ibb.co/m2hKOc/Mr_Wuffles_Set_Brightness.gif" alt="Mr Wuffles Set Brightness" border="0" />
Go to "Light" menu again, and drag the "Set Brightness" command on top of the Ring you added the step before. Experiment with the slider to adjust how bright you want your lights to be.
Choose the level you think will distract Mr. Wuffles the most.
[[How can we change the brightness?| level 2b_5b]]
[[We got this! What else could we do? |level 2b_5d]]
<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Could you have two or more rings in a forever loop, each with different colors?
Could you program your Circuit Playground so that the lights come on only when you press Button A?
hint: look in the "Input" menu for a command that would let you do that, and get rid of the "forever" loop
Once you're done, upload your new code onto the Circuit Playground (see Step 3 for a reminder)."
<img src="https://image.ibb.co/dV8bbn/upload_1.png" alt="upload 1" border="0" width="32" height="32"/> [[We need a quick refresher on how to upload the code.|level 2b_3]]
[[How do we program some noises?|level 2b_6a]]
[[Check! We've know how to program noises, uploaded our codes, and are ready for the next challenge.|level 2b_7]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Cats are usually scared by loud noises. Let's create a distraction that uses both loud noises and flashing lights!
Let's code the Circuit Playground to include loud sounds to distract Mr. Wuffles!
<img src="https://image.ibb.co/jfeAUH/Mr_Wuffles_Make_Sound.gif" alt="Mr Wuffles Make Sound" border="0" />
Create a new "Forever" loop in your coding space for making a sound.
Go to "Music" menu, choose "Play Sound", and drag the command into the new forever loop.
You can choose from multiple kinds of sounds to play. Choose the one you think will distract Mr. Wuffles the most.
[[What else can we do? | level 2b_6b]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
You can also add different commands to control the volume
<img src="https://image.ibb.co/jxN1oc/volume.gif" alt="volume" border="0" width="100%" height="100%"/>
and/or change the tempo.
<img src="https://image.ibb.co/b59goc/tempo.gif" alt="tempo" border="0" width="100%" height="100%" />
[[Give me some more challenges!|level 2b_6c]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Could you have two or more sounds in a forever loop, each with different volumes?
Could you program your Circuit Playground so that the sounds come one only when you press Button B?
hint: look in the "Input" menu for a command that would let you do that, and get rid of the "Forever" loop
Now it's time to upload your newest distraction!
<img src="https://image.ibb.co/dV8bbn/upload_1.png" alt="upload 1" border="0" width="32" height="32"/> [[We need a quick refresher on how to upload the code |level 2b_3]]
[[What about lights?|level 2b_5a]]
[[Check! We've know how to program different lights, uploaded our codes, and are ready for the next challenge.|level 2b_7]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Go to "Input" menu and find the command "On Shake"
Drag it into the coding space.
<img src="https://image.ibb.co/c8Sx9H/Mr_Wuffles_Shake_Animation.gif" alt="Mr Wuffles Shake Animation" width="100%" height="100%" border="0" />
Go to "Light" menu, and drag the "Show Ring" command into the "On Shake" command block.
Go to "Light" menu again, and drag the "Show Animation" command on top of the Show Ring you added the step before.
[[What about sounds?|level 2b_7b]]
[[Got it. We know how do sounds and we're ready to upload our distraction.|level 2b_7c]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]<center><img src="https://image.ibb.co/fZp3KH/002_data_management_interface_symbol_with_gears_and_binary_code_numbers.png" alt="002 data management interface symbol with gears and binary code numbers" border="0" width="64" height="64"/></center>
Go to "Input" menu and find the command "On Shake"
Drag it into the coding space.
<img src="https://image.ibb.co/bskxHS/Apr_18_2018_11_51_50.gif" alt="Apr_18_2018_11_51_50" width="100%" height="100%" border="0">
Go to "Music" menu, choose "Play Sound"", and nest within the "On Shake" block
Click on the arrow next to "Play Sound" to choose from multiple kinds of sounds you can play.
[[What about lights?|level 2b_7a]]
[[Got it. We know how to do sounds and we're ready to upload our distraction.|level 2b_7c]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]Now put it all together and upload your program.
<img src="https://image.ibb.co/dV8bbn/upload_1.png" alt="upload 1" border="0" width="32" height="32"/> [[How do I do that again?|level 2b_3]]
How did you use the Circuit Playground to distract Mr. Wuffles when he shakes it?
<img src="https://image.ibb.co/kzHzU7/011_selfie_on_phone_screen_on_a_hand.png" alt="011 selfie on phone screen on a hand" border="0" width="32" height="32"/> [[We're ready to snap our stuffie selfie!|stuffie selfie]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]Double-click this passage to edit it.This Mr. Wuffles e-textiles backpack is a part of the <a href="https://techtales.online/">Backpacks for Science Learning</a> research project, a collaboration between UW Bothell OpenSTEM Research, the UW Seattle Institute for Science + Math Education, Pacific Science Center, Highline School District, and Seattle Public Libraries, and funded by the National Science Foundation.
<center><img src="https://image.ibb.co/iHXdZH/Screen_Shot_2018_04_24_at_11_08_07_AM.png" alt="Screen_Shot_2018_04_24_at_11_08_07_AM" border="0" width="400" height="400"></center>
This backpack activity contains adapted resources from <a href="http://sewelectric.org/diy-projects/interactive-stuffed-monster/
">Sew Electric</a> and <a href="https://learn.sparkfun.com/tutorials/lilytiny-plush-monster/
">Sparkfun</a>.
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]
<center><img src="https://media.giphy.com/media/26gsdQ9zNHr3IBzoI/giphy-downsized-large.gif" /></center>
Follow along with this helpful guide by clicking through the links. You can always go back a step or return to the previous page by clicking the back arrow in the left hand corner of your screen.
Be on the the lookout for blue words. Click on them and follow the link to another page with helpful information.
[[We're ready to read the book!|sticky notes]]
<img src="https://image.ibb.co/jHpg6x/001_home_button.png" alt="001 home button" border="0" width="32" height="32" /> [[Return to the home page |Introduction]]