Snap на русском программа для программирования

Обновлено: 07.07.2024

Описание книги "Знакомьтесь, это Snap! Блочная среда программирования мощнее Scratch"

Описание и краткое содержание "Знакомьтесь, это Snap! Блочная среда программирования мощнее Scratch" читать бесплатно онлайн.

Книга знакомит с основами новейшего блочного языка программирования Snap! Этот язык настолько мощен, что используется не только в школах, но и в университетах США. Модификации Snap! используются для программирования Arduino, для моделирования многоагентных систем, графов и рисования сложных фигур.

Знакомьтесь, это Snap!

Блочная среда программирования мощнее Scratch

Денис Владимирович Голиков

Создано в интеллектуальной издательской системе Ridero

Snap! – блочная среда программирования, разработанная на основе Scratch в Калифорнийском университете в Беркли (University of California at Berkeley).

Основным отличием данной среды программирования от Scratch являются расширенные возможности по построению собственных блоков, а также списки и функции первого класса. Эти мощные возможности позволяют использовать Snap! не только в начальной школе, но и для обучения старшеклассников и студентов.

Пример создания цикла for.

Созданный блок for можно использовать наравне с любым встроенным блоком.

Алонзо досчитает до пяти, а затем скажет: «Я иду тебя искать!»

Snap! запускается и работает непосредственно в браузере и не требует установки на компьютер пользователя. Он написан на JavaScript и может оказывать ограниченное влияние на компьютер, так что вы можете безопасно запускать проекты других пользователей.

Snap! был разработан Дженсом Монигом (Jens Mönig at MioSoft Corporation, now at SAP), совместно с Брайаном Харви (Brian Harvey at Berkeley), при помощи студентов Калифорнийского университета в Беркли.

Основные отличия от Scratch

Типы данных.

Основным отличием Snap! от Scratch являются типы данных первого класса.

Объектами первого класса называются элементы, которые могут быть присвоены переменной или элементу массива, переданы как параметр и возвращены из функции. Благодаря этому в Snap! появилась возможность создавать двумерные массивы.

Создание двумерного массива.

Также в Snap! в отличие от Scratch функции являются объектами первого класса. Это позволяет передавать функцию как аргумент в другую функцию. В следующем примере мы передаем функции map как аргумент функцию умножить на 10, и функция map производит это действие со всем списком, переданным ей в качестве второго аргумента.

Пример использования функции.

Еще одним удивительным отличием является то, что спрайты, тоже являются объектами первого класса, и могут быть переданы в качестве аргументов.

Спрайт – объект первого класса.

А вот такое возможно в Scratch?

Один спрайт «думает» о другом спрайте.

Эти особенности Snap! позволяют познакомить учащихся с функциональным программированием в отличие от Scratch, который используется для знакомства с императивным программированием.

Медиаредакторы.

Графический редактор Snap! не является его сильной стороной и уступает по функционалу Scratch 2.0 и даже Scratch 1.4. В нем отсутствует векторный редактор, а в растровом отсутствует масштабирование, выделение, штамп и поворот.

Редактор звука в Snap! отсутствует полностью.

Я рекомендую импортировать в Snap! изображения и звуки, подготовленные во внешних онлайн реакторах, а в редакторе изображений лишь немного корректировать загруженные изображения.

Совместимость с браузерами.

Snap! может работать в следующих браузерах:

– Chrome, версия не ниже 43 (это рекомендуемый браузер для работы в среде Snap!)

– Safari версия не ниже 8.4;

– Firefox версия не ниже 38;

– Edge версия не ниже 12;

– Opera версия не ниже 32.

Совместимость со Scratch.

Совместимость с внешними устройствами.

Snap! может быть использован со следующими внешними устройствами, подключаемыми к компьютеру:

– Finch and Hummingbird robots;

– Parallax S2 robot;

– Speech synthesis by Connor Hudson;

– Fischertechnik ROBOTICS TXT Controller;

Создаваемый проект состоит из отдельных спрайтов, которые перемещаются по сцене. Поведение каждого спрайта может быть запрограммировано с помощью скриптов, которых может быть несколько.

