Differences

This shows you the differences between two versions of the page.

--- guides:button [2023/10/04 21:01] – admin
+++ guides:button [2023/10/05 19:19] (current) – [External links] osnr
@@ Line 1: / Line 1: @@
 ====== Let's make a button! ======
-Let's start with a printable template and a Folk program we want to turn into a button.
+We'll start with the printable template and then make a Folk program that we want to turn into a button.
-===== 1. The printable template =====
+===== 0. The printable template =====
-This template makes 4 buttons on a standard 8.5" x 11" piece of paper. Print it out, ideally on a piece of cardstock or tagboard (we like [[https://www.neenahpaper.com/brands/neenah-bright-white|Neenah Bright White cardstock]]) so the button is able to hold its shape. If you're just trying this out to practice folding paper buttons it's okay to use regular printer paper, just know that it'll probably stop "springing" back to shape after ~a dozen uses.
+This template makes 4 buttons on a standard 8.5" x 11" piece of paper. Print it out, ideally on a piece of card stock (we like [[https://www.neenahpaper.com/brands/neenah-bright-white|Neenah Bright White cardstock]]) so it'll hold its shape. If you're just trying this out to practice folding paper buttons, it's okay to use regular printer paper; just know that it'll probably stop "springing" back to shape after ~a dozen uses.
-Right click on this image to save it to you computer.
+Right-click on this image to save it to your computer:
-{{guides:0_paper-button-template-4-.png}}
+{{guides:0_paper-button-template-4-.png?450px}}
-===== 2. A Folk program to button-ize: =====
+===== 1. A Folk program to buttonify: =====
-What is our button going to do? With Folk we can program our button to do anything we want but let's keep this one simple and just make our button write "Computer"
+With Folk, we can program our button to do anything we want, but let's keep this one simple. We'll just make our button display the word "Computer".
-Go to your editor (either in your browser or via a physical keyboard editor on your Folk system) and write this 1-line program:
+Go to your editor (either in your browser or grab a keyboard editor on your Folk system) and write this 1-line program:
 ''%% %%''
@@ Line 23: / Line 23: @@
 </code>
-===== 3. Printing =====
+Save and print this; we'll cut it up later.
+===== 2. Printing =====
 Print out the template:
-Print it out:
+{{guides:button-template-printing.gif?500px}}
-{{guides:button-template-printing.gif}}
+===== 3. Folding and cutting the button =====
-===== 4. Folding and cutting =====
 Let's fold and cut up the button like so:
 . Cut out one of the quadrants.
-. Starting at one of end of the paper fold the first solid black line into a valley fold so it forms a little "foot" for the button:
-  * Fold the inner two solid lines in a mountain fold
-  * Cut out the middle section bounded by the dashed line, this will be the cleared area where you cut AprilTag will go!
-{{https://cdn.glitch.global/bc41dccc-8dd4-4194-8235-1f691f637561/IMG_0502.jpeg?v=1692899458481}}
+{{guides:3_1_cut_the_template.gif}}
-===== 5. Taping =====
+. Starting at one end of the paper, fold the first solid black line into a valley fold (like a "V"), so it forms a little "foot" for the button:
-  * Cut out the code. If it's one-or-two lines and can fit on the top of the button tape it there. Otherwise tape it to the top flap of the button.
+{{guides:3_2_fold_first_edge.gif}}
-  * Cut out the AprilTag (make sure to preserve the program number and date data for future reference). Cut the AprilTag exactly in half with your scissors.
-  * Take the top half of your cut AprilTag, align its bottom edge with the bottom edge of the top of the cleared area, tape or glue it down to that position.
+. Fold the next line in a mountain fold (inverse of a "V", valley fold), like so:
-  * Using your hand or a small object press the button down and keep it held down. This is important so you can accurately align the top-edge of the button to the top edge of the bottom half of the cleared area of your button. Once you've lined it up so your program executes tape or glue it to that position.
+{{guides:3_3_fold_edge.gif}}
+. Fold the next edge as a mountain fold as well:
+{{guides:3_4_fold_next_edge.gif}}
+. Fold the final edge as a valley fold again, forming another little "foot" for the button:
+{{guides:3_5_last_folding_step.gif}}
+-----
+You should now have a basic button:
+{{guides:3_6_yayyyyy.gif?450px}}
+{{guides:4_button_folded_side_view.jpeg?400px}}
+. Cut out the section surrounded by the dashed line. This is where you'll place the AprilTag for your program:
+{{guides:3_6_cutting.gif}}
+Your button should now look like this:
+{{guides:button_folded_profile-medium.jpeg?500px}}
+{{guides:button_folded_side-medium.jpeg?500px}}
+==== 5. Cutting and taping the AprilTag =====
+. Grab your program and cut out the AprilTag from it like so (make sure to preserve the program number and date data for future reference):
+{{guides:5_1_cutting_the_apriltag.gif}}
+Cut the AprilTag in half so you have two pieces, a top and a bottom.
+.Place two pieces of tape on the top and bottom of the protruding bits of your button
+{{guides:5_2_taping.gif}}
+. Start by taping the top piece in position, then hold the button closed. While it's closed, line up the other half and tape it in place:
+{{guides:5_3_taping_on_apriltag.gif}}
+. Cut out the code:
+  *{{guides:5_4_cut_the_code.gif}}
+. Tape the code onto the body of your button:
+{{guides:5_5_tape_code.gif}}
 ===== 6. Testing out your button =====
-Sweet, now take of the weight and try giving the button a few presses. If it says "computer" you've just made a paper button that triggers a program in Folk, pat yourself on the shoulder!
+Try giving the button a few presses. If it displays the word "Computer", you've just made a paper button that triggers a program in Folk! pat yourself on the shoulder!
+{{guides:button_computer.gif}}
+===== Extras =====
+Here's some inspiration for other kinds of buttons:
+  * A button that draws animating concentric circles:
+    *{{guides:button_concentric_circles.gif}}
+  * A button that activates a sprite:
+    *{{guides:button_megaman.gif}}
-{{https://cdn.glitch.global/bc41dccc-8dd4-4194-8235-1f691f637561/computer_label_button.gif?v=1692825083829}}
+===== External links =====
+  * [[https://www.youtube.com/watch?v=3ddTIa-AhXE|DynaTags: Low-Cost Fiducial Marker Mechanisms (ICMI 2022)]]
+  * [[https://www.cutfoldtemplates.com|Cut / Fold Templates]], [[https://kellianderson.com/books/|Kelli Anderson]]
+  * [[https://en.wikipedia.org/wiki/Nintendo_Labo|Nintendo Labo]], [[https://www.nintendo.com.au/news-and-articles/nintendo-labo-developer-interview-part-1-the-concept|Nintendo Labo developer interview]]