Tynker Toolbox: The AR Blocks
AR brings coding to life! AR, short for Augmented Reality, is a way of adding computer-generated effects to real-life photos and videos. And, as an added bonus, AR projects will get you moving around, too! Here’s a look at what’s possible with AR.
Check out Wipe Away, a timed game where you have to touch on-screen blocks with your hands to win!
Here’s an AR version of Space Invaders where you can knock a ball around. Watch it bounce off my head!
To get familiar with the AR blocks, let’s make a Photobooth, where you can take a selfie with a costume of your own design. Here’s what it might look like:
You can customize your own photobooth with stickers, animations, and more.
Let’s start coding one! Follow along by logging in at tynker.com (or open the app), then create a blank project in Tynker Workshop (+Create Project > Blank Project). Then, because it’s a Tynker Extension, the AR blocks must be enabled to use. You have two options.
Option #1: Search for an AR command, like turn video on, then use it in your project. The AR extension will be automatically enabled.
Option #2: You can also click More at the bottom of the coding palette, then choose AR and Add.
Is This Thing On?
Before we get too excited, let’s make sure that you have a working webcam. Add this script to the Stage and then press Play.
You should see yourself (or whatever your webcam is pointing at) on the Tynker Stage. Click Stop and keep coding.
Hint: If your web browser asks permission to record from the webcam, Allow it so that Tynker can take photos and record videos.
It’s a costume party! Your costumes are entirely digital, so you can become whatever you like.
I drew a cowboy mustache, a classy top hat, and set of cat ears, all in a single actor. Try drawing your own Costumes actor (Add Actor > Drawing Tool).
Then you can control your actor with events. Here’s code to make the actor switch each time you press space:
On Your Own: Make your project even cooler by coding on-screen buttons that make the costumes swap. Try updating the code so the costume-switching is controlled with custom broadcast blocks.
Hats for Cats! Draggable Costumes
You can add draggable props and costumes, too! Here’s a hint on how to code one:
This is a great way to put an AR costume on your pet!
A Blinking Oval
Did you notice that in one of the demos, an oval flashed on screen, giving you an idea of where to put your head?
Here’s the code that created the blinking effect for the oval actor:
Say Cheese: A Button That Saves The Photo
You can save a photo of yourself in your costume to share! Here’s code for a button actor that takes a screenshot.
Notice how it hides itself as the screenshot is taken. The broadcast “cheese” might tell all the other on-stage buttons to hide, too!
Want to draw more than a costume? Here’s one idea.
You can create a “cutout” using this code:
Add this script to your stage. Experiment with the width and height until you like the effect! Change the mask’s shape from oval to rectangle and watch what happens.
You can add new backgrounds by going to the Actor’s list, Stage > ⚙️> Add Background.
Make Code Interactive!
Are you starting to see the cool coding possibilities of Augmented Reality?
Want some ideas for your own AR projects? Take Tynker’s AR Course.
By completing over 50 fun coding activities, you’ll learn to:
- Use motion detection and gestures in your coding projects
- Add special effects like transparency and mirroring to your camera feed
- Design fun AR versions of classic games like Fruit Ninja, Pong, and Brick Breaker
- Create your own virtual boxing game!
Looking for more coding activities? Check out the Course Catalog.
And read more Tynker Toolbox articles, too!
- Tynker Workshop Basics — Start coding with Tynker and learn about coordinates.
- The Animation Tool — Learn about frame-based animation and other animation tips.
- The Character Creator — Take control of custom rigs using the Animation blocks.
- The Physics Blocks — Create games or simulations with gravity, collisions, and more. Think: Angry Birds and Marble Madness.
- The Pen Blocks — Make your actors draw as they move. Create patterns, draw geometric shapes, and more.
- The Sound Blocks — Play music with code! Add custom sound effects, too. Tynker’s brand new music tool supports MIDI and MP3.
- Code Block Tricks — Get top-secret ninja tips for writing code fast in Tynker Workshop.
- The Debugger — Learn about Tynker’s data debugger and get bug-fixing tips.