Programming for beginners - an example of creating Morse code based on the visual system Snap!

One of the goals of popularizing DIY robotics, for me, is to draw attention to IT, to programming. And in this regard, I am interested in visual programming environments where programs can be created with a simple Drag & Drop. For those who are just starting to study a computer, this way of programming can cause interest at the initial stage (due to its simplicity), and then it will further contribute to independent study (of something more complicated).

I think many have heard about Scratch - this is a “classic of the genre” (created at MIT, the idea of ​​2003 and its release in release 1.0 in January 2006), but for its work it is necessary to install software on a computer (or Flash). Some time ago, Snap was developed at the University of California at Berkeley ! whose interface is close to Scratch, but works in a browser based on classic html / js / css. That is, to work with it - you just need a browser (and besides, it is open-source ).
')
Here's a web visual programming system Snap! I want to tell.

It is always interesting to study something new by some real life example, so I decided to try the task of drawing and sounding Morse code - the stages of solving this problem will be the content of this publication.

The program will, when you press the keys - draw the corresponding characters, and also “voice”. The final program is shown on the KDPV, and on the right is “HI HABR, HABR HI”.

Start

To start the system Snap! just open this page in the browser.

Here is what we will see after the start:


If you had no experience with Scratch, then we will explain the principle of working with such a system:

We see three areas (simplified):

• left
• central
• on right

On the left, the blocks that we can transfer to the central area with the mouse are displayed and interconnected (this is the origin of the program name “snap”). When you click on the block - it is executed, and all the blocks connected together.

Execution of blocks on the central area - displayed on the right area, where we see the "cursor".

Perhaps someone remembers the Logo programming system (Turtle), where giving commands for moving and drawing could draw figures. Let's start with this example.

First meeting

For the first acquaintance with work in Snap! draw a square.

At the top above the blocks are displayed the types of blocks (note that they are of different colors):

• Movement - here we control the movement and location of the “cursor”
• Appearance - here we manage the appearance of the "cursor" - which is essentially a "sprite"
• Sound - here we can play sounds
• Pen is a function for drawing.
• Management - with these blocks we can add logic
• Sensors are feedback from the “world” where the “cursor” lives - the definition of touches, etc.
• Operators are mathematical functions, conditions, cycles
• Variables - here you can define variables

To draw a square, we will write a free-style program:

  10. lower the pen
 20. repeat 4 times:
 30. move forward 50 pixels
 40. turn right 90 degrees 

Let's start:

1. select the “Pen” section, and drag the “ drop pen ” block into the central area.
2. select the “Movement” section, and drag the block “ move 10 steps ”, then change the value 10 to 50.
3. drag the block " turn clockwise by 15 degrees " - change the 15 to 90.
4. connect the “movement” and “turn” blocks - to do this, grab the “turn” and move it to the bottom of the “move” block until a light band appears - the block connection indicator - and release the block - after that, the two blocks become connected.

If we click on these blocks now, then our cursor will begin to move and turn, with each press. But he does not draw, for this we simply click on the block " drop the pen " - after that the cursor will draw. And pressing 4 times - draw a square.

Now we’ll clear the drawing area, to do this, select the “Pen” section and click on the “ remove all ” block (you can not transfer to the working area).

5. select the “Management” section, and move the “ repeat 10 ” block to the workspace, and change 10 to 4.
6. transfer the blocks “ lower the pen ” and the blocks “move / turn”, inside the block “repeat” - before their automatic connection with the block.
7. also from the “Management” section - move the “ When to click on (green flag) ” block to the workspace, and attach it to the upper part of the “repeat” block.

We all finished our program, now clicking on the "green flag" in the upper right (above the drawing area) - we will start our drawing program.

Here's what happened:

Creating Morse Code

Basic things are now clear, now proceed to the implementation of our ideas in Morse code. Recall that encoding occurs with a dot and a dash. Therefore, we need to do two functions:

• one will draw dots
• and the second dash.

(for a new project, if we don’t want to save the current changes, we can simply update the page).

Point drawing

1. Go to the “Pen” section - move the block “ set pen size 1 ” - and set it up 10. So you will see the full point.
2. From the “Movement” section, move the block “ move 10 steps ” - and set 1 step. So we draw a point (because the brush has a diameter of 10 pixels - it draws a circle to us).
3. And don't forget to move the “ drop pen ” block from the “ Pen ” section - otherwise we will not see anything :)
4. We connect all the blocks, and it turns out:



We see that our “cursor” closes the drawn point; to solve this problem, we simply reduce the size of the “cursor”:
5. In the “Appearance” section, we find and transfer the “ set size to 100 ” block and set it to 10. (and attach it to our blocks from above).
6. We will also make the cursor go further, but without drawing, for this we move (and connect) the block “ lift pen ” from the “Pen” section
7. Add the block " move 10 steps " from the "Movement" section - and attach it down to our blocks, and change the 10 steps to 15.

As a result, we obtain (after clearing the “Feather” zone - “ remove all ”):


The dot on the right is our reduced “cursor” - the next drawing will start in this place.

Drawing dash

To draw a dash - we only need to increase the motion parameter from 1 to 10 steps, and leave the rest unchanged.

