Tynker Toolbox: The AR Blocks

Last Updated: May 26, 2020 11:58 am
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! 

A developer waves his hands around to demonstrate "Wipe Away" AR game
Ready for a serious coding challenge? Check out the video tutorial for Wipe Away!

Here’s an AR version of Space Invaders where you can knock a ball around. Watch it bounce off my head!

An AR version of space invaders

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:

Demonstration of using costumes with AR blocks, top hat, mustache on a real person's head

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.

The shortest AR program you can write: On start, turn video on

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). 

AR costumes: A top hat, cat ears, and cowboy mustache drawing is shown in Tynker's Drawing Tool

Then you can control your actor with events. Here’s code to make the actor switch each time you press space

When Space is pressed, next costume program

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. 

Broadcast "switch" block
When I receive "switch" block

Hats for Cats! Draggable Costumes

You can add draggable props and costumes, too! Here’s a hint on how to code one: 

An augmented reality costume that goes to the mouse

This is a great way to put an AR costume on your pet! 

A real life photo of a cat with an AR hat costume placed on it

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: 

Program for a blinking oval that uses show and hide blocks

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. 

Program for a screenshot button

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. 

Mona Lisa painting with the face masked

You can create a “cutout” using this code: 

Short mask using oval program

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!
An AR boxing match demonstration. A human player faces of a computer opponent monkey

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. 

About Lomit Patel

Lomit Patel is the Chief Growth Officer of Tynker, with 20 years of experience helping startups grow into successful businesses. He is also the author of the book "Lean AI" which is part of Eric Ries' bestselling "The Lean Startup" series.