{"id":36342,"date":"2023-09-27T09:52:01","date_gmt":"2023-09-27T16:52:01","guid":{"rendered":"https:\/\/www.tynker.com\/blog\/?p=36342"},"modified":"2023-10-02T08:51:13","modified_gmt":"2023-10-02T15:51:13","slug":"add-webcam-controls-to-your-tynker-games","status":"publish","type":"post","link":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/","title":{"rendered":"Add Webcam Controls to Your Tynker Games"},"content":{"rendered":"\n<p>Have you seen Tynker&#8217;s brand-new AI blocks? They allow you to create all kinds of unique gameplay.  Take a look some of of these webcam-powered AI projects for some ideas: <\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"564\" style=\"aspect-ratio: 1000 \/ 564;\" width=\"1000\" autoplay loop muted src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230925103221\/exercise-shorty.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>Make games that get you moving!<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"566\" style=\"aspect-ratio: 998 \/ 566;\" width=\"998\" autoplay loop muted src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926113942\/star-runner-ai-1.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>Control arcade games with your hands!<\/em><\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"552\" style=\"aspect-ratio: 1000 \/ 552;\" width=\"1000\" autoplay loop muted src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230925103647\/splatter.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"has-text-align-center\"><em>Create interactive artwork programs!<\/em><\/p>\n\n\n\n<p>Let&#8217;s explore how to do it. You can find an existing Tynker project you&#8217;ve made you&#8217;d like to add AI to, or you can follow along in a blank project (<strong>Login at Tynker &gt; Projects &gt; Create Project &gt; Create Blank Project<\/strong>).<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.tynker.com\/dashboard\/student\/#\/games-and-apps\/stem\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Find AI Starter Projects, Courses, and Tutorials<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p> <\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a676f45c3175\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #206be5;color:#206be5\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #206be5;color:#206be5\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a676f45c3175\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Choose_Your_Tracking_Style\" >Choose Your Tracking Style<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Activate_Your_Webcam\" >Activate Your Webcam<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Digital_Costume_%E2%80%94_Clown_Nose\" >Digital Costume \u2014 Clown Nose<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Go_to_Fingertip_%E2%80%94_Fly_a_Spaceship\" >Go to Fingertip \u2014 Fly a Spaceship<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Point_to_Aim_%E2%80%94_Fixed_Position_Aiming\" >Point to Aim \u2014 Fixed Position Aiming<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Pinch_to_Shoot_%E2%80%94_Gesture_Basics\" >Pinch to Shoot \u2014 Gesture Basics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Pinch_to_Scale_%E2%80%94_Interactive_Art\" >Pinch to Scale \u2014 Interactive Art<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Jog_Wheel_%E2%80%94_Spin_It\" >Jog Wheel \u2014 Spin It!<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Tip_Adjust_an_Actors_Center_Point\" >Tip: Adjust an Actor&#8217;s Center Point<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Wait_a_Second%E2%80%A6_Hows_This_AI_Anyway\" >Wait a Second\u2026. How&#8217;s This AI, Anyway?&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Looking_for_More_Try_Ribbon_Dance\" >Looking for More? Try Ribbon Dance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Coding_Challenge_Add_the_Pen_Blocks\" >Coding Challenge: Add the Pen Blocks<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Debugging_Tips_for_AI\" >Debugging Tips for AI<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#Helpful_AI_Links\" >Helpful AI Links<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#More_Activities\" >More Activities!<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Choose_Your_Tracking_Style\"><\/span>Choose Your Tracking Style<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Tynker&#8217;s AI blocks offer three different kinds of Pose Detection styles for your webcam:<\/p>\n\n\n\n<p><strong>Face Tracking <\/strong>\u2014 This mode is useful for virtual costumes or Snapchat-style effects \u2014 of course you can create games with face-tracking too!<\/p>\n\n\n\n<p><strong>Hand Tracking<\/strong> \u2014 When you want to track the user&#8217;s hands, and especially the fingers themselves, use this mode. Hand tracking lets you create digital puppets or games that require precision.&nbsp;Hand tracking also allows for &#8220;gestures&#8221; that control your Tynker project.<\/p>\n\n\n\n<p><strong>Body Tracking<\/strong> \u2014 This style allows you to track ALL parts of your body, including hands, face, shoulders, and even your legs. Think: Tracking for exercise games and other &#8220;full body&#8221; projects.<\/p>\n\n\n\n<p>Not sure which style to pick? Read on for some practical scripts and ideas for how to add them to your game. Notice these three icons on Pose Detection code blocks \u2014 they indicate the tracking style used by the block.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/m_XfuBIq2KARqKuZfAeWvvBpqh7DMy7RG5i3XVf510foWxIebJ-FOLOnGJiUC5qJelAmeh7xaNVsn2sLCjVTTW9LEymwWbW0ueFEsT3CR5QvSuMZvk61cDdsr51d67fA4YUwZbXucuNTu4SkDCg9wrc\" alt=\"\"\/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"startdetection\"><span class=\"ez-toc-section\" id=\"Activate_Your_Webcam\"><\/span>Activate Your Webcam<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>No matter which style of Pose Detection you use, to start, you&#8217;ll want to turn on your webcam, enable the specific tracking you&#8217;d like, then as an added step, show the detection, which will provide a &#8220;skeleton view&#8221; of what the AI is seeing.&nbsp;(As soon as you use these blocks, AI will be enabled for your Tynker project. You can also enable AI directly by clicking MORE at the bottom of the coding palette, then selecting <strong>AI &amp; ML &gt; Pose Detection<\/strong>.)<\/p>\n\n\n\n<p>Here is a short script to begin face-tracking:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face.png\" alt=\"\" class=\"wp-image-36344\" width=\"244\" height=\"255\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face.png 975w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face-287x300.png 287w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face-143x150.png 143w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face-768x803.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105648\/start-face-150x157.png 150w\" sizes=\"auto, (max-width: 244px) 100vw, 244px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Here is a short script to begin hand-tracking:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-1024x1008.png\" alt=\"\" class=\"wp-image-36345\" width=\"256\" height=\"252\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-1024x1008.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-300x295.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-150x148.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-768x756.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1-96x96.png 96w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105738\/hands-on-1.png 1036w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Here is a short script to begin body-tracking:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body.png\" alt=\"\" class=\"wp-image-36346\" width=\"251\" height=\"255\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body.png 1002w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body-295x300.png 295w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body-147x150.png 147w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body-768x782.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926105752\/start-body-150x153.png 150w\" sizes=\"auto, (max-width: 251px) 100vw, 251px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Notice how all of these will turn your webcam&#8217;s <strong>video on<\/strong>, start a particular kind of <strong>detection<\/strong>, then use the <strong>show detection<\/strong> block, which provides a visual hint at &#8220;what the AI sees.&#8221; For example, you might see something like this while using Hand Detection, showing where the AI tracks the right hand:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6-1024x877.png\" alt=\"\" class=\"wp-image-36347\" width=\"256\" height=\"219\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6-1024x877.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6-300x257.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6-150x129.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6-768x658.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110343\/image5-6.png 1159w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Showing detection will help you debug your webcam-powered games, and it also provide a hint to the user when they need to reposition their camera for the best possible view (for example, to keep their hands within the camera frame).<\/p>\n\n\n\n<p><strong>Tip: <\/strong>You only need one of these starter scripts \u2014 choose either Face, Hand, or Body Tracking modes while using Pose Detection. If you&#8217;d like, you can adjust your video&#8217;s transparency, too.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110406\/image11-3.png\" alt=\"\" class=\"wp-image-36348\" width=\"341\" height=\"69\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110406\/image11-3.png 455w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110406\/image11-3-300x61.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110406\/image11-3-150x30.png 150w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Digital_Costume_%E2%80%94_Clown_Nose\"><\/span>Digital Costume \u2014 Clown Nose<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here&#8217;s a simple script that makes a Red Ball actor follow your nose using Face Tracking.&nbsp;Move your head around and your new nose follows!<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"365\" height=\"302\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111428\/image3-6.png\" alt=\"\" class=\"wp-image-36352\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111428\/image3-6.png 365w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111428\/image3-6-300x248.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111428\/image3-6-150x124.png 150w\" sizes=\"auto, (max-width: 365px) 100vw, 365px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172335\/clown-nose-2.png\" alt=\"\" class=\"wp-image-36390\" width=\"375\" height=\"250\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172335\/clown-nose-2.png 750w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172335\/clown-nose-2-300x200.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172335\/clown-nose-2-150x100.png 150w\" sizes=\"auto, (max-width: 375px) 100vw, 375px\" \/><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Go_to_Fingertip_%E2%80%94_Fly_a_Spaceship\"><\/span>Go to Fingertip \u2014 Fly a Spaceship<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can use the same trick with the Hand Tracking blocks too. Here&#8217;s a spaceship that follows your finger.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-ad2f72ca wp-block-group-is-layout-flex\">\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111509\/image15-2.png\" alt=\"\" class=\"wp-image-36354\" width=\"416\" height=\"285\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111509\/image15-2.png 554w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111509\/image15-2-300x206.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111509\/image15-2-150x103.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111509\/image15-2-220x150.png 220w\" sizes=\"auto, (max-width: 416px) 100vw, 416px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"247\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172645\/space-ship.png\" alt=\"\" class=\"wp-image-36391\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172645\/space-ship.png 400w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172645\/space-ship-300x185.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926172645\/space-ship-150x93.png 150w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/figure>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Point_to_Aim_%E2%80%94_Fixed_Position_Aiming\"><\/span>Point to Aim \u2014 Fixed Position Aiming<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can use AI landmarks as &#8220;targets&#8221; for the <strong>point towards <\/strong>blocks too!&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"302\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111543\/image4-4.png\" alt=\"\" class=\"wp-image-36356\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111543\/image4-4.png 668w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111543\/image4-4-300x136.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111543\/image4-4-150x68.png 150w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>You could use this style of control in a game with a &#8220;pivot to shoot&#8221; mechanic like this one:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"564\" style=\"aspect-ratio: 998 \/ 564;\" width=\"998\" autoplay loop muted src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230920142145\/brazen-ai.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pinch_to_Shoot_%E2%80%94_Gesture_Basics\"><\/span>Pinch to Shoot \u2014 Gesture Basics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You can use landmarks plus a little bit of mathematics to create custom <strong>gestures. <\/strong>This script will trigger whenever the player&#8217;s two fingers are closer together than 50 pixels. This idea is used in the demo shown above to shoot the cannon.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"329\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-1024x329.png\" alt=\"\" class=\"wp-image-36357\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-1024x329.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-300x96.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-150x48.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-768x247.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3-1280x411.png 1280w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926111623\/image8-3.png 1369w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>This allows a &#8220;pinch to trigger&#8221; effect in the game! Need more input controls? Use a bunch of different finger landmarks. For example, you might have four different &#8220;moves&#8221; in your game triggered by touching the pointer, middle, ring, or pinkie finger to your thumb, just like you might have four buttons in an arcade game. Try it out!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pinch_to_Scale_%E2%80%94_Interactive_Art\"><\/span>Pinch to Scale \u2014 Interactive Art<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here&#8217;s another trick. You can set the size of an actor relative to the distance between two landmarks. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"168\" height=\"152\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141659\/pinch-scale-gif.gif\" alt=\"\" class=\"wp-image-36373\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>The actors goes to the x and y positions of the right thumb tip. But then, the actor is set to a size equal to the distance between the pointer fingertip and the thumb&#8217;s tip:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-1024x312.png\" alt=\"\" class=\"wp-image-36369\" width=\"840\" height=\"255\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-1024x312.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-300x91.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-150x46.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-768x234.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3-1280x390.png 1280w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140505\/image10-3.png 1445w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Experiment with actor sizing and use math operators (like +, -, *, and \/) to tweak your character&#8217;s size.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Jog_Wheel_%E2%80%94_Spin_It\"><\/span>Jog Wheel \u2014 Spin It!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here&#8217;s a simple virtual knob or &#8220;jog wheel.&#8221; The player can spin the wheel with their fingertip to change a value!&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"225\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926145628\/jog-wheel-3.gif\" alt=\"\" class=\"wp-image-36383\"\/><\/figure>\n<\/div>\n\n\n<p>Here&#8217;s the code for the Jog Wheel actor:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3-1024x453.png\" alt=\"\" class=\"wp-image-36364\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3-1024x453.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3-300x133.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3-150x66.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3-768x340.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135550\/image9-3.png 1262w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Read the code carefully to see how it works: If the&nbsp; left finger&#8217;s pointer finger gets close enough, the Jog Wheel <strong>points towards <\/strong>that fingertip landmark and a message is sent, including the current <strong>angle <\/strong>value. This value can then be retrieved and used in a script like this one, using the <strong>received value<\/strong> block.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135623\/image12-4.png\" alt=\"\" class=\"wp-image-36365\" width=\"383\" height=\"153\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135623\/image12-4.png 511w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135623\/image12-4-300x120.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926135623\/image12-4-150x60.png 150w\" sizes=\"auto, (max-width: 383px) 100vw, 383px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>You can try it out with color effects or other properties to create an interactive project of your own imagining!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Tip_Adjust_an_Actors_Center_Point\"><\/span>Tip: Adjust an Actor&#8217;s Center Point<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When you&#8217;re making your own AI costumes or actors, you will want to pay special attention to their size and center point. In Tynker&#8217;s Drawing Tool, the center of an actor is where these two gray lines meet.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"462\" height=\"438\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110655\/image13-4.png\" alt=\"\" class=\"wp-image-36349\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110655\/image13-4.png 462w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110655\/image13-4-300x284.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110655\/image13-4-150x142.png 150w\" sizes=\"auto, (max-width: 462px) 100vw, 462px\" \/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Need to adjust how an actor gets positioned? For small changes, you move the actor using the Selection tool.&nbsp;Or you can use the <strong>Center <\/strong>button in the Drawing Tool to pick from a set of predefined alignment options:&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"666\" height=\"128\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110705\/image14-3.png\" alt=\"\" class=\"wp-image-36350\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110705\/image14-3.png 666w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110705\/image14-3-300x58.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926110705\/image14-3-150x29.png 150w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wait_a_Second%E2%80%A6_Hows_This_AI_Anyway\"><\/span>Wait a Second\u2026. How&#8217;s This AI, Anyway?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These projects are using AI behind the scenes.&nbsp;<\/p>\n\n\n\n<p>The AI models have been trained on a large dataset of images featuring hands, faces, and bodies in various positions and have learned to identify key landmarks. When you interact with the project, the model analyzes the incoming video feed to identify and follow the movements of <strong>your <\/strong>hands and features, providing accurate and instantaneous tracking.&nbsp;<\/p>\n\n\n\n<p>This massive amount of &#8220;training data&#8221; plus AI algorithms enables the interactive features of these projects!&nbsp;<\/p>\n\n\n\n<p>Want to dive deeper? Tynker offers two additional AI block coding features for students and educators wanting to take AI further.&nbsp;<\/p>\n\n\n\n<p>Find <strong>Object Recognition <\/strong>blocks to explore Tynker projects that can recognize common household objects (like cellphones, cups, cars, and so forth).&nbsp;<\/p>\n\n\n\n<p>And if you&#8217;d like to see how coders can train AIs by hand, using their own creativity and planning skills, use the <a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-ai-blocks\/#:~:text=use%20landmarks%2C%20too.-,Project%20%234%3A%20Little%20Bit%20Louder%20Now,-The%20Natural%20Language\"><strong>Natural Language Processing<\/strong> blocks<\/a> for a coding challenge.&nbsp;<a href=\"https:\/\/www.tynker.com\/parents\/curriculum\/introduction-to-ai-ml\/\">Explore these topics and much more in Tynker&#8217;s AI Course.<\/a> <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.tynker.com\/dashboard\/student\/#\/course\/62bf56991b1ead3ccc634f48\"><img loading=\"lazy\" decoding=\"async\" width=\"362\" height=\"537\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140000\/image-107.png\" alt=\"\" class=\"wp-image-36366\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140000\/image-107.png 362w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140000\/image-107-202x300.png 202w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140000\/image-107-101x150.png 101w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140000\/image-107-150x223.png 150w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Looking_for_More_Try_Ribbon_Dance\"><\/span>Looking for More? Try Ribbon Dance <span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Explore AI and interactive art! A colorful ribbon follows your fingertips in this cool step-by-step tutorial. Like all Pose Detection projects, a webcam is required.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.tynker.com\/ide\/v3?type=diy&amp;p=64ffaa50218b2c4d0b5a5f1e\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"319\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141940\/unnamed-1-2.png\" alt=\"\" class=\"wp-image-36375\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141940\/unnamed-1-2.png 512w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141940\/unnamed-1-2-300x187.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141940\/unnamed-1-2-150x93.png 150w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p> <\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.tynker.com\/ide\/v3?type=diy&amp;p=64ffaa50218b2c4d0b5a5f1e\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Start the Tutorial<\/strong><\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Coding_Challenge_Add_the_Pen_Blocks\"><\/span>Coding Challenge: Add the Pen Blocks<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Can you figure out how to reproduce this effect in Tynker code blocks? This effect mimics the classic <strong>Finger Trap<\/strong> toy, but the effect is purely virtual!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"270\" height=\"152\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926140725\/finger-trap2-1.gif\" alt=\"\" class=\"wp-image-36370\"\/><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Hint:<\/strong> <a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-pen-blocks\/\">The Pen Blocks<\/a> draw a line from landmark-to-landmark. Explore the Tynker tutorial called <strong>Snow Angel <\/strong>for more cool Pen tricks with Tynker&#8217;s AI blocks.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/www.tynker.com\/ide\/v3?type=diy&amp;p=62ea880d218b2c42850ea2e5\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108-1024x572.png\" alt=\"\" class=\"wp-image-36371\" width=\"256\" height=\"143\" srcset=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108-1024x572.png 1024w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108-300x168.png 300w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108-150x84.png 150w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108-768x429.png 768w, https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926141015\/image-108.png 1200w\" sizes=\"auto, (max-width: 256px) 100vw, 256px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Debugging_Tips_for_AI\"><\/span>Debugging Tips for AI<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Here is some advice for when you start coding your own original webcam powered projects: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>I don&#8217;t see anything!<\/strong> Make sure you turn the video on, start detection, and show detection. Use a <a href=\"#startdetection\">starter script like the one shown here<\/a>. Use the <strong>show detection<\/strong> blocks so you can easily see how the AI is tracking you. You will also need to <strong>Allow <\/strong>webcam access when the Tynker website prompts you. A working webcam is required for these projects.  You may need to adjust your lighting and camera angle for best results.<\/li>\n\n\n\n<li><strong>Check your landmarks. <\/strong>All of your landmark code need to use the same style. For example, your code won&#8217;t work if you are using Body landmarks while Face detection is active. It&#8217;s easy to make a simple mistake (for example, using the Left Hand instead of the Right) so read your code <strong>very <\/strong>closely.<\/li>\n\n\n\n<li><strong>Print values.<\/strong> Wondering how things work, exactly? You can make your actors report the value of a variable or their own properties on stage using&nbsp;<strong>say&nbsp;<\/strong>or&nbsp;<strong>set label&nbsp;<\/strong>blocks.&nbsp;<\/li>\n\n\n\n<li><strong>Write code a little bit at a time<\/strong>. Run your code as you add features, rather than writing everything all at once. Start with the smallest possible version of your game, then add to it once the basic mechanics are working.<\/li>\n\n\n\n<li><strong>Save backups. <\/strong>Save different versions of your code before making big changes, in case you need to revert. Use&nbsp;<strong>Save As&nbsp;<\/strong>to save a different version of your Tynker project.&nbsp;<\/li>\n\n\n\n<li><strong>Backpack and copy-paste. <\/strong>Experiment in a new project, testing a small piece of your code\u2014use Tynker\u2019s&nbsp;<strong>Backpack&nbsp;<\/strong>to save code so you don\u2019t have to rewrite your script.<\/li>\n\n\n\n<li><strong>Comment your code.&nbsp;<\/strong>Are you making a big project but don\u2019t have time to finish coding it in one sitting? Add&nbsp;<strong><em>comments&nbsp;<\/em><\/strong>to your code, reminding you of what needs to be done or isn\u2019t working yet.<\/li>\n<\/ul>\n\n\n\n<p>Don&#8217;t forget: You can ask a teacher or another coder for help, too. Get a good night\u2019s sleep and try again tomorrow! The best debugger is a well-rested mind.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Helpful_AI_Links\"><\/span>Helpful AI Links<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Want to take things further? Stay tuned for exciting AI-powered Hour of Code tutorials from Tynker, coming soon. You can also explore the AI courses and tutorials below!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>See All AI Tutorials and Courses: <a href=\"https:\/\/www.tynker.com\/dashboard\/student\/#\/games-and-apps\/stem\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Visit Your Student Dashboard<\/strong><\/a><\/li>\n\n\n\n<li>Block Coding for Kids: <a href=\"https:\/\/www.tynker.com\/blog\/tynkers-new-ai-ml-course-now-available\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tynker\u2019s New AI &amp; ML Course<\/a><\/li>\n\n\n\n<li>Free AI Tutorials: <a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-ai-blocks\/\">Walkthrough of The AI Blocks \u2013 AI Block Coding Tutorial<\/a><\/li>\n\n\n\n<li>Advanced AI with JavaScript: <a href=\"https:\/\/www.tynker.com\/blog\/announcing-tynkers-artificial-intelligence-course\/\">Tynker\u2019s Artificial Intelligence Course<\/a><\/li>\n\n\n\n<li>Info for Parents on Block Coding: <a href=\"https:\/\/www.tynker.com\/parents\/curriculum\/introduction-to-ai-ml\/\">Introduction to AI &amp; ML<\/a><\/li>\n\n\n\n<li>Info for Parents on JavaScript: <a href=\"https:\/\/www.tynker.com\/parents\/curriculum\/artificial-intelligence\/\">Deep Dive into Artificial Intelligence<\/a><\/li>\n\n\n\n<li>AI Courses for Schools: <a href=\"https:\/\/www.tynker.com\/middle-school\/coding-curriculum\">Equip Your School with AI \u2014 All K-8 Plans Included<\/a><\/li>\n<\/ul>\n\n\n\n<p>Go further and discover how <a href=\"https:\/\/www.tynker.com\/\">Tynker\u2019s Curriculum<\/a> can inspire the next generation to shape the world through the power of code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"More_Activities\"><\/span>More Activities!<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Looking for more fun activities? Check out these&nbsp;<strong>Tynker Toolbox<\/strong>&nbsp;articles!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-workshop-basics\/\"><strong>Tynker Workshop Basics<\/strong><\/a>&nbsp;\u2014 Learn about coordinates and start coding with Tynker.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/animation-tool\/\"><strong>The Animation Tool<\/strong><\/a>&nbsp;\u2014 Learn about frame-based animation and other animation tips.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-character-creator\/\"><strong>The Character Creator<\/strong><\/a>&nbsp;\u2014 Take control of custom rigs using the Animation blocks.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/text-tricks\/\"><strong>Text Tricks<\/strong><\/a>&nbsp;\u2014 Work with speech bubbles and more. Tell your own stories, put on a play, or make a computer write poetry!<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-sound-blocks\/\"><strong>The Sound Blocks<\/strong><\/a>&nbsp;\u2014 Play music with code! Add custom sound effects, too. Tynker\u2019s brand new music tool supports MIDI and MP3.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/the-synth-blocks\/\"><strong>The Synth Blocks<\/strong><\/a>&nbsp;\u2014 Create your own sound effects and instruments! You can create crunchy dubstep drops, glitchy chiptunes, or instruments from any style of music you can imagine!&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-code-block-tricks\/\"><strong>Code Block Tricks<\/strong><\/a>&nbsp;\u2014 Get top-secret ninja tips for writing code fast in Tynker Workshop.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-pen-blocks\/\"><strong>The Pen Blocks<\/strong><\/a>&nbsp;\u2014 Make your actors draw as they move. Create patterns, draw geometric shapes, and more.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-physics-blocks\/\"><strong>The Physics Blocks<\/strong><\/a>&nbsp;\u2014 Create games or simulations with gravity, collisions, and more. Think:&nbsp;<em>Angry Birds<\/em>&nbsp;and&nbsp;<em>Marble Madness<\/em>.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/the-ar-blocks\/\"><strong>The Augmented Reality (AR) Blocks<\/strong><\/a>&nbsp;\u2014 Want to use video or photos in your programs? Try the AR Blocks, which let you code your own selfie!&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-ai-blocks\/\"><strong>The Artificial Intelligence (AI) Blocks<\/strong><\/a>&nbsp;\u2014 Take your AR projects to the next level with face-, hand-, and pose-tracking. Explore what makes AI special.&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-tutorial-builder\/\"><strong>The Tutorial Builder<\/strong><\/a>&nbsp;\u2014 Did you ever make a really cool Tynker Block project and wish you could teach the whole world exactly how you did it? Now you can!<\/li>\n\n\n\n<li><a href=\"https:\/\/www.tynker.com\/blog\/tynker-toolbox-the-python-editor\/\"><strong>The Python Editor<\/strong><\/a>&nbsp;\u2014 Looking for a challenge? Ready for your next step on your coding journey? Learn Python with Tynker too, and take the plunge into text-based coding.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Have you seen Tynker&#8217;s brand-new AI blocks? They allow you to create all kinds of unique gameplay. Take a look some of of these webcam-powered AI projects for some ideas: Make games that get you moving! Control arcade games with your hands! Create interactive artwork programs! Let&#8217;s explore how to do it. You can find an existing Tynker project you&#8217;ve [&hellip;]<\/p>\n","protected":false},"author":25,"featured_media":36362,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[53,528,12],"tags":[427,428,432,465,26,443],"class_list":["post-36342","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-coding-at-home","category-creative-coding","category-ideas-and-tips","tag-ai","tag-artificial-intelligence","tag-creative-coding","tag-game-design","tag-make-games","tag-tips"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Webcam Controls to Your Tynker Games - Tynker Blog<\/title>\n<meta name=\"description\" content=\"Have you seen Tynker&#039;s brand-new AI blocks? AI-powered web cameras make whole new kinds of interactions possible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Webcam Controls to Your Tynker Games - Tynker Blog\" \/>\n<meta property=\"og:description\" content=\"Have you seen Tynker&#039;s brand-new AI blocks? AI-powered web cameras make whole new kinds of interactions possible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/\" \/>\n<meta property=\"og:site_name\" content=\"Tynker Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Gotynker\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-27T16:52:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-02T15:51:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"996\" \/>\n\t<meta property=\"og:image:height\" content=\"451\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tynker Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@gotynker\" \/>\n<meta name=\"twitter:site\" content=\"@gotynker\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tynker Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Webcam Controls to Your Tynker Games - Tynker Blog","description":"Have you seen Tynker's brand-new AI blocks? AI-powered web cameras make whole new kinds of interactions possible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/","og_locale":"en_US","og_type":"article","og_title":"Add Webcam Controls to Your Tynker Games - Tynker Blog","og_description":"Have you seen Tynker's brand-new AI blocks? AI-powered web cameras make whole new kinds of interactions possible.","og_url":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/","og_site_name":"Tynker Blog","article_publisher":"https:\/\/www.facebook.com\/Gotynker\/","article_published_time":"2023-09-27T16:52:01+00:00","article_modified_time":"2023-10-02T15:51:13+00:00","og_image":[{"width":996,"height":451,"url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png","type":"image\/png"}],"author":"Tynker Team","twitter_card":"summary_large_image","twitter_creator":"@gotynker","twitter_site":"@gotynker","twitter_misc":{"Written by":"Tynker Team","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#article","isPartOf":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/"},"author":{"name":"Tynker Team","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/934d769f4839cb9df678306ee728f671"},"headline":"Add Webcam Controls to Your Tynker Games","datePublished":"2023-09-27T16:52:01+00:00","dateModified":"2023-10-02T15:51:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/"},"wordCount":2052,"publisher":{"@id":"https:\/\/www.tynker.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#primaryimage"},"thumbnailUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png","keywords":["AI","Artificial Intelligence","Creative Coding","Game Design","Make Games","Tynker Tips"],"articleSection":["Coding at Home","Creative Coding","Ideas and Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/","url":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/","name":"Add Webcam Controls to Your Tynker Games - Tynker Blog","isPartOf":{"@id":"https:\/\/www.tynker.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#primaryimage"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#primaryimage"},"thumbnailUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png","datePublished":"2023-09-27T16:52:01+00:00","dateModified":"2023-10-02T15:51:13+00:00","description":"Have you seen Tynker's brand-new AI blocks? AI-powered web cameras make whole new kinds of interactions possible.","breadcrumb":{"@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#primaryimage","url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png","contentUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20230926114922\/blog-92-1.png","width":996,"height":451},{"@type":"BreadcrumbList","@id":"https:\/\/www.tynker.com\/blog\/add-webcam-controls-to-your-tynker-games\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Coding for Kids","item":"https:\/\/www.tynker.com\/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https:\/\/www.tynker.com\/blog\/"},{"@type":"ListItem","position":3,"name":"Add Webcam Controls to Your Tynker Games"}]},{"@type":"WebSite","@id":"https:\/\/www.tynker.com\/blog\/#website","url":"https:\/\/www.tynker.com\/blog\/","name":"Tynker Blog","description":"Tynker makes it fun and easy to learn computer programming. Get started today with Tynker&#039;s easy-to-learn, visual programming courses designed for young learners in grades K-12.","publisher":{"@id":"https:\/\/www.tynker.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tynker.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.tynker.com\/blog\/#organization","name":"Tynker - Coding for Kids","url":"https:\/\/www.tynker.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20220713063303\/appicon-120.png","contentUrl":"https:\/\/images.tynker.com\/blog\/wp-content\/uploads\/20220713063303\/appicon-120.png","width":120,"height":120,"caption":"Tynker - Coding for Kids"},"image":{"@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Gotynker\/","https:\/\/x.com\/gotynker","https:\/\/www.instagram.com\/tynkercoding\/","https:\/\/www.pinterest.com\/gotynker\/","https:\/\/www.linkedin.com\/company\/tynker"]},{"@type":"Person","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/934d769f4839cb9df678306ee728f671","name":"Tynker Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.tynker.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53c002ba171d44324489e00b00f5b0ebf381cabfef3347db5e6d5257409d92ba?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53c002ba171d44324489e00b00f5b0ebf381cabfef3347db5e6d5257409d92ba?s=96&d=mm&r=g","caption":"Tynker Team"},"url":"https:\/\/www.tynker.com\/blog\/author\/lpateltynker-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/36342","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/comments?post=36342"}],"version-history":[{"count":29,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/36342\/revisions"}],"predecessor-version":[{"id":36414,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/posts\/36342\/revisions\/36414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/media\/36362"}],"wp:attachment":[{"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/media?parent=36342"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/categories?post=36342"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tynker.com\/blog\/wp-json\/wp\/v2\/tags?post=36342"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}