Differences

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

--- guides:button [2023/09/11 21:57] – created admin
+++ guides:button [2023/10/05 19:19] (current) – [External links] osnr
@@ Line 1: / Line 1: @@
-btn
+====== Let's make a button! ======
+We'll start with the printable template and then make a Folk program that we want to turn into a button.
+===== 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 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 your computer:
+{{guides:0_paper-button-template-4-.png?450px}}
+===== 1. A Folk program to buttonify: =====
+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 grab a keyboard editor on your Folk system) and write this 1-line program:
+''%% %%''
+<code>
+Wish $this is labelled Computer
+</code>
+Save and print this; we'll cut it up later.
+===== 2. Printing =====
+Print out the template:
+{{guides:button-template-printing.gif?500px}}
+===== 3. Folding and cutting the button =====
+Let's fold and cut up the button like so:
+. Cut out one of the quadrants.
+{{guides:3_1_cut_the_template.gif}}
+. 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:
+{{guides:3_2_fold_first_edge.gif}}
+. Fold the next line in a mountain fold (inverse of a "V", valley fold), like so:
+{{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 =====
+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}}
+===== 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]]