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. 

Photobooth Funbooth

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!

Custom Cutouts

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!

More Activities? 

Looking for more coding activities? Check out the Course Catalog. 

And read more Tynker Toolbox articles, too!

• Tynker Workshop Basics — Learn about coordinates and start coding with Tynker.
• The Animation Tool — Learn about frame-based animation and other animation tips.
• The Character Creator — Take control of custom rigs using the Animation blocks.
• Text Tricks — Work with speech bubbles and more. Tell your own stories, put on a play, or make a computer write poetry!
• The Sound Blocks — Play music with code! Add custom sound effects, too. Tynker’s brand new music tool supports MIDI and MP3. 
• The Synth Blocks — 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! 
• Code Block Tricks — Get top-secret ninja tips for writing code fast in Tynker Workshop. 
• The Pen Blocks — Make your actors draw as they move. Create patterns, draw geometric shapes, and more.
• The Physics Blocks — Create games or simulations with gravity, collisions, and more. Think: Angry Birds and Marble Madness.
• The Artificial Intelligence (AI) Blocks — Take your AR projects to the next level with face-, hand-, and pose-tracking. Explore what makes AI special. 
• The Debugger — Learn about Tynker’s data debugger and get bug-fixing tips.
• The Tutorial Builder — 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!
• The Python Editor — 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.