Скрипты собираются из отдельных блоков. Наверху каждого скрипта должен быть расположен блок с овальной шапкой. Этот блок содержит условие, при выполнении которого он начнет выполняться. Выполнение скрипта начинается сверху вниз, все блоки выполняются поочередно. Линейное выполнение программы может быть изменено с помощью блоков условия или цикла. Все скрипты проекта постоянно проверяют условия в своих шапках и при их выполнении запускаются одновременно.

Например, один скрипт перемещает спрайт, второй проигрывает звук, а третий изменяет его размер.

Все три скрипта выполняются одновременно.

Помимо прямоугольных блоков существуют овальные и шестиугольные блоки. Овальные блоки являются встроенными переменными, функциями или операторами. Овальные блоки вставляются в окошки других блоков.

Пример использования овального блока.

Шестиугольные блоки – это логические (булевы) переменные, логические операторы или логические выражения (предикаты). Они вставляются в окошки шестиугольной формы.

Пример использования предиката.

Голиков Денис Владимирович.

Окончил МЭИ по специальности промышленная электроника. Автор нескольких учебников по программированию на Scratch.

При создании книги были использованы материалы следующих сайтов:

Знакомство с интерфейсом Snap!

Запуск Snap!

Кнопка запуска Snap!

Интерфейс очень похож на интерфейс Scratch 1.4.

По умолчанию в Snap! установлен английский язык интерфейса. Однако его можно переключить на один из 38 языков.

Раздел меню для переключения языка.

Я не советую переключать его на русский, так как вся литература, по Snap! на английском языке.

Строка меню. Первая кнопка

Первая кнопка меню.

Первый раздел строки меню содержит следующие команды:

Текстовое описание проекта.

Создать новый проект.

Открытие проекта. Проекты могут быть сохранены как на локальном компьютере (кнопка Browser), так и в облаке (кнопка Cloud). При сохранении файлов на локальном компьютере доступ к ним возможен только из Snap! Для сохранения в облаке нужно зарегистрироваться.

Окно открытия проекта.

Окно сохранения проекта.

Import

Этот раздел меню позволяет импортировать в проект следующие объекты:

– проект, экспортированный в файл формата XML;

– спрайт, экспортированный в файл формата XML;

– блок, экспортированный в файл формата XML;

– проект из Scratch 1.4 в формате SB;

– проект из Scratch 2.0 в формате SB2;

– проект из BYOB 3.1

– изображения (костюмы спрайтов, фоны сцены) в любом формате, поддерживаемом Вашим браузером.

– звуки в любом формате, поддерживаемом Вашим браузером.

Также для импорта любого файла в Snap! достаточно перетащить его мышкой в окно Snap! в браузере.

Изначально Snap! был встроенным расширением одной из версий Scratch. Сегодня это полностью независимая среда программирования, которая предлагает возможности, отсутствующие в родительском языке.

Эти функции изначально не стали включать в Scratch, чтобы не усложнять обучение детей программированию. Разработчики справедливо посчитали, что самое важное для ребёнка - это усвоить базовые принципы, которые позволяют создавать простейшие программы. Именно благодаря тому, что они сосредоточились на ограниченном наборе функций, Scratch и оказался так эффективен для работы с самыми маленькими программистами. В свою очередь, Snap! предназначен для аудитории постарше, условно - тинейджеров.

Альтернативное название этого языка - Build Your Own Blocks ("Создавай свои собственные блоки"). В этом и заключается одно из главных преимуществ Snap по сравнению с Scratch. Он позволяет ученикам объединять написанные последовательности команд в новый элемент, который потом можно добавлять в новые цепочки. Фактически это реализация функций, которые во взрослых языках называются вложенными. В результате относительно сложные программы удаётся создавать, как по "щелчку пальцев" - именно это и означает слово "snap".

Схожим образом Snap! позволяет создавать прочие объекты первого класса - т.е. такие элементы, которые могут быть передаваться в качестве параметров, возвращаться из функций, присваиваться переменным. Например, так можно легко оперировать списками и даже списками списков, работать с объектами (спрайтами) согласно принципам прототипного программирования. Этот стиль программирования используется, например, в JavaScript, позволяя разработчику применять клонированные объекты.

