Draw in the Air

Overview

Art is in the AIR; literally. How? With PictoBlox’s human body detection ability! Learn to draw your favorite pictures in the air using the tip of your finger and the blocks in Human Body Detection Extension in PictoBlox and trace it on your computer screen. No more worrying about finished sketchbooks or pencils. All you need is your finger and the world becomes your canvas!

Activity: Draw in the Air

Setting up the Environment

Let’s begin by adding the Human Body Detection and Pen Extension. 

1. Open PictoBlox.
2. Click on the Add extension buttons.
3. You need to keep two things in mind while working with this extension:
   1. That your computer is connected to the internet.
   2. You did Log in to your PictoBlox account to use it.
4. Choose the Human Body Detection extension and wait for a little while till the models get loaded.
5. Now to draw on the screen, we need to add the Pen extension. Now click on the Add extension button again.
6. Choose Pen extension.

Setting Up the Stage

Now, let’s add a new Pencil sprite to draw.

1. Click on the Choose a Sprite button and select a pencil sprite from the library.
2. Right-click on Tobi and choose to delete from the dropdown to delete Tobi’s sprite.
3. We will need to make a few changes in the costume of the Pencil  Sprite. Select the Costume Palette to edit the costume.
4. Next, drag the pencil into the costume area, such that the tip of the pencil should be on the center dot.
5. Next, we need to make 3 additional sprites.
   1. Pen Up: to stop drawing on the screen
   2. Pen Down: to draw on the screen
   3. Erase All: to clear the screen
6. Click on the Choose A Sprite button and select the Paint option. Use the rectangle tool to draw the background and the Text tool to display the message.
7. Similarly, make the other two sprites which are Pen Down and Erase All.
8. Once the sprites are made, let’s arrange them on the stage so that we can get sufficient space to draw. To align them in a straight line, you can keep the value of y-coordinate the same.

Now we need to move on with the script.

Making the Pencil follow the Finger

Let’s begin to write the script.

1. Select the Pencil sprite.
2. Drag and drop a when flag clicked hat block into the scripting area to execute the program whenever the green flag is clicked.
3. As we will be drawing in air and the drawings will be traced on the screen, we need to turn the camera on, thus snap a turn on video on stage with 0% transparency block from the Human Body Detection palette.
4. Add a forever block from the Control palette to run the script continuously.
5. Now as we need the details of the hand in real-time we will be using analyse image for hand from camera block from the Human Body Detection palette.
6. Next, we need to check whether our hand is detected or not. Thus, place an if block from the Controls palette.
7. We will be using the tip of the index finger to draw. Thus, we need the tip of the pencil to follow the tip of our index finger. We will use go to x() y() block from the motion palette.
8. Next, place the x position of top of thumb block from the human body detection palette into the x input of the go to x() y() block. From the last dropdown, select index finger.
9. Duplicate this block and place it into the y input, select y from the first dropdown.

With this, the script to trace our finger is completed.

Next, we need to write the scripts to start drawing, stop drawing, and erase the drawing i.e. we will be activating the buttons that we’ve created one by one.

Script to Start Drawing

Next, we need to start drawing as soon as the button a.k.a the Pen Down Sprite is clicked.

1. Choose the Pen Down sprite.
2. Drag and drop when this sprite clicked hat block from the Events palette.
3. Next, place a broadcast message block from the events palette and write Pen Down into the message.
4. Next, we need to perform some actions according to the button clicked i.e. the pencil should start drawing. Thus, let’s go back to the pencil sprite.
5. Place when I receive a block from the events palette and select pen down from the dropdown.
6. Now, to make the pencil draw, drag and drop the pen down the block from the pen palette below it.

Script to Stop Drawing

Next, we need to stop drawing as soon as the button a.k.a the Pen Up Sprite is clicked.

Repeat the above step 1 to step 3 and make the respective changes and the script will look like this.

To assign actions to the button, repeat steps 4 to 6 and make the following changes. Replace the pen down block with the pen up block.

Script to Erase the Drawing

Finally, we need to erase the drawing as soon as the button a.k.a the Erase All Sprite is clicked.

Repeat the above step 1 to step 3 and make the respective changes and the script will look like this.

To assign actions to the button, repeat steps 4 to 6 and make the following changes. Replace the pen-down block with the erase-all block.