In Snap! there is an opportunity to clone blocks, for this we right-click on our blocks, and choose “duplicate” - a duplicate will appear, and move it down. And we change the value in the block " move by 1 step ", by 15.

Click on this assembly block, the result:


See that we drew "dash"!

Click processing

Now we can try to bind the execution of our blocks, not to clicking on them, but to pressing keys on the keyboard.

For example, let's do: pressing "0" - a point , pressing "1" - a dash (the keys on the main keyboard).

1. To do this, go to the “Management” section and select the “ When to press the space key ” key , and attach it to the top of our group of blocks (where the point is drawn). And choose in the drop-down list instead of the "space" - "0"
2. We transfer the same block, and attach the “dash” block to the top of the block, and select “1” instead of “space”.

We get and check:


Let me remind you that you can clear the drawing area “Pen” - “remove all”, and move the cursor to the beginning: “Move” - “go to the point x [0] y [0]”

Message mechanism

In the English version of Morse code, the letter "A" is encoded using "dot", "dash". Also after the symbol there should be a small delay - indent (space).

To accomplish this task, we will use the message engine in Snap! - we will intercept pressing the “A” key, and (according to the coding of this letter in Morse code), consistently send the messages “dot”, “dash” and “space” (dot, dash, space).

And in the current functions / blocks where drawing takes place by pressing, we will replace it with the execution of the receiving signal.

Thus, we will have three signals (events):
* dot
* dash
* space

Let's start:
1. move the block “ when I get [] ” from the “Management” section
2. let's detach the blocks that draw a point, from “ when to press the 0 key ” - for this you can grab the first block from the bottom, we have to “ set the size to 10 ” and move it to the side - the blocks will detach from the upper one.
3. attach the block " when I get [] " to our blocks drawing a point - attach on top.
4. delete the single block “when press the 0 key” - for this we transfer it from the working area to the left area of ​​the blocks.
5. set the received message in the “ when I get ” block - select “new” in the drop-down list and enter “ dot ”
6. to generate a message, we transfer the block from the “Control” section - “ send [] to everyone and wait ”, and in the drop-down list select the message “ dot ”.

This is what we should get:


Now when you click on the block " send [dot] to everyone and wait ", the message will be sent, and all blocks who are "subscribed" to this message will be activated / executed, in our example, the block that draws the dot.

Initial parameters

Let's make small "refactoring".

We have frequently repeated operations, and they can be put into a separate “function”, and called when pressing the “up” key. There will be:

• cursor start
• screen cleaning
• cursor size setting
• setting the size of the drawing point.

We'll take these blocks out of our dot and dash drawing blocks.

We will also modify the “dash” block, instead of processing the keystroke — it will also trigger to receive the “ dash ” message.

And we add the processing of the “space” block - “space” - it will only perform cursor movement — to indent between the “letters” of the Morse code.

Here's what we got:

Character encoding

Well, finally, we come to the most important thing - the encoding of the symbol A. So that when you click on "a" - drawing occurs acc. letter to morse code.

To do this, we use the block " when to press [] the key " from the Office, and the blocks " send to all and wait " from there. Specifically, for the letter A , we must send "point", "dash", and then "space" (respectively, signals: "dot", "dash", "space").

This is what happens:

Variables and line breaks

In the process, I realized that without a line break it would not be very convenient to draw a Morse code. Therefore, we will make the function "line break", and assign it to pressing the cursor key "down".

To perform a line break, you must perform two tasks:
1. move the cursor to the beginning along the X axis
2. move the cursor to the next line (along the Y axis) to the line height.

To implement them, I decided to introduce two variables:
* the beginning of the text on the X axis ( left_border )
* line height ( line_height )

The value of the variable left_border will be used when setting the initial position (we will change from 0 to –200 to start drawing from the left side of the screen).

To add a variable, you need to click on the "Variables" section at the top left, and there to " Declare a variable ":


In the same way, we declare the variable "line_height" .

After adding, the variables will be displayed on the left (in order to be able to drag & drop and insert them into arithmetic operations, conditions, etc.), and the variable value will also be transmitted to the drawing screen - to turn off the display on the screen - just click to the left of the variable (on the Variables panel).

Now we can set the values ​​of these variables, using the block " give [] value [0] " in the "Variables" section - transfer these blocks to our "Initialization function". And set for left_border = -200 , for line_height = 20 .

Here’s what our initialization and line feed function looks like:


arithmetic commands are in the "Operators" section, and the variable we drag & drop from the "Variables" section - in acc. function field (pay attention to different forms).

Coding of the remaining letters

By analogy with the letter A, we encode the letters H, I, B, R:

Sound

Save / export project

In custody

Of course, this is only a small part of the capabilities of Snap !, and I think in the following publications we will try to practice other features of the system - in particular, interconnection with external systems, including Arduino .

In my opinion, the presence of such a visual system could add interest to computer science lessons, and if there were more robot-computer science lessons, then I think programming would be interesting and in demand at school :)

Resources:

• The official page of Snap! systems (snap.berkeley.edu)
• Snap User Guide! v.4.0 (in English), 77 p.
• Snap page! project on gihub

If you are interested in sharing your experience, and be aware of - the Russian-speaking VK group on Snap!