# Robot Shape Drawing with Scratch Like Code Blocks

## A Fun STEM project and great intro to programming

Turn your Smartibot into an artsy robot/creative artist/Autonomous Painter/art master with this fun and easy STEAM project!

Combine art, maths and coding in a fun and creative way, and use simple Scratch like block code to draw shaped of all sorts. This is a great way to learn the fundamentals of coding and we will show you exactly how to program your robot to become a creative artist!

For this project, you are going to make your robot draw shapes. Conveniently, you can fit markers inside the AI Bot (included in the Smartibot kit) allowing your robot to draw! The Espruino Web IDE lets you use block code to control your Smartibot and create shapes of different kinds, like squares, steps or even Tetris shapes! It's super easy, and by the end of this tutorial, you will be be doing creative coding, and will have some incredible pieces of art to put on your walls.

## How to program a robot with code blocks

We are using Espruino with the Smartibot extension for this project, which will allow us to use Smartibot-specific code blocks.

Once you're on the IDE platform, switch to block code by clicking on the </> symbol in the centre column in the middle of the page:

You will then get to the block code version of Espruino, with a special Smartibot tab on the right.

## Coding robot movement with blocks

First up, we have to create a function for each direction: forwards, left, right and stop. We also have to define each of these directions, so that the robot understands what each of those movements involves. To do that, we are going to control the speed of the each motor on the Smartibot.

### Define the directions

Go ahead and click the Functions tab, and drag the first block into the canvas/editor. We will define the forward direction first, so rename it to “forward”. We then have to set each motor to go in a forward direction. We have wired the motors of our Smartibot onto the ports of M1 and M2, so we will use M1 and M2 in the drop down list, but if you are using more motors, you can choose M3 and M4 too.

To set M1 forwards, set it to a speed of 0.6. We found 0.6 to be the ideal speed, but you can experiment with different settings too.

Then, choose M2 from the drop-down list and set it to -0.6.The reason that this is the reverse value to M1 is because M2 is installed the opposite way round to M1, but wired up the same (e.g. red wires go in the upper sockets, and the black wires in the socket underneath), so we need to reverse the commands when we are programming it.

To define the left direction, we are setting both motors to a speed of 0.55. To go right, set M1 and M2 to a speed of-0.55. Again, we found a speed of 0.55 good for turning, but you can experiment with other values as well.

Lastly, we have to tell the robot to stop at one point in time, by setting both motors to 0.

Once that's all done, check the Functions tab again: you will see all the directions that you created and defined in there.

## Draw shapes with code blocks

When all directions have been defined, we are all set to code the first shape. An easy one to start off with is a square.

Pro tip: before we start to code anything, it is sometimes easier to draw the shape out first by hand. For example, to draw a square, the robot has to drive forwards, then make a 90 degree turn to the left, then drive forward again, make another left turn, forward, left turn, forwards again and then stop.

In short, it is forward-left-forward-left-forward-left-forward-stop. Now let's translate that into block code.

In the blocks editors, first define square in the block, drag the forward function in from the Functions tab and set a delay of 0.4 seconds. Then, the robot has to make a 90 degree turn to the left. After we did a few tests, we found that a delay of 0.35 seconds gets closest to a sharp turn, so set the left function to a delay of 0.35 seconds. Repeat this two more times, after which the robot has to finish off the square by making one last forward motion, and then stop.

Once we have done all that, we have to make the robot to make the square shape when we press one of the buttons on the board. From the Smartibot tab, drag the watch … do … block into the editor.

BTN1 stands for button 1, or button A on the left of the circuit board. Change the second drop down list from both to rising. Then, add a delay function inside the block, and drop the square function underneath it. This way, when you press button A, it will wait for 1 second before it will run the square code.

That’s it, you can go and try it out now!

Tip: to place a marker inside the Smartibot, we inserted the marker just behind the battery plug, where the tip can stick out at the bottom of the robot.

## Get Creative with Coding!

Using the same method we explained here, you can make other, more complex shapes and patterns. For example, we made a Tetris Z and T shape, but you can make any other shapes using the easy block code. Just use your creativity and imagination!