Обучение программированию в Snap! готовит учеников к знакомству с Python, JavaScript, C и прочими популярными языками. Как и в случае Scratch, всё происходит фактически без использования кода, что сильно снижает порог входа в мир разработки и избавляет слушателей курсов от страхов, что они не справятся с непонятным и скучным материалом.

Остались вопросы? Напишите нам, и мы расскажем о содержании курса и прочих интересующих вас деталях.

Одной из целью популяризации 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, то поясним принцип работы с такой системой:

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

Возможно кто-то помнит систему программирования Logo (Черепашка), где подавая команды на перемещение, и рисование — можно было бы рисовать фигуры. С этого примера и начнём.

Первое знакомство

Для первого знакомства с работой в Snap! нарисуем квадрат.

Вверху над блоками отображаются типы блоков (обращаем внимание, что они разного цвета):

Движение — здесь мы управляем движением и местоположением «курсора»
Внешность — здесь мы управляем внешним видом «курсора» — который по сути «спрайт»
Звук — здесь мы можем воспроизводить звуки
Перо — это функции для рисования
Управление — с помощью этих блоков мы можем добавлять логику
Сенсоры — это обратная связь из «мира» где живёт «курсор» — определение касаний и т.п.
Операторы — это математические функции, условия, циклы
Переменные — здесь можно определять переменные

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]»

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

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

Таким образом у нас будет три сигнала (события):
* dot
* dash
* space

Вот что у нас должно получиться:

Начальные параметры

Произведём небольшой «рефакторинг».

выставление курсора в начало
очистка экрана
выставление размера курсора
выставление размера точки рисования.

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

Вот, что у нас получилось:

Кодирование символов

Ну вот, наконец-то мы подошли к самому главному — кодированию символа A. Чтобы при нажатии на «а» — происходило рисование соотв. букве коду Морзе.

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

Вот что получается:

Переменные и перенос строки

В процессе работы я понял, что без переноса строки будет не очень удобно рисовать азбуку морзе. Поэтому сделаем функцию «перенос строки», и назначим её на нажатие клавиши курсора «вниз».

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

Для их реализации я решил ввести две переменные:
* начало текста по оси X (left_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! придумывался для детей от 8 до 16 лет, но используется людьми всех возрастов. Миллионы людей создают проекты Snap! в самых разных условиях — дома, в школах, музеях, библиотеках.

С помощью Snap! вы можете программировать собственные интерактивные истории, игры и анимацию и делиться своими творениями с другими представителями Интернет-сообщества.

Snap! помогает молодёжи научиться мыслить творчески, приводить систематические обоснования и совместно работать. Это базовые навыки жизни в 21 веке.

Snap! – это среда, которая распространяется бесплатно, что также является немаловажным достоинством.

Создать игру с помощью программы Snap!

Чтобы достигнуть цели мне нужно было решить следующие задачи:

Изучить программное обеспечение Snap!
Разработать игру-головоломку «Пятнашки» в технологии Snap!
Разместить игру в открытом доступе в сети в интернет

Практическая значимость проекта

Разработанная игра в формате Snap! может быть использована детьми для развития логического мышления, педагогами - на тематических уроках, а также развивать внимательность и аккуратность

Snap! (ранее известный как BYOB, Build Your Own Blocks) — реализация языка Scratch , созданная в University of California, Berkeley.

Snap! написан на JavaScript и запускается из браузера.

Snap! может работать в следующих браузерах:

— Chrome, версия не ниже 4.3 (это рекомендуемый браузер для работы в среде Snap!)

— Firefox версия не ниже 38;

— Opera версия не ниже 32.

При создании игры в Snup не требуется написания текстов программ на формализованных языках программирования, так как здесь предоставлены все необходимые графические средства для изображения данных и структур управления.

Одним из самых трудных этапов реализации проекта считаю этап работы со скриптами движения и управления спрайтов, а также написания для них блоков, так как хотелось создать полезную и развивающую игру.

Основываясь на вышеперечисленном, я считаю, что создание данной игры в среде Snup разовьет интерес к программированию, а также привлечёт учащихся к изучению современных технологий.

В перспективе я планирую разработать еще много полезных логических говоломок.

Читайте также: