Програмування для початківців - приклад створення Азбуки Морзе на базі візуальної системи Snap!



Однієї з метою популяризації DIY-робототехніки, для мене, є залучення уваги до IT, до програмування. І в цьому плані мені цікаві візуальні середовища програмування, де простим Drag&Drop можна створювати програми. Для тих хто тільки починає вивчати комп'ютер — такий спосіб програмування може на початковому етапі викликати інтерес (завдяки своїй простоті), і далі вже сприяти до самостійного вивчення (чогось більш складного).

Думаю багато хто чув про Scratch — це «класика жанру» (створена в MIT, ідея 2003 і вихід в реліз 1.0 в січні 2006 року), але для його роботи необхідно установка на комп'ютер (або Flash). Деякий час тому в University of California at Berkeley була розроблена система Snap!, інтерфейс якої близький до Scratch, але працює в браузері, на базі класичних html/js/css. Тобто для роботи з нею — вам достатньо лише браузера (і до того ж вона open-source).

Ось про веб-системи візуального програмування Snap! я і хочу розповісти.

Вивчати щось нове завжди цікаво на якомусь прикладі з життя, ось я і вирішив спробувати завдання малювання і озвучення азбуки Морзе — етапи вирішення цього завдання і буде вмістом даної публікації.

Програма буде при натисканні на клавіші — малювати відповідні символи, і так само «озвучувати». На КДПВ приведена підсумкова програма, і справа написано «HI HABR, HABR HI».

Живе демоЯкщо комусь хочеться відразу побачити результат, то демо тут.

Управління:

"вгору" — ініціалізація параметрів і очищення (краще натиснути після завантаження — виставити ширина точок)
"клавіша вниз" — переклад рядка
клавіші "h", "i", "a", "b", "r" — малювання та озвучування соотв. букви з допомогою азбуки Морзе.


Початок
Для старту системи Snap! досить відкрити цю сторінку у браузері.

Ось що ми побачимо після старту:


Якщо у вас не було досвіду роботи зі Scratch, то пояснимо принцип роботи з такою системою:

Бачимо три області (спрощено):
  • зліва
  • центральна
  • праворуч
Ліворуч відображаються блоки, які ми з допомогою мишки можемо переносити на центральну область, і з'єднувати між собою (від цього пішла назва програми — «snap»). При натисканні на блоці — відбувається його виконання, і всіх сполучених разом блоків.

Виконання блоків на центральній області — відображається на правій області, де ми бачимо «курсор».

Можливо хтось пам'ятає систему програмування Logo (Черепашка), де подаючи команди на переміщення, і малювання — можна було б малювати фігури. З цього прикладу і почнемо.

Перше знайомство
Для першого знайомства з роботою в Snap! намалюємо квадрат.

Вгорі над блоками відображаються типи блоків (звертаємо увагу, що вони різного кольору):


  • Рух — тут ми управляємо рухом і місцеположенням «курсора»
  • Зовнішність — тут ми управляємо зовнішнім виглядом «курсора» — який, по суті, «спрайт»
  • Звук — тут ми можемо відтворювати звуки
  • Перо — це функції для малювання
  • Управління — з допомогою цих блоків ми можемо додавати логіку
  • Сенсори — це зворотній зв'язок з «світу» де живе «курсор» — визначення торкань і т.п.
  • Оператори — це математичні функції, умови, цикли
  • Змінні — тут можна визначати змінні
Для малювання квадрата напишемо програму у вільному стилі:

10. опустити перо
20. повторити 4 рази:
30. рушити вперед на 50 пікселів
40. повернутися вправо на 90 градусів
Почнемо:

1. виберемо розділ «Перо», і перетягнемо блок "опустити перо" в центральну область.
2. виберемо розділ «Рух», і перетягнемо блок "пересунутися на 10 кроків", після — змінимо значення 10, на 50.
3. перетягуємо блок "повернутися за годинниковою на 15 градусів" — змінимо 15 на 90.
4. з'єднаємо блоки «пересування» і «поворот» — для цього захопимо «повернути» і передвинем його до нижньої частини блоку «пересунути» до появи світлої смуги — індикатора з'єднання блоків — і відпускаємо блок — після цього два блоки стають сполученими.

Якщо ми зараз натиснемо на цих блоках наш курсор почне рухатися і обертатися, при кожному натисканні. Але він не малює, для цього просто натиснемо на блоці "опустити перо" — після цього курсор буде малювати. І натиснувши 4 рази — намалюємо квадрат.

Тепер очистимо зону малювання, для цього виберемо розділ «Перо» і натиснемо на блоці "прибрати всі" (можна не переносити в робочу зону).

5. вибираємо розділ «Управління», і перенесемо блок "повторювати 10", в робочу область і змінимо на 10 4.
6. переносимо блоки "опустити перо" і блоки «пересунути/повернути», всередину блоку «повторювати» — до їх автоматичного з'єднання з блоком.
7. так само з розділу «Управління» — перенесемо блок "Коли клацнути на (зелений прапор)", в робочу область і прикріплюємо її до верхньої частини блоку «повторювати».

Всі ми закінчили нашу програму, тепер натискаючи на «зеленому прапорці», праворуч вгорі (над зоною малювання) — ми будемо стартувати нашу програму малювання.

Ось що вийшло:


Створення азбуки Морзе


Базові речі тепер зрозумілі, тепер приступимо до реалізації нашої ідеї по азбуці Морзе. Згадаймо, що кодування відбувається з допомогою крапки і тире. Тому нам треба зробити дві функції:
  • одна буде малювати крапки
  • а друга тире.
(для нового проекту, якщо не хочемо зберігати поточні зміни — можемо просто оновити сторінку).

Малювання точки
1. Переходимо в розділ «Перо» — переносимо блок "встановити розмір пера 1" — і виставляємо його 10. Так буде видно добре точку.
2. З розділу «Рух» переносимо блок "пересунутися на 10 кроків" — і виставляємо 1 крок. Так ми намалюємо точку (тому пензлик має діаметр 10 пікселів — вона намалюємо нам окружність).
3. І не забудемо перенести блок "опустити перо" з розділу «Перо» — інакше ми нічого не побачимо :)
4. З'єднуємо всі блоки, і виходить:



Бачимо, що наш «курсор» закриває намальовану точку, для вирішення цієї проблеми — ми просто зменшимо «курсора»:
5. В розділі «Зовнішність» знаходимо і переносимо блок "встановити розмір в 100" і виставляємо його 10. (і прикріплюємо його до наших блокам зверху).
6. Так само зробимо щоб курсор переходь далі, але без малювання, для цього переміщуємо (і з'єднуємо) блок "підняти перо" з розділу «Перо»
7. Додаємо блок "пересунути на 10 кроків" з розділу «Рух» — і прикріплюємо вниз до наших блокам, і змінюємо 10 кроків на 15.

У підсумку отримуємо (попередньо очистивши зону «Перо» — "прибрати всі"):


Точка праворуч — це є наш зменшений «курсор» — в цьому місці почнеться наступне малювання.

Малювання тире
Для малювання тире — нам потрібно лише збільшити параметр руху з 1 до 10 кроків, а решту залишити без змін.

У Snap! є можливість клонувати блоки, для цього на наших блоках натискаємо правою клавішею миші, і вибираємо «продублювати» — з'явиться дубль, і переносимо його вниз. І змінюємо значення в блоці "пересунути на 1 крок", на 15.

Натискаємо на цьому збірному блоці, результат:


Бачимо, що ми намалювали «тире»!

Обробка натискань
Тепер ми можемо спробувати прив'язати виконання наших блоків, не до натискання по них, а до натискання клавіш на клавіатурі.

Наприклад, зробимо: натискання «0» — точка, натиснути «1» — тире (клавіші на основній клавіатурі).

1. Для цього переходимо в розділ «Управління» і вибираємо блок "Коли натиснути «пробіл» клавішу", і прикріплюємо його зверху нашої групи блоків (де малюється точка). І вибираємо в списку замість «пробіл» — «0»
2. Такий же блок переносимо, і прикріплюємо зверху групи блоків «тире», і вибираємо замість «пробіл» — «1».

Отримуємо, і перевіряємо:


Нагадаю, очищення зони малювання можна зробити «Перо» — «прибрати всі», і переміщення курсору в початок: «Рух» — «перейти в точку х [0] y [0]»


Механізм повідомлень
В англомовному варіанті азбуки Морзе літера «А» закодована за допомогою «точка», «тире». Так само після символу повинна бути невелика затримка — відступ (пробіл).

Для реалізації цього завдання ми будемо використовувати механізм повідомлень Snap! — ми будемо перехоплювати натискання на клавішу «А», і відповідно кодування цієї літери в абетці Морзе) послідовно посилати повідомлення «точка», «тире» і «пробіл» (dot, dash, space).

А в поточних функції/блоках де відбувається малювання по натисненню — ми замінимо на виконання по отриманню сигналу.

Таким чином у нас буде три сигналу (події):
* dot
* ii
* space

Почнемо:
1. перенесемо з розділу «Управління» блок "коли я отримаю []"
2. открепим блоки що малюють точку, від "коли натиснути 0 клавішу" — для цього можна захопити перший блок знизу, у нас це "встановити розмір в 10", і перенести його в сторону — блоки від'єднаються від верхнього.
3. прикріплюємо блок "коли я отримаю []" до наших блокам рисующим точку — прикріплюємо зверху.
4. видаляємо одиничний блок «коли натиснути 0 клавішу» — для цього переносимо його з робочої зони, на ліву область блоків.
5. виставляємо отримується повідомлення в блоці "коли я отримаю " — у випадаючому списку вибираємо «новий» і вводимо "dot"
6. для генерації повідомлення — переносимо з розділу «Управління» блок — "переслати [] всім і чекати", і у випадаючому списку вибираємо повідомлення "dot".

Ось що у нас повинно вийти:


Зараз при натисканні на блоці "переслати [dot] всім і чекати" — буде відбуватися посилка повідомлення, і активація/виконання всіх блоків хто «підписані» на це повідомлення, в нашому прикладі — блок, що малює точку.

Початкові параметри
Зробимо невеличкий «переформатування».

У нас є часто повторювані операції, і їх можна винести в окрему «функцію», і викликати її при натисканні на клавішу «вгору». Там буде:
  • виставлення курсору в початок
  • очистка екрану
  • виставлення розміру курсору
  • виставлення розміру точки малювання.
Винесемо ці блоки з наших блоків малювання крапки і тире.

Так само доопрацюємо блок «тире», замість обробки натискання клавіші — так само буде спрацьовувати на отримання повідомлення "ii".

І додамо обробку блоку «пробіл» — «space» — він буде виконувати тільки пересування курсору — для виконання відступу між «літерами» коду Морзе.

Ось що у нас вийшло:


Кодування символів
Ну от, нарешті ми підійшли до найголовнішого — кодування символу A. Щоб при натисканні на «а» — малювалися соотв. букви кодом Морзе.

Для цього ми використовуємо блок "коли натиснути [] клавішу" з Управління та блоки "переслати всім і чекати" звідти ж. Конкретно, для літери А, ми повинні вислати «точку», «тире», і далі «пробіл» (відповідно сигнали: «dot», «dash», «space»).

Ось що виходить:


Змінні та перенесення рядка
В процесі роботи я зрозумів, що без переносу рядка буде не дуже зручно малювати азбуку морзе. Тому зробимо функцію «перенесення рядка», і призначимо її на натискання клавіші курсору «вниз».

Для виконання переносу рядка необхідно виконати два завдання:
1. пересунути курсор на початок по осі X
2. пересунути курсор на наступний рядок (по осі Y) на висоту рядка.

Для їх реалізації я вирішив ввести дві змінні:
* початок тексту по осі Xleft_border)
* висота рядка (line_height)

Значення змінної left_border буде використовуватися при виставленні початковій позиції (ми змінимо з 0, на -200 щоб малювання починалося з лівої частини екрану).

Для додавання змінної, необхідно натиснути зліва вгорі на розділі «Змінні», і там на "Оголосити змінну":


Таким же чином оголосимо змінну «line_height».

Після додавання змінні будуть відображені зліва (для того щоб їх можна було Drag&Drop і вставити у арифметичні операції, умови тощо), і так само значення змінної буде транслюватися на екран малювання — щоб відключити відображення на екрані — досить натиснути зліва від змінної (на панелі Змінних).

Тепер ми можемо виставити значення цих змінних, за допомогою блоку "додати [] значення [0]" у розділі «Змінні» — перенесемо ці блоки в нашу «Функцію ініціалізації». І виставимо для left_border = -200, line_height = 20.

Ось як виглядає в результаті наша функція ініціалізації і переносу рядка:


арифметичні команди знаходяться у розділі «Оператори», а саму змінну ми Drag&Drop з розділу «Змінні» — в соотв. поле функції (звертаємо увагу на різні форми).

Кодування решти букв
За аналогією з буквою А, ми можна закодувати букви H, I, B, R:


Звук
Якщо ще цікаво дізнатися про звукДля отримання звуку, нам достатньо скористатися блоком, що відтворює звук, у Snap! є можливість отримання звуку із зазначенням частоти і тривалості.

Ці блоки будуть так само «слухати» сигнали dot, dash і space.

Згідно з описом з азбуки Морзе:
The duration of a dash is three times the duration of a dot. Each dot or dash is followed by a short silence, equal to the dot duration. The letters of a word are separated by a space equal to three dots (one dash)
Відкриваємо розділ «Звук», і нам знадобляться два блоки: "зіграти ноту [60] [0.5] тактів"і "пауза [0.2] тактів".

Вибираємо частоту 80, і такт 0.1 як «пробілу» після точки/тире, і 0.3 такту для «інтервал між символами.

Отримаємо наступні блоки:


Зручність системи подій/передплатників — що не змінюючи самої логіки системи, ми просто доповнили механізм (для звукового супроводу), з допомогою створення нових передплатників на «точку», «тире» — а вже їх реалізація


Збереження/експорт проекту
Якщо цікаво дізнатися про збереженняЗберегти проект можна за допомогою меню натискаємо на іконку «Листок» зліва вгорі:


Збереження відбувається в локальний storage браузера, є можливість зберігати в хмару, після реєстрації.

Так само можна експортувати проект — "Експорт проект..." — ми отримаємо xml нашої програми. Ось так виглядає ця програма по азбуці Морзе.


В ув'язненні
Звичайно, це лише мала частина можливостей Snap!, і думаю в наступних публікаціях ми спробуємо на практиці інші можливості системи, зокрема взаємозв'язок з зовнішніми системами, в тому числі Arduino.

На мій погляд, наявність такої візуальної системи могло б додати інтересу в уроки інформатики, а якби ще були уроки робо-інформатики — то думаю програмування було б цікавим і затребуваним в школі :)

Ресурси:
Якщо ви хочете допомогти в популяризації російськомовного Snap!Деякий час тому було розпочато переклад «керівництво користувача» Snap! на російську мову. Якщо ви готові допомогти виступити в якості коректора, або допомогти фінансово (а 77 сторінок перевести це все ж не проста справа). То можете відзначитися в анкеті по Snap!

Якщо вам цікаво поділитися досвідом, і бути в курсі — російськомовна група ВК за Snap!

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.