Getting started with PictoBlox and your camera

Introduction

To build AI projects you need a place to build them. PictoBlox is a free block coding app, a lot like Scratch, with extra blocks for AI and for boards like Arduino. In this lesson you will install it, find your way around, and get your webcam showing on the screen.

Working principle

• The stage is the big white area at the top right. It is 480 steps wide and 360 steps tall. The middle is x: 0, y: 0.
• A sprite is a character or object. PictoBlox starts with a sprite called Tobi.
• Blocks are snapped together into scripts. A script starts with an event block such as when green flag clicked.
• Extensions add extra blocks. The AI blocks you need for this course (Face Detection, Human Body Detection, Object Detection and more) are all extensions.

What you'll need

• A laptop or desktop with a webcam (Windows, Mac or Linux), or a tablet
• PictoBlox, free from pictoblox.ai
• A grown-up to help you install it and, if PictoBlox asks, to sign in to a free account. Some AI blocks need an account.

Working in real life

1. Download and install PictoBlox, then open it and choose Block Coding.
2. Look around: the block palette is on the left, the scripting area is in the middle, and the stage and sprite list are on the right.
3. Click the Add Extension button at the bottom left. Choose Face Detection. New blue-green blocks appear in the palette.
4. Build the script below and click the green flag. If your computer asks, allow PictoBlox to use the camera.
5. You should see yourself on the stage, with Tobi standing in front of you.

Code

when green flag clicked
turn [on] video on stage with (0) % transparency
say [Hello! I can see you!] for (2) seconds

Change the transparency to 50 and click the green flag again. The video becomes see-through, so the backdrop shows through. 0 is a clear video and 100 is invisible.

Block names can be slightly different in your version of PictoBlox. If you can't find a block, look for one that does the same job.

Try it

• Make Tobi say your name.
• Add a second script: when space key pressed, turn the video off. Now press space to hide the camera.
• Can you make the video turn on at 80% transparency, then slowly become clearer? (Hint: use a repeat loop and change the transparency each time.)

Conclusion

• PictoBlox is a block coding app with extra blocks for AI.
• The stage is 480 × 360, with x: 0, y: 0 in the middle.
• You add AI blocks with the Add Extension button, and you can show your webcam on the stage.

What next?

Now make the camera react to you: Wave to pop the balloons: motion detection.